diff --git a/src/editors/containers/VideoGallery/hooks.test.js b/src/editors/containers/VideoGallery/hooks.test.js
index 3dd163636..3015ad1f8 100644
--- a/src/editors/containers/VideoGallery/hooks.test.js
+++ b/src/editors/containers/VideoGallery/hooks.test.js
@@ -36,6 +36,7 @@ jest.mock('../../data/redux', () => ({
 jest.mock('../../hooks', () => ({
   ...jest.requireActual('../../hooks'),
   navigateCallback: jest.fn((args) => ({ navigateCallback: args })),
+  navigateTo: jest.fn((args) => ({ navigateTo: args })),
 }));
 
 const state = new MockUseState(hooks);
@@ -194,6 +195,23 @@ describe('VideoGallery hooks', () => {
       beforeEach(() => {
         load();
       });
+      describe('selectBtnProps', () => {
+        test('on click, if sets selection', () => {
+          const highlighted = 'videoId';
+          state.mockVal(state.keys.highlighted, highlighted);
+          load();
+          expect(appHooks.navigateTo).not.toHaveBeenCalled();
+          hook.selectBtnProps.onClick();
+          expect(appHooks.navigateTo).toHaveBeenCalled();
+        });
+        test('on click, sets showSelectVideoError to true if nothing is highlighted', () => {
+          state.mockVal(state.keys.highlighted, null);
+          load();
+          hook.selectBtnProps.onClick();
+          expect(appHooks.navigateTo).not.toHaveBeenCalled();
+          expect(state.setState.showSelectVideoError).toHaveBeenCalledWith(true);
+        });
+      });
       describe('galleryProps', () => {
         it('returns highlighted value, initialized to null', () => {
           expect(hook.galleryProps.highlighted).toEqual(state.stateVals.highlighted);
@@ -229,6 +247,17 @@ describe('VideoGallery hooks', () => {
       });
     });
   });
+  describe('fileInputHooks', () => {
+    test('click calls current.click on the ref', () => {
+      jest.spyOn(hooks, hookKeys.handleVideoUpload).mockImplementationOnce();
+      expect(hooks.handleVideoUpload).not.toHaveBeenCalled();
+      hook = hooks.fileInputProps();
+      expect(hooks.handleVideoUpload).toHaveBeenCalled();
+      expect(appHooks.navigateTo).not.toHaveBeenCalled();
+      hook.click();
+      expect(appHooks.navigateTo).toHaveBeenCalled();
+    });
+  });
   describe('videoProps', () => {
     const videoList = {
       galleryProps: 'some gallery props',
diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx
index 250883f16..ccbab262b 100644
--- a/src/editors/containers/VideoGallery/index.test.jsx
+++ b/src/editors/containers/VideoGallery/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import SelectionModal from '../../sharedComponents/SelectionModal';
 import hooks from './hooks';
@@ -7,6 +7,8 @@ import * as module from '.';
 
 jest.mock('../../sharedComponents/SelectionModal', () => 'SelectionModal');
 
+const mockHandleVideoUploadHook = jest.fn();
+
 jest.mock('./hooks', () => ({
   buildVideos: jest.fn(() => []),
   videoProps: jest.fn(() => ({
@@ -40,7 +42,7 @@ jest.mock('./hooks', () => ({
     selectBtnProps: { select: 'btnProps' },
   })),
   handleCancel: jest.fn(),
-  handleVideoUpload: jest.fn(),
+  handleVideoUpload: () => mockHandleVideoUploadHook,
 }));
 
 jest.mock('../../data/redux', () => ({
@@ -70,6 +72,7 @@ describe('VideoGallery', () => {
     const videoProps = hooks.videoProps();
     beforeEach(() => {
       el = shallow(<module.VideoGallery {...props} />);
+      mockHandleVideoUploadHook.mockReset();
     });
     it('provides confirm action, forwarding selectBtnProps from imgHooks', () => {
       expect(el.find(SelectionModal).props().selectBtnProps).toEqual(
@@ -90,5 +93,12 @@ describe('VideoGallery', () => {
     it('provides a FileInput component with fileInput props from imgHooks', () => {
       expect(el.find(SelectionModal).props().fileInput).toMatchObject(videoProps.fileInput);
     });
+    it('handleVideoUpload called if there are no videos', () => {
+      el = mount(<module.VideoGallery {...props} />);
+      expect(mockHandleVideoUploadHook).not.toHaveBeenCalled();
+      el.setProps({ rawVideos: {}, isLoaded: true });
+      el.mount();
+      expect(mockHandleVideoUploadHook).toHaveBeenCalled();
+    });
   });
 });
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
index 76b3b224e..975e6dcea 100644
--- a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
@@ -74,6 +74,7 @@ exports[`VideoUploadEditor renders without errors 1`] = `
           />
           <button
             class="border-start-0"
+            data-testid="inputSaveButton"
             type="button"
           >
             <icon
@@ -151,6 +152,7 @@ exports[`VideoUploader renders without errors 1`] = `
         />
         <button
           class="border-start-0"
+          data-testid="inputSaveButton"
           type="button"
         >
           <icon
diff --git a/src/editors/containers/VideoUploadEditor/index.jsx b/src/editors/containers/VideoUploadEditor/index.jsx
index 726327fcf..54780e719 100644
--- a/src/editors/containers/VideoUploadEditor/index.jsx
+++ b/src/editors/containers/VideoUploadEditor/index.jsx
@@ -70,7 +70,7 @@ export const VideoUploader = ({ onUpload, errorMessage }) => {
             onKeyDown={(e) => e.key === 'Enter' && handleSaveButtonClick()}
             onClick={(event) => event.preventDefault()}
           />
-          <button className="border-start-0" type="button" onClick={handleSaveButtonClick}>
+          <button className="border-start-0" type="button" onClick={handleSaveButtonClick} data-testid="inputSaveButton">
             <Icon src={ArrowForward} className="rounded-circle text-dark" />
           </button>
         </div>
diff --git a/src/editors/containers/VideoUploadEditor/index.test.jsx b/src/editors/containers/VideoUploadEditor/index.test.jsx
index 4460d3d73..8f256e457 100644
--- a/src/editors/containers/VideoUploadEditor/index.test.jsx
+++ b/src/editors/containers/VideoUploadEditor/index.test.jsx
@@ -4,6 +4,7 @@ import { render, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import VideoUploadEditor, { VideoUploader } from '.';
 import * as hooks from './hooks';
+import * as appHooks from '../../hooks';
 
 const mockDispatch = jest.fn();
 const mockOnUpload = jest.fn();
@@ -11,6 +12,10 @@ const mockOnUpload = jest.fn();
 jest.mock('react-redux', () => ({
   useDispatch: () => mockDispatch,
 }));
+jest.mock('../../hooks', () => ({
+  ...jest.requireActual('../../hooks'),
+  navigateTo: jest.fn((args) => ({ navigateTo: args })),
+}));
 
 const defaultEditorProps = {
   intl: {},
@@ -52,6 +57,16 @@ describe('VideoUploadEditor', () => {
     expect(input.value).toBe('test value');
   });
 
+  it('click on the save button', () => {
+    const { getByPlaceholderText, getByTestId } = renderEditorComponent();
+    const testValue = 'test vale';
+    const input = getByPlaceholderText('Paste your video ID or URL');
+    fireEvent.change(input, { target: { value: testValue } });
+    const button = getByTestId('inputSaveButton');
+    fireEvent.click(button);
+    expect(appHooks.navigateTo).toHaveBeenCalled();
+  });
+
   it('shows error message with unsupported files', async () => {
     const { getByTestId, findByText } = renderEditorComponent();
     const fileInput = getByTestId('fileInput');
diff --git a/src/editors/data/redux/thunkActions/video.js b/src/editors/data/redux/thunkActions/video.js
index 41a273129..d407b9d48 100644
--- a/src/editors/data/redux/thunkActions/video.js
+++ b/src/editors/data/redux/thunkActions/video.js
@@ -18,7 +18,7 @@ export const loadVideoData = (selectedVideoId, selectedVideoUrl) => (dispatch, g
       edx_video_id: selectedVideo.edx_video_id,
       thumbnail: selectedVideo.course_video_image_url,
       duration: selectedVideo.duration,
-      transcripts: selectedVideo.transcripts,
+      transcriptsFromSelected: selectedVideo.transcripts,
       selectedVideoTranscriptUrls: selectedVideo.transcript_urls,
     };
   }
@@ -36,7 +36,7 @@ export const loadVideoData = (selectedVideoId, selectedVideoUrl) => (dispatch, g
   // Use the selected video url first
   const videoSourceUrl = selectedVideoUrl != null ? selectedVideoUrl : videoUrl;
   const [licenseType, licenseOptions] = module.parseLicense({ licenseData: studioView, level: 'block' });
-  const transcripts = rawVideoData.transcripts ? rawVideoData.transcripts
+  const transcripts = rawVideoData.transcriptsFromSelected ? rawVideoData.transcriptsFromSelected
     : module.parseTranscripts({ transcriptsData: studioView });
 
   const [courseLicenseType, courseLicenseDetails] = module.parseLicense({
diff --git a/src/editors/data/services/cms/urls.test.js b/src/editors/data/services/cms/urls.test.js
index 47dbd5cff..a389ae008 100644
--- a/src/editors/data/services/cms/urls.test.js
+++ b/src/editors/data/services/cms/urls.test.js
@@ -14,6 +14,7 @@ import {
   checkTranscriptsForImport,
   replaceTranscript,
   courseAdvanceSettings,
+  mediaTranscriptURL,
   videoFeatures,
   courseVideos,
 } from './urls';
@@ -145,4 +146,11 @@ describe('cms url methods', () => {
         .toEqual(`${studioEndpointUrl}/videos/${learningContextId}`);
     });
   });
+  describe('mediaTranscriptURL', () => {
+    it('returns url with studioEndpointUrl', () => {
+      const transcriptUrl = 'this-is-a-transcript';
+      expect(mediaTranscriptURL({ studioEndpointUrl, transcriptUrl }))
+        .toEqual(`${studioEndpointUrl}${transcriptUrl}`);
+    });
+  });
 });
diff --git a/src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx b/src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx
index cd8577d18..5eb49456f 100644
--- a/src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx
+++ b/src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx
@@ -5,19 +5,31 @@ import { Image } from '@edx/paragon';
 import { GalleryCard } from './GalleryCard';
 
 describe('GalleryCard component', () => {
-  const img = {
+  const asset = {
     externalUrl: 'props.img.externalUrl',
     displayName: 'props.img.displayName',
     dateAdded: 12345,
   };
   let el;
   beforeEach(() => {
-    el = shallow(<GalleryCard asset={img} />);
+    el = shallow(<GalleryCard asset={asset} />);
   });
-  test(`snapshot: dateAdded=${img.dateAdded}`, () => {
+  test(`snapshot: dateAdded=${asset.dateAdded}`, () => {
     expect(el).toMatchSnapshot();
   });
   it('loads Image with src from image external url', () => {
-    expect(el.find(Image).props().src).toEqual(img.externalUrl);
+    expect(el.find(Image).props().src).toEqual(asset.externalUrl);
+  });
+  it('snapshot with status badge', () => {
+    el = shallow(<GalleryCard asset={{ ...asset, status: 'failed', statusBadgeVariant: 'danger' }} />);
+    expect(el).toMatchSnapshot();
+  });
+  it('snapshot with duration badge', () => {
+    el = shallow(<GalleryCard asset={{ ...asset, duration: 60 }} />);
+    expect(el).toMatchSnapshot();
+  });
+  it('snapshot with duration transcripts', () => {
+    el = shallow(<GalleryCard asset={{ ...asset, transcripts: ['es'] }} />);
+    expect(el).toMatchSnapshot();
   });
 });
diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
index d8296c5b1..71c91147a 100644
--- a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
+++ b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
@@ -1,5 +1,282 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GalleryCard component snapshot with duration badge 1`] = `
+<SelectableBox
+  className="card bg-white"
+  key="props.img.externalUrl"
+  style={
+    Object {
+      "border": "none",
+      "boxShadow": "none",
+      "padding": "10px 20px",
+    }
+  }
+  type="radio"
+>
+  <div
+    className="card-div d-flex flex-row flex-nowrap"
+  >
+    <div
+      style={
+        Object {
+          "height": "100px",
+          "margin": "18px 0 0 0",
+          "position": "relative",
+          "width": "200px",
+        }
+      }
+    >
+      <Image
+        src="props.img.externalUrl"
+        style={
+          Object {
+            "border": "none",
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+      <Component
+        style={
+          Object {
+            "backgroundColor": "black",
+            "bottom": "6px",
+            "position": "absolute",
+            "right": "6px",
+          }
+        }
+        variant="dark"
+      >
+        01:00
+      </Component>
+    </div>
+    <div
+      className="card-text p-3"
+      style={
+        Object {
+          "marginTop": "10px",
+        }
+      }
+    >
+      <h3
+        className="text-primary-500"
+      >
+        props.img.displayName
+      </h3>
+      <p
+        className="text-gray-500"
+        style={
+          Object {
+            "fontSize": "11px",
+          }
+        }
+      >
+        <FormattedMessage
+          defaultMessage="Added {date} at {time}"
+          description="File date-added string"
+          id="authoring.selectionmodal.addedDate.label"
+          values={
+            Object {
+              "date": <FormattedDate
+                value={12345}
+              />,
+              "time": <FormattedTime
+                value={12345}
+              />,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+</SelectableBox>
+`;
+
+exports[`GalleryCard component snapshot with duration transcripts 1`] = `
+<SelectableBox
+  className="card bg-white"
+  key="props.img.externalUrl"
+  style={
+    Object {
+      "border": "none",
+      "boxShadow": "none",
+      "padding": "10px 20px",
+    }
+  }
+  type="radio"
+>
+  <div
+    className="card-div d-flex flex-row flex-nowrap"
+  >
+    <div
+      style={
+        Object {
+          "height": "100px",
+          "margin": "18px 0 0 0",
+          "position": "relative",
+          "width": "200px",
+        }
+      }
+    >
+      <Image
+        src="props.img.externalUrl"
+        style={
+          Object {
+            "border": "none",
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+    </div>
+    <div
+      className="card-text p-3"
+      style={
+        Object {
+          "marginTop": "10px",
+        }
+      }
+    >
+      <h3
+        className="text-primary-500"
+      >
+        props.img.displayName
+      </h3>
+      <div
+        style={
+          Object {
+            "margin": "0 0 5px 0",
+          }
+        }
+      >
+        <injectIntl(ShimmedIntlComponent)
+          transcripts={
+            Array [
+              "es",
+            ]
+          }
+        />
+      </div>
+      <p
+        className="text-gray-500"
+        style={
+          Object {
+            "fontSize": "11px",
+          }
+        }
+      >
+        <FormattedMessage
+          defaultMessage="Added {date} at {time}"
+          description="File date-added string"
+          id="authoring.selectionmodal.addedDate.label"
+          values={
+            Object {
+              "date": <FormattedDate
+                value={12345}
+              />,
+              "time": <FormattedTime
+                value={12345}
+              />,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+</SelectableBox>
+`;
+
+exports[`GalleryCard component snapshot with status badge 1`] = `
+<SelectableBox
+  className="card bg-white"
+  key="props.img.externalUrl"
+  style={
+    Object {
+      "border": "none",
+      "boxShadow": "none",
+      "padding": "10px 20px",
+    }
+  }
+  type="radio"
+>
+  <div
+    className="card-div d-flex flex-row flex-nowrap"
+  >
+    <div
+      style={
+        Object {
+          "height": "100px",
+          "margin": "18px 0 0 0",
+          "position": "relative",
+          "width": "200px",
+        }
+      }
+    >
+      <Image
+        src="props.img.externalUrl"
+        style={
+          Object {
+            "border": "none",
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+      <Component
+        style={
+          Object {
+            "left": "6px",
+            "position": "absolute",
+            "top": "6px",
+          }
+        }
+        variant="danger"
+      >
+        failed
+      </Component>
+    </div>
+    <div
+      className="card-text p-3"
+      style={
+        Object {
+          "marginTop": "10px",
+        }
+      }
+    >
+      <h3
+        className="text-primary-500"
+      >
+        props.img.displayName
+      </h3>
+      <p
+        className="text-gray-500"
+        style={
+          Object {
+            "fontSize": "11px",
+          }
+        }
+      >
+        <FormattedMessage
+          defaultMessage="Added {date} at {time}"
+          description="File date-added string"
+          id="authoring.selectionmodal.addedDate.label"
+          values={
+            Object {
+              "date": <FormattedDate
+                value={12345}
+              />,
+              "time": <FormattedTime
+                value={12345}
+              />,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+</SelectableBox>
+`;
+
 exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
 <SelectableBox
   className="card bg-white"