From b8ead39f52714be42165103b8185b40b8328c8c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20M=C4=99dryga=C5=82?= <medrygal.artur@gmail.com>
Date: Fri, 28 Jun 2024 13:11:52 +0200
Subject: [PATCH] Merge pull request #9 from heseya/feature/MPT-1916

fix: fixed displaying of the videos in product page
---
 components/media/Video.vue          | 6 ++++--
 components/media/index.vue          | 2 ++
 components/product/page/Cover.vue   | 2 ++
 components/product/page/Gallery.vue | 9 ++++++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/media/Video.vue b/components/media/Video.vue
index e330bb73..fb5d0d8a 100644
--- a/components/media/Video.vue
+++ b/components/media/Video.vue
@@ -1,7 +1,7 @@
 <template>
-  <Placeholder v-if="isError || !src" :placeholder-class-name="placeholderClassName">
+  <MediaPlaceholder v-if="isError || !src" :placeholder-class-name="placeholderClassName">
     <slot name="placeholder"></slot>
-  </Placeholder>
+  </MediaPlaceholder>
 
   <video
     v-else
@@ -26,6 +26,7 @@ const props = withDefaults(
     autoplay?: boolean
     loop?: boolean
     muted?: boolean
+    playsinline?: boolean
     controls?: boolean
   }>(),
   {
@@ -34,6 +35,7 @@ const props = withDefaults(
     autoplay: true,
     loop: true,
     muted: true,
+    playsinline: true,
     controls: false,
   },
 )
diff --git a/components/media/index.vue b/components/media/index.vue
index afa09c63..baf87409 100644
--- a/components/media/index.vue
+++ b/components/media/index.vue
@@ -61,6 +61,7 @@ const props = withDefaults(
     autoplay?: boolean
     loop?: boolean
     muted?: boolean
+    playsinline?: boolean
     controls?: boolean
     placeholderClassName?: string
   }>(),
@@ -76,6 +77,7 @@ const props = withDefaults(
     autoplay: true,
     loop: true,
     muted: true,
+    playsinline: true,
     controls: false,
     placeholderClassName: '',
   },
diff --git a/components/product/page/Cover.vue b/components/product/page/Cover.vue
index 7276e6e9..4d6c2f9a 100644
--- a/components/product/page/Cover.vue
+++ b/components/product/page/Cover.vue
@@ -11,6 +11,7 @@
         :media="image"
         width="100"
         height="100"
+        :autoplay="false"
         @click="setActive(image)"
       />
     </div>
@@ -125,6 +126,7 @@ watch(
     cursor: pointer;
     aspect-ratio: 1/1;
     object-position: center;
+    overflow: initial;
   }
 
   &--singular {
diff --git a/components/product/page/Gallery.vue b/components/product/page/Gallery.vue
index e54b72ac..9d398c9b 100644
--- a/components/product/page/Gallery.vue
+++ b/components/product/page/Gallery.vue
@@ -21,7 +21,13 @@
     </button>
 
     <div class="product-gallery__main">
-      <Media class="product-gallery__item" :media="active" width="1400" height="1400" />
+      <Media
+        class="product-gallery__item"
+        :media="active"
+        width="1400"
+        height="1400"
+        :controls="true"
+      />
     </div>
 
     <div class="product-gallery__list">
@@ -31,6 +37,7 @@
         class="product-gallery__item"
         :media="m"
         width="164"
+        :autoplay="false"
         height="164"
         @click="setActive(m)"
       />