fix: gallery card text and load (#795)

src/files-and-videos/videos-page/VideoThumbnail.jsx

@@ -33,7 +33,7 @@ const VideoThumbnail = ({
   let addThumbnailMessage = 'Add thumbnail';
   if (allowThumbnailUpload) {
     if (thumbnail) {
-      addThumbnailMessage = 'Edit thumbnail';
+      addThumbnailMessage = 'Replace thumbnail';
     }
   }
   const supportedFiles = videoImageSettings?.supportedFileFormats

src/files-and-videos/videos-page/data/thunks.js

@@ -37,7 +37,7 @@ import {
 
 import { updateFileValues } from './utils';
 
-async function fetchUsageLocation(videoId, dispatch, courseId) {
+async function fetchUsageLocation(videoId, dispatch, courseId, isLast) {
   const { usageLocations } = await getVideoUsagePaths({ videoId, courseId });
   const activeStatus = usageLocations?.length > 0 ? 'active' : 'inactive';
 
@@ -49,6 +49,9 @@ async function fetchUsageLocation(videoId, dispatch, courseId) {
       activeStatus,
     },
   }));
+  if (isLast) {
+    dispatch(updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
+  }
 }
 
 export function fetchVideos(courseId) {
@@ -57,16 +60,23 @@ export function fetchVideos(courseId) {
 
     try {
       const { previousUploads, ...data } = await getVideos(courseId);
-      const parsedVideos = updateFileValues(previousUploads);
-      dispatch(addModels({ modelType: 'videos', models: parsedVideos }));
-      dispatch(setVideoIds({
-        videoIds: parsedVideos.map(video => video.id),
-      }));
       dispatch(setPageSettings({ ...data }));
-      dispatch(updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
-      parsedVideos.forEach(async (video) => {
-        fetchUsageLocation(video.id, dispatch, courseId);
-      });
+      // Previous uploads are the current videos associated with a course.
+      // If previous uploads are empty there is no need to add an empty model
+      // or loop through and empty list so automatically set loading to successful
+      if (isEmpty(previousUploads)) {
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
+      } else {
+        const parsedVideos = updateFileValues(previousUploads);
+        dispatch(addModels({ modelType: 'videos', models: parsedVideos }));
+        dispatch(setVideoIds({
+          videoIds: parsedVideos.map(video => video.id),
+        }));
+        parsedVideos.forEach(async (video, indx) => {
+          const isLast = parsedVideos.length - 1 === indx;
+          fetchUsageLocation(video.id, dispatch, courseId, isLast);
+        });
+      }
     } catch (error) {
       if (error.response && error.response.status === 403) {
         dispatch(updateLoadingStatus({ status: RequestStatus.DENIED }));

src/files-and-videos/videos-page/data/utils.js

@@ -26,7 +26,15 @@ export const updateFileValues = (files, isNewFile) => {
       status,
       transcripts,
     } = file;
-    const wrapperType = 'video';
+
+    let wrapperType;
+    if (clientVideoId.endsWith('.mov')) {
+      wrapperType = 'MOV';
+    } else if (clientVideoId.endsWith('.mp4')) {
+      wrapperType = 'MP4';
+    } else {
+      wrapperType = 'Unknown';
+    }
 
     let thumbnail = courseVideoImageUrl;
     if (thumbnail && thumbnail.startsWith('/')) {

src/files-and-videos/videos-page/factories/mockApiResponses.jsx

@@ -125,7 +125,7 @@ export const generateFetchVideosApiResponse = () => ({
     },
     {
       edx_video_id: 'mOckID5',
-      clientVideoId: 'mOckID5.mp4',
+      clientVideoId: 'mOckID5',
       created: '',
       courseVideoImageUrl: 'http:/video',
       transcripts: ['en'],