feat: change interface of analysis video log

src/app/(modules)/results/[videoId]/components/VideoResultsSkeleton.tsx

@@ -14,20 +14,23 @@ function StatSkeleton() {
 
 function DetectionLogSkeleton() {
   return (
-    <div className="rounded-md border bg-card p-4">
-      <div className="mb-3 flex items-start justify-between gap-4">
-        <div className="space-y-2">
-          <Skeleton className="h-4 w-36" />
-          <Skeleton className="h-3 w-20" />
+    <div className="rounded-md border bg-card p-3">
+      <div className="flex gap-3">
+        <Skeleton className="size-20 shrink-0 rounded-md" />
+        <div className="min-w-0 flex-1 space-y-2">
+          <div className="flex items-start justify-between gap-3">
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-28" />
+              <Skeleton className="h-3 w-20" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-3 w-12" />
+              <Skeleton className="h-3 w-10" />
+            </div>
+          </div>
+          <Skeleton className="h-3 w-32" />
+          <Skeleton className="h-3 w-44" />
         </div>
-        <div className="space-y-2">
-          <Skeleton className="h-3 w-12" />
-          <Skeleton className="h-3 w-10" />
-        </div>
-      </div>
-      <div className="space-y-2">
-        <Skeleton className="h-3 w-32" />
-        <Skeleton className="h-3 w-44" />
       </div>
     </div>
   );

src/components/video/detectionLogs.tsx

@@ -1,10 +1,13 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
-import { Activity, Film, MapPin } from 'lucide-react';
+import { Activity, Film, ImageIcon, MapPin } from 'lucide-react';
+
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { DetectionResultLog } from '@/types';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useProtectedMediaObjectUrl } from '@/hooks/useProtectedMedia';
 import { cn } from '@/lib/utils';
+import type { DetectionResultLog } from '@/types';
 
 interface DetectionLogsProps {
   logs: DetectionResultLog[];
@@ -19,6 +22,47 @@ const formatVideoTime = (seconds: number) => {
   return `${minutes}:${secs.toString().padStart(2, '0')}`;
 };
 
+function DetectionLogThumbnail({
+  url,
+  label,
+}: {
+  url?: string | null;
+  label: string;
+}) {
+  const { objectUrl, isLoading, isError } = useProtectedMediaObjectUrl(url);
+
+  if (!url) {
+    return (
+      <div className="flex size-20 shrink-0 items-center justify-center rounded-md border border-dashed border-border/70 bg-muted/20 text-muted-foreground/60">
+        <ImageIcon className="size-5" />
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return <Skeleton className="size-20 shrink-0 rounded-md" />;
+  }
+
+  if (isError || !objectUrl) {
+    return (
+      <div className="flex size-20 shrink-0 items-center justify-center rounded-md border border-dashed bg-muted/20 text-[10px] text-muted-foreground">
+        N/A
+      </div>
+    );
+  }
+
+  return (
+    <div className="size-20 shrink-0 overflow-hidden rounded-md border bg-muted/20">
+      <img
+        src={objectUrl}
+        alt={label}
+        className="size-full object-cover"
+        loading="lazy"
+      />
+    </div>
+  );
+}
+
 const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
   const activeLogRef = useRef<HTMLButtonElement | null>(null);
 
@@ -49,6 +93,7 @@ const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
               const timestampSeconds = log.frame.timestamp_seconds;
               const { latitude, longitude } = log.location;
               const isActive = activeLogId === log.id;
+              const label = log.detection.display_name;
 
               return (
                 <button
@@ -57,42 +102,50 @@ const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
                   type="button"
                   onClick={() => onSeek(log)}
                   className={cn(
-                    'w-full rounded-md border bg-card p-4 text-left transition-colors hover:border-primary',
+                    'w-full rounded-md border bg-card p-3 text-left transition-colors hover:border-primary',
                     isActive && 'border-primary bg-primary/5',
                   )}
                 >
-                  <div className="mb-3 flex items-start justify-between gap-4">
-                    <div>
-                      <div className="text-[13px] font-bold">
-                        {log.detection.display_name} ID: {log.id}
-                      </div>
-                      <div className="text-[11px] font-medium text-muted-foreground">
-                        Frame {log.frame.number}
-                      </div>
-                    </div>
-                    <div className="shrink-0 text-right">
-                      <div className="text-xs font-bold">
-                        {formatVideoTime(timestampSeconds)}
-                      </div>
-                      <div className="text-[11px] text-muted-foreground">
-                        {timestampSeconds.toFixed(2)}s
-                      </div>
-                    </div>
-                  </div>
+                  <div className="flex gap-3">
+                    <DetectionLogThumbnail
+                      url={log.detection.context_image_url}
+                      label={label}
+                    />
 
-                  <div className="space-y-2 text-[12px] font-medium text-muted-foreground/90">
-                    <div>
-                      Confidence: {(log.detection.confidence * 100).toFixed(1)}%
-                    </div>
-                    {typeof latitude === 'number' &&
-                      typeof longitude === 'number' && (
-                        <div className="flex items-center gap-1.5">
-                          <MapPin className="h-3 w-3" />
-                          <span>
-                            {latitude.toFixed(8)}, {longitude.toFixed(8)}
-                          </span>
+                    <div className="min-w-0 flex-1">
+                      <div className="mb-2 flex items-start justify-between gap-3">
+                        <div className="min-w-0 space-y-1">
+                          <p className="text-sm font-semibold text-foreground">
+                            {label}
+                          </p>
+                          <p className="text-[11px] text-muted-foreground">
+                            Frame {log.frame.number}
+                          </p>
                         </div>
-                      )}
+
+                        <div className="shrink-0 text-right">
+                          <div className="text-xs font-bold">
+                            {formatVideoTime(timestampSeconds)}
+                          </div>
+                          <div className="text-[11px] text-muted-foreground">
+                            {timestampSeconds.toFixed(2)}s
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="space-y-1.5 text-[12px] text-muted-foreground">
+                        <p>{(log.detection.confidence * 100).toFixed(1)}%</p>
+                        {typeof latitude === 'number' &&
+                          typeof longitude === 'number' && (
+                            <div className="flex items-center gap-1.5">
+                              <MapPin className="h-3 w-3 shrink-0" />
+                              <span className="truncate font-mono text-[11px]">
+                                {latitude.toFixed(8)}, {longitude.toFixed(8)}
+                              </span>
+                            </div>
+                          )}
+                      </div>
+                    </div>
                   </div>
                 </button>
               );

src/services/api/video.service.ts

@@ -45,7 +45,9 @@ export const videoService = {
    * Get analysis results for a video
    */
   getVideoResults: async (videoId: string): Promise<CompletedVideoResult> => {
-    const response = await axiosClient.get(API_ROUTES.VIDEOS.RESULTS(videoId));
+    const response = await axiosClient.get<CompletedVideoResult>(
+      API_ROUTES.VIDEOS.RESULTS(videoId),
+    );
     return response.data;
   },
 

src/types/analysis.ts

@@ -2,12 +2,12 @@ import { DetectionClassCount, DetectionResultLog } from './detection';
 
 export type CompletedVideoResult = {
   video_id: string;
-  status: 'completed' | string;
-  processed_video_url: string | null;
-  raw_video_url: string | null;
+  status: 'completed';
+  raw_video_url: string;
+  processed_video_url: string;
   summary: {
-    fps?: number;
-    duration_seconds?: number;
+    fps: number;
+    duration_seconds: number;
     total_detections: number;
   };
   defect_counts: DetectionClassCount[];

src/types/detection.ts

@@ -12,6 +12,7 @@ export type DetectionResultLog = {
     class_name: string;
     display_name: string;
     confidence: number;
+    context_image_url: string;
   };
   frame: {
     number: number;

src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './routes';
 export * from './date';
-export * from './person';
+export * from './person';
+export * from './media';

src/utils/media.ts

@@ -0,0 +1,13 @@
+import { ENV_CONSTANT } from '@/constants/secrect.constant';
+
+export function resolveMediaUrl(url?: string | null) {
+  if (!url?.trim()) return null;
+
+  const value = url.trim();
+  if (/^https?:\/\//i.test(value)) return value;
+
+  const baseUrl = ENV_CONSTANT.BASE_API_URL?.replace(/\/$/, '');
+  const path = value.startsWith('/') ? value : `/${value}`;
+
+  return baseUrl ? `${baseUrl}${path}` : path;
+}