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

Fix mobile layout jumping

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-27 13:15:39 -06:00
parent 290ef28714
commit 28d3f55fbc
3 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,7 +89,7 @@ export default function HlsVideoPlayer({
return ( return (
<div <div
className={`relative ${visible ? "visible" : "hidden"}`} className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`}
onMouseOver={ onMouseOver={
isDesktop isDesktop
? () => { ? () => {
@ -110,7 +110,7 @@ export default function HlsVideoPlayer({
<TransformComponent> <TransformComponent>
<video <video
ref={videoRef} ref={videoRef}
className={`${className ?? ""} bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`} className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
preload="auto" preload="auto"
autoPlay autoPlay
controls={false} controls={false}

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

@ -9,6 +9,7 @@ import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
import { DynamicVideoController } from "./DynamicVideoController"; import { DynamicVideoController } from "./DynamicVideoController";
import HlsVideoPlayer from "../HlsVideoPlayer"; import HlsVideoPlayer from "../HlsVideoPlayer";
import { TimeRange, Timeline } from "@/types/timeline"; import { TimeRange, Timeline } from "@/types/timeline";
import { isDesktop } from "react-device-detect";
/** /**
* Dynamically switches between video playback and scrubbing preview player. * Dynamically switches between video playback and scrubbing preview player.
@ -170,7 +171,7 @@ export default function DynamicVideoPlayer({
return ( return (
<div className={`relative ${className ?? ""}`}> <div className={`relative ${className ?? ""}`}>
<HlsVideoPlayer <HlsVideoPlayer
className={`w-full ${grow ?? ""}`} className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}
videoRef={playerRef} videoRef={playerRef}
visible={!(isScrubbing || isLoading)} visible={!(isScrubbing || isLoading)}
currentSource={source} currentSource={source}
@ -194,7 +195,7 @@ export default function DynamicVideoPlayer({
)} )}
</HlsVideoPlayer> </HlsVideoPlayer>
<PreviewPlayer <PreviewPlayer
className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${grow}`} className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}`}
camera={camera} camera={camera}
timeRange={timeRange} timeRange={timeRange}
cameraPreviews={cameraPreviews} cameraPreviews={cameraPreviews}

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

@ -208,6 +208,10 @@ export function RecordingView({
}, [config, mainCamera]); }, [config, mainCamera]);
const grow = useMemo(() => { const grow = useMemo(() => {
if (isMobile) {
return "";
}
if (mainCameraAspect == "wide") { if (mainCameraAspect == "wide") {
return "w-full aspect-wide"; return "w-full aspect-wide";
} else if (isDesktop && mainCameraAspect == "tall") { } else if (isDesktop && mainCameraAspect == "tall") {
@ -313,7 +317,7 @@ export function RecordingView({
</div> </div>
<div <div
className={`flex h-full my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col"}`} className={`flex h-full my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
> >
<div className="flex flex-1 flex-wrap"> <div className="flex flex-1 flex-wrap">
<div <div