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

Get video player to fit

Browse Source
This commit is contained in:
Nick Mowen 2023-12-30 12:33:27 -07:00
parent e8eea75cb5
commit bfeda4224e
1 changed files with 67 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
web/src/views/history/HistoryTimelineView.tsx
View File

@ -20,6 +20,7 @@ import React, {
} from "react"; } from "react";
import useSWR from "swr"; import useSWR from "swr";
import Player from "video.js/dist/types/player"; import Player from "video.js/dist/types/player";
import TimelineItemCard from "@/components/card/TimelineItemCard";
type HistoryTimelineViewProps = { type HistoryTimelineViewProps = {
playback: TimelinePlayback; playback: TimelinePlayback;
@ -262,71 +263,86 @@ function DesktopView({
}: DesktopViewProps) { }: DesktopViewProps) {
return ( return (
<div className="w-full"> <div className="w-full">
<> <div className="flex">
<div <>
className={`relative ${ <div
hasRelevantPreview && scrubbing ? "hidden" : "visible" className={`relative ${
}`} hasRelevantPreview && scrubbing ? "hidden" : "visible"
> }`}
<VideoPlayer
options={{
preload: "auto",
autoplay: true,
sources: [
{
src: playbackUri,
type: "application/vnd.apple.mpegurl",
},
],
}}
seekOptions={{ forward: 10, backward: 5 }}
onReady={(player) => {
playerRef.current = player;
player.currentTime(timelineTime - playbackTimes.start);
player.on("playing", () => {
setFocusedItem(undefined);
});
}}
onDispose={() => {
playerRef.current = undefined;
}}
> >
{config && focusedItem ? (
<TimelineEventOverlay
timeline={focusedItem}
cameraConfig={config.cameras[playback.camera]}
/>
) : undefined}
</VideoPlayer>
</div>
{hasRelevantPreview && (
<div className={`${scrubbing ? "visible" : "hidden"}`}>
<VideoPlayer <VideoPlayer
options={{ options={{
preload: "auto", preload: "auto",
autoplay: false, autoplay: true,
controls: false, fluid: false,
muted: true, height: "320",
loadingSpinner: false,
sources: [ sources: [
{ {
src: `${playback.relevantPreview?.src}`, src: playbackUri,
type: "video/mp4", type: "application/vnd.apple.mpegurl",
}, },
], ],
}} }}
seekOptions={{}} seekOptions={{ forward: 10, backward: 5 }}
onReady={(player) => { onReady={(player) => {
previewRef.current = player; playerRef.current = player;
player.on("seeked", () => setSeeking(false)); player.currentTime(timelineTime - playbackTimes.start);
player.on("playing", () => {
setFocusedItem(undefined);
});
}} }}
onDispose={() => { onDispose={() => {
previewRef.current = undefined; playerRef.current = undefined;
}} }}
/> >
{config && focusedItem ? (
<TimelineEventOverlay
timeline={focusedItem}
cameraConfig={config.cameras[playback.camera]}
/>
) : undefined}
</VideoPlayer>
</div> </div>
)} {hasRelevantPreview && (
</> <div className={`${scrubbing ? "visible" : "hidden"}`}>
<VideoPlayer
options={{
preload: "auto",
autoplay: false,
controls: false,
muted: true,
loadingSpinner: false,
sources: [
{
src: `${playback.relevantPreview?.src}`,
type: "video/mp4",
},
],
}}
seekOptions={{}}
onReady={(player) => {
previewRef.current = player;
player.on("seeked", () => setSeeking(false));
}}
onDispose={() => {
previewRef.current = undefined;
}}
/>
</div>
)}
</>
<div className="px-2 w-full h-80 overflow-auto">
{playback.timelineItems.map((timeline) => {
return (
<TimelineItemCard
key={timeline.timestamp}
timeline={timeline}
relevantPreview={playback.relevantPreview}
/>
);
})}
</div>
</div>
<div className="m-1"> <div className="m-1">
{playback != undefined && ( {playback != undefined && (
<ActivityScrubber <ActivityScrubber