Added support for product videos

core/modules/catalog/components/ProductGallery.ts

@@ -88,6 +88,9 @@ export const ProductGallery = {
       if (this.isZoomOpen && event.keyCode === 27) {
         this.toggleZoom()
       }
+    },
+    initVideo (video) {
+      console.log(video)
     }
   }
 }

core/modules/catalog/helpers/index.ts

@@ -13,6 +13,7 @@ import i18n from '@vue-storefront/i18n'
 import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 import { getThumbnailPath } from '@vue-storefront/core/helpers'
 import { Logger } from '@vue-storefront/core/lib/logger'
+import Url from 'url-parse'
 
 function _filterRootProductByStockitem (context, stockItem, product, errorCallback) {
   if (stockItem) {
@@ -529,18 +530,66 @@ export function configureProductAsync (context, { product, configuration, select
  */
 
 export function getMediaGallery (product) {
-    let mediaGallery = []
-    if (product.media_gallery) {
-        for (let mediaItem of product.media_gallery) {
-            if (mediaItem.image) {
-                mediaGallery.push({
-                    'src': getThumbnailPath(mediaItem.image, rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height),
-                    'loading': getThumbnailPath(product.image, 310, 300)
-                })
-            }
-        }
+  let mediaGallery = []
+  if (product.media_gallery) {
+      for (let mediaItem of product.media_gallery) {
+          if (mediaItem.image) {
+              let computedImage = {
+                'src': getThumbnailPath(mediaItem.image, rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height),
+                'loading': getThumbnailPath(product.image, 310, 300),
+                'video': null
+              }
+              if (mediaItem.vid) {
+                computedImage.video = computeVideoData(mediaItem.vid)
+              }
+              mediaGallery.push(computedImage)
+          }
+      }
+  }
+  return mediaGallery
+}
+
+
+/**
+* Process video data to provide the proper 
+* provider and attributes
+* 
+* @param videoData Object
+*/
+
+function computeVideoData (videoData) {
+  let videoId = '';
+  let type = '';
+  let videoUrl = new Url(videoData.url);
+
+  if (videoUrl.host.match(/youtube\.com/) && videoUrl.search) {
+    videoId = videoUrl.search.split('v=')[1];
+
+    if (videoId) {
+      let ampersandPosition = videoId.indexOf('&');
+
+      if (ampersandPosition === -1) {
+          return videoId;
+      }
+
+      videoId = videoId.substring(0, ampersandPosition);
+      type = 'youtube';
     }
-    return mediaGallery
+  } else if (videoUrl.host.match(/youtube\.com|youtu\.be|youtube-nocookie.com/)) {
+    videoId = videoUrl.pathname.replace(/^\/(embed\/|v\/)?/, '').replace(/\/.*/, '');
+    type = 'youtube';
+  } else if (videoUrl.host.match(/vimeo\.com/)) {
+    type = 'vimeo';
+    let vimeoRegex = new RegExp(['https?:\\/\\/(?:www\\.|player\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)',
+        '?|groups\\/([^\\/]*)\\/videos\\/|album\\/(\\d+)\\/video\\/|video\\/|)(\\d+)(?:$|\\/|\\?)'
+    ].join(''));
+    videoId = videoUrl.href.match(vimeoRegex)[3];
+  }
+  return {
+    ...videoData,
+    type: type,
+    id: videoId
+  }
 }
 
 /**

src/themes/default/components/core/LoaderScoped.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="loader-container absolute">
+    <div class="loader-inner-container absolute">
+      <div class="spinner relative">
+        <div class="double-bounce1 absolute w-100 brdr-circle bg-cl-th-success"/>
+        <div class="double-bounce2 absolute w-100 brdr-circle bg-cl-th-success"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoaderScoped'
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~theme/css/base/global_vars';
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-container-bg: color(black);
+$color-message-bg: color(success);
+$z-index-loader: map-get($z-index, loader);
+
+.loader-container {
+  z-index: $z-index-loader;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba($color-container-bg, 0.65);
+}
+
+.loader-inner-container {
+  left: 50%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+}
+
+.loader-message-container {
+  background-color: rgba($color-message-bg, 0.75);
+  border-radius: 50px;
+  letter-spacing: 0.5px;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto;
+}
+
+.double-bounce1,
+.double-bounce2 {
+  height: 100%;
+  opacity: 0.6;
+  top: 0;
+  left: 0;
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+
+.double-bounce2 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes sk-bounce {
+  0%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+</style>

src/themes/default/components/core/ProductGallery.vue

@@ -33,12 +33,14 @@
               navigation-prev-label="<i class='material-icons p15 cl-bg-tertiary pointer'>keyboard_arrow_left</i>"
               ref="carousel"
               :speed="carouselTransitionSpeed"
+              @pageChange="clearVideo"
             >
               <slide
-                v-for="images in gallery"
+                v-for="(images, index) in gallery"
                 :key="images.src">
-                <div class="bg-cl-secondary">
+                <div class="bg-cl-secondary" :class="{'video-container h-100 flex relative': images.video}">
                   <img
+                    v-show="videoStarted !== index"
                     class="product-image inline-flex pointer mw-100"
                     v-lazy="images"
                     ref="images"
@@ -47,6 +49,32 @@
                     data-testid="productGalleryImage"
                     itemprop="image"
                   >
+                  <div
+                    v-if="images.video"
+                    v-show="videoStarted !== index"
+                    class="gallery-video absolute w-100 h-100"
+                    @click="videoStarted = index"
+                  >
+                    <i class="material-icons absolute">play_circle_outline</i>
+                  </div>
+                  <div v-if="videoStarted === index" class="iframe-wrapper absolute w-100">
+                    <LoaderScoped v-if="!iframeLoaded"/>
+                    <div class="iframe-container w-100">
+                      <iframe
+                        v-if="images.video.type === 'vimeo'"
+                        class="absolute w-100 h-100"
+                        :src="`https://player.vimeo.com/video/${images.video.id}?autoplay=1`"
+                        webkitallowfullscreen mozallowfullscreen allowfullscreen
+                        @load="iframeIsLoaded()"/>
+                      <iframe
+                        v-else-if="images.video.type === 'youtube'"
+                        class="absolute w-100 h-100"
+                        :src="`https://www.youtube.com/embed/${images.video.id}?autoplay=1`"
+                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                        webkitallowfullscreen mozallowfullscreen allowfullscreen
+                        @load="iframeIsLoaded()"/>
+                    </div>
+                  </div>
                 </div>
               </slide>
             </carousel>
@@ -62,6 +90,7 @@
 </template>
 
 <script>
+import LoaderScoped from 'theme/components/core/LoaderScoped.vue'
 import { ProductGallery } from '@vue-storefront/core/modules/catalog/components/ProductGallery.ts'
 import ProductGalleryZoom from './ProductGalleryZoom'
 import NoSSR from 'vue-no-ssr'
@@ -70,7 +99,8 @@ import VueOfflineMixin from 'vue-offline/mixin'
 export default {
   components: {
     'no-ssr': NoSSR,
-    ProductGalleryZoom
+    ProductGalleryZoom,
+    LoaderScoped
   },
   mixins: [ProductGallery, VueOfflineMixin],
   watch: {
@@ -79,12 +109,24 @@ export default {
   data () {
     return {
       loaded: true,
-      carouselTransitionSpeed: 0
+      carouselTransitionSpeed: 0,
+      videoStarted: null,
+      iframeLoaded: false
     }
   },
   methods: {
     validateRoute () {
       this.$forceUpdate()
+    },
+    initVideo (index) {
+      this.videoStarted = index
+    },
+    clearVideo () {
+      this.videoStarted = null
+      this.iframeLoaded = false
+    },
+    iframeIsLoaded () {
+      this.iframeLoaded = true
     }
   }
 }
@@ -141,6 +183,46 @@ img[lazy=loading] {
     margin: 0 20px 20px 0;
   }
 }
+
+.video-container {
+  align-items: center;
+  justify-content: center;
+
+  .gallery-video {
+    top: 0;
+
+    > .material-icons {
+      left: 0;
+      right: 0;
+      color: #fff;
+      font-size: 120px;
+      top: calc( 50% - 60px);
+      transition: transform ease 0.3s;
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      > .material-icons {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .iframe-wrapper {
+    left: 0;
+
+    .iframe-container {
+      padding-top: 56.25%;
+
+      iframe {
+        top: 0;
+        left: 0;
+        border: none;
+      }
+    }
+  }
+}
 </style>
 <style lang="scss">
 .media-gallery {