Merge branch '324319-add-video-blob-viewer' into 'master'

Add video blob viewer

See merge request gitlab-org/gitlab!71173

app/assets/javascripts/repository/components/blob_viewers/index.js

@@ -10,6 +10,8 @@ export const loadViewer = (type) => {
       return () => import(/* webpackChunkName: 'blob_download_viewer' */ './download_viewer.vue');
     case 'image':
       return () => import(/* webpackChunkName: 'blob_image_viewer' */ './image_viewer.vue');
+    case 'video':
+      return () => import(/* webpackChunkName: 'blob_video_viewer' */ './video_viewer.vue');
     default:
       return null;
   }
@@ -31,5 +33,8 @@ export const viewerProps = (type, blob) => {
       url: blob.rawPath,
       alt: blob.name,
     },
+    video: {
+      url: blob.rawPath,
+    },
   }[type];
 };

app/assets/javascripts/repository/components/blob_viewers/video_viewer.vue

+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-text-center gl-p-7 gl-bg-gray-50">
+    <video :src="url" controls data-testid="video" class="gl-max-w-full"></video>
+  </div>
+</template>

spec/frontend/repository/components/blob_viewers/video_viewer_spec.js

+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import VideoViewer from '~/repository/components/blob_viewers/video_viewer.vue';
+
+describe('Video Viewer', () => {
+  let wrapper;
+
+  const propsData = { url: 'some/video.mp4' };
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(VideoViewer, { propsData });
+  };
+
+  const findVideo = () => wrapper.findByTestId('video');
+
+  it('renders a Video element', () => {
+    createComponent();
+
+    expect(findVideo().exists()).toBe(true);
+    expect(findVideo().attributes('src')).toBe(propsData.url);
+    expect(findVideo().attributes('controls')).not.toBeUndefined();
+  });
+});