diff --git a/src/files-and-videos/videos-page/VideoThumbnail.jsx b/src/files-and-videos/videos-page/VideoThumbnail.jsx index f86b3e00d..63c65b7c2 100644 --- a/src/files-and-videos/videos-page/VideoThumbnail.jsx +++ b/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 diff --git a/src/files-and-videos/videos-page/data/thunks.js b/src/files-and-videos/videos-page/data/thunks.js index d04403629..3066e4025 100644 --- a/src/files-and-videos/videos-page/data/thunks.js +++ b/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 })); diff --git a/src/files-and-videos/videos-page/data/utils.js b/src/files-and-videos/videos-page/data/utils.js index 1e5e7a5dc..4fcd247c8 100644 --- a/src/files-and-videos/videos-page/data/utils.js +++ b/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('/')) { diff --git a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx index c20aa9013..be3d93941 100644 --- a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx +++ b/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'],