Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

fix: height of video is now constant in history viewer

Browse Source
This commit is contained in:
JohnMark Sill 2022-06-02 14:31:20 -05:00 committed by Blake Blackshear
parent 0879d7a2d1
commit fa95a041dd
1 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/components/HistoryViewer/HistoryVideo.tsx
View File

@ -11,7 +11,6 @@ interface OnTimeUpdateEvent {
interface VideoProperties { interface VideoProperties {
posterUrl: string; posterUrl: string;
videoUrl: string; videoUrl: string;
height: number;
} }
interface HistoryVideoProps { interface HistoryVideoProps {
@ -32,21 +31,21 @@ export const HistoryVideo = ({
onPlay, onPlay,
}: HistoryVideoProps) => { }: HistoryVideoProps) => {
const apiHost = useApiHost(); const apiHost = useApiHost();
const videoRef = useRef<HTMLVideoElement|null>(null); const videoRef = useRef<HTMLVideoElement | null>(null);
const [videoHeight, setVideoHeight] = useState<number>(0);
const [posterLoaded, setPosterLoaded] = useState(false);
const [videoHeight, setVideoHeight] = useState<number | undefined>(undefined);
const [videoProperties, setVideoProperties] = useState<VideoProperties>({ const [videoProperties, setVideoProperties] = useState<VideoProperties>({
posterUrl: '', posterUrl: '',
videoUrl: '', videoUrl: '',
height: 0,
}); });
const currentVideo = videoRef.current; useEffect(() => {
if (currentVideo && !videoHeight) { if (posterLoaded && videoRef.current) {
const currentVideoHeight = currentVideo.offsetHeight; setVideoHeight(videoRef.current?.offsetHeight);
if (currentVideoHeight > 0) {
setVideoHeight(currentVideoHeight);
}
} }
}, [posterLoaded, videoRef.current]);
useEffect(() => { useEffect(() => {
const idExists = !isNullOrUndefined(id); const idExists = !isNullOrUndefined(id);
@ -55,16 +54,20 @@ export const HistoryVideo = ({
videoRef.current = null; videoRef.current = null;
} }
const posterUrl = `${apiHost}/api/events/${id}/snapshot.jpg`;
const poster = new Image();
poster.src = posterUrl;
poster.onload = () => {
setPosterLoaded(true);
};
setVideoProperties({ setVideoProperties({
posterUrl: `${apiHost}/api/events/${id}/snapshot.jpg`, posterUrl,
videoUrl: `${apiHost}/vod/event/${id}/index.m3u8`, videoUrl: `${apiHost}/vod/event/${id}/index.m3u8`,
height: videoHeight,
}); });
} else { } else {
setVideoProperties({ setVideoProperties({
posterUrl: '', posterUrl: '',
videoUrl: '', videoUrl: '',
height: 0,
}); });
} }
}, [id, videoHeight, videoRef, apiHost]); }, [id, videoHeight, videoRef, apiHost]);
@ -117,12 +120,7 @@ export const HistoryVideo = ({
[videoIsPlaying, onTimeUpdate] [videoIsPlaying, onTimeUpdate]
); );
const videoPropertiesIsUndefined = isNullOrUndefined(videoProperties); const { posterUrl, videoUrl } = videoProperties;
if (videoPropertiesIsUndefined) {
return <div style={{ height: `${videoHeight}px`, width: '100%' }} />;
}
const { posterUrl, videoUrl, height } = videoProperties;
return ( return (
<video <video
ref={videoRef} ref={videoRef}
@ -131,12 +129,12 @@ export const HistoryVideo = ({
onPause={onPause} onPause={onPause}
onPlay={onPlay} onPlay={onPlay}
poster={posterUrl} poster={posterUrl}
preload='metadata' preload="metadata"
controls controls
style={height ? { minHeight: `${height}px` } : {}} style={videoHeight ? { minHeight: `${videoHeight}px` } : {}}
playsInline playsInline
> >
<source type='application/vnd.apple.mpegurl' src={videoUrl} /> <source type="application/vnd.apple.mpegurl" src={videoUrl} />
</video> </video>
); );
}; };