Recording fixes (#10728)

* Use timerange everywhere and ensure recordings has last 24 hours

* Pause recording when selecting timeline

* Fix loading layout

* Fix updating current time not always working

* Simplify dynamic video player

* Clean up desktop sizing

* Fix current hour

* Make padding consistent

* Improve spacing for extra cameras

* Make back button consistent

* Fix preview player not jumping to correct time

* Dont use useEffect due to preview changing

* Simplify

* Fix transition

web/src/App.tsx

@@ -31,7 +31,7 @@ function App() {
             {isMobile && <Bottombar />}
             <div
               id="pageRoot"
-              className={`absolute top-2 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-16 bottom-8"}`}
+              className={`absolute top-0 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-12 bottom-8"}`}
             >
               <Suspense>
                 <Routes>

web/src/components/card/ReviewCard.tsx

@@ -33,11 +33,11 @@ export default function ReviewCard({
 
   return (
     <div
-      className="w-full flex flex-col gap-1.5 cursor-pointer"
+      className="w-full relative flex flex-col gap-1.5 cursor-pointer"
       onClick={onClick}
     >
       <ImageLoadingIndicator
-        className="size-full aspect-video"
+        className="absolute inset-0"
         imgLoaded={imgLoaded}
       />
       <img

web/src/components/player/PreviewPlayer.tsx

@@ -12,8 +12,7 @@ import { Preview } from "@/types/preview";
 import { PreviewPlayback } from "@/types/playback";
 import { isCurrentHour } from "@/utils/dateUtil";
 import { baseUrl } from "@/api/baseUrl";
-import { isAndroid, isChrome, isMobile, isSafari } from "react-device-detect";
+import { isAndroid, isChrome, isMobile } from "react-device-detect";
-import { Skeleton } from "../ui/skeleton";
 import { TimeRange } from "@/types/timeline";
 
 type PreviewPlayerProps = {
@@ -23,6 +22,7 @@ type PreviewPlayerProps = {
   cameraPreviews: Preview[];
   startTime?: number;
   isScrubbing: boolean;
+  forceAspect?: number;
   onControllerReady: (controller: PreviewController) => void;
   onClick?: () => void;
 };
@@ -143,8 +143,6 @@ function PreviewVideoPlayer({
 
   // initial state
 
-  const [loaded, setLoaded] = useState(false);
-  const [hasCanvas, setHasCanvas] = useState(false);
   const initialPreview = useMemo(() => {
     return cameraPreviews.find(
       (preview) =>
@@ -164,14 +162,52 @@ function PreviewVideoPlayer({
       return;
     }
 
+    setCurrentHourFrame(undefined);
+
     if (isAndroid && isChrome) {
       // android/chrome glitches when setting currentTime at the same time as onSeeked
       setTimeout(() => controller.finishedSeeking(), 25);
     } else {
       controller.finishedSeeking();
     }
+    // we only want to update on controller change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controller]);
 
+  // canvas to cover preview transition
+
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [videoSize, setVideoSize] = useState<number[]>([0, 0]);
+
+  const changeSource = useCallback(
+    (newPreview: Preview | undefined, video: HTMLVideoElement | null) => {
+      if (!newPreview || !video) {
+        setCurrentPreview(newPreview);
+        return;
+      }
+
+      if (!canvasRef.current && videoSize[0] > 0) {
+        const canvas = document.createElement("canvas");
+        canvas.width = videoSize[0];
+        canvas.height = videoSize[1];
+        canvasRef.current = canvas;
+      }
+
+      const context = canvasRef.current?.getContext("2d");
+
+      if (context) {
+        context.drawImage(video, 0, 0, videoSize[0], videoSize[1]);
+        setCurrentHourFrame(canvasRef.current?.toDataURL("image/webp"));
+      }
+
+      setCurrentPreview(newPreview);
+
+      // we only want this to change when current preview changes
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
+    [setCurrentHourFrame, videoSize],
+  );
+
   useEffect(() => {
     if (!controller) {
       return;
@@ -185,8 +221,7 @@ function PreviewVideoPlayer({
     );
 
     if (preview != currentPreview) {
-      setCurrentPreview(preview);
+      changeSource(preview, previewRef.current);
-      setLoaded(false);
     }
 
     controller.newPlayback({
@@ -196,63 +231,21 @@ function PreviewVideoPlayer({
 
     // we only want this to change when recordings update
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controller, timeRange]);
+  }, [controller, timeRange, changeSource]);
-
-  // canvas to cover preview transition
-
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const [videoWidth, videoHeight] = useMemo(() => {
-    if (!previewRef.current) {
-      return [0, 0];
-    }
-
-    return [previewRef.current.videoWidth, previewRef.current.videoHeight];
-    // we know the video size will be known on load
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loaded]);
-  // handle switching sources
-
-  useEffect(() => {
-    if (!currentPreview || !previewRef.current) {
-      return;
-    }
-
-    if (canvasRef.current) {
-      canvasRef.current
-        .getContext("2d")
-        ?.drawImage(previewRef.current, 0, 0, videoWidth, videoHeight);
-      setHasCanvas(true);
-    }
-
-    if (isSafari) {
-      setTimeout(() => previewRef.current?.load(), 100);
-    } else {
-      previewRef.current.load();
-    }
-    // we only want this to change when current preview changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentPreview, previewRef]);
 
   return (
     <div
-      className={`relative w-full rounded-2xl bg-black overflow-hidden ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
+      className={`relative rounded-2xl bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
       onClick={onClick}
     >
-      {currentHourFrame && (
       <img
-          className="absolute size-full object-contain"
+        className={`absolute size-full object-contain ${currentHourFrame ? "visible" : "invisible"}`}
         src={currentHourFrame}
-        />
+        onLoad={() => previewRef.current?.load()}
-      )}
-      <canvas
-        ref={canvasRef}
-        width={videoWidth}
-        height={videoHeight}
-        className={`absolute h-full left-1/2 -translate-x-1/2 ${!loaded && hasCanvas ? "" : "hidden"}`}
       />
       <video
         ref={previewRef}
-        className="size-full"
+        className={`absolute size-full ${currentHourFrame ? "invisible" : "visible"}`}
         preload="auto"
         autoPlay
         playsInline
@@ -260,27 +253,28 @@ function PreviewVideoPlayer({
         disableRemotePlayback
         onSeeked={onPreviewSeeked}
         onLoadedData={() => {
-          setCurrentHourFrame(undefined);
-          setLoaded(true);
-
           if (controller) {
             controller.previewReady();
           } else {
             previewRef.current?.pause();
           }
 
-          if (previewRef.current && startTime && currentPreview) {
+          if (previewRef.current) {
+            setVideoSize([
+              previewRef.current.videoWidth,
+              previewRef.current.videoHeight,
+            ]);
+
+            if (startTime && currentPreview) {
               previewRef.current.currentTime = startTime - currentPreview.start;
             }
+          }
         }}
       >
         {currentPreview != undefined && (
           <source src={currentPreview.src} type={currentPreview.type} />
         )}
       </video>
-      {!loaded && !hasCanvas && !currentHourFrame && (
-        <Skeleton className="absolute inset-0" />
-      )}
       {cameraPreviews && !currentPreview && (
         <div className="absolute inset-0 text-white rounded-2xl flex justify-center items-center">
           No Preview Found
@@ -362,7 +356,9 @@ class PreviewVideoController extends PreviewController {
   }
 
   override setNewPreviewStartTime(time: number) {
-    this.timeToSeek = time;
+    if (this.preview) {
+      this.timeToSeek = time - this.preview.start;
+    }
   }
 
   previewReady() {
@@ -468,7 +464,7 @@ function PreviewFramesPlayer({
 
   return (
     <div
-      className={`relative w-full ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
+      className={`relative ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
       onClick={onClick}
     >
       <img

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -9,7 +9,6 @@ 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.
@@ -41,26 +40,6 @@ export default function DynamicVideoPlayer({
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  // playback behavior
-
-  const grow = useMemo(() => {
-    if (!config) {
-      return "aspect-video";
-    }
-
-    const aspectRatio =
-      config.cameras[camera].detect.width /
-      config.cameras[camera].detect.height;
-
-    if (aspectRatio > 2) {
-      return "";
-    } else if (aspectRatio < 16 / 9) {
-      return isDesktop ? "" : "aspect-tall";
-    } else {
-      return "aspect-video";
-    }
-  }, [camera, config]);
-
   // controlling playback
 
   const playerRef = useRef<HTMLVideoElement | null>(null);
@@ -169,9 +148,9 @@ export default function DynamicVideoPlayer({
   }, [controller, recordings]);
 
   return (
-    <div className={`w-full relative ${className ?? ""}`}>
+    <>
       <HlsVideoPlayer
-        className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}
+        className={className ?? ""}
         videoRef={playerRef}
         visible={!(isScrubbing || isLoading)}
         currentSource={source}
@@ -195,7 +174,7 @@ export default function DynamicVideoPlayer({
         )}
       </HlsVideoPlayer>
       <PreviewPlayer
-        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}`}
+        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
         camera={camera}
         timeRange={timeRange}
         cameraPreviews={cameraPreviews}
@@ -205,6 +184,6 @@ export default function DynamicVideoPlayer({
           setPreviewController(previewController);
         }}
       />
-    </div>
+    </>
   );
 }

web/src/pages/Events.tsx

@@ -338,6 +338,7 @@ export default function Events() {
         reviewItems={reviews}
         reviewSummary={reviewSummary}
         allPreviews={allPreviews}
+        timeRange={selectedTimeRange}
         filter={reviewFilter}
         updateFilter={onUpdateFilter}
       />

web/src/pages/Logs.tsx

@@ -53,7 +53,7 @@ function Logs() {
   );
 
   return (
-    <div className="size-full flex flex-col pr-2">
+    <div className="size-full p-2 flex flex-col">
       <div className="flex justify-between items-center">
         <ToggleGroup
           className="*:px-3 *:py-4 *:rounded-2xl"

web/src/utils/timelineUtil.tsx

@@ -121,18 +121,22 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
   }
 }
 
-export function getChunkedTimeDay(timestamp: number) {
+/**
-  const endOfThisHour = new Date();
+ *
-  endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
+ * @param timeRange
+ * @returns timeRange chunked into individual hours
+ */
+export function getChunkedTimeDay(timeRange: TimeRange): TimeRange[] {
+  const endOfThisHour = new Date(timeRange.before * 1000);
+  endOfThisHour.setSeconds(0, 0);
   const data: TimeRange[] = [];
-  const startDay = new Date(timestamp * 1000);
+  const startDay = new Date(timeRange.after * 1000);
-  startDay.setHours(0, 0, 0, 0);
+  startDay.setMinutes(0, 0, 0);
-  const startTimestamp = startDay.getTime() / 1000;
   let start = startDay.getTime() / 1000;
   let end = 0;
 
   for (let i = 0; i < 24; i++) {
-    startDay.setHours(startDay.getHours() + 1);
+    startDay.setHours(startDay.getHours() + 1, 0, 0, 0);
 
     if (startDay > endOfThisHour) {
       break;
@@ -146,7 +150,12 @@ export function getChunkedTimeDay(timestamp: number) {
     start = startDay.getTime() / 1000;
   }
 
-  return { start: startTimestamp, end, ranges: data };
+  data.push({
+    after: start,
+    before: Math.floor(timeRange.before),
+  });
+
+  return data;
 }
 
 export function getChunkedTimeRange(

web/src/views/events/EventView.tsx

@@ -46,7 +46,7 @@ type EventViewProps = {
   reviews?: ReviewSegment[];
   reviewSummary?: ReviewSummary;
   relevantPreviews?: Preview[];
-  timeRange: { before: number; after: number };
+  timeRange: TimeRange;
   filter?: ReviewFilter;
   severity: ReviewSeverity;
   startTime?: number;
@@ -205,7 +205,7 @@ export default function EventView({
   }
 
   return (
-    <div className="flex flex-col size-full">
+    <div className="py-2 flex flex-col size-full">
       <div className="h-11 px-2 relative flex justify-between items-center">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
@@ -492,7 +492,7 @@ function DetectionReview({
     <>
       <div
         ref={contentRef}
-        className="mt-2 flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
+        className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
       >
         {filter?.before == undefined && (
           <NewReviewData
@@ -687,6 +687,8 @@ function MotionReview({
     [selectedRangeIdx, timeRangeSegments],
   );
 
+  const [previewStart, setPreviewStart] = useState(startTime);
+
   const [scrubbing, setScrubbing] = useState(false);
   const [playing, setPlaying] = useState(false);
 
@@ -702,9 +704,7 @@ function MotionReview({
       );
 
       if (index != -1) {
-        Object.values(videoPlayersRef.current).forEach((controller) => {
+        setPreviewStart(currentTime);
-          controller.setNewPreviewStartTime(currentTime);
-        });
         setSelectedRangeIdx(index);
       }
       return;
@@ -713,7 +713,9 @@ function MotionReview({
     Object.values(videoPlayersRef.current).forEach((controller) => {
       controller.scrubToTimestamp(currentTime);
     });
-  }, [currentTime, currentTimeRange, timeRangeSegments]);
+    // only refresh when current time or available segments changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentTime, timeRangeSegments]);
 
   // playback
 
@@ -826,7 +828,7 @@ function MotionReview({
                 className={`${detectionType ? `outline outline-3 outline-offset-1 outline-severity_${detectionType}` : "outline-0 shadow-none"} rounded-2xl ${grow}`}
                 camera={camera.name}
                 timeRange={currentTimeRange}
-                startTime={startTime}
+                startTime={previewStart}
                 cameraPreviews={relevantPreviews || []}
                 isScrubbing={scrubbing}
                 onControllerReady={(controller) => {

web/src/views/events/RecordingView.tsx

@@ -46,6 +46,7 @@ type RecordingViewProps = {
   startTime: number;
   reviewItems?: ReviewSegment[];
   reviewSummary?: ReviewSummary;
+  timeRange: TimeRange;
   allCameras: string[];
   allPreviews?: Preview[];
   filter?: ReviewFilter;
@@ -56,6 +57,7 @@ export function RecordingView({
   startTime,
   reviewItems,
   reviewSummary,
+  timeRange,
   allCameras,
   allPreviews,
   filter,
@@ -85,15 +87,18 @@ export function RecordingView({
     "timeline",
   );
 
-  const timeRange = useMemo(() => getChunkedTimeDay(startTime), [startTime]);
+  const chunkedTimeRange = useMemo(
+    () => getChunkedTimeDay(timeRange),
+    [timeRange],
+  );
   const [selectedRangeIdx, setSelectedRangeIdx] = useState(
-    timeRange.ranges.findIndex((chunk) => {
+    chunkedTimeRange.findIndex((chunk) => {
       return chunk.after <= startTime && chunk.before >= startTime;
     }),
   );
   const currentTimeRange = useMemo(
-    () => timeRange.ranges[selectedRangeIdx],
+    () => chunkedTimeRange[selectedRangeIdx],
-    [selectedRangeIdx, timeRange],
+    [selectedRangeIdx, chunkedTimeRange],
   );
 
   // export
@@ -108,10 +113,10 @@ export function RecordingView({
       return;
     }
 
-    if (selectedRangeIdx < timeRange.ranges.length - 1) {
+    if (selectedRangeIdx < chunkedTimeRange.length - 1) {
       setSelectedRangeIdx(selectedRangeIdx + 1);
     }
-  }, [selectedRangeIdx, timeRange]);
+  }, [selectedRangeIdx, chunkedTimeRange]);
 
   // scrubbing and timeline state
 
@@ -121,7 +126,7 @@ export function RecordingView({
 
   const updateSelectedSegment = useCallback(
     (currentTime: number, updateStartTime: boolean) => {
-      const index = timeRange.ranges.findIndex(
+      const index = chunkedTimeRange.findIndex(
         (seg) => seg.after <= currentTime && seg.before >= currentTime,
       );
 
@@ -133,7 +138,7 @@ export function RecordingView({
         setSelectedRangeIdx(index);
       }
     },
-    [timeRange],
+    [chunkedTimeRange],
   );
 
   useEffect(() => {
@@ -189,40 +194,53 @@ export function RecordingView({
 
   // motion timeline data
 
-  const mainCameraAspect = useMemo(() => {
+  const getCameraAspect = useCallback(
+    (cam: string) => {
       if (!config) {
-      return "normal";
+        return undefined;
       }
 
-    const aspectRatio =
+      const camera = config.cameras[cam];
-      config.cameras[mainCamera].detect.width /
-      config.cameras[mainCamera].detect.height;
 
-    if (aspectRatio > 2) {
+      if (!camera) {
+        return undefined;
+      }
+
+      return camera.detect.width / camera.detect.height;
+    },
+    [config],
+  );
+
+  const mainCameraAspect = useMemo(() => {
+    const aspectRatio = getCameraAspect(mainCamera);
+
+    if (!aspectRatio) {
+      return "normal";
+    } else if (aspectRatio > 2) {
       return "wide";
     } else if (aspectRatio < 16 / 9) {
       return "tall";
     } else {
       return "normal";
     }
-  }, [config, mainCamera]);
+  }, [getCameraAspect, mainCamera]);
 
   const grow = useMemo(() => {
-    if (isMobile) {
-      return "";
-    }
-
     if (mainCameraAspect == "wide") {
       return "w-full aspect-wide";
-    } else if (isDesktop && mainCameraAspect == "tall") {
+    } else if (mainCameraAspect == "tall") {
-      return "h-full aspect-tall flex flex-col justify-center";
+      if (isDesktop) {
+        return "size-full aspect-tall flex flex-col justify-center";
+      } else {
+        return "size-full";
+      }
     } else {
       return "w-full aspect-video";
     }
   }, [mainCameraAspect]);
 
   return (
-    <div ref={contentRef} className="size-full flex flex-col">
+    <div ref={contentRef} className="size-full pt-2 flex flex-col">
       <Toaster />
       <div
         className={`w-full h-11 px-2 relative flex items-center justify-between`}
@@ -251,10 +269,16 @@ export function RecordingView({
             <ExportDialog
               camera={mainCamera}
               currentTime={currentTime}
-              latestTime={timeRange.end}
+              latestTime={timeRange.before}
               mode={exportMode}
               range={exportRange}
-              setRange={setExportRange}
+              setRange={(range) => {
+                setExportRange(range);
+
+                if (range != undefined) {
+                  mainControllerRef.current?.pause();
+                }
+              }}
               setMode={setExportMode}
             />
           )}
@@ -303,7 +327,7 @@ export function RecordingView({
             camera={mainCamera}
             filter={filter}
             currentTime={currentTime}
-            latestTime={timeRange.end}
+            latestTime={timeRange.before}
             mode={exportMode}
             range={exportRange}
             onUpdateFilter={updateFilter}
@@ -314,19 +338,26 @@ export function RecordingView({
       </div>
 
       <div
-        className={`h-full flex my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
+        className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
       >
-        <div className="flex flex-1 flex-wrap">
+        <div className={`${isDesktop ? "w-[80%]" : ""} flex flex-1 flex-wrap`}>
           <div
-            className={`size-full flex px-2 items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center"}`}
+            className={`size-full flex items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center gap-2"}`}
           >
             <div
               key={mainCamera}
               className={
                 isDesktop
-                  ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-full" : "w-[78%]"}`
+                  ? `${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
-                  : `w-full ${mainCameraAspect == "wide" ? "" : "aspect-video"}`
+                  : `w-full pt-2 ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}`
               }
+              style={{
+                aspectRatio: isDesktop
+                  ? mainCameraAspect == "tall"
+                    ? getCameraAspect(mainCamera)
+                    : undefined
+                  : Math.max(1, getCameraAspect(mainCamera) ?? 0),
+              }}
             >
               <DynamicVideoPlayer
                 className={grow}
@@ -351,18 +382,25 @@ export function RecordingView({
             </div>
             {isDesktop && (
               <div
-                className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[16%] flex-col overflow-y-auto" : "w-full justify-center overflow-x-auto"}`}
+                className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[12%] flex-col justify-center overflow-y-auto" : "w-full h-[14%] justify-center items-center overflow-x-auto"} `}
               >
                 {allCameras.map((cam) => {
-                  if (cam !== mainCamera) {
+                  if (cam == mainCamera) {
-                    return (
+                    return;
-                      <div key={cam}>
-                        <PreviewPlayer
-                          className={
-                            mainCameraAspect == "tall"
-                              ? "size-full"
-                              : "size-full"
                   }
+
+                  return (
+                    <div
+                      key={cam}
+                      className={
+                        mainCameraAspect == "tall" ? undefined : "h-full"
+                      }
+                      style={{
+                        aspectRatio: getCameraAspect(cam),
+                      }}
+                    >
+                      <PreviewPlayer
+                        className="size-full"
                         camera={cam}
                         timeRange={currentTimeRange}
                         cameraPreviews={allPreviews ?? []}
@@ -376,8 +414,6 @@ export function RecordingView({
                       />
                     </div>
                   );
-                  }
-                  return null;
                 })}
               </div>
             )}
@@ -406,7 +442,7 @@ type TimelineProps = {
   contentRef: MutableRefObject<HTMLDivElement | null>;
   mainCamera: string;
   timelineType: TimelineType;
-  timeRange: { start: number; end: number };
+  timeRange: TimeRange;
   mainCameraReviewItems: ReviewSegment[];
   currentTime: number;
   exportRange?: TimeRange;
@@ -429,8 +465,8 @@ function Timeline({
   const { data: motionData } = useSWR<MotionData[]>([
     "review/activity/motion",
     {
-      before: timeRange.end,
+      before: timeRange.before,
-      after: timeRange.start,
+      after: timeRange.after,
       scale: SEGMENT_DURATION / 2,
       cameras: mainCamera,
     },
@@ -455,7 +491,7 @@ function Timeline({
     <div
       className={`${
         isDesktop
-          ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} mt-2 overflow-y-auto no-scrollbar`
+          ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} overflow-y-auto no-scrollbar`
           : "flex-grow overflow-hidden"
       } relative`}
     >
@@ -465,8 +501,8 @@ function Timeline({
         <MotionReviewTimeline
           segmentDuration={30}
           timestampSpread={15}
-          timelineStart={timeRange.end}
+          timelineStart={timeRange.before}
-          timelineEnd={timeRange.start}
+          timelineEnd={timeRange.after}
           showHandlebar={exportRange == undefined}
           showExportHandles={exportRange != undefined}
           exportStartTime={exportRange?.after}
@@ -496,7 +532,11 @@ function Timeline({
                 key={review.id}
                 event={review}
                 currentTime={currentTime}
-                onClick={() => setCurrentTime(review.start_time)}
+                onClick={() => {
+                  setScrubbing(true);
+                  setCurrentTime(review.start_time);
+                  setScrubbing(false);
+                }}
               />
             );
           })}

web/src/views/live/LiveBirdseyeView.tsx

@@ -116,7 +116,7 @@ export default function LiveBirdseyeView() {
         className={
           fullscreen
             ? `fixed inset-0 bg-black z-30`
-            : `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
+            : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
         }
       >
         <div
@@ -128,11 +128,11 @@ export default function LiveBirdseyeView() {
         >
           {!fullscreen ? (
             <Button
-              className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
+              className={`rounded-lg flex items-center gap-2 ${isMobile ? "ml-2" : "ml-0"}`}
-              size={isMobile ? "icon" : "default"}
+              size={isMobile ? "icon" : "sm"}
               onClick={() => navigate(-1)}
             >
-              <IoMdArrowBack className="size-5 lg:mr-[10px]" />
+              <IoMdArrowBack className="size-5" />
               {isDesktop && "Back"}
             </Button>
           ) : (

web/src/views/live/LiveCameraView.tsx

@@ -204,7 +204,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         className={
           fullscreen
             ? `fixed inset-0 bg-black z-30`
-            : `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
+            : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
         }
       >
         <div
@@ -217,7 +217,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           {!fullscreen ? (
             <Button
               className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
-              size={isMobile ? "icon" : "default"}
+              size={isMobile ? "icon" : "sm"}
               onClick={() => navigate(-1)}
             >
               <IoMdArrowBack className="size-5 lg:mr-[10px]" />
@@ -228,7 +228,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           )}
           <TooltipProvider>
             <div
-              className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
+              className={`flex flex-row items-center gap-2 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
             >
               {!isIOS && (
                 <CameraFeatureToggle

web/src/views/live/LiveDashboardView.tsx

@@ -129,9 +129,9 @@ export default function LiveDashboardView({
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
   return (
-    <div className="size-full overflow-y-auto">
+    <div className="size-full p-2 overflow-y-auto">
       {isMobile && (
-        <div className="h-11 px-2 relative flex items-center justify-between">
+        <div className="h-11 relative flex items-center justify-between">
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
           <CameraGroupSelector />
           <div className="flex items-center gap-1">
@@ -164,7 +164,7 @@ export default function LiveDashboardView({
       {events && events.length > 0 && (
         <ScrollArea>
           <TooltipProvider>
-            <div className="flex gap-2 items-center">
+            <div className="px-1 flex gap-2 items-center">
               {events.map((event) => {
                 return <AnimatedEventCard key={event.id} event={event} />;
               })}