Merge pull request #1132 from LukasKalbertodt/fix-ios

Fix review step on iOS
elan-ev · Oct 5, 2023 · 7c70fb7 · 7c70fb7
2 parents b48c0c3 + af44c8a
commit 7c70fb7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/steps/review/index.tsx b/src/steps/review/index.tsx
@@ -24,6 +24,7 @@ export const Review: React.FC<StepProps> = ({ goToFirstStep, goToNextStep }) =>
   const previewController = useRef<PreviewHandle>(null);
   const [currentTime, setCurrentTime] = useState(0);
   const [previewReady, setPreviewReady] = useState(false);
+  const [_isPaused, setIsPaused] = useState(true);
 
   const expectedRecordings = match(videoChoice, {
     "both": () => 2,
@@ -81,6 +82,7 @@ export const Review: React.FC<StepProps> = ({ goToFirstStep, goToNextStep }) =>
             onTimeUpdate={event => {
               setCurrentTime(event.currentTarget.currentTime);
             }}
+            onPausePlay={paused => setIsPaused(paused)}
             onReady={() => setPreviewReady(true)}
           />
 

diff --git a/src/steps/review/preview.tsx b/src/steps/review/preview.tsx
@@ -13,6 +13,7 @@ import { SHORTCUTS, useShortcut } from "../../shortcuts";
 
 type PreviewProps = {
   onTimeUpdate: (event: SyntheticEvent<HTMLVideoElement, Event>) => void;
+  onPausePlay: (paused: boolean) => void;
   onReady: () => void;
 };
 
@@ -25,7 +26,10 @@ export type PreviewHandle = {
   pause(): void;
 };
 
-export const Preview = forwardRef<PreviewHandle, PreviewProps>(({ onTimeUpdate, onReady }, ref) => {
+export const Preview = forwardRef<PreviewHandle, PreviewProps>((
+  { onTimeUpdate, onReady, onPausePlay },
+  ref,
+) => {
   const { recordings, start, end } = useStudioState();
   const { t } = useTranslation();
   const { isHighContrast } = useColorScheme();
@@ -86,9 +90,11 @@ export const Preview = forwardRef<PreviewHandle, PreviewProps>(({ onTimeUpdate,
     },
     play() {
       allVideos.forEach(r => r.current?.play());
+      onPausePlay(false);
     },
     pause() {
       allVideos.forEach(r => r.current?.pause());
+      onPausePlay(true);
     },
   }));
 
@@ -101,7 +107,7 @@ export const Preview = forwardRef<PreviewHandle, PreviewProps>(({ onTimeUpdate,
     useRef<DurationCalcState>(),
     useRef<DurationCalcState>(),
   ];
-  const [durationsCalculated, setDurationsCalculated] = useState<boolean>();
+  const [durationsCalculated, setDurationsCalculated] = useState<boolean>(false);
 
   // Some logic to decide whether we currently are in a part of the video that
   // will be removed. The state will be updated in `onTimeUpdate` below and is
@@ -175,6 +181,7 @@ export const Preview = forwardRef<PreviewHandle, PreviewProps>(({ onTimeUpdate,
   useShortcut(SHORTCUTS.review.forwardsFrame, () => jumpInTime(1 / fps));
   useShortcut(SHORTCUTS.review.backwardsFrame, () => jumpInTime(-1 / fps));
 
+
   const children = recordings.map((recording, index) => ({
     dimensions: () => recording.dimensions,
     body: (
@@ -247,6 +254,15 @@ export const Preview = forwardRef<PreviewHandle, PreviewProps>(({ onTimeUpdate,
               });
             }
           }}
+
+          // For iOS: without the autoplay attribute, the `loadeddata` event is
+          // never fired for some reason. Adding this does not seem to actually
+          // cause Safari to autoplay.
+          autoPlay={/iPad|iPhone|iPod/.test(navigator.userAgent)}
+
+          // Also for iOS: without this, the video maximizes automatically.
+          playsInline
+
           preload="auto"
           tabIndex={-1}
           css={{