Fix: The video aspect ratio (maybe)

Fantasy-programming · May 19, 2024 · d17730c · d17730c
1 parent e8c33d0
commit d17730c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "only-refs",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "",
   "type": "module",
   "scripts": {
@@ -84,3 +84,4 @@
     "vitest": "^1.6.0"
   }
 }
+
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "only-refs"
-version = "0.0.5"
+version = "0.0.6"
 description = "All your references in a single place"
 authors = ["Ngobo Ridy"]
 edition = "2021"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "only-refs",
-    "version": "0.0.5"
+    "version": "0.0.6"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/components/ViewBox/ViewBox.tsx b/src/components/ViewBox/ViewBox.tsx
@@ -17,6 +17,22 @@ import { ViewBoxZoom } from './ViewBoxZoom';
 import { isMediaRef } from '~/lib/helper';
 
 export const ViewBox: Component<ParentProps & { source: Ref }> = (props) => {
+  let videoRef: HTMLVideoElement | undefined;
+
+  const [videoDimensions, setVideoDimensions] = createSignal({
+    width: 0,
+    height: 0,
+  });
+
+  const handleVideoLoadedMetadata = () => {
+    if (videoRef) {
+      setVideoDimensions({
+        width: videoRef.videoWidth,
+        height: videoRef.videoHeight,
+      });
+    }
+  };
+
   return (
     <DialogContent
       class={
@@ -33,12 +49,18 @@ export const ViewBox: Component<ParentProps & { source: Ref }> = (props) => {
           <Switch>
             <Match when={props.source.metadata.ref_type === 'video'}>
               <video
+                ref={(el) => (videoRef = el)}
                 class="aspect-video h-auto w-auto rounded-xl"
                 src={(props.source as VideoRef).video_path}
                 preload="auto"
                 autoplay
                 controls
                 loop
+                onLoadedMetadata={handleVideoLoadedMetadata}
+                style={{
+                  'max-width': `min(100%, ${videoDimensions().width}px)`,
+                  'max-height': `min(100%, ${videoDimensions().height}px)`,
+                }}
               ></video>
             </Match>
             <Match when={props.source.metadata.ref_type === 'image'}>