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

Use icon to indicate preview

Browse Source
This commit is contained in:
Nick Mowen 2023-12-19 15:26:40 -07:00
parent a35dfd0e69
commit fee1b5e493
1 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import { useCallback, useMemo, useRef, useState } from "react";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import Player from "video.js/dist/types/player"; import Player from "video.js/dist/types/player";
import { AspectRatio } from "../ui/aspect-ratio"; import { AspectRatio } from "../ui/aspect-ratio";
import { LuPlayCircle } from "react-icons/lu";
type PreviewPlayerProps = { type PreviewPlayerProps = {
camera: string; camera: string;
@ -126,32 +127,35 @@ export default function PreviewThumbnailPlayer({
} }
} else { } else {
content = ( content = (
<div className={`${getPreviewWidth(camera, config)}`}> <>
<VideoPlayer <div className={`${getPreviewWidth(camera, config)}`}>
options={{ <VideoPlayer
preload: "auto", options={{
autoplay: false, preload: "auto",
controls: false, autoplay: false,
muted: true, controls: false,
loadingSpinner: false, muted: true,
sources: [ loadingSpinner: false,
{ sources: [
src: `${relevantPreview.src}`, {
type: "video/mp4", src: `${relevantPreview.src}`,
}, type: "video/mp4",
], },
}} ],
seekOptions={{}} }}
onReady={(player) => { seekOptions={{}}
playerRef.current = player; onReady={(player) => {
player.playbackRate(isSafari ? 2 : 8); playerRef.current = player;
player.currentTime(startTs - relevantPreview.start); player.playbackRate(isSafari ? 2 : 8);
}} player.currentTime(startTs - relevantPreview.start);
onDispose={() => { }}
playerRef.current = null; onDispose={() => {
}} playerRef.current = null;
/> }}
</div> />
</div>
<LuPlayCircle className="absolute z-10 left-1 bottom-1 w-4 h-4 text-white text-opacity-60" />
</>
); );
} }