From 0aef13446bfe5de2fa5746a4b0d625506b9aa0fe Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Fri, 26 May 2023 13:05:34 -0500
Subject: [PATCH] Update ember player (#290)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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                  | 27 +++++++++----------
 ui/admin/package.json                         |  2 +-
 .../session-recording/player-test.js          |  2 +-
 yarn.lock                                     | 14 +++++-----
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 673f69842..63db717cf 100644
--- a/ui/admin/app/styles/app.scss
+++ b/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);
         }
       }
diff --git a/ui/admin/package.json b/ui/admin/package.json
index 37f0d47ff..5700ea196 100644
--- a/ui/admin/package.json
+++ b/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",
diff --git a/ui/admin/tests/integration/components/session-recording/player-test.js b/ui/admin/tests/integration/components/session-recording/player-test.js
index 9f092b1b3..d299706a7 100644
--- a/ui/admin/tests/integration/components/session-recording/player-test.js
+++ b/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('--:----:--');
   });
 });
diff --git a/yarn.lock b/yarn.lock
index 6d1fd8f20..e4050a99e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4713,11 +4713,11 @@
   resolved "https://registry.yarnpkg.com/@hashicorp/design-system-tokens/-/design-system-tokens-1.4.1.tgz#461ee2ff7ccc46eb83098c30c20c6bba33e49cd0"
   integrity sha512-e5bolI2Ch1+AW2/tQrkHG6QPx4g1oONum36CfhBmX4gDChpAVoBbTG2BT+XnlBJOM5vk1uuL39ysM5QSn/BZYQ==
 
-"@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":
   version "0.0.0"
-  resolved "https://github.com/hashicorp/ember-asciinema-player.git#144eeec053fc5ccf1f0afc244b0afed4b72835b4"
+  resolved "https://github.com/hashicorp/ember-asciinema-player.git#e047a096039cff70234c232efe75dcad74c6358a"
   dependencies:
-    asciinema-player "^3.0.1"
+    asciinema-player "^3.4.0"
     ember-auto-import "^2.5.0"
     ember-cli-babel "^7.26.11"
     ember-cli-htmlbars "^6.1.1"
@@ -8516,10 +8516,10 @@ asar@^3.1.0:
   optionalDependencies:
     "@types/glob" "^7.1.1"
 
-asciinema-player@^3.0.1:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/asciinema-player/-/asciinema-player-3.3.0.tgz#45616fa8dc3950c2be12b51d0a365ea2b9a845c2"
-  integrity sha512-4uyCGe83+5gZ06jgIGyV4vl0TS3egBgW0NXyCpDuDDvmzDGHEG8OICChrTecmTvajgLyq8YQet9nI7SYkVt8vQ==
+asciinema-player@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/asciinema-player/-/asciinema-player-3.4.0.tgz#8664e0b305ac03acd94d0ab1ff0be0e8ca4dcff8"
+  integrity sha512-dX6jt5S3K6daItsVWzyY9mRDK+ivC2QgqCxFkdSiNslo0vY/ZqA4upcTzqIKZqBtxppovOZk44ltg9VnHG9QVg==
   dependencies:
     "@babel/runtime" "^7.21.0"
     solid-js "^1.3.0"