container for birdseye aspect and auto width for mobile time pill (#11685)

This commit is contained in:
Josh Hawkins 2024-06-01 22:13:37 -05:00 committed by GitHub
parent bccffe6670
commit beefc51361
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 8 deletions

View File

@ -352,7 +352,7 @@ export function ReviewTimeline({
: segmentDuration < 60
? "w-[80px]"
: "w-20"
} h-5 ${isDraggingHandlebar && isMobile ? "fixed left-1/2 top-[18px] z-20 h-[30px] w-32 -translate-x-1/2 transform bg-destructive/80" : "static"} flex items-center justify-center`}
} h-5 ${isDraggingHandlebar && isMobile ? "fixed left-1/2 top-[18px] z-20 h-[30px] w-auto -translate-x-1/2 transform bg-destructive/80 px-3" : "static"} flex items-center justify-center`}
>
<div
ref={handlebarTimeRef}
@ -390,7 +390,7 @@ export function ReviewTimeline({
: segmentDuration < 60
? "w-[80px]"
: "w-20"
} h-5 ${isDraggingExportEnd && isMobile ? "fixed left-1/2 top-[18px] z-20 mt-0 h-[30px] w-32 -translate-x-1/2 transform rounded-full bg-selected/80" : "static rounded-tl-lg rounded-tr-lg"} flex items-center justify-center`}
} h-5 ${isDraggingExportEnd && isMobile ? "fixed left-1/2 top-[18px] z-20 mt-0 h-[30px] w-auto -translate-x-1/2 transform rounded-full bg-selected/80 px-3" : "static rounded-tl-lg rounded-tr-lg"} flex items-center justify-center`}
>
<div
ref={exportEndTimeRef}
@ -432,7 +432,7 @@ export function ReviewTimeline({
: segmentDuration < 60
? "w-[80px]"
: "w-20"
} h-5 ${isDraggingExportStart && isMobile ? "fixed left-1/2 top-[4px] z-20 mt-0 h-[30px] w-32 -translate-x-1/2 transform rounded-full bg-selected/80" : "static rounded-bl-lg rounded-br-lg"} flex items-center justify-center`}
} h-5 ${isDraggingExportStart && isMobile ? "fixed left-1/2 top-[4px] z-20 mt-0 h-[30px] w-auto -translate-x-1/2 transform rounded-full bg-selected/80 px-3" : "static rounded-bl-lg rounded-br-lg"} flex items-center justify-center`}
>
<div
ref={exportStartTimeRef}

View File

@ -52,6 +52,7 @@ export default function LiveDashboardView({
const [isEditMode, setIsEditMode] = useState<boolean>(false);
const containerRef = useRef<HTMLDivElement>(null);
const birdseyeContainerRef = useRef<HTMLDivElement>(null);
// recent events
@ -241,11 +242,19 @@ export default function LiveDashboardView({
)}
>
{includeBirdseye && birdseyeConfig?.enabled && (
<BirdseyeLivePlayer
birdseyeConfig={birdseyeConfig}
liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
onClick={() => onSelectCamera("birdseye")}
/>
<div
style={{
aspectRatio: birdseyeConfig.width / birdseyeConfig.height,
}}
ref={birdseyeContainerRef}
>
<BirdseyeLivePlayer
birdseyeConfig={birdseyeConfig}
liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
onClick={() => onSelectCamera("birdseye")}
containerRef={birdseyeContainerRef}
/>
</div>
)}
{cameras.map((camera) => {
let grow;