Added support for product videos

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved docs at contributing.md and configuration.md (spelling etc.) - @ruthgeridema (#2421, #2422, #2423, #2425, #2426)
 - Fixed design issue of Country label on Edge 17 & Firefox - @ananth-iyer (#2390,#2399)
 - Country field is filled by first counry from the list in cart in paymen section - @RakowskiPrzemyslaw (#2428)
+- Added video support in Product Gallery component. - @rain2o (#2433)
 - Improved product quantity change component in product and cart - @patzick (#2398, #2437)
 - Updated to Vue 2.6.6 - @filrak (#2456)
 - Null sidebar menu data on static page fixed - @filrak (#2456)

core/modules/catalog/components/ProductVideo.ts

@@ -0,0 +1,49 @@
+export const ProductVideo = {
+  name: 'ProductVideo',
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      videoStarted: false,
+      iframeLoaded: false
+    }
+  },
+  methods: {
+    initVideo () {
+      this.videoStarted = true
+      this.$emit('video-started', this.index)
+    },
+    iframeIsLoaded () {
+      this.iframeLoaded = true
+    }
+  },
+  computed: {
+    embedUrl () {
+      switch (this.type) {
+        case "youtube":
+          return `https://www.youtube.com/embed/${this.id}?autoplay=1`
+        case "vimeo":
+          return `https://player.vimeo.com/video/${this.id}?autoplay=1`
+        default:
+          return
+      }
+    }
+  }
+}

core/modules/catalog/helpers/index.ts

@@ -529,18 +529,19 @@ 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)
-                })
-            }
-        }
-    }
-    return mediaGallery
+  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),
+                'video': mediaItem.vid
+              })
+          }
+      }
+  }
+  return mediaGallery
 }
 
 /**

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/ProductGalleryCarousel.vue

@@ -10,12 +10,14 @@
       navigation-prev-label="<i class='material-icons p15 cl-bg-tertiary pointer'>keyboard_arrow_left</i>"
       ref="carousel"
       :speed="carouselTransitionSpeed"
+      @pageChange="pageChange"
     >
       <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="hideImageAtIndex !== index"
             class="product-image inline-flex pointer mw-100"
             v-lazy="images"
             ref="images"
@@ -24,6 +26,11 @@
             data-testid="productGalleryImage"
             itemprop="image"
           >
+          <product-video
+            v-if="images.video && (index === currentPage)"
+            v-bind="images.video"
+            :index="index"
+            @video-started="onVideoStarted"/>
         </div>
       </slide>
     </carousel>
@@ -37,6 +44,7 @@
 <script>
 import store from '@vue-storefront/core/store'
 import { Carousel, Slide } from 'vue-carousel'
+import ProductVideo from './ProductVideo'
 
 export default {
   name: 'ProductGalleryCarousel',
@@ -56,12 +64,15 @@ export default {
   },
   data () {
     return {
-      carouselTransitionSpeed: 300
+      carouselTransitionSpeed: 300,
+      currentPage: 0,
+      hideImageAtIndexAtIndex: null
     }
   },
   components: {
     Carousel,
-    Slide
+    Slide,
+    ProductVideo
   },
   beforeMount () {
     this.$bus.$on('filter-changed-product', this.selectVariant)
@@ -105,6 +116,13 @@ export default {
     },
     increaseCarouselTransitionSpeed () {
       this.carouselTransitionSpeed = 500
+    },
+    pageChange (index) {
+      this.currentPage = index
+      this.hideImageAtIndex = null
+    },
+    onVideoStarted (index) {
+      this.hideImageAtIndex = index
     }
   }
 }
@@ -135,6 +153,11 @@ img[lazy=error] {
 img[lazy=loading] {
   width: 100%;
 }
+
+.video-container {
+  align-items: center;
+  justify-content: center;
+}
 </style>
 
 <style lang="scss">

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

@@ -20,19 +20,27 @@
           ref="zoomCarousel"
           class="media-zoom-carousel__carousel"
           :speed="carouselTransitionSpeed"
+          @pageChange="pageChange"
         >
           <slide
-            v-for="images in gallery"
+            v-for="(images, index) in gallery"
             :key="images.src">
-            <div class="media-zoom-carousel__slide  bg-cl-secondary">
+            <div class="media-zoom-carousel__slide  bg-cl-secondary"
+                 :class="{'video-container h-100 flex relative': images.video}">
               <img
+                v-show="hideImageAtIndex !== index"
                 class="product-image inline-flex pointer mw-100"
                 v-lazy="images"
                 ref="images"
                 :alt="productName | htmlDecode"
                 data-testid="productGalleryImage"
                 itemprop="image"
               >
+              <product-video
+                v-if="images.video && (index === currentPage)"
+                v-bind="images.video"
+                :index="index"
+                @video-started="onVideoStarted"/>
             </div>
           </slide>
         </carousel>
@@ -43,6 +51,7 @@
 
 <script>
 import { Carousel, Slide } from 'vue-carousel'
+import ProductVideo from './ProductVideo'
 
 export default {
   name: 'ProductGalleryZoomCarousel',
@@ -63,12 +72,15 @@ export default {
   },
   data () {
     return {
-      carouselTransitionSpeed: 300
+      carouselTransitionSpeed: 300,
+      currentPage: 0,
+      hideImageAtIndex: null
     }
   },
   components: {
     Carousel,
-    Slide
+    Slide,
+    ProductVideo
   },
   mounted () {
     this.navigate(this.currentSlide)
@@ -89,6 +101,13 @@ export default {
     },
     increaseCarouselTransitionSpeed () {
       this.carouselTransitionSpeed = 500
+    },
+    pageChange (index) {
+      this.currentPage = index
+      this.hideImageAtIndex = null
+    },
+    onVideoStarted (index) {
+      this.hideImageAtIndex = index
     }
   }
 }
@@ -191,6 +210,11 @@ export default {
   }
 
 }
+
+.video-container {
+  align-items: center;
+  justify-content: center;
+}
 </style>
 
 <style lang="scss">