fix: polish new time preview w/ shifting arrow (#884)

with the new MC v3 the timerange preview required some small UI updates for the shifting arrow. also adds some polish discussed in our doc Mux player polishing.
muxinc · Mar 15, 2024 · a3662c7 · a3662c7
1 parent 0ee88d8
commit a3662c7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 35 deletions.
diff --git a/packages/mux-player/package.json b/packages/mux-player/package.json
@@ -96,7 +96,7 @@
   "dependencies": {
     "@mux/mux-video": "0.17.3",
     "@mux/playback-core": "0.22.2",
-    "media-chrome": "~2.2.5"
+    "media-chrome": "~3.0.2"
   },
   "devDependencies": {
     "@mux/esbuilder": "0.1.0",

diff --git a/packages/mux-player/src/themes/classic/classic.html b/packages/mux-player/src/themes/classic/classic.html
@@ -17,7 +17,6 @@
       --media-preview-thumbnail-border: 0;
       --media-preview-thumbnail-border-radius: 2px 2px 0 0;
       --media-preview-time-border-radius: 0 0 2px 2px;
-      --media-preview-time-margin: 0 0 8px;
       --media-preview-time-text-shadow: none;
       --media-listbox-border-radius: 2px;
       --media-listbox-transform-in: translateY(-8px) scale(1);
@@ -32,7 +31,6 @@
 
     :host([audio]) {
       --media-preview-time-border-radius: 3px;
-      --media-preview-time-margin: 0 0 5px;
       --media-preview-time-text-shadow: none;
     }
 

diff --git a/packages/mux-player/src/themes/gerwig/gerwig.html b/packages/mux-player/src/themes/gerwig/gerwig.html
@@ -26,10 +26,6 @@
       --media-control-background: var(--_secondary-color);
       --media-control-hover-background: var(--_accent-color);
       --media-time-buffered-color: rgba(255, 255, 255, 0.4);
-      --media-preview-thumbnail-border: 0;
-      --media-preview-thumbnail-border-radius: 2px 2px 0 0;
-      --media-preview-time-border-radius: 0 0 2px 2px;
-      --media-preview-time-margin: 0 0 8px;
       --media-preview-time-text-shadow: none;
       --media-control-height: 14px;
       --media-control-padding: 6px;
@@ -42,8 +38,6 @@
 
     :host([audio]) {
       --_secondary-color: var(--media-secondary-color, black);
-      --media-preview-time-border-radius: 3px;
-      --media-preview-time-margin: 0 0 5px;
       --media-preview-time-text-shadow: none;
     }
 
@@ -82,6 +76,8 @@
     }
 
     media-time-range {
+      --media-box-padding-left: 6px;
+      --media-box-padding-right: 6px;
       --media-range-bar-color: var(--_accent-color);
       --media-time-range-buffered-color: var(--_primary-color);
       --media-range-track-color: transparent;
@@ -98,41 +94,27 @@
       --media-range-thumb-transform: scale(0);
       --media-range-thumb-transition: transform 0.3s;
       --media-range-thumb-opacity: 1;
-      --media-preview-thumbnail-background: var(--_primary-color);
+      --media-preview-background: var(--_primary-color);
+      --media-box-arrow-background: var(--_primary-color);
       --media-preview-thumbnail-border: 5px solid var(--_primary-color);
-      --media-preview-thumbnail-border-radius: 5px 5px 0 0;
-      --media-preview-time-background: var(--_primary-color);
-      --media-preview-time-border-radius: 0 0 5px 5px;
-      --media-preview-time-margin: 0 0 10px;
-      --media-preview-time-padding: 2px 0 6px;
+      --media-preview-border-radius: 5px;
       --media-text-color: var(--_text-color);
-      --media-preview-thumbnail-max-width: 150px;
-      --media-range-track-pointer-border-right: 2px solid #000;
       --media-control-hover-background: transparent;
       color: var(--_accent-color);
       padding: 0 6px;
     }
 
     :host([audio]) media-time-range {
-      --media-preview-time-border-radius: 5px;
-      --media-preview-time-padding: 5px;
+      --media-preview-time-padding: 1.5px 6px;
+      --media-preview-box-margin: 0 0 -5px;
     }
 
     media-time-range:hover {
       --media-range-thumb-transform: scale(1);
     }
 
-    media-time-range::part(preview-box)::after {
-      position: absolute;
-      content: '';
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 10px 8.5px 0 8.5px;
-      border-color: var(--_primary-color) transparent transparent transparent;
-      top: 100%;
-      left: 50%;
-      transform: translate(-50%, -10px);
+    media-preview-thumbnail {
+      border-bottom-width: 0;
     }
 
     [part~='listbox'] {
@@ -787,7 +769,12 @@
   </template>
 
   <template partial="TimeRange">
-    <media-time-range part="bottom time range" disabled="{{disabled}}" aria-disabled="{{disabled}}"></media-time-range>
+    <media-time-range part="bottom time range" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <media-preview-thumbnail slot="preview"></media-preview-thumbnail>
+      <media-preview-chapter-display slot="preview"></media-preview-chapter-display>
+      <media-preview-time-display slot="preview"></media-preview-time-display>
+      <div slot="preview" part="arrow"></div>
+    </media-time-range>
   </template>
 
   <template partial="AudioTrackSelect">

diff --git a/yarn.lock b/yarn.lock
@@ -10541,10 +10541,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-media-chrome@~2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-2.2.5.tgz#4750716d6195612fb38ca78f7e38537ac5fc42e7"
-  integrity sha512-59peAYFlL9ZlFVkKJmIgIDNMkQr4nauYTwIQhLg3khmGfO6/25VNEI8Yn0aUMLb5IFB2gzjcPmfu1ktfOhQ8Ag==
+media-chrome@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-3.0.2.tgz#ea67af1d305ac80a850bfcac6d4140e2b23e7150"
+  integrity sha512-PdTKNmQ3JDTfd6MQl53qKANx5iSgu3PMNVWDHd2yzjlnvdJwUUuVr1z0vdutig2vYP0DGhC/QRzotfb6m0FfCw==
 
 media-tracks@~0.3.0:
   version "0.3.0"