Update ember player (#290)

* chore: 🤖 update ember-asciinema-player

* refactor: 💡 update player styles after player update

* test: 💍 update class selector for player test

* refactor: 💡 remove custom border-width from player styles

ui/admin/app/styles/app.scss

@@ -805,46 +805,45 @@
       background-color: var(--player-background-color);
     }
 
-    .asciinema-terminal {
+    pre.ap-terminal {
       background-color: var(--player-background-color);
       border-color: var(--player-background-color);
-      border-width: 1rem;
     }
 
-    .asciinema-player {
+    .ap-player {
       border-radius: 0.75rem;
 
       // hides large play icon overlay
-      .start-prompt {
+      .ap-overlay {
         display: none;
       }
     }
 
-    .asciinema-player-wrapper {
-      &.hud .control-bar {
+    .ap-wrapper {
+      &.ap-hud .ap-control-bar {
         bottom: 0;
       }
 
-      .control-bar {
+      .ap-control-bar {
         bottom: -3.625rem;
         background: var(--player-background-color);
         border-top: var(--player-divider) 0.125rem solid;
         height: 3.625rem;
 
-        .playback-button {
+        .ap-playback-button {
           background: var(--player-play-button);
           border: var(--player-play-button-border) 0.063rem solid;
           border-radius: 0.313rem;
           margin: 0.75rem;
           padding: 0.625rem 1rem;
 
-          .icon path {
+          .ap-icon path {
             fill: var(--player-white);
           }
         }
       }
 
-      .timer {
+      .ap-timer {
         font-family: var(--token-typography-body-base-font-family);
         font-size: var(--token-typography-body-base-font-size);
         line-height: var(--token-typography-body-base-line-height);
@@ -853,10 +852,10 @@
         top: 40%;
       }
 
-      .progressbar {
+      .ap-progressbar {
         padding-top: 0.875rem;
 
-        .bar .gutter {
+        .ap-bar .ap-gutter {
           background-color: var(--player-control-bar-buffer);
 
           span {
@@ -865,10 +864,10 @@
         }
       }
 
-      .fullscreen-button {
+      .ap-fullscreen-button {
         padding-top: 1.5rem;
 
-        .icon path {
+        .ap-icon path {
           fill: var(--player-white);
         }
       }

ui/admin/package.json

@@ -52,7 +52,7 @@
     "@faker-js/faker": "^7.3.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@hashicorp/ember-asciinema-player": "https://github.com/hashicorp/ember-asciinema-player.git#144eeec053fc5ccf1f0afc244b0afed4b72835b4",
+    "@hashicorp/ember-asciinema-player": "https://github.com/hashicorp/ember-asciinema-player.git#e047a096039cff70234c232efe75dcad74c6358a",
     "@playwright/test": "^1.30.0",
     "babel-loader": "^8.2.5",
     "broccoli-asset-rev": "^3.0.0",

ui/admin/tests/integration/components/session-recording/player-test.js

@@ -32,6 +32,6 @@ module('Integration | Component | session-recording/player', function (hooks) {
     `);
 
     assert.dom('.session-recording-player-header').hasText('Back to channels');
-    assert.dom('.control-bar .timer').hasText('--:----:--');
+    assert.dom('.ap-control-bar .ap-timer').hasText('--:----:--');
   });
 });