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 (
<div
className={`relative ${visible ? "visible" : "hidden"}`}
className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`}
onMouseOver={
isDesktop
? () => {
@ -110,7 +110,7 @@ export default function HlsVideoPlayer({
<TransformComponent>
<video
ref={videoRef}
className={`${className ?? ""} bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
preload="auto"
autoPlay
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 HlsVideoPlayer from "../HlsVideoPlayer";
import { TimeRange, Timeline } from "@/types/timeline";
import { isDesktop } from "react-device-detect";
/**
* Dynamically switches between video playback and scrubbing preview player.
@ -170,7 +171,7 @@ export default function DynamicVideoPlayer({
return (
<div className={`relative ${className ?? ""}`}>
<HlsVideoPlayer
className={`w-full ${grow ?? ""}`}
className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}
videoRef={playerRef}
visible={!(isScrubbing || isLoading)}
currentSource={source}
@ -194,7 +195,7 @@ export default function DynamicVideoPlayer({
)}
</HlsVideoPlayer>
<PreviewPlayer
className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${grow}`}
className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}`}
camera={camera}
timeRange={timeRange}
cameraPreviews={cameraPreviews}

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

@ -208,6 +208,10 @@ export function RecordingView({
}, [config, mainCamera]);
const grow = useMemo(() => {
if (isMobile) {
return "";
}
if (mainCameraAspect == "wide") {
return "w-full aspect-wide";
} else if (isDesktop && mainCameraAspect == "tall") {
@ -313,7 +317,7 @@ export function RecordingView({
</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