From 397fa73d2d0566101d69ccea67225a87110fe8e6 Mon Sep 17 00:00:00 2001
From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com>
Date: Fri, 8 Mar 2019 12:21:23 +0100
Subject: [PATCH 1/5] remove setting offline image

---
 core/modules/catalog/helpers/index.ts         | 6 ------
 core/modules/catalog/store/product/actions.ts | 4 ----
 2 files changed, 10 deletions(-)

diff --git a/core/modules/catalog/helpers/index.ts b/core/modules/catalog/helpers/index.ts
index f7be496fcf..411f42c004 100644
--- a/core/modules/catalog/helpers/index.ts
+++ b/core/modules/catalog/helpers/index.ts
@@ -474,12 +474,6 @@ export function configureProductAsync (context, { product, configuration, select
       desiredProductFound = true
     }
 
-    if (typeof navigator !== 'undefined') {
-      if (selectedVariant && !navigator.onLine && context.state.offlineImage) { // this is fix for not preloaded images for offline
-        selectedVariant.image = context.state.offlineImage
-        Logger.debug('Image offline fallback to ', context.state.offlineImage)()
-      }
-    }
     if (selectedVariant) {
       if (!desiredProductFound) { // update the configuration
         populateProductConfigurationAsync(context, { product: product, selectedVariant: selectedVariant })
diff --git a/core/modules/catalog/store/product/actions.ts b/core/modules/catalog/store/product/actions.ts
index e9cf907a2b..936b2a1f3d 100644
--- a/core/modules/catalog/store/product/actions.ts
+++ b/core/modules/catalog/store/product/actions.ts
@@ -578,10 +578,6 @@ const actions: ActionTree<ProductState, RootState> = {
       // get original product
       const productOriginal = context.getters.productOriginal
 
-      if (!context.state.offlineImage) {
-        context.state.offlineImage = productThumbnailPath(productOriginal ? productOriginal /** in case if it's not yet set */ : productVariant, true)
-        Logger.debug('Image offline fallback set to ' + context.state.offlineImage, 'product')()
-      }
       // check if passed variant is the same as original
       const productUpdated = Object.assign({}, productOriginal, productVariant)
       populateProductConfigurationAsync(context, { product: productUpdated, selectedVariant: productVariant })

From b340a7a2e380501de982a4b16b9db1be4e05bc78 Mon Sep 17 00:00:00 2001
From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com>
Date: Fri, 8 Mar 2019 13:26:32 +0100
Subject: [PATCH 2/5] add error fallback for images

---
 core/modules/catalog/helpers/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/core/modules/catalog/helpers/index.ts b/core/modules/catalog/helpers/index.ts
index 411f42c004..3d90010dcf 100644
--- a/core/modules/catalog/helpers/index.ts
+++ b/core/modules/catalog/helpers/index.ts
@@ -531,6 +531,7 @@ export function getMediaGallery (product) {
               mediaGallery.push({
                 'src': getThumbnailPath(mediaItem.image, rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height),
                 'loading': getThumbnailPath(mediaItem.image, 310, 300),
+                'error': getThumbnailPath(mediaItem.image, 310, 300),
                 'video': mediaItem.vid
               })
           }
@@ -556,6 +557,7 @@ export function configurableChildrenImages(product) {
                 configurableChildrenImages.push({
                     'src': getThumbnailPath(groupedByAttribute[confChild][0].image, rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height),
                     'loading': getThumbnailPath(groupedByAttribute[confChild][0].image, 310, 300),
+                    'error': getThumbnailPath(groupedByAttribute[confChild][0].image, 310, 300),
                     'id': confChild
                 })
             }
@@ -577,7 +579,8 @@ export function attributeImages(product) {
             if(product[attribute]) {
                 attributeImages.push({
                     'src': getThumbnailPath(product[attribute], rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height),
-                    'loading': getThumbnailPath(product[attribute], 310, 300)
+                    'loading': getThumbnailPath(product[attribute], 310, 300),
+                    'error': getThumbnailPath(product[attribute], 310, 300)
                 })
             }
         }

From ad0c60d4c9f5e045f90284b751c358e1b4a8ecf4 Mon Sep 17 00:00:00 2001
From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com>
Date: Mon, 11 Mar 2019 16:19:27 +0100
Subject: [PATCH 3/5] test gallery carousel change

---
 .../components/core/ProductGallery.vue        |  4 +-
 .../core/ProductGalleryCarousel.vue           | 71 +++++++++++++++++--
 2 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/src/themes/default/components/core/ProductGallery.vue b/src/themes/default/components/core/ProductGallery.vue
index 3b0ecb4285..fef0aa01d1 100644
--- a/src/themes/default/components/core/ProductGallery.vue
+++ b/src/themes/default/components/core/ProductGallery.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="media-gallery" :class="{'media-gallery--loaded': carouselLoaded}">
-    <div class="relative">
+    <div class="relative w-100">
       <product-gallery-overlay
         v-if="isZoomOpen"
         :current-slide="currentSlide"
@@ -78,6 +78,8 @@ export default {
   text-align: center;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
   min-height: calc(90vw * 1.1);
   background-image: url('/assets/placeholder.svg');
   background-repeat: no-repeat;
diff --git a/src/themes/default/components/core/ProductGalleryCarousel.vue b/src/themes/default/components/core/ProductGalleryCarousel.vue
index a341decdba..7137453534 100644
--- a/src/themes/default/components/core/ProductGalleryCarousel.vue
+++ b/src/themes/default/components/core/ProductGalleryCarousel.vue
@@ -15,9 +15,48 @@
       <slide
         v-for="(images, index) in gallery"
         :key="images.src">
-        <div class="bg-cl-secondary" :class="{'video-container h-100 flex relative': images.video}">
+        <div class="product-image-container bg-cl-secondary" :class="{'video-container w-100 h-100 flex relative': images.video}">
+          <!-- <transition-group name="fade" mode="out-in"> -->
+          <!-- <div class="aaaclass">
+            TEST
+          </div> -->
+          <!-- <transition-group name="fade" mode="out-in"> -->
           <img
-            v-show="hideImageAtIndex !== index"
+            v-show="!lowerQualityLoaded && !highQualityLoaded"
+            key="placeholderImage"
+            class="inline-flex mw-100"
+            src="/assets/placeholder.svg"
+            ref="images"
+            :alt="productName | htmlDecode"
+            @load="placeholderLoaded=true"
+          >
+          <img
+            v-show="lowerQualityLoaded && !highQualityLoaded && hideImageAtIndex !== index"
+            key="lowQualityImage"
+            class="product-image inline-flex mw-100"
+            :src="images.loading"
+            @load="lowerQualityLoaded=true"
+            ref="images"
+            :alt="productName | htmlDecode"
+            data-testid="productGalleryImage"
+            itemprop="image"
+          >
+          <img
+            v-show="highQualityLoaded && hideImageAtIndex !== index"
+            key="highQualityImage"
+            class="product-image inline-flex mw-100"
+            :src="images.src"
+            @load="highQualityLoaded=true"
+            ref="images"
+            @dblclick="openOverlay"
+            :alt="productName | htmlDecode"
+            data-testid="productGalleryImage"
+            itemprop="image"
+          >
+          <!-- </transition-group> -->
+          <!-- </transition-group> -->
+          <!-- <img
+            v-show="placeholderLoaded && hideImageAtIndex !== index"
             class="product-image inline-flex pointer mw-100"
             v-lazy="images"
             ref="images"
@@ -25,7 +64,7 @@
             :alt="productName | htmlDecode"
             data-testid="productGalleryImage"
             itemprop="image"
-          >
+          > -->
           <product-video
             v-if="images.video && (index === currentPage)"
             v-bind="images.video"
@@ -66,7 +105,10 @@ export default {
     return {
       carouselTransitionSpeed: 0,
       currentPage: 0,
-      hideImageAtIndex: null
+      hideImageAtIndex: null,
+      placeholderLoaded: false,
+      lowerQualityLoaded: false,
+      highQualityLoaded: false
     }
   },
   components: {
@@ -130,6 +172,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// @import "~theme/css/animations/transitions";
+.fade-enter-active {
+  transition: opacity 2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
 .media-gallery-carousel {
   position: relative;
   text-align: center;
@@ -140,6 +189,20 @@ export default {
   bottom: 0;
   right: 0;
 }
+.product-image-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  // min-height: 200px;
+  width: 100%;
+}
+.product-image {
+  // height: 100%;
+  width: 100%;
+  height: auto;
+}
 img {
   opacity: 1;
   mix-blend-mode: multiply;

From 0811881f4d5ced682797b1b09873d37fc3b1d5e1 Mon Sep 17 00:00:00 2001
From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com>
Date: Tue, 12 Mar 2019 10:13:37 +0100
Subject: [PATCH 4/5] fix gallery images and placeholder in offline mode

---
 .../core/ProductGalleryCarousel.vue           | 76 ++++++++++---------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/themes/default/components/core/ProductGalleryCarousel.vue b/src/themes/default/components/core/ProductGalleryCarousel.vue
index 7137453534..43f31e9386 100644
--- a/src/themes/default/components/core/ProductGalleryCarousel.vue
+++ b/src/themes/default/components/core/ProductGalleryCarousel.vue
@@ -16,55 +16,36 @@
         v-for="(images, index) in gallery"
         :key="images.src">
         <div class="product-image-container bg-cl-secondary" :class="{'video-container w-100 h-100 flex relative': images.video}">
-          <!-- <transition-group name="fade" mode="out-in"> -->
-          <!-- <div class="aaaclass">
-            TEST
-          </div> -->
-          <!-- <transition-group name="fade" mode="out-in"> -->
           <img
-            v-show="!lowerQualityLoaded && !highQualityLoaded"
+            v-show="placeholderImagesMap[index]"
             key="placeholderImage"
             class="inline-flex mw-100"
             src="/assets/placeholder.svg"
             ref="images"
             :alt="productName | htmlDecode"
-            @load="placeholderLoaded=true"
           >
           <img
-            v-show="lowerQualityLoaded && !highQualityLoaded && hideImageAtIndex !== index"
+            v-show="lowerQualityImagesMap[index]"
             key="lowQualityImage"
             class="product-image inline-flex mw-100"
             :src="images.loading"
-            @load="lowerQualityLoaded=true"
+            @load="lowerQualityImageLoaded(index)"
             ref="images"
             :alt="productName | htmlDecode"
             data-testid="productGalleryImage"
             itemprop="image"
           >
           <img
-            v-show="highQualityLoaded && hideImageAtIndex !== index"
-            key="highQualityImage"
-            class="product-image inline-flex mw-100"
+            v-show="highQualityImagesLoadedMap[index]"
             :src="images.src"
-            @load="highQualityLoaded=true"
-            ref="images"
-            @dblclick="openOverlay"
-            :alt="productName | htmlDecode"
-            data-testid="productGalleryImage"
-            itemprop="image"
-          >
-          <!-- </transition-group> -->
-          <!-- </transition-group> -->
-          <!-- <img
-            v-show="placeholderLoaded && hideImageAtIndex !== index"
+            @load="highQualityImageLoaded(index)"
             class="product-image inline-flex pointer mw-100"
-            v-lazy="images"
             ref="images"
             @dblclick="openOverlay"
             :alt="productName | htmlDecode"
             data-testid="productGalleryImage"
             itemprop="image"
-          > -->
+          >
           <product-video
             v-if="images.video && (index === currentPage)"
             v-bind="images.video"
@@ -87,6 +68,11 @@ import ProductVideo from './ProductVideo'
 
 export default {
   name: 'ProductGalleryCarousel',
+  components: {
+    Carousel,
+    Slide,
+    ProductVideo
+  },
   props: {
     gallery: {
       type: Array,
@@ -106,15 +92,32 @@ export default {
       carouselTransitionSpeed: 0,
       currentPage: 0,
       hideImageAtIndex: null,
-      placeholderLoaded: false,
-      lowerQualityLoaded: false,
-      highQualityLoaded: false
+      lowerQualityImagesLoadedMap: {},
+      highQualityImagesLoadedMap: {}
     }
   },
-  components: {
-    Carousel,
-    Slide,
-    ProductVideo
+  computed: {
+    placeholderImagesMap () {
+      let visibilityMap = {}
+      this.gallery.forEach((image, index) => {
+        visibilityMap[index] = !this.lowerQualityImagesLoadedMap[index] && !this.highQualityImagesLoadedMap[index]
+      })
+      return visibilityMap
+    },
+    lowerQualityImagesMap () {
+      let visibilityMap = {}
+      this.gallery.forEach((image, index) => {
+        visibilityMap[index] = !!this.lowerQualityImagesLoadedMap[index] && !this.highQualityImagesLoadedMap[index] && this.hideImageAtIndex !== index
+      })
+      return visibilityMap
+    },
+    highQualityImagesMap () {
+      let visibilityMap = {}
+      this.gallery.forEach((image, index) => {
+        visibilityMap[index] = !!this.highQualityImagesLoadedMap[index] && this.hideImageAtIndex !== index
+      })
+      return visibilityMap
+    }
   },
   beforeMount () {
     this.$bus.$on('filter-changed-product', this.selectVariant)
@@ -166,6 +169,12 @@ export default {
     },
     onVideoStarted (index) {
       this.hideImageAtIndex = index
+    },
+    lowerQualityImageLoaded (index) {
+      this.$set(this.lowerQualityImagesLoadedMap, index, true)
+    },
+    highQualityImageLoaded (index) {
+      this.$set(this.highQualityImagesLoadedMap, index, true)
     }
   }
 }
@@ -195,11 +204,10 @@ export default {
   flex-grow: 1;
   justify-content: center;
   align-items: center;
-  // min-height: 200px;
   width: 100%;
+  height: 100%;
 }
 .product-image {
-  // height: 100%;
   width: 100%;
   height: auto;
 }

From 9b61633ac6f68355ab43af0f5eb30ebd89f6903a Mon Sep 17 00:00:00 2001
From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com>
Date: Tue, 12 Mar 2019 10:17:01 +0100
Subject: [PATCH 5/5] remove unused styles

---
 .../default/components/core/ProductGalleryCarousel.vue    | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/themes/default/components/core/ProductGalleryCarousel.vue b/src/themes/default/components/core/ProductGalleryCarousel.vue
index 43f31e9386..aff74ac460 100644
--- a/src/themes/default/components/core/ProductGalleryCarousel.vue
+++ b/src/themes/default/components/core/ProductGalleryCarousel.vue
@@ -37,6 +37,7 @@
           >
           <img
             v-show="highQualityImagesLoadedMap[index]"
+            key="highQualityImage"
             :src="images.src"
             @load="highQualityImageLoaded(index)"
             class="product-image inline-flex pointer mw-100"
@@ -181,13 +182,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// @import "~theme/css/animations/transitions";
-.fade-enter-active {
-  transition: opacity 2s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
 .media-gallery-carousel {
   position: relative;
   text-align: center;