Video: Support RTL layout in scrubber (#3183)

pinterest · Sep 5, 2023 · 9642886 · 9642886
1 parent 3647be0
commit 9642886
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 106 deletions.
diff --git a/docs/docs-components/SandpackExample.js b/docs/docs-components/SandpackExample.js
@@ -243,11 +243,14 @@ export default function SandpackExample({
           import { Box, ColorSchemeProvider } from 'gestalt';
           import App from "./App";
 
+          const html = document.querySelector('html');
+          html.setAttribute('dir', '${exampleTextDirection}');
+
           const root = createRoot(document.getElementById("root"));
           root.render(
             <StrictMode>
               <ColorSchemeProvider colorScheme="${exampleColorScheme}" fullDimensions>
-                <Box color="default" height="100%" width="100%" dir="${exampleTextDirection}">
+                <Box color="default" height="100%" width="100%">
                   <App />
                 </Box>
               </ColorSchemeProvider>

diff --git a/docs/examples/video/autoplayAndErrorDetectionExample.js b/docs/examples/video/autoplayAndErrorDetectionExample.js
@@ -4,6 +4,7 @@ import { Box, Video } from 'gestalt';
 
 export default function Example(): Node {
   const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
 
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
@@ -17,7 +18,9 @@ export default function Example(): Node {
           onControlsPlay={() => setPlaying(true)}
           onControlsPause={() => setPlaying(false)}
           onEnded={() => setPlaying(false)}
+          onVolumeChange={(e) => setVolume(e.volume)}
           playing={playing}
+          volume={volume}
           loop
           src="https://v.pinimg.com/videos/mc/expMp4/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4_t1.mp4"
         />

diff --git a/docs/examples/video/captionsExample.js b/docs/examples/video/captionsExample.js
@@ -4,6 +4,7 @@ import { Box, Video } from 'gestalt';
 
 export default function Example(): Node {
   const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
 
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
@@ -12,12 +13,14 @@ export default function Example(): Node {
           aspectRatio={1024 / 435}
           captions="https://iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt"
           controls
-          onPlayError={({ error }) => error && setPlaying(false)}
+          playing={playing}
+          volume={volume}
           onPlay={() => setPlaying(true)}
+          onPlayError={({ error }) => error && setPlaying(false)}
           onControlsPlay={() => setPlaying(true)}
           onControlsPause={() => setPlaying(false)}
           onEnded={() => setPlaying(false)}
-          playing={playing}
+          onVolumeChange={(e) => setVolume(e.volume)}
           loop
           src="https://iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4"
         />

diff --git a/docs/examples/video/controlsExample.js b/docs/examples/video/controlsExample.js
@@ -4,6 +4,8 @@ import { Box, Flex, IconButton, Label, Switch, Text, Video } from 'gestalt';
 
 export default function Example(): Node {
   const [showControls, setShowControls] = useState(false);
+  const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
 
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
@@ -24,8 +26,14 @@ export default function Example(): Node {
           <Video
             aspectRatio={540 / 960}
             controls={showControls}
-            onPlayError={() => {}}
-            onPlay={() => {}}
+            playing={playing}
+            volume={volume}
+            onPlay={() => setPlaying(true)}
+            onPlayError={({ error }) => error && setPlaying(false)}
+            onControlsPlay={() => setPlaying(true)}
+            onControlsPause={() => setPlaying(false)}
+            onEnded={() => setPlaying(false)}
+            onVolumeChange={(e) => setVolume(e.volume)}
             poster="https://i.pinimg.com/videos/thumbnails/originals/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4.0000000.jpg"
             src="https://v.pinimg.com/videos/mc/expMp4/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4_t1.mp4"
           >

diff --git a/docs/examples/video/mainExample.js b/docs/examples/video/mainExample.js
@@ -1,16 +1,25 @@
 // @flow strict
-import { type Node } from 'react';
+import { type Node, useState } from 'react';
 import { Box, Video } from 'gestalt';
 
 export default function Example(): Node {
+  const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
+
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
       <Box width={300}>
         <Video
           aspectRatio={540 / 960}
           controls
-          onPlayError={() => {}}
-          onPlay={() => {}}
+          playing={playing}
+          volume={volume}
+          onPlay={() => setPlaying(true)}
+          onPlayError={({ error }) => error && setPlaying(false)}
+          onControlsPlay={() => setPlaying(true)}
+          onControlsPause={() => setPlaying(false)}
+          onEnded={() => setPlaying(false)}
+          onVolumeChange={(e) => setVolume(e.volume)}
           src="https://v.pinimg.com/videos/mc/expMp4/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4_t1.mp4"
         />
       </Box>

diff --git a/docs/examples/video/multipleSourcesExample.js b/docs/examples/video/multipleSourcesExample.js
@@ -4,6 +4,7 @@ import { Box, Video } from 'gestalt';
 
 export default function Example(): Node {
   const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
 
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
@@ -12,9 +13,13 @@ export default function Example(): Node {
           aspectRatio={426 / 240}
           controls
           playing={playing}
-          onPlay={() => {}}
-          onPlayError={() => {}}
+          volume={volume}
+          onPlay={() => setPlaying(true)}
+          onPlayError={({ error }) => error && setPlaying(false)}
           onControlsPlay={() => setPlaying(true)}
+          onControlsPause={() => setPlaying(false)}
+          onEnded={() => setPlaying(false)}
+          onVolumeChange={(e) => setVolume(e.volume)}
           src={[
             {
               type: 'video/mp4',

diff --git a/docs/examples/video/updatesExample.js b/docs/examples/video/updatesExample.js
@@ -46,8 +46,8 @@ export default function Example(): Node {
             onControlsPlay={() => setPlaying(true)}
             onControlsPause={() => setPlaying(false)}
             onVolumeChange={(e) => setVolume(e.volume)}
-            onPlay={() => {}}
-            onPlayError={() => {}}
+            onPlay={() => setPlaying(true)}
+            onPlayError={({ error }) => error && setPlaying(false)}
             playbackRate={playbackRate}
             playing={playing}
             src={src}

diff --git a/docs/examples/video/withChildrenExample.js b/docs/examples/video/withChildrenExample.js
@@ -1,17 +1,26 @@
 // @flow strict
-import { type Node } from 'react';
+import { type Node, useState } from 'react';
 import { Box, IconButton, Video } from 'gestalt';
 
 export default function Example(): Node {
+  const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
+
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
       <Box width={300}>
         <Video
           aspectRatio={540 / 960}
           controls
           src="https://v.pinimg.com/videos/mc/expMp4/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4_t1.mp4"
-          onPlay={() => {}}
-          onPlayError={() => {}}
+          playing={playing}
+          volume={volume}
+          onPlay={() => setPlaying(true)}
+          onPlayError={({ error }) => error && setPlaying(false)}
+          onControlsPlay={() => setPlaying(true)}
+          onControlsPause={() => setPlaying(false)}
+          onEnded={() => setPlaying(false)}
+          onVolumeChange={(e) => setVolume(e.volume)}
         >
           <Box
             width="100%"

diff --git a/packages/gestalt/src/Video/Playhead.js b/packages/gestalt/src/Video/Playhead.js
@@ -30,9 +30,16 @@ export default class VideoPlayhead extends PureComponent<Props, State> {
   seek: (clientX: number) => void = (clientX) => {
     if (this.playhead) {
       const { duration, seek } = this.props;
-      const { left, width } = this.playhead.getBoundingClientRect();
-      const percent = Math.max(0, Math.min((clientX - left) / width, 1));
+      const { left, right, width } = this.playhead.getBoundingClientRect();
+
+      // As a convention, text direction is defined in `dir` attribute of `html` tag of the document.
+      // The following check is done under the assuption of that convention.
+      const isRTL = document.querySelector('html')?.getAttribute('dir') === 'rtl';
+      const difference = isRTL ? right - clientX : clientX - left;
+
+      const percent = Math.max(0, Math.min(difference / width, 1));
       const newTime = percent * duration;
+
       seek(newTime);
     }
   };
@@ -75,8 +82,9 @@ export default class VideoPlayhead extends PureComponent<Props, State> {
   render(): Node {
     const { accessibilityProgressBarLabel, currentTime, duration } = this.props;
     const width = `${Math.floor((currentTime * 10000) / duration) / 100}%`;
+
     return (
-      <Box position="relative" display="flex" flex="grow" alignItems="center" height={16}>
+      <Box position="relative" height={16}>
         <div
           aria-label={accessibilityProgressBarLabel}
           aria-valuemax={duration}
@@ -93,15 +101,16 @@ export default class VideoPlayhead extends PureComponent<Props, State> {
           role="progressbar"
           tabIndex="-1"
         >
-          <Box left right position="absolute" color="secondary" rounding={2} height={4}>
-            <Box color="light" rounding={2} height="100%" width={width} />
-          </Box>
           <Box
+            left
+            right
             position="absolute"
             rounding={2}
             height={4}
-            dangerouslySetInlineStyle={{ __style: { left: width } }}
+            color="secondary"
+            display="flex"
           >
+            <Box color="light" rounding={2} height="100%" width={width} />
             <Box
               rounding="circle"
               width={16}