Get video scaling working

web/src/pages/History.tsx

@@ -242,7 +242,7 @@ function TimelineViewer({ playback, isMobile, onClose }: TimelineViewerProps) {
 
   return (
     <Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
-      <DialogContent className="w-screen 2xl:w-4/5 max-w-full">
+      <DialogContent className="w-screen 2xl:w-2/3 max-w-full">
         {playback && (
           <HistoryTimelineView playback={playback} isMobile={isMobile} />
         )}

web/src/views/history/HistoryTimelineView.tsx

@@ -259,47 +259,45 @@ function DesktopView({
     <div className="w-full">
       <div className="flex">
         <>
-          <div
+          <div className="w-2/3 bg-black flex justify-center items-center">
-            className={`relative ${
+            <div
-              hasRelevantPreview && scrubbing ? "hidden" : "visible"
+              className={`w-full relative ${
-            }`}
+                hasRelevantPreview && scrubbing ? "hidden" : "visible"
-          >
+              }`}
-            <VideoPlayer
-              options={{
-                preload: "auto",
-                autoplay: true,
-                fluid: false,
-                height: "608",
-                width: "1080",
-                sources: [
-                  {
-                    src: playbackUri,
-                    type: "application/vnd.apple.mpegurl",
-                  },
-                ],
-              }}
-              seekOptions={{ forward: 10, backward: 5 }}
-              onReady={(player) => {
-                playerRef.current = player;
-                player.currentTime(timelineTime - playbackTimes.start);
-                player.on("playing", () => {
-                  onSelectItem(undefined);
-                });
-              }}
-              onDispose={() => {
-                playerRef.current = undefined;
-              }}
             >
-              {config && focusedItem ? (
+              <VideoPlayer
-                <TimelineEventOverlay
+                options={{
-                  timeline={focusedItem}
+                  preload: "auto",
-                  cameraConfig={config.cameras[playback.camera]}
+                  autoplay: true,
-                />
+                  sources: [
-              ) : undefined}
+                    {
-            </VideoPlayer>
+                      src: playbackUri,
-          </div>
+                      type: "application/vnd.apple.mpegurl",
-          {hasRelevantPreview && (
+                    },
-            <div className={`${scrubbing ? "visible" : "hidden"}`}>
+                  ],
+                }}
+                seekOptions={{ forward: 10, backward: 5 }}
+                onReady={(player) => {
+                  playerRef.current = player;
+                  player.currentTime(timelineTime - playbackTimes.start);
+                  player.on("playing", () => {
+                    onSelectItem(undefined);
+                  });
+                }}
+                onDispose={() => {
+                  playerRef.current = undefined;
+                }}
+              >
+                {config && focusedItem ? (
+                  <TimelineEventOverlay
+                    timeline={focusedItem}
+                    cameraConfig={config.cameras[playback.camera]}
+                  />
+                ) : undefined}
+              </VideoPlayer>
+            </div>
+            {hasRelevantPreview && (
+            <div className={`w-full ${scrubbing ? "visible" : "hidden"}`}>
               <VideoPlayer
                 options={{
                   preload: "auto",
@@ -325,8 +323,9 @@ function DesktopView({
               />
             </div>
           )}
+          </div>
         </>
-        <div className="px-2 w-full h-[608px] overflow-auto">
+        <div className="px-2 h-[608px] overflow-auto">
           {playback.timelineItems.map((timeline) => {
             return (
               <TimelineItemCard