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

Improve consistency of video scaling

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-15 17:03:39 -06:00
parent 02c6a21bd5
commit b6192c1377
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -59,6 +59,7 @@ export default function HlsVideoPlayer({
const hlsRef = useRef<Hls>(); const hlsRef = useRef<Hls>();
const [useHlsCompat, setUseHlsCompat] = useState(false); const [useHlsCompat, setUseHlsCompat] = useState(false);
const [loadedMetadata, setLoadedMetadata] = useState(false);
useEffect(() => { useEffect(() => {
if (!videoRef.current) { if (!videoRef.current) {
@ -153,7 +154,7 @@ export default function HlsVideoPlayer({
return ( return (
<div <div
className={`relative ${className ?? ""}`} className={`relative`}
onMouseOver={ onMouseOver={
isDesktop isDesktop
? () => { ? () => {
@ -174,7 +175,7 @@ export default function HlsVideoPlayer({
<TransformComponent> <TransformComponent>
<video <video
ref={videoRef} ref={videoRef}
className="size-full rounded-2xl" className={`${className ?? ""} bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
preload="auto" preload="auto"
autoPlay autoPlay
controls={false} controls={false}
@ -204,6 +205,7 @@ export default function HlsVideoPlayer({
: undefined : undefined
} }
onLoadedData={onPlayerLoaded} onLoadedData={onPlayerLoaded}
onLoadedMetadata={() => setLoadedMetadata(true)}
onEnded={onClipEnded} onEnded={onClipEnded}
onError={(e) => { onError={(e) => {
if ( if (

23
web/src/components/player/dynamic/DynamicVideoPlayer.tsx
View File

@ -38,16 +38,23 @@ export default function DynamicVideoPlayer({
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
// playback behavior // playback behavior
const wideVideo = useMemo(() => {
const grow = useMemo(() => {
if (!config) { if (!config) {
return false; return "aspect-video";
} }
return ( const aspectRatio =
config.cameras[camera].detect.width / config.cameras[camera].detect.width /
config.cameras[camera].detect.height > config.cameras[camera].detect.height;
1.7
); if (aspectRatio > 2) {
return "";
} else if (aspectRatio < 16 / 9) {
return "aspect-tall";
} else {
return "aspect-video";
}
}, [camera, config]); }, [camera, config]);
// controlling playback // controlling playback
@ -163,7 +170,7 @@ export default function DynamicVideoPlayer({
className={`w-full relative ${isScrubbing || isLoading ? "hidden" : "visible"}`} className={`w-full relative ${isScrubbing || isLoading ? "hidden" : "visible"}`}
> >
<HlsVideoPlayer <HlsVideoPlayer
className={`${wideVideo ? "" : "aspect-video"}`} className={`${grow}`}
videoRef={playerRef} videoRef={playerRef}
currentSource={source} currentSource={source}
onTimeUpdate={onTimeUpdate} onTimeUpdate={onTimeUpdate}
@ -180,7 +187,7 @@ export default function DynamicVideoPlayer({
</HlsVideoPlayer> </HlsVideoPlayer>
</div> </div>
<PreviewPlayer <PreviewPlayer
className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className ?? ""}`} className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${grow}`}
camera={camera} camera={camera}
timeRange={timeRange} timeRange={timeRange}
cameraPreviews={cameraPreviews} cameraPreviews={cameraPreviews}

2
web/src/views/events/RecordingView.tsx
View File

@ -181,7 +181,7 @@ export function DesktopRecordingView({
if (aspectRatio > 2) { if (aspectRatio > 2) {
return "wide"; return "wide";
} else if (aspectRatio < 1) { } else if (aspectRatio < 16 / 9) {
return "tall"; return "tall";
} else { } else {
return "normal"; return "normal";