Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix review step on iOS #1132

Merged
merged 2 commits into from
Oct 5, 2023
Merged

Fix review step on iOS #1132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ffa07f2
Fix review step loading forever on iOS
LukasKalbertodt Oct 4, 2023
af44c8a
Fix pause/play button in review step for iOS
LukasKalbertodt Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/steps/review/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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)}
/>

Expand Down
20 changes: 18 additions & 2 deletions src/steps/review/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { SHORTCUTS, useShortcut } from "../../shortcuts";

type PreviewProps = {
onTimeUpdate: (event: SyntheticEvent<HTMLVideoElement, Event>) => void;
onPausePlay: (paused: boolean) => void;
onReady: () => void;
};

Expand All @@ -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();
Expand Down Expand Up @@ -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);
},
}));

Expand All @@ -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
Expand Down Expand Up @@ -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: (
Expand Down Expand Up @@ -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={{
Expand Down