Update VideoThumbnail button

Author: sophschneider

.changeset/nine-bobcats-study.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Update the `VideoThumbnail` play button user experience

polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss

@@ -11,20 +11,17 @@ $progress-bar-height: 6px;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;
+}
 
-  &.WithPlayer {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding-bottom: auto;
-  }
+.ThumbnailContainer {
+  position: relative;
+  height: 100%;
 }
 
 .PlayButton {
   --pc-play-button-focused-state-overlay: rgba(223, 227, 232, 0.3);
+  --timestamp-background-hover: rgba(0, 0, 0, 0.8);
+
   position: absolute;
   top: 0;
   left: 0;
@@ -33,50 +30,42 @@ $progress-bar-height: 6px;
   padding: 0;
   border: none;
   background: transparent;
-  opacity: 0.8;
   transition: opacity var(--p-duration-200) var(--p-ease-in);
   cursor: pointer;
 
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-
   &:focus {
     outline: none;
     box-shadow: inset 2px 0 0 var(--p-focused);
     background-image: linear-gradient(
       var(--pc-play-button-focused-state-overlay),
       var(--pc-play-button-focused-state-overlay)
     );
+
+    .Timestamp {
+      background-color: var(--timestamp-background-hover);
+    }
+  }
+
+  &:hover .Timestamp {
+    background-color: var(--timestamp-background-hover);
   }
 }
 
 .PlayIcon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: $start-button-size;
-  height: $start-button-size;
-  margin-top: -$start-button-size * 0.5;
-  margin-left: -$start-button-size * 0.5;
+  fill: var(--p-icon-on-interactive);
 }
 
 .Timestamp {
   position: absolute;
   bottom: 0;
-  padding: 0 var(--p-space-1);
-  margin-bottom: var(--p-space-2);
-  margin-left: var(--p-space-2);
+  padding: var(--p-space-1) var(--p-space-2) var(--p-space-1) var(--p-space-1);
+  margin-bottom: var(--p-space-4);
+  margin-left: var(--p-space-4);
   border-radius: var(--p-border-radius-1);
-  color: var(--p-text);
-  background-color: var(--p-surface);
-  opacity: 0.8;
+  color: var(--p-text-on-interactive);
+  background-color: rgba(0, 0, 0, 0.6);
   text-align: center;
-}
-
-.withProgress {
-  margin-bottom: var(--p-space-3);
+  transition: background-color var(--p-duration-200) var(--p-ease-in);
 }
 
 .Progress {

polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
+import {PlayMinor} from '@shopify/polaris-icons';
 
 import {useI18n} from '../../utilities/i18n';
-import {classNames} from '../../utilities/css';
 import {
   secondsToTimeComponents,
   secondsToTimestamp,
   secondsToDurationTranslationKey,
 } from '../../utilities/duration';
+import {useMediaQuery} from '../../utilities/media-query';
+import {Icon} from '../Icon';
+import {Stack} from '../Stack';
+import {Text} from '../Text';
 
-import {PlayIcon} from './illustrations';
 import styles from './VideoThumbnail.scss';
 
 export interface VideoThumbnailProps {
@@ -49,6 +52,7 @@ export function VideoThumbnail({
   onBeforeStartPlaying,
 }: VideoThumbnailProps) {
   const i18n = useI18n();
+  const {isNavigationCollapsed} = useMediaQuery();
   let buttonLabel;
 
   if (accessibilityLabel) {
@@ -73,13 +77,19 @@ export function VideoThumbnail({
   }
 
   const timeStampMarkup = videoLength ? (
-    <p
-      className={classNames(
-        styles.Timestamp,
-        showVideoProgress && styles.withProgress,
-      )}
-    >
-      {secondsToTimestamp(videoLength)}
+    <p className={styles.Timestamp}>
+      <Stack alignment="center" spacing="extraTight">
+        <span className={styles.PlayIcon}>
+          <Icon source={PlayMinor} />
+        </span>
+        <Text
+          variant={isNavigationCollapsed ? 'bodyLg' : 'bodyMd'}
+          as="p"
+          fontWeight="semibold"
+        >
+          {secondsToTimestamp(videoLength)}
+        </Text>
+      </Stack>
     </p>
   ) : null;
 
@@ -109,10 +119,11 @@ export function VideoThumbnail({
   }
 
   return (
-    <div
-      className={styles.Thumbnail}
-      style={{backgroundImage: `url(${thumbnailUrl})`}}
-    >
+    <div className={styles.ThumbnailContainer}>
+      <div
+        className={styles.Thumbnail}
+        style={{backgroundImage: `url(${thumbnailUrl})`}}
+      />
       <button
         type="button"
         className={styles.PlayButton}
@@ -122,9 +133,8 @@ export function VideoThumbnail({
         onFocus={onBeforeStartPlaying}
         onTouchStart={onBeforeStartPlaying}
       >
-        <img className={styles.PlayIcon} src={PlayIcon} alt="" />
+        {timeStampMarkup}
       </button>
-      {timeStampMarkup}
       {progressMarkup}
     </div>
   );

polaris-react/src/components/VideoThumbnail/illustrations/index.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
 import {VideoThumbnail} from '../VideoThumbnail';
+import {Text} from '../../Text';
 
 describe('<VideoThumbnail />', () => {
   const spyClick = jest.fn();
@@ -29,8 +30,8 @@ describe('<VideoThumbnail />', () => {
       const videoThumbnail = mountWithApp(
         <VideoThumbnail {...mockProps} videoLength={undefined} />,
       );
-      expect(videoThumbnail).not.toContainReactComponent('p', {
-        className: 'Timestamp',
+      expect(videoThumbnail).not.toContainReactComponent(Text, {
+        fontWeight: 'semibold',
       });
     });
 
@@ -39,8 +40,8 @@ describe('<VideoThumbnail />', () => {
         <VideoThumbnail {...mockProps} videoLength={45} />,
       );
 
-      expect(videoThumbnail).toContainReactComponent('p', {
-        className: 'Timestamp',
+      expect(videoThumbnail).toContainReactComponent(Text, {
+        fontWeight: 'semibold',
         children: '0:45',
       });
     });
@@ -49,8 +50,8 @@ describe('<VideoThumbnail />', () => {
       const videoThumbnail = mountWithApp(
         <VideoThumbnail {...mockProps} videoLength={135} />,
       );
-      expect(videoThumbnail).toContainReactComponent('p', {
-        className: 'Timestamp',
+      expect(videoThumbnail).toContainReactComponent(Text, {
+        fontWeight: 'semibold',
         children: '2:15',
       });
     });
@@ -59,8 +60,8 @@ describe('<VideoThumbnail />', () => {
       const videoThumbnail = mountWithApp(
         <VideoThumbnail {...mockProps} videoLength={3745} />,
       );
-      expect(videoThumbnail).toContainReactComponent('p', {
-        className: 'Timestamp',
+      expect(videoThumbnail).toContainReactComponent(Text, {
+        fontWeight: 'semibold',
         children: '1:02:25',
       });
     });