refactor: remove thumbnail for non-edX videos & allow removing fallba…

…ck URLs (#1241) * refactor: remove thumbnail from non-edx videos * fix: when deleting a fallback URL the app crashed * refactor: simplify conditional rendering
openedx · Sep 16, 2024 · 80e3592 · 80e3592
1 parent 121ced4
commit 80e3592
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 123 deletions.
diff --git a/...omponents/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap b/...omponents/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap
@@ -1,46 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnail uploads are allowed 1`] = `
-<injectIntl(ShimmedIntlComponent)
-  fontSize="x-small"
-  isError={true}
-  subtitle="Unavailable"
-  title="Thumbnail"
->
-  <ErrorAlert
-    dismissError={[Function]}
-    hideHeading={true}
-    isError={false}
-  >
-    <FormattedMessage
-      defaultMessage="The file size for thumbnails must be larger than 2 KB or less than 2 MB. Please resize your image and try again."
-      description=" Message presented to user when file size of image is less than 2 KB or larger than 2 MB"
-      id="authoring.videoeditor.thumbnail.error.fileSizeError"
-    />
-  </ErrorAlert>
-  <Alert
-    variant="light"
-  >
-    <FormattedMessage
-      defaultMessage="Select a video from your library to enable this feature (applies only to courses that run on the edx.org site)."
-      description="Message for unavailable thumbnail widget"
-      id="authoring.videoeditor.thumbnail.unavailable.message"
-    />
-  </Alert>
-  <Stack
-    direction="horizontal"
-    gap={3}
-  >
-    <Image
-      alt="Image used as thumbnail for video"
-      className="w-75"
-      fluid={true}
-      src="sOMeUrl"
-      thumbnail={true}
-    />
-  </Stack>
-</injectIntl(ShimmedIntlComponent)>
-`;
+exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnail uploads are allowed 1`] = `null`;
 
 exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoId is valid 1`] = `
 <injectIntl(ShimmedIntlComponent)
@@ -191,81 +151,6 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with a thumbna
 </injectIntl(ShimmedIntlComponent)>
 `;
 
-exports[`ThumbnailWidget snapshots snapshots: renders as expected with default props 1`] = `
-<injectIntl(ShimmedIntlComponent)
-  fontSize="x-small"
-  isError={true}
-  subtitle="Unavailable"
-  title="Thumbnail"
->
-  <ErrorAlert
-    dismissError={[Function]}
-    hideHeading={true}
-    isError={false}
-  >
-    <FormattedMessage
-      defaultMessage="The file size for thumbnails must be larger than 2 KB or less than 2 MB. Please resize your image and try again."
-      description=" Message presented to user when file size of image is less than 2 KB or larger than 2 MB"
-      id="authoring.videoeditor.thumbnail.error.fileSizeError"
-    />
-  </ErrorAlert>
-  <Alert
-    variant="light"
-  >
-    <FormattedMessage
-      defaultMessage="Select a video from your library to enable this feature (applies only to courses that run on the edx.org site)."
-      description="Message for unavailable thumbnail widget"
-      id="authoring.videoeditor.thumbnail.unavailable.message"
-    />
-  </Alert>
-  <Stack
-    gap={4}
-  >
-    <div
-      className="text-center"
-    >
-      <FormattedMessage
-        defaultMessage="Upload an image for learners to see before playing the video."
-        description="Message for adding thumbnail"
-        id="authoring.videoeditor.thumbnail.upload.message"
-      />
-      <div
-        className="text-primary-300"
-      >
-        <FormattedMessage
-          defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
-          description="Message for thumbnail aspectRequirements"
-          id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
-        />
-      </div>
-    </div>
-    <FileInput
-      acceptedFiles=".gif,.jpg,.jpeg,.png,.bmp,.bmp2"
-      fileInput={
-        {
-          "addFile": [Function],
-          "click": [Function],
-          "ref": {
-            "current": undefined,
-          },
-        }
-      }
-    />
-    <Button
-      className="text-primary-500 font-weight-bold justify-content-start pl-0"
-      disabled={true}
-      onClick={[Function]}
-      size="sm"
-      variant="link"
-    >
-      <FormattedMessage
-        defaultMessage="Upload thumbnail"
-        description="Label for upload button"
-        id="authoring.videoeditor.thumbnail.upload.label"
-      />
-    </Button>
-  </Stack>
-</injectIntl(ShimmedIntlComponent)>
-`;
+exports[`ThumbnailWidget snapshots snapshots: renders as expected with default props 1`] = `null`;
 
 exports[`ThumbnailWidget snapshots snapshots: renders as expected with isLibrary true 1`] = `null`;
diff --git a/...containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx b/...containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
@@ -61,7 +61,7 @@ const ThumbnailWidget = ({
     }
     return intl.formatMessage(messages.unavailableSubtitle);
   };
-  return (!isLibrary ? (
+  return (!isLibrary && edxVideo ? (
     <CollapsibleFormWidget
       fontSize="x-small"
       isError={Object.keys(error).length !== 0}
@@ -75,7 +75,7 @@ const ThumbnailWidget = ({
       >
         <FormattedMessage {...messages.fileSizeError} />
       </ErrorAlert>
-      {(allowThumbnailUpload && edxVideo) ? null : (
+      {!allowThumbnailUpload && (
         <Alert variant="light">
           <FormattedMessage {...messages.unavailableMessage} />
         </Alert>
@@ -90,15 +90,15 @@ const ThumbnailWidget = ({
             src={thumbnailSrc || thumbnail}
             alt={intl.formatMessage(messages.thumbnailAltText)}
           />
-          {(allowThumbnailUpload && edxVideo) ? (
+          {allowThumbnailUpload && (
             <IconButtonWithTooltip
               tooltipPlacement="top"
               tooltipContent={intl.formatMessage(messages.deleteThumbnail)}
               iconAs={Icon}
               src={DeleteOutline}
               onClick={deleteThumbnail}
             />
-          ) : null }
+          )}
         </Stack>
       ) : (
         <Stack gap={4}>
@@ -115,7 +115,7 @@ const ThumbnailWidget = ({
             iconBefore={FileUpload}
             onClick={fileInput.click}
             variant="link"
-            disabled={!(allowThumbnailUpload && edxVideo)}
+            disabled={!allowThumbnailUpload}
           >
             <FormattedMessage {...messages.uploadButtonLabel} />
           </Button>

diff --git a/...ntainers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx b/...ntainers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
@@ -39,8 +39,16 @@ export const sourceHooks = ({ dispatch, previousVideoId, setAlert }) => ({
 
 export const fallbackHooks = ({ fallbackVideos, dispatch }) => ({
   addFallbackVideo: () => dispatch(actions.video.updateField({ fallbackVideos: [...fallbackVideos, ''] })),
+  /**
+   * Deletes the first occurrence of the given videoUrl from the fallbackVideos list
+   * @param {string} videoUrl - the video URL to delete
+   */
   deleteFallbackVideo: (videoUrl) => {
-    const updatedFallbackVideos = fallbackVideos.splice(fallbackVideos.indexOf(videoUrl), 1);
+    const index = fallbackVideos.findIndex(video => video === videoUrl);
+    const updatedFallbackVideos = [
+      ...fallbackVideos.slice(0, index),
+      ...fallbackVideos.slice(index + 1),
+    ];
     dispatch(actions.video.updateField({ fallbackVideos: updatedFallbackVideos }));
   },
 });