Migrate asciicinema component from hashicorp/ember-asciinema-player repo

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",

ui/admin/app/components/session-recording/player/asciinema-player.hbs

@@ -0,0 +1,6 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div ...attributes {{this.initializePlayer data=@data}}></div>

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;
+    };
+  });
+}

ui/admin/app/components/session-recording/player/index.hbs

@@ -17,7 +17,10 @@
     {{yield}}
   {{else}}
     <div class='session-recording-player-theme'>
-      <Heap::Player @data={{@asciicast}} @poster='npt:1:30' />
+      <SessionRecording::Player::AsciinemaPlayer
+        @data={{@asciicast}}
+        @poster='npt:1:30'
+      />
     </div>
   {{/if}}
 </div>

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';

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",

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`<SessionRecording::Player::AsciinemaPlayer @data={{this.data}} @poster='npt:1:30' />`,
+      );
+      // 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*)'),
+      );
+    });
+  },
+);