refactor: remove thumbnail for non-edX videos & allow removing fallback URLs (#1241)

* refactor: remove thumbnail from non-edx videos * fix: when deleting a fallback URL the app crashed * refactor: simplify conditional rendering
2024-09-16 10:53:05 -05:00
parent 121ced42ec
commit 80e3592669
3 changed files with 16 additions and 123 deletions
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/snapshots/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/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`;
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
+++ b/src/editors/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,7 +90,7 @@ const ThumbnailWidget = ({
            src={thumbnailSrc || thumbnail}
            alt={intl.formatMessage(messages.thumbnailAltText)}
          />
-          {(allowThumbnailUpload && edxVideo) ? (
+          {allowThumbnailUpload && (
            <IconButtonWithTooltip
              tooltipPlacement="top"
              tooltipContent={intl.formatMessage(messages.deleteThumbnail)}
@@ -98,7 +98,7 @@ const ThumbnailWidget = ({
              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>
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
+++ b/src/editors/containers/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 }));
  },
 });