small improvements

Author: LeonardoRosaa

lightly_studio_view/src/lib/components/VideoItem/VideoItem.svelte

@@ -21,7 +21,7 @@
     let frames = $state<FrameView[]>(video.frame == null ? [] : [video.frame]);
 
     async function handleMouseEnter() {
-        await loadFrames(0);
+        await loadFrames(1);
         if (videoEl) {
             // Check if the video has enough data
             if (videoEl.readyState < 2) {
@@ -55,7 +55,7 @@
     }
 
     async function loadFrames(cursor: number) {
-        let framesWithAnnotations = await getAllFrames({
+        let videoFrames = await getAllFrames({
             path: {
                 video_frame_dataset_id: (video.frame?.sample as SampleView).dataset_id
             },
@@ -65,7 +65,8 @@
                 limit: 25
             }
         });
-        frames = [...frames, ...(framesWithAnnotations?.data?.data ?? [])];
+
+        frames = [...frames, ...(videoFrames?.data?.data ?? [])];
     }
 </script>
 

lightly_studio_view/src/routes/datasets/[dataset_id]/videos/[sample_id]/+page.svelte

@@ -24,6 +24,7 @@
     let containerEl: HTMLDivElement | null = null;
     let overlaySize = $state(0);
     let overlayHeight = $state(0);
+    let currentIndex = 0;
 
     $effect(() => {
         if (containerEl) {
@@ -34,7 +35,7 @@
 
     function onUpdate(frame: FrameView | VideoFrameView | null, index: number | null) {
         currentFrame = frame;
-        if (index != null && index % 25 == 0 && index != 0) {
+        if (index != null && index % 25 == 0 && index != 0 && currentIndex < index) {
             loadFrames(index);
         }
     }
@@ -54,7 +55,7 @@
     }
 
     function onPlay() {
-        loadFrames(0);
+        loadFrames(1);
     }
 </script>
 
@@ -98,19 +99,19 @@
                 <div class="min-w-full space-y-3 text-diffuse-foreground">
                     <div class="flex items-start gap-3">
                         <span class="truncate text-sm font-medium" title="Width">Width:</span>
-                        <span class="text-sm">{sample.width}px</span>
+                        <span class="text-sm">{sample?.width}px</span>
                     </div>
                     <div class="flex items-start gap-3">
                         <span class="truncate text-sm font-medium" title="Height">Height:</span>
-                        <span class="text-sm">{sample.height}px</span>
+                        <span class="text-sm">{sample?.height}px</span>
                     </div>
                     <div class="flex items-start gap-3">
                         <span class="truncate text-sm font-medium" title="Duration">Duration:</span>
-                        <span class="text-sm">{sample.duration_s.toFixed(2)} seconds</span>
+                        <span class="text-sm">{sample?.duration_s?.toFixed(2)} seconds</span>
                     </div>
                     <div class="flex items-start gap-3">
                         <span class="truncate text-sm font-medium" title="FPS">FPS:</span>
-                        <span class="text-sm">{sample.fps.toFixed(2)}</span>
+                        <span class="text-sm">{sample?.fps.toFixed(2)}</span>
                     </div>
                 </div>
             </Segment>