@xibosignage/xibo-layout-renderer 1.0.28 → 1.0.29

package/dist/xibo-layout-renderer.d.ts

@@ -72,12 +72,13 @@ declare class ActionController {
     $actionControllerTitle: HTMLElement | null;
     $actionsContainer: HTMLElement | null;
     translations: any;
+    private keyboardHandler;
     constructor(parent: ILayout, actions: Action[], options: InactOptions);
     init(): void;
     openLayoutInNewTab(layoutCode: string, options: InactOptions): void;
     openLayoutInPlayer(layoutCode: string, _options: InactOptions): void;
     prevOrNextLayout(targetId: string, actionType: string): void;
-    /** Change media in region (next/previous) */
+    /** Change media in region (next/previous) with wrap-around at boundaries. */
     gotoMediaInRegion(regionId: string, actionType: string): void;
     loadMediaInRegion(regionId: string, widgetId: string): void;
     /** Run action based on action data */
@@ -88,6 +89,8 @@ declare class ActionController {
     /** Dispatch an incoming webhook trigger to any matching actions on this layout. */
     handleWebhookTrigger(triggerCode: string, widgetId?: string): void;
     initKeyboardActions(): void;
+    /** Remove the keydown listener registered by initKeyboardActions. Call when the layout ends or is cancelled. */
+    removeKeyboardActions(): void;
 }
 
 declare function initRenderingDOM(targetContainer: Element | null): void;

package/dist/xibo-layout-renderer.esm.js

@@ -73572,7 +73572,7 @@ function createMediaElement(mediaObject) {
     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") {
@@ -73720,8 +73720,6 @@ function prepareAudioMedia(media, region) {
   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
@@ -73733,14 +73731,16 @@ function prepareHtmlMedia(media, region) {
       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;
   }
 }
 var FaultCodes;
@@ -74048,7 +74048,12 @@ var Media = /*#__PURE__*/function () {
         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;
@@ -74092,6 +74097,10 @@ var Media = /*#__PURE__*/function () {
     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;
@@ -74967,11 +74976,19 @@ var Region = /*#__PURE__*/function () {
         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);
     }
@@ -74981,11 +74998,18 @@ var Region = /*#__PURE__*/function () {
       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);
     }
@@ -75063,6 +75087,7 @@ var ActionController = /*#__PURE__*/function () {
     _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;
@@ -75227,7 +75252,7 @@ var ActionController = /*#__PURE__*/function () {
         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) {
@@ -75235,15 +75260,34 @@ var ActionController = /*#__PURE__*/function () {
         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);
       });
     }
   }, {
@@ -75294,11 +75338,19 @@ var ActionController = /*#__PURE__*/function () {
         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).
@@ -75327,6 +75379,12 @@ var ActionController = /*#__PURE__*/function () {
   }, {
     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
       });
@@ -75414,31 +75472,37 @@ var ActionController = /*#__PURE__*/function () {
     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;
+      }
     }
   }]);
 }();
@@ -75673,6 +75737,7 @@ var Layout = /*#__PURE__*/function () {
     });
     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) {
@@ -75731,9 +75796,10 @@ var Layout = /*#__PURE__*/function () {
               }
               // 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 !== ConsumerPlatform.CMS && layout.inLoop) {
                 // Transition next layout to current layout and prepare next layout if exist
                 _this.xlr.prepareLayouts().then( /*#__PURE__*/function () {
@@ -75763,7 +75829,7 @@ var Layout = /*#__PURE__*/function () {
                   };
                 }());
               }
-            case 14:
+            case 15:
             case "end":
               return _context2.stop();
           }
@@ -75774,9 +75840,11 @@ var Layout = /*#__PURE__*/function () {
       };
     }());
     this.on('cancelled', function (layout) {
+      var _layout$actionControl2;
       console.debug('>>>>> XLR.debug / Layout cancelled > Layout ID > ', layout.id);
       layout.state = 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),
@@ -75935,7 +76003,8 @@ var Layout = /*#__PURE__*/function () {
         _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",
@@ -75954,6 +76023,7 @@ var Layout = /*#__PURE__*/function () {
         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');
@@ -75962,6 +76032,9 @@ var Layout = /*#__PURE__*/function () {
           // 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