Release v2.5.6

src/web/views/signage/slides/popup-preview.hbs

@@ -35,6 +35,47 @@
 
 <script>
   (function () {
+    function startPreviewVideoPlayback(root) {
+      if (!root) {
+        return;
+      }
+
+      var videos = root.querySelectorAll('video.slide-preview-video');
+      Array.prototype.forEach.call(videos, function (video) {
+        if (!video) {
+          return;
+        }
+
+        video.autoplay = true;
+        video.loop = true;
+        video.muted = true;
+        video.playsInline = true;
+
+        function tryPlay() {
+          try {
+            video.load();
+          } catch (_error) {
+            // Ignore load failures and try to play anyway.
+          }
+
+          var playPromise = video.play && video.play();
+          if (playPromise && typeof playPromise.catch === 'function') {
+            playPromise.catch(function () {
+              return null;
+            });
+          }
+        }
+
+        if (video.readyState >= 2) {
+          tryPlay();
+          return;
+        }
+
+        video.addEventListener('canplay', tryPlay, { once: true });
+        video.addEventListener('loadedmetadata', tryPlay, { once: true });
+      });
+    }
+
     function injectFontStylesheet(href) {
       var normalizedHref = String(href || '').trim();
       if (!normalizedHref) {
@@ -96,9 +137,11 @@
       canvas.style.backgroundPosition = 'center';
       canvas.style.backgroundSize = '100% 100%';
       canvas.style.backgroundRepeat = 'no-repeat';
+      canvas.style.transformOrigin = 'center center';
       canvas.style.width = canvasWidth + 'px';
       canvas.style.height = canvasHeight + 'px';
       canvas.innerHTML = String(payload.html || '');
+      startPreviewVideoPlayback(canvas);
 
       var stageRect = stage.getBoundingClientRect();
       if (!stageRect.width || !stageRect.height) {
@@ -112,6 +155,7 @@
 
     window.addEventListener('hashchange', applyPayload);
     window.addEventListener('resize', applyPayload);
+    window.addEventListener('load', applyPayload);
     applyPayload();
   }());
 </script>