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

Move safari function

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-13 07:38:36 -07:00
parent 63bc1b1582
commit 2806d1b027
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,6 @@ import VideoPlayer from "./VideoPlayer";
import React, { import React, {
useCallback, useCallback,
useEffect, useEffect,
useMemo,
useRef, useRef,
useState, useState,
} from "react"; } from "react";
@ -11,6 +10,7 @@ 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"; import { LuPlayCircle } from "react-icons/lu";
import { isCurrentHour } from "@/utils/dateUtil"; import { isCurrentHour } from "@/utils/dateUtil";
import { isSafari } from "@/utils/browserUtil";
type PreviewPlayerProps = { type PreviewPlayerProps = {
camera: string; camera: string;
@ -38,9 +38,6 @@ export default function PreviewThumbnailPlayer({
onClick, onClick,
}: PreviewPlayerProps) { }: PreviewPlayerProps) {
const playerRef = useRef<Player | null>(null); const playerRef = useRef<Player | null>(null);
const isSafari = useMemo(() => {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}, []);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [isInitiallyVisible, setIsInitiallyVisible] = useState(false); const [isInitiallyVisible, setIsInitiallyVisible] = useState(false);
@ -135,7 +132,6 @@ export default function PreviewThumbnailPlayer({
camera={camera} camera={camera}
eventId={eventId} eventId={eventId}
isMobile={isMobile} isMobile={isMobile}
isSafari={isSafari}
onClick={onClick} onClick={onClick}
/> />
</AspectRatio> </AspectRatio>
@ -151,7 +147,6 @@ type PreviewContentProps = {
isInitiallyVisible: boolean; isInitiallyVisible: boolean;
startTs: number; startTs: number;
isMobile: boolean; isMobile: boolean;
isSafari: boolean;
onClick?: () => void; onClick?: () => void;
}; };
function PreviewContent({ function PreviewContent({
@ -163,10 +158,10 @@ function PreviewContent({
isInitiallyVisible, isInitiallyVisible,
startTs, startTs,
isMobile, isMobile,
isSafari,
onClick, onClick,
}: PreviewContentProps) { }: PreviewContentProps) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const slowPlayack = isSafari();
// handle touchstart -> touchend as click // handle touchstart -> touchend as click
const [touchStart, setTouchStart] = useState(0); const [touchStart, setTouchStart] = useState(0);
@ -237,7 +232,7 @@ function PreviewContent({
player.pause(); // autoplay + pause is required for iOS player.pause(); // autoplay + pause is required for iOS
} }
player.playbackRate(isSafari ? 2 : 8); player.playbackRate(slowPlayack ? 2 : 8);
player.currentTime(startTs - relevantPreview.start); player.currentTime(startTs - relevantPreview.start);
if (isMobile && onClick) { if (isMobile && onClick) {
player.on("touchstart", handleTouchStart); player.on("touchstart", handleTouchStart);

7
web/src/utils/browserUtil.ts Normal file
View File

@ -0,0 +1,7 @@
import { useMemo } from "react";
export function isSafari() {
return useMemo(() => {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}, []);
}