feat: video gallery thumbnail fallback

[ArturGaspar]

Description

Add a fallback when thumbnail fails to load in video gallery.

Before:

After:

Testing instructions

1. (Optional) Create a mock videos response with some broken thumbnails
   1. Enable mock video uploads (create waffle flag contentstore.mock_video_uploads enabled for everyone)
   2. Modify videos_index_json() as follows:

      def videos_index_json(course):
          """
          ...
          """
          # index_videos, __ = _get_index_videos(course)
          # A PNG that says "Test".
          test_image = ("data:image/png;base64,"
                        "iVBORw0KGgoAAAANSUhEUgAAAFsAAAA5AQMAAABjxMWLAAAABlBMVEX///8AAABVwtN+AAAACXBI"
                        "WXMAAA7EAAAOxAGVKw4bAAAAp0lEQVQokcXRvQ3DIBAF4EMuKG+DMAorZYIYy4XXOm/CCJQUiBci"
                        "czZdUkTySQg+IXj8EN1eHsjf8ByRWrNyjM2/4CP5xDjQklA6DIpB7ZjSyyTf11hxU3QdHHgSVhCv"
                        "A+wqmuMaouLRUM4ZYIdcEOQBvl4IFucGrbAM4EVzPt1+hm5B0Q66yYBV7DLch0NHmk121K+NagDS"
                        "1ymEqpgT+Uzzz799R70BcoGEnUOQPZMAAAAASUVORK5CYII=")
          index_videos = [
              {
                  'edx_video_id': 'aaaaaaaa-aaaa-4aaa-aaaa-aaaaaaaaaaaa',
                  'client_video_id': 'video.mp4',
                  'created': '1970-01-01T00:00:00Z',
                  'duration': 42.5,
                  'status': 'upload',
                  'course_video_image_url': test_image
              },
              {
                  'edx_video_id': 'aaaaaaaa-aaaa-4aaa-aaaa-aaaaaaaaaaaa',
                  'client_video_id': 'video.mp4',
                  'created': '1970-01-01T00:00:00Z',
                  'duration': 42.5,
                  'status': 'upload',
                  'course_video_image_url': 'https://video/images/1234.jpg'
              }
          ]
          return JsonResponse({"videos": index_videos}, status=200)
      

2. Open video gallery
   1. Enable the new video editor (create waffle flags new_core_editors.use_new_video_editor and new_core_editors.use_video_gallery_flow enabled for everyone)
   2. Create a course unit with a video
   3. Edit the video (should open in new editor)
   4. Click "< Replace video" to go to the gallery
3. See that an icon is shown instead of a broken image

[openedx-webhooks]

Thanks for the pull request, @ArturGaspar! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[mphilbrick211]

Hi @openedx/teaching-and-learning! This is ready for review.

[farhaanbukhsh]

Maybe we can use https://paragon-openedx.netlify.app/foundations/css-utilities for the classes from here.

[farhaanbukhsh]

👍

• ✅ I tested this on devstack and it looks good to me
• ✅ I read through the code
• ❌ I checked for accessibility issues
• ❌ Includes documentation
• ❌ I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository.

[mphilbrick211]

@openedx/teaching-and-learning - this is ready for review / merge. Thanks!

[tecoholic]

@navinkarkera Another PR to tag with "jira:2u" label.

cc: @cablaa77

[openedx-webhooks]

I've created issue TNL-11196 in the private 2U Jira.

[KristinAoki]

Why is image used instead of Paragon's <Icon /> component with a Paragon icon?

[ArturGaspar]

@KristinAoki The VideocamOutlined icon was added in Paragon v21.6.0 (47e4379).

The latest release on https://www.npmjs.com/package/@edx/paragon is 21.5.6 and a notice says that future versions will be publised as https://www.npmjs.com/package/@openedx/paragon.

Installing @openedx/paragon and importing VideocamOutlined from it works, but is it a good idea?

[KristinAoki]

I would probably wait for the whole repo to switch over to @openedx/paragon. Consider this resolved.

[openedx-webhooks]

@ArturGaspar 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.