responsive image/video fixes

generators/app/templates/dotfiles/.editorconfig

@@ -14,4 +14,4 @@ insert_final_newline = true
 [*.{json,yml}]
 indent_style = space
 indent_size = 2
-insert_final_newline = true
+insert_final_newline = true

generators/app/templates/dotfiles/.gitignore

@@ -87,4 +87,4 @@ Thumbs.db
 .sass-cache/*
 node_modules/*
 bower_components/*
-/node_modules/*
+/node_modules/*

generators/app/templates/dotfiles/.prettierignore

@@ -12,4 +12,4 @@ bower_components/
 .Spotlight-V100
 .Trashes
 ehthumbs.db
-Thumbs.db
+Thumbs.db

generators/app/templates/dotfiles/.stylelintignore

@@ -1,5 +1,5 @@
 dist/
 node_modules/
 bower_components/
-src/styles/settings/**/*.scss
-src/styles/tools/**/*.scss
+static/scss/settings/**/*.scss
+static/scss/tools/**/*.scss

generators/app/templates/static/js/components/ResponsiveVideo.js

@@ -1,9 +1,9 @@
-import { getViewportSize } from "../utilities/GetViewportSize";
+import { getViewportWidth } from "../utilities/Viewport";
 
 /**
  * Responsive video
- * reads mobile, tablet and desktop data attributes containing video url (source) and poster
- * serves the correct video and poster based on viewport width
+ * reads sd, hd, fhd and qhd data attributes containing video posters
+ * serves the correct poster based on viewport width
  */
 export default class ResponsiveVideo {
     constructor(container = document) {
@@ -38,19 +38,13 @@ export default class ResponsiveVideo {
      */
     initVideo() {
         this.videos.forEach((video) => {
-            const source = video.querySelector("source");
-
             // check if video is lazy loaded
             if (video.classList.contains(this.DOM.lazy)) {
                 // set data-poster attribute from video data for lazy loading
-                video.setAttribute("data-poster", this.getVideoData(video).poster);
-                // set data-src attribute from video data for lazy loading
-                source.setAttribute("data-src", this.getVideoData(video).src);
+                video.setAttribute("data-poster", this.getPoster(video));
             } else {
                 // set video poster from video data
-                video.setAttribute("poster", this.getVideoData(video).poster);
-                // set video src from video data
-                source.setAttribute("src", this.getVideoData(video).src);
+                video.setAttribute("poster", this.getPoster(video));
             }
             // resets the media element to its initial state and begins the process of selecting a media source
             // and loading the media in preparation for playback to begin at the beginning.
@@ -60,63 +54,41 @@ export default class ResponsiveVideo {
     }
 
     /**
-     * Get video data
-     * returns video data object from data attributes (source and poster) based on viewport width
+     * Get poster
+     * returns video poster based on viewport width
      * @param video
-     * @returns {{src: string, poster: string}}
+     * @returns {string}
      */
-    getVideoData(video) {
-        if (
-            video.hasAttribute("data-widescreen-video") &&
-            video.getAttribute("data-widescreen-video") !== "" &&
-            video.hasAttribute("data-widescreen-poster") &&
-            video.getAttribute("data-widescreen-poster") !== "" &&
-            getViewportSize() >= 1921
-        ) {
-            return {
-                src: video.dataset.widescreenVideo,
-                poster: video.dataset.widescreenPoster,
-            };
-        } else if (
-            video.hasAttribute("data-desktop-video") &&
-            video.getAttribute("data-desktop-video") !== "" &&
-            video.hasAttribute("data-desktop-poster") &&
-            video.getAttribute("data-desktop-poster") !== "" &&
-            getViewportSize() <= 1920 &&
-            getViewportSize() >= 1141
-        ) {
-            return {
-                src: video.dataset.desktopVideo,
-                poster: video.dataset.desktopPoster,
-            };
-        } else if (
-            video.hasAttribute("data-tablet-video") &&
-            video.getAttribute("data-tablet-video") !== "" &&
-            video.hasAttribute("data-tablet-poster") &&
-            video.getAttribute("data-tablet-poster") !== "" &&
-            getViewportSize() <= 1140 &&
-            getViewportSize() >= 641
-        ) {
-            return {
-                src: video.dataset.tabletVideo,
-                poster: video.dataset.tabletPoster,
-            };
-        } else if (
-            video.hasAttribute("data-mobile-video") &&
-            video.getAttribute("data-mobile-video") !== "" &&
-            video.hasAttribute("data-mobile-poster") &&
-            video.getAttribute("data-mobile-poster") !== "" &&
-            getViewportSize() <= 640
-        ) {
-            return {
-                src: video.dataset.mobileVideo,
-                poster: video.dataset.mobilePoster,
-            };
-        } else {
-            return {
-                src: video.dataset.desktopVideo,
-                poster: video.dataset.desktopPoster,
-            };
+    getPoster(video) {
+        const resolutions = [
+            {
+                type: "qhd",
+                condition: getViewportWidth() >= 1921,
+            },
+            {
+                type: "fhd",
+                condition: getViewportWidth() <= 1920 && getViewportWidth() >= 1141,
+            },
+            {
+                type: "hd",
+                condition: getViewportWidth() <= 1140 && getViewportWidth() >= 641,
+            },
+            {
+                type: "sd",
+                condition: getViewportWidth() <= 640,
+            },
+        ];
+
+        for (let resolution of resolutions) {
+            if (
+                video.hasAttribute(`data-${resolution.type}-poster`) &&
+                video.getAttribute(`data-${resolution.type}-poster`) !== "" &&
+                resolution.condition
+            ) {
+                return video.getAttribute(`data-${resolution.type}-poster`);
+            }
         }
+
+        return video.getAttribute("data-fhd-poster");
     }
 }

generators/app/templates/static/js/components/VideoOnScroll.js

@@ -46,6 +46,7 @@ export default class VideoOnScroll {
      */
     videoController(wrapper) {
         const video = wrapper.querySelector(this.DOM.video);
+
         if (!video) return;
 
         // pause video on load

generators/app/templates/static/js/components/VideoPlayButton.js

@@ -0,0 +1,82 @@
+/**
+ * Video play button
+ * control the play state of the video with play button
+ */
+export default class VideoPlayButton {
+    constructor(container = document) {
+        /**
+         * DOM elements
+         * @type {{wrapper: string, video: string, trigger: string, states: {playing: string}}}
+         */
+        this.DOM = {
+            wrapper: ".js-video-play-button",
+            video: ".js-video-play-button-video",
+            trigger: ".js-video-play-button-trigger",
+            states: {
+                playing: "is-playing",
+            },
+        };
+
+        /**
+         * Get list of wrapper DOM elements
+         * @type {NodeListOf<Element>}
+         */
+        this.wrappers = container.querySelectorAll(this.DOM.wrapper);
+    }
+
+    /**
+     * Init
+     */
+    init() {
+        if (this.wrappers.length < 1) {
+            return;
+        }
+        this.wrappers.forEach((wrapper) => this.videoController(wrapper));
+    }
+
+    /**
+     * Video controller
+     * uses: https://greensock.com/scrolltrigger/
+     * @param wrapper
+     */
+    videoController(wrapper) {
+        const video = wrapper.querySelector(this.DOM.video);
+        const trigger = wrapper.querySelector(this.DOM.trigger);
+
+        if (!video || !trigger) return;
+
+        trigger.addEventListener("click", (event) => {
+            event.preventDefault();
+            this.playVideo(video);
+        });
+
+        video.addEventListener("click", (event) => {
+            event.preventDefault();
+            !video.paused ? this.pauseVideo(video) : this.playVideo(video);
+        });
+
+        video.addEventListener("playing", () => {
+            wrapper.classList.add(this.DOM.states.playing);
+        });
+
+        video.addEventListener("pause", () => {
+            wrapper.classList.remove(this.DOM.states.playing);
+        });
+    }
+
+    /**
+     * Play video
+     * @param video
+     */
+    playVideo(video) {
+        video.play();
+    }
+
+    /**
+     * Pause video
+     * @param video
+     */
+    pauseVideo(video) {
+        video.pause();
+    }
+}

generators/app/templates/static/js/components/sliders/Slider.js

@@ -1,6 +1,6 @@
 import Swiper from "swiper";
 import { Autoplay, EffectCreative, EffectFade, FreeMode, Navigation, Pagination, Parallax, Scrollbar } from "swiper/modules";
-import { getViewportSize } from "../../utilities/GetViewportSize";
+import { getViewportWidth } from "../../utilities/Viewport";
 
 /**
  * Slider
@@ -257,6 +257,6 @@ export default class Slider {
      * @returns {number}
      */
     getResponsiveValue(value) {
-        return Math.floor(((value / (1440 * 0.01)) * getViewportSize()) / 100);
+        return Math.floor(((value / (1440 * 0.01)) * getViewportWidth()) / 100);
     }
 }

generators/app/templates/static/js/index.js

@@ -14,6 +14,7 @@ import "instant.page";
 import Lazy from "./components/Lazy";
 import ResponsiveVideo from "./components/ResponsiveVideo";
 import VideoOnScroll from "./components/VideoOnScroll";
+import VideoPlayButton from "./components/VideoPlayButton";
 import Accordion from "@bornfight/b-accordion";
 import ScrollToAnimation from "./components/animations/ScrollToAnimation";
 import AcceptanceInput from "./components/inputs/AcceptanceInput";
@@ -104,6 +105,13 @@ ready(() => {
     const videoOnScroll = new VideoOnScroll();
     videoOnScroll.init();
 
+    /**
+     * Video play button
+     * @type {VideoPlayButton}
+     */
+    const videoPlayButton = new VideoPlayButton();
+    videoPlayButton.init();
+
     /**
      * Accordion
      * @type {Accordion}

generators/app/templates/static/js/utilities/Viewport.js

@@ -0,0 +1,27 @@
+/**
+ * Get viewport width
+ * @returns {number}
+ */
+export const getViewportWidth = () => {
+    if (typeof window !== "undefined") {
+        if (window.innerWidth !== undefined) {
+            return window.innerWidth;
+        } else {
+            return document.documentElement.clientWidth;
+        }
+    }
+};
+
+/**
+ * Get viewport height
+ * @returns {number}
+ */
+export const getViewportHeight = () => {
+    if (typeof window !== "undefined") {
+        if (window.innerHeight !== undefined) {
+            return window.innerHeight;
+        } else {
+            return document.documentElement.clientHeight;
+        }
+    }
+};

generators/app/templates/static/js/utilities/WindowResize.js

@@ -24,7 +24,7 @@ export const windowResize = () => {
 
 /**
  * Debounce
- * debounces a function, ensuring it is not called again until releaseDelay milliseconds have passed
+ * de-bounces a function, ensuring it is not called again until releaseDelay milliseconds have passed
  * @param {function} func
  * @return {function}
  */

generators/app/templates/static/js/utilities/dom.js

@@ -8,13 +8,13 @@
  * Get html element
  * @type {HTMLElement}
  */
-const $html = document.documentElement
+const $html = document.documentElement;
 
 /**
  * Get document body
  * @type {HTMLElement}
  */
-const $body = document.body
+const $body = document.body;
 
 /**
  * DOM utilities export
@@ -23,7 +23,4 @@ const $body = document.body
  * $body: HTMLElement
  * }}
  */
-export {
-    $html,
-    $body,
-}
+export { $html, $body };

generators/app/templates/static/scss/components/_components.index.scss

@@ -7,6 +7,7 @@
 @import "components.hamburger";
 @import "components.media-loader";
 @import "components.media-overlay";
+@import "components.media-trigger";
 @import "components.responsive-media";
 @import "components.breadcrumbs";
 @import "components.button";

generators/app/templates/static/scss/components/_components.media-loader.scss

@@ -9,7 +9,7 @@
     justify-content: center;
     background-color: $white;
     transition: transform 1s $ease-out-expo;
-    z-index: getZindex(default);
+    z-index: getZindex(default, 1);
     pointer-events: none;
 
     &--black {