@xibosignage/xibo-layout-renderer 1.0.28 → 1.0.29

package/dist/xibo-layout-renderer.js

@@ -73575,7 +73575,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       cssText += "\n            visibility: hidden;\n            opacity: 0;\n            z-index: 0;\n        ";
     }
     $media.style.cssText = cssText;
-    if (self.render === 'html' || self.mediaType === 'ticker' || self.mediaType === 'webpage') {
+    if (self.mediaType !== 'spacer' && (self.render === 'html' || self.mediaType === 'ticker' || self.mediaType === 'webpage')) {
       self.checkIframeStatus = true;
       self.iframe = prepareIframe(self);
     } else if (self.mediaType === "image") {
@@ -73723,8 +73723,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     region.html.appendChild(media.html);
   }
   function prepareHtmlMedia(media, region) {
-    // Set state as false ( for now )
-    media.ready = false;
     if (media.html) {
       var mediaId = getMediaId(media);
       // Clean up old copy of the media
@@ -73736,14 +73734,16 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         mediaId: mediaId,
         mediaInRegion: mediaInRegion
       });
-      // Append iframe
-      media.html.innerHTML = '';
-      media.html.appendChild(media.iframe);
       if (!mediaInRegion) {
-        // Add fresh copy of the media into the region using the direct reference
+        // Append iframe and insert into region only when not already in the DOM.
+        // Calling innerHTML = '' when the element is already present detaches the
+        // iframe, causing the browser to reload its src unnecessarily (e.g. when
+        // a media was preloaded then skipped by a navigation action).
+        media.html.innerHTML = '';
+        media.html.appendChild(media.iframe);
         region.html.appendChild(media.html);
-        media.ready = true;
       }
+      media.ready = true;
     }
   }
   exports.FaultCodes = void 0;
@@ -74051,7 +74051,12 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           var _this$sspImpressionUr, _this$sspErrorUrls;
           _this.xlr.emitter.emit('sspWidgetEnd', (_this$sspImpressionUr = _this.sspImpressionUrls) !== null && _this$sspImpressionUr !== void 0 ? _this$sspImpressionUr : [], (_this$sspErrorUrls = _this.sspErrorUrls) !== null && _this$sspErrorUrls !== void 0 ? _this$sspErrorUrls : [], _this.sspImpressionUrls ? _this.duration : 0);
         }
-        media.region.playNextMedia();
+        // Only advance the region if this media is still the active one.
+        // A user-triggered next/prev action may have already moved currMedia
+        // on, in which case the timer firing here would cause a double-advance.
+        if (media === media.region.currMedia) {
+          media.region.playNextMedia();
+        }
       });
       this.on('cancelled', function (media) {
         if (media.state === MediaState.CANCELLED) return;
@@ -74095,6 +74100,10 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       key: "startMediaTimer",
       value: function startMediaTimer(media) {
         var _this2 = this;
+        // Always reset the counter so a media replayed after cancellation runs
+        // for its full duration rather than the residual time left from the
+        // previous play.
+        this.mediaTimeCount = 0;
         var preloadTimeMs = 2000;
         var preloadTimeBufferMs = media.duration * 1000 / 2 - preloadTimeMs;
         var isPreparingNextMedia = false;
@@ -74970,11 +74979,19 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           nxtMedia: (_this$nxtMedia2 = this.nxtMedia) === null || _this$nxtMedia2 === void 0 ? void 0 : _this$nxtMedia2.containerName
         });
         if (!this.layout.isOverlay && crossedEnd) {
+          var _this$currMedia8;
           this.finished();
           if (this.layout.allEnded) {
             console.debug('??? XLR.debug >> Region - playNextMedia - layout all ended');
             return;
           }
+          // Freeze single-media HTML at its last state while waiting for other
+          // regions to complete. The guard at the top only catches the second
+          // call; this one catches the first completion when complete was just
+          // set by finished() above.
+          if (((_this$currMedia8 = this.currMedia) === null || _this$currMedia8 === void 0 ? void 0 : _this$currMedia8.render) === 'html' && this.totalMediaObjects === 1 && this.oldMedia === this.currMedia) {
+            return;
+          }
         }
         this.transitionNodes(this.oldMedia, this.currMedia);
       }
@@ -74984,11 +75001,18 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         if (this.currentMediaIndex <= 0 || this.ended) {
           return;
         }
+        var interruptedMedia = this.currMedia;
         this.oldMedia = this.currMedia;
         this.currentMediaIndex -= 1;
         this.currMedia = this.mediaObjects[this.currentMediaIndex];
         this.nxtMedia = this.mediaObjects[(this.currentMediaIndex + 1) % this.totalMediaObjects];
         this.complete = false;
+        // Cancel the interrupted media after advancing currMedia, using the same
+        // pattern as gotoMediaInRegion — emitting after the update ensures the
+        // handler's (media === currMedia) guard correctly skips playNextMedia.
+        if ((interruptedMedia === null || interruptedMedia === void 0 ? void 0 : interruptedMedia.state) === MediaState.PLAYING) {
+          interruptedMedia.emitter.emit('cancelled', interruptedMedia);
+        }
         console.debug('region::playPreviousMedia', this);
         this.transitionNodes(this.oldMedia, this.currMedia);
       }
