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

Get video scaling working

Browse Source
This commit is contained in:
Nick Mowen 2023-12-30 14:01:30 -07:00
parent 82ad64143f
commit 48945fef91
2 changed files with 41 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/History.tsx
View File

@ -242,7 +242,7 @@ function TimelineViewer({ playback, isMobile, onClose }: TimelineViewerProps) {
return (
<Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
<DialogContent className="w-screen 2xl:w-4/5 max-w-full">
<DialogContent className="w-screen 2xl:w-2/3 max-w-full">
{playback && (
<HistoryTimelineView playback={playback} isMobile={isMobile} />
)}

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

@ -259,47 +259,45 @@ function DesktopView({
<div className="w-full">
<div className="flex">
<>
<div
className={`relative ${
hasRelevantPreview && scrubbing ? "hidden" : "visible"
}`}
>
<VideoPlayer
options={{
preload: "auto",
autoplay: true,
fluid: false,
height: "608",
width: "1080",
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", () => {
onSelectItem(undefined);
});
}}
onDispose={() => {
playerRef.current = undefined;
}}
<div className="w-2/3 bg-black flex justify-center items-center">
<div
className={`w-full relative ${
hasRelevantPreview && scrubbing ? "hidden" : "visible"
}`}
>
{config && focusedItem ? (
<TimelineEventOverlay
timeline={focusedItem}
cameraConfig={config.cameras[playback.camera]}
/>
) : undefined}
</VideoPlayer>
</div>
{hasRelevantPreview && (
<div className={`${scrubbing ? "visible" : "hidden"}`}>
<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", () => {
onSelectItem(undefined);
});
}}
onDispose={() => {
playerRef.current = undefined;
}}
>
{config && focusedItem ? (
<TimelineEventOverlay
timeline={focusedItem}
cameraConfig={config.cameras[playback.camera]}
/>
) : undefined}
</VideoPlayer>
</div>
{hasRelevantPreview && (
<div className={`w-full ${scrubbing ? "visible" : "hidden"}`}>
<VideoPlayer
options={{
preload: "auto",
@ -325,8 +323,9 @@ function DesktopView({
/>
</div>
)}
</div>
</>
<div className="px-2 w-full h-[608px] overflow-auto">
<div className="px-2 h-[608px] overflow-auto">
{playback.timelineItems.map((timeline) => {
return (
<TimelineItemCard