container for birdseye aspect and auto width for mobile time pill (#1…

…1685)
blakeblackshear · Jun 2, 2024 · beefc51 · beefc51
1 parent bccffe6
commit beefc51
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
@@ -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}

diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
@@ -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;