diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx index 521d9c0e2..f27d7a2fb 100644 --- a/web/src/components/player/PreviewThumbnailPlayer.tsx +++ b/web/src/components/player/PreviewThumbnailPlayer.tsx @@ -45,10 +45,16 @@ export default function PreviewThumbnailPlayer({ }, []); const [visible, setVisible] = useState(false); + const [isInitiallyVisible, setIsInitiallyVisible] = useState(false); const onPlayback = useCallback( (isHovered: Boolean) => { - if (!relevantPreview || !playerRef.current) { + if (!relevantPreview) { + return; + } + + if (!playerRef.current) { + setIsInitiallyVisible(true); return; } @@ -121,7 +127,8 @@ export default function PreviewThumbnailPlayer({ ; } else if (!relevantPreview) { if (isCurrentHour(startTs)) { @@ -223,7 +232,11 @@ function PreviewContent({ seekOptions={{}} onReady={(player) => { playerRef.current = player; - player.pause(); // autoplay + pause is required for iOS + + if (!isInitiallyVisible) { + player.pause(); // autoplay + pause is required for iOS + } + player.playbackRate(isSafari ? 2 : 8); player.currentTime(startTs - relevantPreview.start); if (isMobile && onClick) {