Merge pull request #9 from heseya/feature/MPT-1916

fix: fixed displaying of the videos in product page
heseya · Jul 9, 2024 · b8ead39 · b8ead39
1 parent 343ad52
commit b8ead39
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)"
       />