Use timestamp based recordings check instead of calendar

web/src/components/player/DynamicVideoPlayer.tsx

@@ -38,11 +38,6 @@ export default function DynamicVideoPlayer({
 }: DynamicVideoPlayerProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
-  const timezone = useMemo(
-    () =>
-      config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
-    [config],
-  );
 
   // playback behavior
   const wideVideo = useMemo(() => {
@@ -152,14 +147,8 @@ export default function DynamicVideoPlayer({
   // initial state
 
   const initialPlaybackSource = useMemo(() => {
-    const date = new Date(timeRange.start * 1000);
     return {
-      src: `${apiHost}vod/${date.getFullYear()}-${
-        date.getMonth() + 1
-      }/${date.getDate()}/${date.getHours()}/${camera}/${timezone.replaceAll(
-        "/",
-        ",",
-      )}/master.m3u8`,
+      src: `${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`,
       type: "application/vnd.apple.mpegurl",
     };
     // we only want to calculate this once
@@ -222,13 +211,7 @@ export default function DynamicVideoPlayer({
       return;
     }
 
-    const date = new Date(timeRange.start * 1000);
-    const playbackUri = `${apiHost}vod/${date.getFullYear()}-${
-      date.getMonth() + 1
-    }/${date.getDate()}/${date.getHours()}/${camera}/${timezone.replaceAll(
-      "/",
-      ",",
-    )}/master.m3u8`;
+    const playbackUri = `${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`;
 
     controller.newPlayback({
       recordings: recordings ?? [],
@@ -436,7 +419,7 @@ export class DynamicVideoController {
     const scrubResult = this.previewController.scrubToTimestamp(time);
 
     if (!scrubResult && saveIfNotReady) {
-      //this.previewController.setNewPreviewStartTime(time);
+      this.previewController.setNewPreviewStartTime(time);
     }
 
     if (scrubResult && this.playerMode != "scrubbing") {

web/src/views/events/RecordingView.tsx

@@ -11,6 +11,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import { MotionData, ReviewSegment, ReviewSeverity } from "@/types/review";
 import { getChunkedTimeDay } from "@/utils/timelineUtil";
@@ -37,6 +38,7 @@ export function DesktopRecordingView({
   allCameras,
   allPreviews,
 }: DesktopRecordingViewProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
   const navigate = useNavigate();
   const contentRef = useRef<HTMLDivElement | null>(null);
 
@@ -162,6 +164,21 @@ export function DesktopRecordingView({
       : null,
   );
 
+  const grow = useMemo(() => {
+    if (!config) {
+      return "aspect-video";
+    }
+
+    const aspectRatio =
+      config.cameras[mainCamera].detect.width /
+      config.cameras[mainCamera].detect.height;
+    if (aspectRatio > 2) {
+      return "aspect-wide";
+    } else {
+      return "aspect-video";
+    }
+  }, [config, mainCamera]);
+
   return (
     <div ref={contentRef} className="relative size-full">
       <Button
@@ -177,7 +194,7 @@ export function DesktopRecordingView({
           <div className="flex flex-col h-full px-2 justify-end">
             <div key={mainCamera} className="flex justify-center mb-5">
               <DynamicVideoPlayer
-                className="w-[85%]"
+                className={`w-[85%] ${grow}`}
                 camera={mainCamera}
                 timeRange={currentTimeRange}
                 cameraPreviews={allPreviews ?? []}

web/vite.config.ts

@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://localhost:5000",
+        target: "http://192.168.50.106:5000",
         ws: true,
       },
       "/vod": {
-        target: "http://localhost:5000",
+        target: "http://192.168.50.106:5000",
       },
       "/clips": {
-        target: "http://localhost:5000",
+        target: "http://192.168.50.106:5000",
       },
       "/exports": {
-        target: "http://localhost:5000",
+        target: "http://192.168.50.106:5000",
       },
       "/ws": {
-        target: "ws://localhost:5000",
+        target: "ws://192.168.50.106:5000",
         ws: true,
       },
       "/live": {
-        target: "ws://localhost:5000",
+        target: "ws://192.168.50.106:5000",
         changeOrigin: true,
         ws: true,
       },