feat(results): add live annotation overlay on raw video playback

src/services/api/video.service.ts

@@ -5,6 +5,8 @@ import {
   PaginationParams,
   SseTokenResponse,
   UploadListResponse,
+  VideoAnnotationFramesParams,
+  VideoAnnotationFramesResponse,
   VideoDetectionsParams,
   VideoDetectionsResponse,
 } from '@/types';
@@ -81,15 +83,28 @@ export const videoService = {
     return response.data;
   },
 
+  getVideoAnnotationFrames: async (
+    videoId: string,
+    params: VideoAnnotationFramesParams,
+  ): Promise<VideoAnnotationFramesResponse> => {
+    const response = await axiosClient.get<VideoAnnotationFramesResponse>(
+      API_ROUTES.VIDEOS.ANNOTATION_FRAMES(videoId),
+      {
+        params,
+      },
+    );
+    return response.data;
+  },
+
   /**
-   * Fetch the annotated video as a blob through the authenticated axios client.
+   * Fetch a protected video as a blob through the authenticated axios client.
    *
    * The browser's native `<video src>` request cannot carry the Bearer token,
    * which makes the protected media endpoint respond with 401. Proxying the
    * download through axios attaches the auth header (and benefits from the
    * refresh-on-401 interceptor) so the bytes can be played back locally.
    */
-  getAnnotatedVideo: async (url: string): Promise<Blob> => {
+  getProtectedVideo: async (url: string): Promise<Blob> => {
     const response = await axiosClient.get<Blob>(url, {
       responseType: 'blob',
     });