@@ -75066,6 +75090,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       _defineProperty(this, "$actionControllerTitle", void 0);
       _defineProperty(this, "$actionsContainer", void 0);
       _defineProperty(this, "translations", {});
+      _defineProperty(this, "keyboardHandler", null);
       this.parent = parent;
       this.actions = actions;
       this.options = options;
@@ -75230,7 +75255,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           this.parent.xlr.gotoPrevLayout();
         }
       }
-      /** Change media in region (next/previous) */
+      /** Change media in region (next/previous) with wrap-around at boundaries. */
     }, {
       key: "gotoMediaInRegion",
       value: function gotoMediaInRegion(regionId, actionType) {
@@ -75238,15 +75263,34 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           regionId: regionId,
           actionType: actionType
         });
-        // Find target region
         this.parent.regions.forEach(function (regionObj) {
-          if (regionObj.id === regionId) {
-            if (actionType === 'next') {
-              regionObj.playNextMedia();
-            } else {
-              regionObj.playPreviousMedia();
-            }
+          if (regionObj.id !== regionId || regionObj.ended) return;
+          var total = regionObj.totalMediaObjects;
+          if (total === 0) return;
+          // Snapshot the currently-playing media before updating currMedia so
+          // we can cancel it cleanly after the region state is advanced.
+          var interruptedMedia = regionObj.currMedia;
+          // Compute new index with wrap-around. We do NOT delegate to
+          // playNextMedia() / playPreviousMedia() here because those carry
+          // normal playlist-cycle semantics (finished(), regionExpired()) that
+          // must not fire during user-driven navigation.
+          var newIndex = actionType === 'next' ? (regionObj.currentMediaIndex + 1) % total : (regionObj.currentMediaIndex - 1 + total) % total;
+          regionObj.oldMedia = regionObj.currMedia;
+          regionObj.currentMediaIndex = newIndex;
+          regionObj.currMedia = regionObj.mediaObjects[newIndex];
+          regionObj.nxtMedia = regionObj.mediaObjects[(newIndex + 1) % total];
+          regionObj.complete = false;
+          // Properly cancel the interrupted media AFTER updating currMedia.
+          // Using 'cancelled' rather than bare clearInterval ensures state is
+          // reset from PLAYING and mediaTimeCount is zeroed — without this,
+          // returning to a cancelled media causes run() → 'start' to bail on
+          // the state === PLAYING guard, leaving the region stuck indefinitely.
+          // currMedia is already updated so the handler's guard
+          // (media === media.region.currMedia) correctly skips playNextMedia.
+          if ((interruptedMedia === null || interruptedMedia === void 0 ? void 0 : interruptedMedia.state) === MediaState.PLAYING) {
+            interruptedMedia.emitter.emit('cancelled', interruptedMedia);
           }
+          regionObj.transitionNodes(regionObj.oldMedia, regionObj.currMedia);
         });
       }
     }, {
@@ -75297,11 +75341,19 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           console.debug('[ActionController::loadMediaInRegion] Target media already queued, skipping duplicate insertion');
           return;
         }
