diff --git a/package.json b/package.json index 46328e6b85..cf583f8285 100755 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "overrides": { "nomnom>underscore": "^1.12.1", "@hashicorp/design-system-components>ember-stargate": "^0.6.0", - "@hashicorp/ember-asciinema-player>asciinema-player": "3.4.0", "micromatch": "^4.0.8", "css-select>nth-check": "^2.0.1", "node-gyp": "^10.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9ddd9d089b..2c16f1fd0e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,7 +7,6 @@ settings: overrides: nomnom>underscore: ^1.12.1 '@hashicorp/design-system-components>ember-stargate': ^0.6.0 - '@hashicorp/ember-asciinema-player>asciinema-player': 3.4.0 micromatch: ^4.0.8 css-select>nth-check: ^2.0.1 node-gyp: ^10.0.0 @@ -770,6 +769,9 @@ importers: '@babel/runtime': specifier: 7.27.6 version: 7.27.6 + asciinema-player: + specifier: 3.4.0 + version: 3.4.0 ember-named-blocks-polyfill: specifier: ^0.2.5 version: 0.2.5 @@ -813,9 +815,6 @@ importers: '@glimmer/tracking': specifier: ^1.1.2 version: 1.1.2 - '@hashicorp/ember-asciinema-player': - specifier: https://github.com/hashicorp/ember-asciinema-player.git#e047a096039cff70234c232efe75dcad74c6358a - version: https://codeload.github.com/hashicorp/ember-asciinema-player/tar.gz/e047a096039cff70234c232efe75dcad74c6358a(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))(webpack@5.99.8(esbuild@0.25.9)) '@warp-drive/build-config': specifier: ^0.0.2 version: 0.0.2(@glint/template@1.5.2) @@ -2484,13 +2483,6 @@ packages: '@hashicorp/design-system-tokens@3.0.0': resolution: {integrity: sha512-ODOtuwDvOdAHQNnhVgqi43enCVWjXTnweYrxHDi3QkVUY1ysLkGrfAySnr4hVwd3UHmzT5HkQQbjN5zgr8l94w==} - '@hashicorp/ember-asciinema-player@https://codeload.github.com/hashicorp/ember-asciinema-player/tar.gz/e047a096039cff70234c232efe75dcad74c6358a': - resolution: {tarball: https://codeload.github.com/hashicorp/ember-asciinema-player/tar.gz/e047a096039cff70234c232efe75dcad74c6358a} - version: 0.0.0 - engines: {node: 14.* || 16.* || >= 18} - peerDependencies: - ember-source: ^3.28.0 || ^4.0.0 - '@hashicorp/flight-icons@3.10.0': resolution: {integrity: sha512-wtufYZ5Ntihmy+vbR0dM+Q7X56xPX/dtpcfVs4nCRgvYZZic5ayqE8tefs2FGtxauH6zuzzVk48s5S6psv9g+g==} @@ -11162,18 +11154,6 @@ snapshots: '@hashicorp/design-system-tokens@3.0.0': {} - '@hashicorp/ember-asciinema-player@https://codeload.github.com/hashicorp/ember-asciinema-player/tar.gz/e047a096039cff70234c232efe75dcad74c6358a(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))(webpack@5.99.8(esbuild@0.25.9))': - dependencies: - asciinema-player: 3.4.0 - ember-auto-import: 2.10.0(@glint/template@1.5.2)(webpack@5.99.8(esbuild@0.25.9)) - ember-cli-babel: 7.26.11 - ember-cli-htmlbars: 6.3.0 - ember-source: 5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)) - transitivePeerDependencies: - - '@glint/template' - - supports-color - - webpack - '@hashicorp/flight-icons@3.10.0': {} '@hashicorp/flight-icons@3.14.0': {} diff --git a/ui/admin/app/components/session-recording/player/asciinema-player.hbs b/ui/admin/app/components/session-recording/player/asciinema-player.hbs new file mode 100644 index 0000000000..9977d86f14 --- /dev/null +++ b/ui/admin/app/components/session-recording/player/asciinema-player.hbs @@ -0,0 +1,6 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: MPL-2.0 +}} + +
\ No newline at end of file diff --git a/ui/admin/app/components/session-recording/player/asciinema-player.js b/ui/admin/app/components/session-recording/player/asciinema-player.js new file mode 100644 index 0000000000..4b9bfcffd2 --- /dev/null +++ b/ui/admin/app/components/session-recording/player/asciinema-player.js @@ -0,0 +1,72 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import * as AsciinemaPlayer from 'asciinema-player'; +import { modifier } from 'ember-modifier'; + +export default class SessionRecordingPlayerAsciinemaPlayerComponent extends Component { + // =properties + + /** + * @type {?AsciinemaPlayer} + */ + player = null; + + /** + * Options of the underlying AsciinemaPlayer supported by this component, + * which may be passed as named arguments to the player. + * @type {string[]} + * @see https://github.com/asciinema/asciinema-player#options + */ + supportedOptions = new Array( + 'autoPlay', + 'loop', + 'startAt', + 'speed', + 'idleTimeLimit', + 'theme', + 'poster', + 'fit', + 'controls', + 'markers', + 'pauseOnMarkers', + ); + + /** + * An object of options where each possible key from `supportOptions` is + * included if and only if its associated value was passed to the component + * as an argument. + * + * E.g. `@autoPlay={{true}} @fit='both'` results in + * the options object `{autoPlay: true, fit: 'both'}`. + * @type {object} + * @see https://github.com/asciinema/asciinema-player#options + */ + get options() { + return this.supportedOptions.reduce((obj, key) => { + return this.args?.[key] !== undefined + ? { ...obj, [key]: this.args[key] } + : obj; + }, {}); + } + + /** + * Creates an AsciinemaPlayer within the passed `containerElement`. + */ + initializePlayer = modifier((containerElement, _, { data }) => { + if (!data) return; + this.player = AsciinemaPlayer.create( + { data }, + containerElement, + this.options, + ); + + return () => { + this.player?.dispose(); + this.player = null; + }; + }); +} diff --git a/ui/admin/app/components/session-recording/player/index.hbs b/ui/admin/app/components/session-recording/player/index.hbs index 61f98f5170..8ed27df13d 100644 --- a/ui/admin/app/components/session-recording/player/index.hbs +++ b/ui/admin/app/components/session-recording/player/index.hbs @@ -17,7 +17,10 @@ {{yield}} {{else}}
- +
{{/if}} \ No newline at end of file diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index b156b257db..88f4ebbf8a 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -9,7 +9,7 @@ @use 'rose'; @use 'notify'; -@use '@hashicorp/ember-asciinema-player'; +@use 'asciinema-player/dist/bundle/asciinema-player.css'; @use 'ember-basic-dropdown'; @use 'ember-power-select'; diff --git a/ui/admin/package.json b/ui/admin/package.json index 12cf34b858..770f3e3e5d 100644 --- a/ui/admin/package.json +++ b/ui/admin/package.json @@ -39,6 +39,7 @@ }, "dependencies": { "@babel/runtime": "7.27.6", + "asciinema-player": "3.4.0", "ember-named-blocks-polyfill": "^0.2.5", "lodash": "^4.17.21", "uuid": "^11.0.3" @@ -55,7 +56,6 @@ "@faker-js/faker": "^8.0.2", "@glimmer/component": "^2.0.0", "@glimmer/tracking": "^1.1.2", - "@hashicorp/ember-asciinema-player": "https://github.com/hashicorp/ember-asciinema-player.git#e047a096039cff70234c232efe75dcad74c6358a", "@warp-drive/build-config": "^0.0.2", "broccoli-asset-rev": "^3.0.0", "concurrently": "^9.1.0", diff --git a/ui/admin/tests/integration/components/session-recording/player/asciinema-player-test.js b/ui/admin/tests/integration/components/session-recording/player/asciinema-player-test.js new file mode 100644 index 0000000000..aa66d00040 --- /dev/null +++ b/ui/admin/tests/integration/components/session-recording/player/asciinema-player-test.js @@ -0,0 +1,36 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { module, test } from 'qunit'; +import { render, waitUntil } from '@ember/test-helpers'; +import { setupRenderingTest } from 'admin/tests/helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module( + 'Integration | Component | session-recording/player/asciinema-player', + function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + assert.expect(1); + + const asciicast = await fetch('/session.cast'); + const asciicastContent = await asciicast.text(); + this.set('data', asciicastContent); + + await render( + hbs``, + ); + // AsciinemaPlayer does not come with a "ready" event, and its + // initialization is async. Therefore tests must `waitUntil` the expected + // DOM state is reached. + await waitUntil(() => + assert + .dom('.ap-player') + .hasAnyText('ember-asciinema-player git:(main*)'), + ); + }); + }, +);