feat(storybook): Add Video block to storybook based on existing Volto…

… EEA add-on #331 from eea/feature-video-block

src/ui/Video/Video.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import cx from 'classnames';
+
+function Video({ children, align }) {
+  return <div className={cx('block video align', align)}>{children}</div>;
+}
+
+Video.Body = ({ children, align }) => (
+  <div className={cx('video-inner', { 'full-width': align === 'full' })}>
+    {children}
+  </div>
+);
+
+Video.Embed = ({
+  children,
+  url,
+  loop,
+  autoPlay,
+  align,
+  placeholder_image,
+  required_caption,
+}) => {
+  return (
+    <video
+      src={url}
+      controls={!autoPlay}
+      autoPlay={autoPlay}
+      muted={autoPlay}
+      loop={loop}
+      poster={placeholder_image}
+      type="video/mp4"
+    >
+      <track kind="captions" {...required_caption} />
+      {children}
+    </video>
+  );
+};
+
+Video.Track = ({ tracks }) =>
+  tracks.map((track, index) => {
+    return <track {...track} />;
+  });
+
+export default Video;

src/ui/Video/Video.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import Video from './Video';
+import englishTrack from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/video/demo-track-en.vtt';
+import romanianTrack from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/video/demo-track-ro.vtt';
+import greekTrack from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/video/demo-track-el.vtt';
+
+export default {
+  title: 'Components/Video',
+  component: Video,
+  argTypes: {
+    align: {
+      options: ['center', 'right', 'left'],
+      control: {
+        type: 'select',
+        labels: {
+          '': 'default',
+        },
+      },
+      defaultValue: 'center',
+      table: {
+        defaultValue: { summary: 'center' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Container>
+    <Video align={args.align}>
+      <Video.Body align={args.align}>
+        <Video.Embed {...args}>
+          <Video.Track tracks={args.tracks} />
+        </Video.Embed>
+      </Video.Body>
+    </Video>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  url: 'https://cmshare.eea.europa.eu/s/Xw7kH2TJGCibHJf/download',
+  autoPlay: false,
+  loop: false,
+  align: 'center',
+  placeholder_image: '',
+  required_caption: { src: englishTrack, srclang: 'en', label: 'English' },
+  tracks: [
+    { src: romanianTrack, kind: 'captions', srclang: 'ro', label: 'Română' },
+    { src: greekTrack, kind: 'captions', srclang: 'el', label: 'Ελλήνικά' },
+  ],
+};

src/ui/index.js

@@ -39,3 +39,5 @@ export RelatedContent from './Card/RelatedContent/RelatedContent';
 export Hero from './Hero/Hero';
 
 export Copyright from './Copyright/Copyright';
+
+export Video from './Video/Video';

theme/themes/eea/assets/video/demo-track-el.vtt

@@ -0,0 +1,11 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:11.999  line:80%
+[ΜΟΥΣΙΚΗ]
+
+00:00:12.000 --> 00:01:35.999 line:80%
+Αυτά τα components χρησιμοποιούνται ως παράδειγμα χρήσης.
+Αυτοί οι υπότιτλοι έχουν σκοπό την επίδειξη της λειτουργικότητας.
+
+00:01:36.000 --> 00:01:47.999 line:80%
+[ΜΟΥΣΙΚΗ]

theme/themes/eea/assets/video/demo-track-en.vtt

@@ -0,0 +1,11 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:11.999  line:80%
+[MUSIC]
+
+00:00:12.000 --> 00:01:35.999 line:80%
+These components are used for demo purposes.
+This track is an example to demonstrate the functionality.
+
+00:01:36.000 --> 00:01:47.999 line:80%
+[MUSIC]

theme/themes/eea/assets/video/demo-track-ro.vtt

@@ -0,0 +1,11 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:11.999  line:80%
+[MUZICĂ]
+
+00:00:12.000 --> 00:01:35.999 line:80%
+Aceste componente sunt utilizate în scopuri demonstrative.
+Această piesă este un exemplu pentru a demonstra funcționalitatea.
+
+00:01:36.000 --> 00:01:47.999 line:80%
+[MUZICĂ]