Fix rich media issues (multiple 3D models, video looping and media pausing) (#679)

Author: LucasLacerdaUX

assets/global.js

@@ -96,7 +96,7 @@ function pauseAllMedia() {
   });
   document.querySelectorAll('video').forEach((video) => video.pause());
   document.querySelectorAll('product-model').forEach((model) => {
-    if (model.modelViewerUI) modelViewerUI.pause();
+    if (model.modelViewerUI) model.modelViewerUI.pause();
   });
 }
 
@@ -454,6 +454,7 @@ class ModalDialog extends HTMLElement {
     this.setAttribute('open', '');
     if (popup) popup.loadContent();
     trapFocus(this, this.querySelector('[role="dialog"]'));
+    window.pauseAllMedia();
   }
 
   hide() {

sections/featured-product.liquid

@@ -367,7 +367,6 @@
 
       hide() {
         super.hide();
-        window.pauseAllMedia();
       }
 
       show(opener) {

sections/main-product.liquid

@@ -416,7 +416,6 @@
 
     hide() {
       super.hide();
-      window.pauseAllMedia();
     }
 
     show(opener) {

snippets/product-media.liquid

@@ -74,7 +74,7 @@
           {{ media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy" }}
         {%- endif -%}
       {%- when 'video' -%}
-        {{ media | media_tag: image_size: "2048x", autoplay: true, loop: enable_video_looping, controls: true, preload: "none", autoplay: true }}
+        {{ media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none", autoplay: true }}
       {%- when 'model' -%}
         {{ media | media_tag: image_size: "2048x", toggleable: true }}
       {%- endcase -%}