EMULSIF-246: Convert Videos to support SDC

src/components/videos/video-embed.component.yml

@@ -0,0 +1,21 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Video Embed
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - video__type
+    - video_content
+  properties:
+    video__type:
+      type: string
+      title: Video Type
+      description: 'Specifies the type of video to embed. Possible values: embed, html5'
+      data: 'embed'
+    video_content:
+      type: string
+      title: Video Content
+      description: 'Directly specifies the HTML content for embed videos'
+      data: "<iframe title='Test Video' width='854' height='480' frameborder='0' allowfullscreen='allowfullscreen' src='https://www.youtube.com/embed/YRnVnlhjOBs?autoplay=0&amp;start=0'></iframe>"

src/components/videos/video-html5.component.yml

@@ -0,0 +1,23 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Video HTML5
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - video__type
+    - video__urls
+  properties:
+    video__type:
+      type: string
+      title: Video Type
+      description: 'Specifies the type of video to embed. Possible values: embed, html5'
+      data: 'html5'
+    video__urls:
+      type: array
+      title: Video URLs
+      description: 'List of video URLs for HTML5 videos'
+      data:
+        - 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4'
+        - 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-webm-file.webm'

src/components/videos/videos.stories.js

@@ -1,14 +1,18 @@
 import video from './video.twig';
 
-import videoEmbedData from './video-embed.yml';
-import videoHTML5Data from './video-html5.yml';
+import { props as videoEmbedProps } from './video-embed.component.yml';
+import { props as videoHTML5Props } from './video-html5.component.yml';
 
+import { mapDataToTwig } from '../../util/dataTransformers';
 import './video-embed';
 
 /**
  * Storybook Definition.
  */
 export default { title: 'Components/Media' };
 
+const videoEmbedData = mapDataToTwig(videoEmbedProps.properties);
+const videoHTML5Data = mapDataToTwig(videoHTML5Props.properties);
+
 export const videoEmbed = () => video(videoEmbedData);
 export const videoHtml5 = () => video(videoHTML5Data);