fix: allow thumbnail upload on Videos page if no thumbnail (#2388)

* fix: allow thumbnail upload if no thumbnail

* fix: improve thumbnail upload impl

* test: fix tests

* test: fix tests

* fix: do not show thumbnail upload if not allowed

* test: fix coverage

* test: add thumbnail test

* fix: display thumbnail overlay when video status is success

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

@@ -47,21 +47,30 @@ const VideoThumbnail = ({
   const isFailed = VIDEO_FAILURE_STATUSES.includes(status);
   const failedMessage = intl.formatMessage(messages.failedCheckboxLabel);
 
-  const showThumbnail = allowThumbnailUpload && thumbnail && isUploaded;
+  const showThumbnail = allowThumbnailUpload && isUploaded;
 
   return (
     <div className="video-thumbnail row justify-content-center align-itmes-center">
-      {allowThumbnailUpload && showThumbnail && <div className="thumbnail-overlay" />}
+      {allowThumbnailUpload && isUploaded && <div className="thumbnail-overlay" />}
       {showThumbnail && !thumbnailError && pageLoadStatus === RequestStatus.SUCCESSFUL ? (
         <>
           <div className="border rounded">
-            <Image
+            { thumbnail ? (
-              style={imageSize}
+              <Image
-              className="m-1 bg-light-300"
+                style={imageSize}
-              src={thumbnail}
+                className="m-1 bg-light-300"
-              alt={intl.formatMessage(messages.thumbnailAltMessage, { displayName })}
+                src={thumbnail}
-              onError={() => setThumbnailError(true)}
+                alt={intl.formatMessage(messages.thumbnailAltMessage, { displayName })}
-            />
+                onError={() => setThumbnailError(true)}
+              />
+            ) : (
+              <div
+                className="row justify-content-center align-items-center m-0"
+                style={imageSize}
+              >
+                <Icon src={VideoFile} style={{ height: '48px', width: '48px' }} />
+              </div>
+            )}
           </div>
           <div className="add-thumbnail" data-testid={`video-thumbnail-${id}`}>
             <Button

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import VideoThumbnail from './VideoThumbnail';
+import { VIDEO_SUCCESS_STATUSES } from './data/constants';
+import { RequestStatus } from '../../data/constants';
+
+it('shows fallback icon if thumbnail fails to load', () => {
+  const { container } = render(
+    <IntlProvider locale="en">
+      <VideoThumbnail
+        thumbnail="http://bad-url/image.png"
+        displayName="Test Video"
+        id="vid1"
+        imageSize={{ width: '100px', height: '100px' }}
+        handleAddThumbnail={jest.fn()}
+        videoImageSettings={{ videoImageUploadEnabled: true, supportedFileFormats: { jpg: 'image/jpg' } }}
+        status={VIDEO_SUCCESS_STATUSES[0]}
+        pageLoadStatus={RequestStatus.SUCCESSFUL}
+      />
+    </IntlProvider>,
+  );
+
+  const image = screen.getByRole('img', { name: /video thumbnail/i });
+  expect(image).toBeInTheDocument();
+  fireEvent.error(image);
+
+  expect(screen.queryByRole('img', { name: /video thumbnail/i })).toBeNull();
+
+  const fallbackSvg = container.querySelector('svg[role="img"]');
+  expect(fallbackSvg).toBeInTheDocument();
+});