Fix: The video aspect ratio (maybe)

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"
   }
 }
+

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"

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "only-refs",
-    "version": "0.0.5"
+    "version": "0.0.6"
   },
   "tauri": {
     "allowlist": {

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'}>

src/components/ViewBox/ViewBoxInfo.tsx

@@ -100,7 +100,12 @@ export const ViewBoxInfo = (props: ViewBoxInfoProps) => {
           />
           <span class="text-sm">{elapsedTime(props.metadata.created_at)}</span>
         </header>
-        <div class="p-4">
+        <div
+          class="overflow-y-scroll p-4"
+          style={{
+            height: 'calc(100% - 148px - 64px)',
+          }}
+        >
           <h4 class="text-lg uppercase">Tags</h4>
           <div class="my-3 transition-all">
             <Presence>
@@ -153,8 +158,7 @@ export const ViewBoxInfo = (props: ViewBoxInfoProps) => {
           </div>
           <Show
             when={
-              (props.metadata.ref_type === 'image' ||
-                props.metadata.ref_type === 'video') &&
+              props.metadata.ref_type === 'image' &&
               settings.appearance.show_media_info
             }
           >

src/components/ViewBox/ViewNoteEditor.tsx

@@ -55,7 +55,7 @@ export const ViewNoteEditor = (props: {
   }));
 
   return (
-    <div class="onlyrefNoise flex h-full w-full flex-col items-center overflow-x-hidden overscroll-y-contain bg-foreground/5">
+    <div class="onlyrefNoise flex h-full w-full flex-col items-center overflow-x-hidden overscroll-y-contain rounded-lg bg-foreground/5">
       <div
         ref={setContainer}
         class="m-auto w-full hyphens-auto break-words p-2"