Automatically end preview video on mobile

This commit is contained in:
Nicolas Mowen 2024-02-29 09:06:36 -07:00
parent 838e9b34e3
commit 3ec2745eeb

View File

@ -124,6 +124,7 @@ export default function PreviewThumbnailPlayer({
relevantPreview={relevantPreview} relevantPreview={relevantPreview}
setReviewed={handleSetReviewed} setReviewed={handleSetReviewed}
setIgnoreClick={setIgnoreClick} setIgnoreClick={setIgnoreClick}
isPlayingBack={setPlayback}
/> />
</div> </div>
)} )}
@ -188,12 +189,14 @@ type PreviewContentProps = {
relevantPreview: Preview | undefined; relevantPreview: Preview | undefined;
setReviewed?: () => void; setReviewed?: () => void;
setIgnoreClick: (ignore: boolean) => void; setIgnoreClick: (ignore: boolean) => void;
isPlayingBack: (ended: boolean) => void;
}; };
function PreviewContent({ function PreviewContent({
review, review,
relevantPreview, relevantPreview,
setReviewed, setReviewed,
setIgnoreClick, setIgnoreClick,
isPlayingBack,
}: PreviewContentProps) { }: PreviewContentProps) {
// preview // preview
@ -204,6 +207,7 @@ function PreviewContent({
relevantPreview={relevantPreview} relevantPreview={relevantPreview}
setReviewed={setReviewed} setReviewed={setReviewed}
setIgnoreClick={setIgnoreClick} setIgnoreClick={setIgnoreClick}
isPlayingBack={isPlayingBack}
/> />
); );
} else if (isCurrentHour(review.start_time)) { } else if (isCurrentHour(review.start_time)) {
@ -212,6 +216,7 @@ function PreviewContent({
review={review} review={review}
setReviewed={setReviewed} setReviewed={setReviewed}
setIgnoreClick={setIgnoreClick} setIgnoreClick={setIgnoreClick}
isPlayingBack={isPlayingBack}
/> />
); );
} }
@ -223,12 +228,14 @@ type VideoPreviewProps = {
relevantPreview: Preview; relevantPreview: Preview;
setReviewed?: () => void; setReviewed?: () => void;
setIgnoreClick: (ignore: boolean) => void; setIgnoreClick: (ignore: boolean) => void;
isPlayingBack: (ended: boolean) => void;
}; };
function VideoPreview({ function VideoPreview({
review, review,
relevantPreview, relevantPreview,
setReviewed, setReviewed,
setIgnoreClick, setIgnoreClick,
isPlayingBack,
}: VideoPreviewProps) { }: VideoPreviewProps) {
const playerRef = useRef<HTMLVideoElement | null>(null); const playerRef = useRef<HTMLVideoElement | null>(null);
@ -301,7 +308,12 @@ function VideoPreview({
setLastPercent(playerPercent); setLastPercent(playerPercent);
if (playerPercent > 100) { if (playerPercent > 100) {
if (isMobile) {
isPlayingBack(false);
} else {
playerRef.current?.pause(); playerRef.current?.pause();
}
setManualPlayback(false); setManualPlayback(false);
setProgress(100.0); setProgress(100.0);
} else { } else {
@ -411,11 +423,13 @@ type InProgressPreviewProps = {
review: ReviewSegment; review: ReviewSegment;
setReviewed?: (reviewId: string) => void; setReviewed?: (reviewId: string) => void;
setIgnoreClick: (ignore: boolean) => void; setIgnoreClick: (ignore: boolean) => void;
isPlayingBack: (ended: boolean) => void;
}; };
function InProgressPreview({ function InProgressPreview({
review, review,
setReviewed, setReviewed,
setIgnoreClick, setIgnoreClick,
isPlayingBack,
}: InProgressPreviewProps) { }: InProgressPreviewProps) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data: previewFrames } = useSWR<string[]>( const { data: previewFrames } = useSWR<string[]>(
@ -436,6 +450,10 @@ function InProgressPreview({
} }
if (key == previewFrames.length - 1) { if (key == previewFrames.length - 1) {
if (isMobile) {
isPlayingBack(false);
}
return; return;
} }