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

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

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