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

Reduce preview playback rate for safari browser

Browse Source
This commit is contained in:
Nick Mowen 2023-12-16 10:36:08 -07:00
parent ea4933d25a
commit 7798237c91
4 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/card/MiniEventCard.tsx
View File

@ -70,7 +70,7 @@ export default function MiniEventCard({ event, onUpdate }: MiniEventCardProps) {
{event.camera.replaceAll("_", " ")} {event.camera.replaceAll("_", " ")}
</div> </div>
{event.zones.length ? ( {event.zones.length ? (
<div className="capitalize text-sm flex align-center"> <div className="capitalize whitespace-nowrap text-sm flex align-center">
<MdOutlineLocationOn className="w-4 h-4 mr-2 inline" /> <MdOutlineLocationOn className="w-4 h-4 mr-2 inline" />
{event.zones.join(", ").replaceAll("_", " ")} {event.zones.join(", ").replaceAll("_", " ")}
</div> </div>

0
web/src/components/card/TimelineCardPlayer.tsx → web/src/components/card/TimelinePlayerCard.tsx
View File

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

@ -1,7 +1,7 @@
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import VideoPlayer from "./VideoPlayer"; import VideoPlayer from "./VideoPlayer";
import useSWR from "swr"; import useSWR from "swr";
import { useCallback, useRef, useState } from "react"; 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";
@ -32,6 +32,9 @@ export default function PreviewThumbnailPlayer({
const { data: config } = useSWR("config"); const { data: config } = useSWR("config");
const playerRef = useRef<Player | null>(null); const playerRef = useRef<Player | null>(null);
const apiHost = useApiHost(); const apiHost = useApiHost();
const isSafari = useMemo(() => {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}, []);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
@ -133,7 +136,7 @@ export default function PreviewThumbnailPlayer({
seekOptions={{}} seekOptions={{}}
onReady={(player) => { onReady={(player) => {
playerRef.current = player; playerRef.current = player;
player.playbackRate(8); player.playbackRate(isSafari ? 2 : 8);
player.currentTime(startTs - relevantPreview.start); player.currentTime(startTs - relevantPreview.start);
}} }}
onDispose={() => { onDispose={() => {

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

@ -7,7 +7,7 @@ import ActivityIndicator from "@/components/ui/activity-indicator";
import HistoryCard from "@/components/card/HistoryCard"; import HistoryCard from "@/components/card/HistoryCard";
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil"; import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
import axios from "axios"; import axios from "axios";
import TimelinePlayerCard from "@/components/card/TimelineCardPlayer"; import TimelinePlayerCard from "@/components/card/TimelinePlayerCard";
const API_LIMIT = 120; const API_LIMIT = 120;