administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-07 11:45:24 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Play when item is initially visible

Browse Source
This commit is contained in:
Nick Mowen 2023-12-30 08:58:37 -07:00
parent d6479e2dc1
commit c294464978
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -45,10 +45,16 @@ export default function PreviewThumbnailPlayer({
}, []); }, []);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [isInitiallyVisible, setIsInitiallyVisible] = useState(false);
const onPlayback = useCallback( const onPlayback = useCallback(
(isHovered: Boolean) => { (isHovered: Boolean) => {
if (!relevantPreview || !playerRef.current) { if (!relevantPreview) {
return;
}
if (!playerRef.current) {
setIsInitiallyVisible(true);
return; return;
} }
@ -121,7 +127,8 @@ export default function PreviewThumbnailPlayer({
<PreviewContent <PreviewContent
playerRef={playerRef} playerRef={playerRef}
relevantPreview={relevantPreview} relevantPreview={relevantPreview}
visible={visible} isVisible={visible}
isInitiallyVisible={isInitiallyVisible}
startTs={startTs} startTs={startTs}
camera={camera} camera={camera}
config={config} config={config}
@ -140,7 +147,8 @@ type PreviewContentProps = {
camera: string; camera: string;
relevantPreview: Preview | undefined; relevantPreview: Preview | undefined;
eventId: string; eventId: string;
visible: boolean; isVisible: boolean;
isInitiallyVisible: boolean;
startTs: number; startTs: number;
isMobile: boolean; isMobile: boolean;
isSafari: boolean; isSafari: boolean;
@ -152,7 +160,8 @@ function PreviewContent({
camera, camera,
relevantPreview, relevantPreview,
eventId, eventId,
visible, isVisible,
isInitiallyVisible,
startTs, startTs,
isMobile, isMobile,
isSafari, isSafari,
@ -184,7 +193,7 @@ function PreviewContent({
}); });
}, [playerRef, touchStart]); }, [playerRef, touchStart]);
if (relevantPreview && !visible) { if (relevantPreview && !isVisible) {
return <div />; return <div />;
} else if (!relevantPreview) { } else if (!relevantPreview) {
if (isCurrentHour(startTs)) { if (isCurrentHour(startTs)) {
@ -223,7 +232,11 @@ function PreviewContent({
seekOptions={{}} seekOptions={{}}
onReady={(player) => { onReady={(player) => {
playerRef.current = player; playerRef.current = player;
if (!isInitiallyVisible) {
player.pause(); // autoplay + pause is required for iOS player.pause(); // autoplay + pause is required for iOS
}
player.playbackRate(isSafari ? 2 : 8); player.playbackRate(isSafari ? 2 : 8);
player.currentTime(startTs - relevantPreview.start); player.currentTime(startTs - relevantPreview.start);
if (isMobile && onClick) { if (isMobile && onClick) {