🚚(frontend) use nested routes for video related resources

As we want to only use API nested routes, our video components needs
to handle them.

src/frontend/apps/lti_site/data/queries/index.spec.tsx

@@ -255,18 +255,24 @@ describe('queries', () => {
   describe('useThumbnail', () => {
     it('requests the resource', async () => {
       const thumbnail = thumbnailMockFactory();
-      fetchMock.mock(`/api/thumbnails/${thumbnail.id}/`, thumbnail);
+      fetchMock.mock(
+        `/api/videos/${thumbnail.video}/thumbnails/${thumbnail.id}/`,
+        thumbnail,
+      );
 
-      const { result } = renderHook(() => useThumbnail(thumbnail.id), {
-        wrapper: WrapperReactQuery,
-      });
+      const { result } = renderHook(
+        () => useThumbnail(thumbnail.id, thumbnail.video),
+        {
+          wrapper: WrapperReactQuery,
+        },
+      );
       await waitFor(() => {
         expect(result.current.isSuccess).toBeTruthy();
       });
 
       expect(fetchMock.calls().length).toEqual(1);
       expect(fetchMock.lastCall()![0]).toEqual(
-        `/api/thumbnails/${thumbnail.id}/`,
+        `/api/videos/${thumbnail.video}/thumbnails/${thumbnail.id}/`,
       );
       expect(fetchMock.lastCall()![1]).toEqual({
         headers: {
@@ -280,18 +286,24 @@ describe('queries', () => {
 
     it('fails to get the resource', async () => {
       const thumbnail = thumbnailMockFactory();
-      fetchMock.mock(`/api/thumbnails/${thumbnail.id}/`, 404);
+      fetchMock.mock(
+        `/api/videos/${thumbnail.video}/thumbnails/${thumbnail.id}/`,
+        404,
+      );
 
-      const { result } = renderHook(() => useThumbnail(thumbnail.id), {
-        wrapper: WrapperReactQuery,
-      });
+      const { result } = renderHook(
+        () => useThumbnail(thumbnail.id, thumbnail.video),
+        {
+          wrapper: WrapperReactQuery,
+        },
+      );
 
       await waitFor(() => {
         expect(result.current.isError).toBeTruthy();
       });
 
       expect(fetchMock.lastCall()![0]).toEqual(
-        `/api/thumbnails/${thumbnail.id}/`,
+        `/api/videos/${thumbnail.video}/thumbnails/${thumbnail.id}/`,
       );
       expect(fetchMock.lastCall()![1]).toEqual({
         headers: {

src/frontend/apps/lti_site/data/queries/index.tsx

@@ -123,10 +123,11 @@ export const usePlaylists = (
 };
 
 export const useThumbnail = (
-  thumbnailId: string,
+  thumbnailId: Thumbnail['id'],
+  videoId: Video['id'],
   queryConfig?: UseQueryOptions<Thumbnail, 'thumbnails', Thumbnail>,
 ) => {
-  const key = ['thumbnails', thumbnailId];
+  const key = [`videos/${videoId}/thumbnails`, thumbnailId];
   return useQuery<Thumbnail, 'thumbnails'>({
     queryKey: key,
     queryFn: fetchOne,

src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.spec.tsx

@@ -174,6 +174,7 @@ describe('<LocalizedTimedTextTrackUpload />', () => {
         modelName.TIMEDTEXTTRACKS,
         mockTimedTextTrack.id,
         file,
+        mockedVideo.id,
       ),
     );
   });

src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.tsx

@@ -103,6 +103,7 @@ export const LocalizedTimedTextTrackUpload = ({
             modelName.TIMEDTEXTTRACKS,
             timedTextTrackId,
             event.target.files[0],
+            video.id,
           );
         } catch (error) {
           if ((error as object).hasOwnProperty('size') && metadata.data) {

src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/index.spec.tsx

@@ -153,6 +153,8 @@ describe('<SharedLiveMedia />', () => {
       modelName.SHAREDLIVEMEDIAS,
       mockedSharedLiveMedia.id,
       file,
+      modelName.VIDEOS,
+      mockedVideo.id,
     );
   });
 
@@ -386,6 +388,8 @@ describe('<SharedLiveMedia />', () => {
       modelName.SHAREDLIVEMEDIAS,
       mockedSharedLiveMedia.id,
       file,
+      modelName.VIDEOS,
+      mockedVideo.id,
     );
   });
 

src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/index.tsx

@@ -107,6 +107,7 @@ export const SharedLiveMedia = ({ isLive, isTeacher }: SharedMediaProps) => {
         modelName.SHAREDLIVEMEDIAS,
         sharedLiveMediaId,
         event.target.files[0],
+        video.id,
       );
     }
   };

src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.spec.tsx

@@ -149,6 +149,7 @@ describe('<DashboardLiveWidgetThumbnail />', () => {
       modelName.THUMBNAILS,
       mockedThumbnail.id,
       file,
+      mockedVideo.id,
     );
   });
 

src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.tsx

@@ -93,7 +93,12 @@ export const WidgetThumbnail = ({ isLive = true }: WidgetThumbnailProps) => {
           } else {
             thumbnailId = thumbnail.id;
           }
-          addUpload(modelName.THUMBNAILS, thumbnailId, event.target.files[0]);
+          addUpload(
+            modelName.THUMBNAILS,
+            thumbnailId,
+            event.target.files[0],
+            video.id,
+          );
         } catch (error) {
           if (
             (error as object).hasOwnProperty('size') &&