video stage

storybook/stories/sections/video-stage/VideoStage.stories.js

@@ -0,0 +1,51 @@
+import {createVideoStage} from "./VideoStageComponent";
+
+export default {
+  title: 'Sections/Video Stage',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    imageSrc: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+    kicker: 'Noch 7 Tage offen',
+    headline: 'Jetzt und digital mitreden',
+    copy: 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
+    buttonCta: {
+      label: 'Jetzt beteiligen',
+      link: '#',
+      target: '_self',
+    },
+  },
+  argTypes: {
+    imageSrc: {
+      name: 'Bild-Url',
+    },
+    kicker: {
+      name: 'Dachzeile',
+    },
+    headline: {
+      name: 'Überschrift',
+    },
+    copy: {
+      name: 'Kurztext',
+    },
+    buttonCta: {
+      name: 'Button',
+    },
+  },
+}
+
+const Template = ({...args}) => {
+  return createVideoStage({...args});
+};
+
+export const VideoIntro = Template.bind({});
+VideoIntro.args = {
+  imageSrc: null,
+  kicker: 'IHK Musterstadt Beteiligungsportal',
+  buttonCta: {
+    label: 'Mehr erfahren',
+    link: '#',
+    target: '_self',
+  },
+};

storybook/stories/sections/video-stage/VideoStageComponent.js

@@ -0,0 +1,72 @@
+import './video-stage.scss';
+import $ from "jquery";
+import VideoStage from "./video-stage";
+import {createElement} from "../../_global/scripts/helpers";
+import {createButton} from "../../atoms/button/ButtonComponent";
+
+export const createVideoStage = ({
+  videoSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+  imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+  kicker = 'Noch 7 Tage offen',
+  headline = 'Jetzt und digital mitreden',
+  copy = 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
+  buttonCta = {
+    label: 'Jetzt beteiligen',
+    link: '#',
+    target: '_self',
+  },
+  isFirstElement = false,
+}) => {
+  const hasVideo = videoSrc && videoSrc.length > 0;
+  const hasImage = imageSrc && imageSrc.length > 0;
+  const videoStage = createElement('section', ['video-stage']);
+  if(hasVideo) {
+    const videoContainer = createElement('div', ['video-container'], null, videoStage);
+    const video = createElement('video', [], null, videoContainer);
+    video.autoplay = true;
+    video.loop = true;
+    video.muted = true;
+    // video.controls = true;
+    const source = createElement('source', [], null, video);
+    source.type = "video/mp4";
+    source.src = "https://s3.amazonaws.com/akamai.netstorage/HD_downloads/Orion_SM.mp4";
+    if (hasImage) {
+      video.poster = imageSrc;
+    }
+    const controls = createElement('div', ['video--controls'], null, videoContainer);
+    const playPause = createElement('span', ['video--play-pause'], null, controls);
+    const muteUnmute = createElement('span', ['video--mute-unmute'], null, controls);
+  }
+  const container = createElement('div', ['container'], null, videoStage);
+  const row = createElement('div', ['row'], null, container);
+  const col = createElement('div', ['col'], null, row);
+  const tb = createElement('div', ['text-box'], null, col);
+
+  if (isFirstElement) {
+    videoStage.classList.add('first-element');
+  }
+
+  if (kicker && kicker.length > 0) {
+    createElement('p', ['kicker'], kicker, tb);
+  }
+  createElement('h1', ['like-h2'], headline, tb);
+  createElement('p', [], copy, tb);
+  if (buttonCta) {
+    const button = createButton({
+      elementType: 'a',
+      link: buttonCta.link,
+      color: 'white',
+      label: buttonCta.label,
+      iconPosition: 'icon-right',
+      icon: 'small-arrow-right-simple',
+    });
+    tb.appendChild(button);
+  }
+
+  $(document).ready(() => {
+    // console.log($(videoStage));
+    const n = new VideoStage($(videoStage));
+  })
+
+  return videoStage;
+}

storybook/stories/sections/video-stage/video-stage.js

@@ -0,0 +1,42 @@
+import $ from "jquery";
+
+class VideoStage {
+    constructor(videoStage) {
+        // setTimeout(function() {
+        //     videoStage.find("video").play();
+        // }, 5000);
+        $(videoStage.find(".video--play-pause")).on("click", (e) => {
+            e.preventDefault();
+            let t = $(e.currentTarget);
+            this.playPause(videoStage.find("video")[0], t);
+        });
+        $(videoStage.find(".video--mute-unmute")).on("click", (e) => {
+            e.preventDefault();
+            let t = $(e.currentTarget);
+            this.muteUnmute(videoStage.find("video")[0], t);
+        });
+    }
+
+    playPause (video, target) {
+        if (video.paused) {
+            video.play();
+            target.removeClass("paused");
+        } else {
+            video.pause();
+            target.addClass("paused");
+        }
+    }
+
+    muteUnmute(video, target) {
+        if (video.muted) {
+            video.muted = false;
+            target.addClass("unmuted");
+        }
+        else {
+            video.muted = true;
+            target.removeClass("unmuted");
+        }
+    }
+}
+
+export default VideoStage;

storybook/stories/sections/video-stage/video-stage.scss

@@ -0,0 +1,98 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.video-stage {
+  background: red;
+  color: white;
+  min-height: calc(18vw + 300px);
+  display: flex;
+  align-items: center;
+  margin: 0;
+  position: relative;
+
+  .video-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: blue;
+
+    video {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      background: green;
+    }
+    .video--controls {
+      position: absolute;
+      left: 20px;
+      bottom: 20px;
+      display: flex;
+      gap: 20px;
+    }
+    .video--play-pause,
+    .video--mute-unmute {
+      display: block;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+      &:before {
+        font-family: 'Icons', sans-serif;
+        font-size: var(--icon-size);
+        line-height: 1;
+      }
+      &:hover {
+        color: var(--theme-color-secondary);
+      }
+    }
+    .video--play-pause {
+      &:before {
+        @include icon-sanduhr;
+      }
+      &.paused {
+        &:before {
+          @include icon-schloss;
+        }
+      }
+    }
+    .video--mute-unmute {
+      &:before {
+        @include icon-stern;
+      }
+      &.unmuted {
+        &:before {
+          @include icon-schliessen;
+        }
+      }
+    }
+  }
+
+  .container {
+    position: relative;
+  }
+
+  &.first-element {
+    @media(min-width: 1400px) {
+      margin-top: -60px;
+    }
+  }
+
+  .kicker {
+    margin-bottom: 0.6em;
+  }
+
+  .btn {
+    margin-top: 0.8em;
+    margin-bottom: 0.4em;
+  }
+
+  .text-box {
+    max-width: 580px;
+    padding: calc(50px + 1vw) 0;
+  }
+}