-        // Cancel the current media's duration timer so it doesn't fire and interrupt
-        // the target widget mid-playback (e.g. an Interactive Zone timer still ticking).
-        if ((_targetRegion2 = targetRegion) !== null && _targetRegion2 !== void 0 && (_targetRegion2 = _targetRegion2.currMedia) !== null && _targetRegion2 !== void 0 && _targetRegion2.mediaTimer) {
-          clearInterval(targetRegion.currMedia.mediaTimer);
-          targetRegion.currMedia.mediaTimer = undefined;
+        // Cancel the interrupted media so it doesn't double-advance when the playlist
+        // returns to it. currMedia has not been advanced yet at this point (playNextMedia
+        // does that below), so we cannot use emitter.emit('cancelled') — the handler's
+        // currMedia guard would fire and call playNextMedia a second time. Instead we
+        // cancel directly: clear the timer and reset state so the 'start' handler does
+        // not bail on the state === PLAYING guard when this media is replayed.
+        if (((_targetRegion2 = targetRegion) === null || _targetRegion2 === void 0 || (_targetRegion2 = _targetRegion2.currMedia) === null || _targetRegion2 === void 0 ? void 0 : _targetRegion2.state) === MediaState.PLAYING) {
+          var interruptedMedia = targetRegion.currMedia;
+          if (interruptedMedia.mediaTimer) {
+            clearInterval(interruptedMedia.mediaTimer);
+            interruptedMedia.mediaTimer = undefined;
+          }
+          interruptedMedia.state = MediaState.CANCELLED;
         }
         // Reset complete so the HTML-media guard in playNextMedia() doesn't block
         // the transition (that guard is for single-media loops, not navWidget injections).
@@ -75330,6 +75382,12 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     }, {
       key: "runAction",
       value: function runAction(actionData, options) {
+        // If this layout is no longer active (being cancelled or navigated away from),
+        // discard the action so it doesn't interfere with the outgoing transition.
+        // inLoop is set to false synchronously before finishAllRegions() in all nav paths.
+        if (!this.parent.inLoop) {
+          return;
+        }
         console.debug('[ActionController::runAction] Triggering action', {
           actionData: actionData
         });
@@ -75417,31 +75475,37 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       key: "initKeyboardActions",
       value: function initKeyboardActions() {
         var self = this;
-        // Store actions in a map
         var keyActions = new Map();
-        this.$actionController.querySelectorAll('.action[triggerType="keyPress"]').forEach(function ($el) {
+        this.$actionController.querySelectorAll('.action[triggertype="keyPress"]').forEach(function ($el) {
           var dataset = $el.dataset;
           var code = dataset.triggercode;
           if (code) {
-            // Create an empty array, if not yet set
             if (!keyActions.get(code)) {
               keyActions.set(code, []);
             }
-            // Add new action to array
             keyActions.get(code).push(dataset);
           }
         });
-        // Keyboard listener
-        document.addEventListener('keydown', function (ev) {
+        // Nothing to do if this layout has no keyboard-triggered actions.
+        if (keyActions.size === 0) return;
+        this.keyboardHandler = function (ev) {
           var actions = keyActions.get(ev.code);
-          // Are there action for this key code?
           if (actions) {
-            // Run all actions associated with it
             actions.forEach(function (dataset) {
               self.runAction(dataset, self.options);
             });
           }
-        });
+        };
+        document.addEventListener('keydown', this.keyboardHandler);
+      }
+      /** Remove the keydown listener registered by initKeyboardActions. Call when the layout ends or is cancelled. */
+    }, {
+      key: "removeKeyboardActions",
+      value: function removeKeyboardActions() {
+        if (this.keyboardHandler) {
+          document.removeEventListener('keydown', this.keyboardHandler);
+          this.keyboardHandler = null;
+        }
       }
     }]);
   }();
@@ -75676,6 +75740,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       });
       this.on('end', /*#__PURE__*/function () {
         var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(layout) {
+          var _layout$actionControl;
           var $layout, _$layout$parentElemen;
           return _regeneratorRuntime().wrap(function _callee2$(_context2) {
             while (1) switch (_context2.prev = _context2.next) {
@@ -75734,9 +75799,10 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 }
                 // Emit layout end event
                 console.debug('>>>>> XLR.debug Awaited XLR::emitSync > End - Calling layoutEnd event');
-                _context2.next = 13;
+                (_layout$actionControl = layout.actionController) === null || _layout$actionControl === void 0 || _layout$actionControl.removeKeyboardActions();
+                _context2.next = 14;
                 return layout.xlr.emitSync('layoutEnd', layout);
-              case 13:
+              case 14:
                 if (_this.xlr.config.platform !== exports.ConsumerPlatform.CMS && layout.inLoop) {
                   // Transition next layout to current layout and prepare next layout if exist
                   _this.xlr.prepareLayouts().then( /*#__PURE__*/function () {
@@ -75766,7 +75832,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                     };
                   }());
                 }
-              case 14:
+              case 15:
               case "end":
                 return _context2.stop();
             }
@@ -75777,9 +75843,11 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         };
       }());
       this.on('cancelled', function (layout) {
+        var _layout$actionControl2;
         console.debug('>>>>> XLR.debug / Layout cancelled > Layout ID > ', layout.id);
         layout.state = exports.ELayoutState.CANCELLED;
         layout.inLoop = false;
+        (_layout$actionControl2 = layout.actionController) === null || _layout$actionControl2 === void 0 || _layout$actionControl2.removeKeyboardActions();
         // Dispose video handlers immediately so their stall watchdogs and error
         // callbacks can't fire against a layout whose DOM is about to be removed.
         var _iterator = _createForOfIteratorHelper(layout.regions),
@@ -75938,7 +76006,8 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           _this2.regions.push(regionObj);
         });
         this.actionController.initTouchActions();
-        this.actionController.initKeyboardActions();
+        // Keyboard actions are registered in run() so the global document listener
+        // is only active while the layout is actually playing, not during background preparation.
       }
     }, {
       key: "run",
@@ -75957,6 +76026,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           shouldParse: false
         });
         if ($layoutContainer) {
+          var _this$actionControlle;
           $layoutContainer.style.setProperty('visibility', 'visible');
           $layoutContainer.style.setProperty('opacity', '1');
           $layoutContainer.style.setProperty('z-index', this.zIndex !== null ? "".concat(this.zIndex) : '1');
@@ -75965,6 +76035,9 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
             // Also set the background color of the player window > body
             document.body.style.setProperty('background-color', "".concat(this.bgColor));
           }
+          // Register keyboard actions now that the layout is active.
+          // Done here (not in parseXlf) so the global listener is scoped to playback time.
+          (_this$actionControlle = this.actionController) === null || _this$actionControlle === void 0 || _this$actionControlle.initKeyboardActions();
           // Emit start event
           this.emitter.emit('start', this);
           // Play regions