@xibosignage/xibo-layout-renderer 1.0.25 → 1.0.26

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

@@ -703,6 +703,7 @@ var initialLayout = {
     return Promise.resolve([]);
   },
   removeLayout: function removeLayout() {},
+  discardLayout: function discardLayout() {},
   getXlf: function getXlf() {
     return '';
   },
@@ -713,6 +714,13 @@ var initialLayout = {
   html: null
 };
 
+var MediaState = {
+  IDLE: 'idle',
+  PLAYING: 'playing',
+  ENDED: 'ended',
+  CANCELLED: 'cancelled'
+};
+
 var initialRegion = {
   complete: false,
   containerName: '',
@@ -761,56 +769,6 @@ var initialRegion = {
   xlr: {}
 };
 
-var MediaState = {
-  IDLE: 'idle',
-  PLAYING: 'playing',
-  ENDED: 'ended',
-  CANCELLED: 'cancelled'
-};
-var initialMedia = {
-  attachedAudio: false,
-  checkIframeStatus: false,
-  containerName: '',
-  divHeight: 0,
-  divWidth: 0,
-  duration: 0,
-  emitter: {},
-  enableStat: false,
-  fileId: '',
-  finished: false,
-  html: null,
-  id: '',
-  idCounter: 0,
-  iframe: null,
-  iframeName: '',
-  index: 0,
-  loadIframeOnRun: false,
-  loop: false,
-  mediaId: '',
-  mediaType: '',
-  muted: false,
-  options: {},
-  player: undefined,
-  ready: true,
-  region: initialRegion,
-  render: 'html',
-  run: function run() {},
-  schemaVersion: '1',
-  singlePlay: false,
-  state: MediaState.IDLE,
-  stop: function stop() {
-    return Promise.resolve();
-  },
-  tempSrc: '',
-  timeoutId: setTimeout(function () {}, 0),
-  type: '',
-  uri: '',
-  url: null,
-  useDuration: Boolean(0),
-  xml: null,
-  mediaTimer: undefined
-};
-
 var OverlayLayoutManager = /*#__PURE__*/function () {
   function OverlayLayoutManager() {
     _classCallCheck(this, OverlayLayoutManager);
@@ -1107,6 +1065,7 @@ var initialXlr = {
   isLayoutInDOM: function isLayoutInDOM(containerName, layoutId) {
     return false;
   },
+  cleanupOrphanedLayouts: function cleanupOrphanedLayouts(_keepCurrent, _keepNext) {},
   isSspEnabled: false,
   isUpdatingLoop: false,
   isUpdatingOverlays: false,
@@ -72527,6 +72486,10 @@ if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
 function composeVideoSource($media, media) {
   // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
   var vidType = videoFileType(getFileExt(media.uri));
+  if (!vidType) {
+    console.warn("XLR >> VideoMedia: Unsupported video type for media ".concat(media.id, " with uri ").concat(media.uri));
+    return $media;
+  }
   // Only add one source per type
   if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
     var $videoSource = document.createElement('source');
@@ -72553,8 +72516,38 @@ var vjsDefaultOptions = function vjsDefaultOptions(opts) {
 };
 var reportToPlayerPlatform = [ConsumerPlatform.CHROMEOS, ConsumerPlatform.ELECTRON];
 function VideoMedia(media, xlr) {
+  var stopped = false;
   var mediaId = getMediaId(media);
+  // ── Stall watchdog (closure-level so stop() can cancel it) ───────────────
+  // 'waiting' and 'stalled' fire when the browser stops receiving data.
+  // Unlike codec or source errors they do NOT fire the 'error' event, so
+  // without a watchdog the video silently freezes for its entire duration.
+  var stallWatchdog;
+  var STALL_TIMEOUT_MS = 10000;
+  var clearStallWatchdog = function clearStallWatchdog() {
+    if (stallWatchdog !== undefined) {
+      clearTimeout(stallWatchdog);
+      stallWatchdog = undefined;
+    }
+  };
+  // ─────────────────────────────────────────────────────────────────────────
+  // ── Unified error → report → stop helper (closure-level) ─────────────────
+  // Used by both the 'error' event and the play Promise catch.
+  // playerReportFault only fires for platforms that report faults (Electron,
+  // ChromeOS). All other platforms just advance to the next media via stop().
+  var reportAndStop = function reportAndStop(reason, code) {
+    if (stopped) return;
+    if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+      playerReportFault(reason, media, code).then(function () {
+        return videoPlayer.stop();
+      });
+    } else {
+      videoPlayer.stop();
+    }
+  };
+  // ─────────────────────────────────────────────────────────────────────────
   var videoPlayer = {
+    player: undefined,
     duration: 0,
     init: function init() {
       var _this = this;
@@ -72562,9 +72555,37 @@ function VideoMedia(media, xlr) {
       videoPlayer.duration = media.duration;
       var vjsPlayer = videojs(mediaId);
       if (vjsPlayer) {
-        vjsPlayer.on('loadstart', function () {
-          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-        });
+        videoPlayer.player = vjsPlayer;
+        // ── Early source check ────────────────────────────────────────────────
+        // Two-step check before video.js tries to load anything:
+        // 1. Is the file extension one we map to a MIME type?
+        // 2. Can the browser actually play that MIME type?
+        // Failing either step skips the media immediately so video.js
+        // never renders its "No compatible source" error overlay.
+        var vidType = videoFileType(getFileExt(media.uri));
+        if (!vidType) {
+          console.warn("XLR >> VideoMedia: unrecognised file extension for media ".concat(media.id, " (uri: ").concat(media.uri, ")"));
+          reportAndStop("Unsupported video file extension for media ".concat(media.id), FaultCodes.FaultVideoSource);
+          return;
+        }
+        if (document.createElement('video').canPlayType(vidType) === '') {
+          console.warn("XLR >> VideoMedia: browser cannot play type \"".concat(vidType, "\" for media ").concat(media.id));
+          reportAndStop("Browser cannot play video type \"".concat(vidType, "\" for media ").concat(media.id), FaultCodes.FaultVideoSource);
+          return;
+        }
+        // ─────────────────────────────────────────────────────────────────────
+        var armStallWatchdog = function armStallWatchdog() {
+          clearStallWatchdog();
+          stallWatchdog = setTimeout(function () {
+            if (stopped) return;
+            console.warn("XLR >> VideoMedia: stall timeout on media ".concat(media.id));
+            reportAndStop('Video stall timeout', FaultCodes.FaultVideoUnexpected);
+          }, STALL_TIMEOUT_MS);
+        };
+        vjsPlayer.on('waiting', armStallWatchdog);
+        vjsPlayer.on('stalled', armStallWatchdog);
+        vjsPlayer.on('playing', clearStallWatchdog);
+        vjsPlayer.on('ended', clearStallWatchdog);
         vjsPlayer.on('loadedmetadata', function () {
           if (media.duration === 0) {
             videoPlayer.duration = vjsPlayer.duration();
@@ -72635,34 +72656,20 @@ function VideoMedia(media, xlr) {
               }, 5000);
             })]).then(function () {
               console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay started"));
-            })["catch"]( /*#__PURE__*/function () {
-              var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(error) {
-                return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-                  while (1) switch (_context2.prev = _context2.next) {
-                    case 0:
-                      if (error === 'Timeout') {
-                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
-                        _this.stop();
-                      } else {
-                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
-                        if (reportToPlayerPlatform.includes(xlr.config.platform)) {
-                          playerReportFault('Media autoplay error', media).then(function () {
-                            _this.stop();
-                          });
-                        }
-                      }
-                    case 1:
-                    case "end":
-                      return _context2.stop();
-                  }
-                }, _callee2);
-              }));
-              return function (_x) {
-                return _ref2.apply(this, arguments);
-              };
-            }());
+            })["catch"](function (error) {
+              if (stopped) return;
+              if (error === 'Timeout') {
+                console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                // Timeout is a scheduling issue, not a media fault — just advance
+                videoPlayer.stop();
+              } else {
+                console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                reportAndStop('Media autoplay error', FaultCodes.FaultVideoUnexpected);
+              }
+            });
             // Optional: Reset the flag automatically when a new video loads or the source changes
             vjsPlayer.on('loadstart', function () {
+              console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
               triggerTimeUpdate = false;
             });
             if (media.duration === 0) {
@@ -72675,13 +72682,9 @@ function VideoMedia(media, xlr) {
                 if (mediaDuration !== undefined && currentTime !== undefined) {
                   remainingTimeMs = (mediaDuration - currentTime) * 1000;
                 }
-                if (regionHasMultipleMedia && remainingTimeMs === 0 && !triggerTimeUpdate) {
-                  // We don't have data yet and we must immediately prepare next media
-                  media.region.prepareNextMedia();
-                } else if (regionHasMultipleMedia && remainingTimeMs <= preloadBufferTimeMs && !triggerTimeUpdate) {
+                if (regionHasMultipleMedia && !triggerTimeUpdate && (remainingTimeMs === 0 || remainingTimeMs <= preloadBufferTimeMs)) {
                   // Check if remaining time is less than preloadBufferTimeMs and the action hasn't been triggered yet
                   console.log('Less than preloadBufferTimeMs remaining! Do something now.');
-                  // Prepare next media in region
                   media.region.prepareNextMedia();
                   triggerTimeUpdate = true; // Set the flag to prevent re-triggering
                 }
@@ -72693,33 +72696,16 @@ function VideoMedia(media, xlr) {
             }
           }
         });
-        vjsPlayer.on('error', /*#__PURE__*/function () {
-          var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(err) {
-            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
-                case 0:
-                  console.debug("??? XLR.debug >> VideoMedia: Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-                  if (reportToPlayerPlatform.includes(xlr.config.platform)) {
-                    playerReportFault('Video file source not supported', media).then(function () {
-                      _this.stop();
-                    });
-                  } else {
-                    // End media after 5 seconds
-                    setTimeout(function () {
-                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
-                      _this.stop();
-                    }, 5000);
-                  }
-                case 2:
-                case "end":
-                  return _context3.stop();
-              }
-            }, _callee3);
-          }));
-          return function (_x2) {
-            return _ref3.apply(this, arguments);
-          };
-        }());
+        vjsPlayer.on('error', function () {
+          if (stopped) return;
+          clearStallWatchdog();
+          // Extract the actual MediaError so the fault message is
+          // meaningful: code 2 = network, 3 = decode, 4 = not supported.
+          var vjsError = vjsPlayer.error();
+          var reason = vjsError ? "Video error (code ".concat(vjsError.code, "): ").concat(vjsError.message) : 'Unknown video error';
+          console.warn("XLR >> VideoMedia: error on media ".concat(media.id), vjsError);
+          reportAndStop(reason, FaultCodes.FaultVideoUnexpected);
+        });
         if (media.duration === 0) {
           vjsPlayer.on('ended', function () {
             console.debug("??? XLR.debug >> VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
@@ -72729,26 +72715,37 @@ function VideoMedia(media, xlr) {
       }
     },
     stop: function stop() {
+      var _videoPlayer$player;
       var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var vjsPlayer = media.player;
+      clearStallWatchdog();
+      // videoPlayer.player is where init() stores the vjs instance;
+      // media.player is a legacy path kept for backward compat but is
+      // no longer set by init(), so always prefer videoPlayer.player.
+      var vjsPlayer = (_videoPlayer$player = videoPlayer.player) !== null && _videoPlayer$player !== void 0 ? _videoPlayer$player : media.player;
       console.debug('??? XLR.debug >> VideoMedia::stop', {
         vjsPlayer: vjsPlayer,
-        isDisposed: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.isDisposed_,
-        el: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.el_
+        isDisposed: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.isDisposed(),
+        el: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.el()
       });
       // Expire the media and dispose the video
-      if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
+      if (vjsPlayer !== undefined && !vjsPlayer.isDisposed()) {
         if (!disposeOnly) {
           media.emitter.emit('end', media);
         }
         vjsPlayer.dispose();
         // Clear up media player
+        videoPlayer.player = undefined;
         media.player = undefined;
+        media.html = null;
       } else {
+        videoPlayer.player = undefined;
         media.player = undefined;
         media.html = null;
-        media.emitter.emit('end', media);
+        if (!disposeOnly) {
+          media.emitter.emit('end', media);
+        }
       }
+      stopped = true;
     },
     play: function play() {
       var _this2 = this;
@@ -72756,9 +72753,9 @@ function VideoMedia(media, xlr) {
       if (vjsPlayer !== undefined) {
         var _vjsPlayer$play;
         (_vjsPlayer$play = vjsPlayer.play()) === null || _vjsPlayer$play === void 0 || _vjsPlayer$play["catch"]( /*#__PURE__*/function () {
-          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(error) {
-            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-              while (1) switch (_context4.prev = _context4.next) {
+          var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(error) {
+            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
                 case 0:
                   if (error === 'Timeout') {
                     console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
@@ -72773,12 +72770,12 @@ function VideoMedia(media, xlr) {
                   }
                 case 1:
                 case "end":
-                  return _context4.stop();
+                  return _context2.stop();
               }
-            }, _callee4);
+            }, _callee2);
           }));
-          return function (_x3) {
-            return _ref4.apply(this, arguments);
+          return function (_x) {
+            return _ref2.apply(this, arguments);
           };
         }());
       }
@@ -73190,11 +73187,11 @@ function getDataBlob(_x, _x2) {
   return _getDataBlob.apply(this, arguments);
 }
 function _getDataBlob() {
-  _getDataBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(src, jwtToken) {
-    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+  _getDataBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(src, jwtToken) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          return _context3.abrupt("return", fetch(src, {
+          return _context2.abrupt("return", fetch(src, {
             method: 'GET',
             headers: {
               'X-PREVIEW-JWT': jwtToken || ''
@@ -73213,9 +73210,9 @@ function _getDataBlob() {
           }));
         case 1:
         case "end":
-          return _context3.stop();
+          return _context2.stop();
       }
-    }, _callee3);
+    }, _callee2);
   }));
   return _getDataBlob.apply(this, arguments);
 }
@@ -73223,12 +73220,12 @@ function preloadMediaBlob(_x3, _x4, _x5) {
   return _preloadMediaBlob.apply(this, arguments);
 }
 function _preloadMediaBlob() {
-  _preloadMediaBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(src, type, jwtToken) {
+  _preloadMediaBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(src, type, jwtToken) {
     var res, blob, data;
-    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _context4.next = 2;
+          _context3.next = 2;
           return fetch(src, {
             method: 'GET',
             headers: {
@@ -73236,45 +73233,45 @@ function _preloadMediaBlob() {
             }
           });
         case 2:
-          res = _context4.sent;
+          res = _context3.sent;
           blob = new Blob();
           if (!(type === 'image')) {
-            _context4.next = 8;
+            _context3.next = 8;
             break;
           }
           blob = new Blob();
-          _context4.next = 19;
+          _context3.next = 19;
           break;
         case 8:
           if (!(type === 'video')) {
-            _context4.next = 14;
+            _context3.next = 14;
             break;
           }
-          _context4.next = 11;
+          _context3.next = 11;
           return res.blob();
         case 11:
-          blob = _context4.sent;
-          _context4.next = 19;
+          blob = _context3.sent;
+          _context3.next = 19;
           break;
         case 14:
           if (!(type === 'audio')) {
-            _context4.next = 19;
+            _context3.next = 19;
             break;
           }
-          _context4.next = 17;
+          _context3.next = 17;
           return res.arrayBuffer();
         case 17:
-          data = _context4.sent;
+          data = _context3.sent;
           blob = new Blob([data], {
             type: audioFileType(getFileExt(src))
           });
         case 19:
-          return _context4.abrupt("return", URL.createObjectURL(blob));
+          return _context3.abrupt("return", URL.createObjectURL(blob));
         case 20:
         case "end":
-          return _context4.stop();
+          return _context3.stop();
       }
-    }, _callee4);
+    }, _callee3);
   }));
   return _preloadMediaBlob.apply(this, arguments);
 }
@@ -73282,11 +73279,11 @@ function fetchJSON(_x6, _x7) {
   return _fetchJSON.apply(this, arguments);
 }
 function _fetchJSON() {
-  _fetchJSON = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(url, jwtToken) {
-    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
+  _fetchJSON = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(url, jwtToken) {
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
         case 0:
-          return _context5.abrupt("return", fetch(url, {
+          return _context4.abrupt("return", fetch(url, {
             method: 'GET',
             headers: {
               'X-PREVIEW-JWT': jwtToken || ''
@@ -73298,9 +73295,9 @@ function _fetchJSON() {
           }));
         case 1:
         case "end":
-          return _context5.stop();
+          return _context4.stop();
       }
-    }, _callee5);
+    }, _callee4);
   }));
   return _fetchJSON.apply(this, arguments);
 }
@@ -73308,11 +73305,11 @@ function fetchText(_x8, _x9) {
   return _fetchText.apply(this, arguments);
 }
 function _fetchText() {
-  _fetchText = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(url, jwtToken) {
-    return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+  _fetchText = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(url, jwtToken) {
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
         case 0:
-          return _context6.abrupt("return", fetch(url, {
+          return _context5.abrupt("return", fetch(url, {
             method: 'GET',
             headers: {
               'X-PREVIEW-JWT': jwtToken || ''
@@ -73331,9 +73328,9 @@ function _fetchText() {
           }));
         case 1:
         case "end":
-          return _context6.stop();
+          return _context5.stop();
       }
-    }, _callee6);
+    }, _callee5);
   }));
   return _fetchText.apply(this, arguments);
 }
@@ -73450,6 +73447,32 @@ function setExpiry(numDays) {
   var today = new Date();
   return new Date(today.setHours(24 * numDays || 1)).toJSON();
 }
+/**
+ * Check whether a media item is currently within its valid date window.
+ * Returns true when the media should be shown, false when it should be skipped.
+ *
+ * Rules:
+ *  - Empty / invalid fromDt  → treat as "no start restriction"
+ *  - Empty / invalid toDt    → treat as "no expiry"
+ *  - now < fromDt            → not yet active   → skip
+ *  - now > toDt              → expired          → skip
+ */
+function isMediaActive(fromDt, toDt) {
+  var now = Date.now();
+  if (fromDt) {
+    var from = new Date(fromDt).getTime();
+    if (!isNaN(from) && now < from) {
+      return false;
+    }
+  }
+  if (toDt) {
+    var to = new Date(toDt).getTime();
+    if (!isNaN(to) && now > to) {
+      return false;
+    }
+  }
+  return true;
+}
 /**
  * Check if given layout exists in the loop using layoutId
  * @param layouts Schedule loop unique layouts (uniqueLayouts)
@@ -73658,7 +73681,7 @@ function prepareVideoMedia(media, region) {
     var $layout = region.layout.html;
     var layoutSelector = '#' + region.layout.containerName + '[data-sequence="' + region.layout.index + '"]';
     var $layoutWithIndex = document.querySelector(layoutSelector);
-    var $region = document.querySelector('#' + region.containerName);
+    var $region = region.html;
     var mediaInRegion = $region === null || $region === void 0 ? void 0 : $region.querySelector('.' + mediaId);
     console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
       layoutSelector: layoutSelector,
@@ -73677,7 +73700,7 @@ function prepareVideoMedia(media, region) {
       media.html = createMediaElement(media);
     }
     // Append fresh copy of the media into the region
-    $region !== null && $region.appendChild(media.html);
+    region.html.appendChild(media.html);
     var isMediaInDOM = document.body.contains(media.html);
     console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
       isMediaInDOM: isMediaInDOM,
@@ -73686,29 +73709,9 @@ function prepareVideoMedia(media, region) {
     });
     // Initialize video.js
     media.player = videojs(mediaId, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-      errorDisplay: region.xlr.config.platform !== ConsumerPlatform.CHROMEOS,
+      errorDisplay: !reportToPlayerPlatform.includes(region.xlr.config.platform),
       loop: media.loop
     }));
-    media.player.on('error', /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              if (media.region.xlr.config.platform === ConsumerPlatform.CHROMEOS) {
-                playerReportFault('Video file not supported', media).then(function () {
-                  media.emitter.emit('end', media);
-                });
-              }
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function (_x10) {
-        return _ref3.apply(this, arguments);
-      };
-    }());
     media.player.el().style.setProperty('visibility', 'hidden');
     media.player.el().style.setProperty('opacity', '0');
     media.player.el().style.setProperty('z-index', '-99');
@@ -73723,9 +73726,9 @@ function prepareImageMedia(media, region) {
   if (mediaInRegion) {
     mediaInRegion.remove();
   }
-  // Append media to its region
-  var $region = document.querySelector('#' + region.containerName);
-  $region !== null && $region.appendChild(media.html);
+  // Append media to its region using the direct reference to avoid
+  // global querySelector finding a same-named region in another layout
+  region.html.appendChild(media.html);
 }
 function prepareAudioMedia(media, region) {
   var mediaId = getMediaId(media);
@@ -73738,9 +73741,8 @@ function prepareAudioMedia(media, region) {
   if (mediaInRegion) {
     mediaInRegion.remove();
   }
-  // Append media to its region
-  var $region = document.querySelector('#' + region.containerName);
-  $region !== null && $region.appendChild(media.html);
+  // Append media to its region using the direct reference
+  region.html.appendChild(media.html);
 }
 function prepareHtmlMedia(media, region) {
   // Set state as false ( for now )
@@ -73760,57 +73762,92 @@ function prepareHtmlMedia(media, region) {
     media.html.innerHTML = '';
     media.html.appendChild(media.iframe);
     if (!mediaInRegion) {
-      // Add fresh copy of the media into the region
-      var _$region = document.querySelector('#' + region.containerName);
-      _$region !== null && _$region.appendChild(media.html);
+      // Add fresh copy of the media into the region using the direct reference
+      region.html.appendChild(media.html);
       media.ready = true;
     }
   }
 }
-function playerReportFault(_x11, _x12) {
+var FaultCodes;
+(function (FaultCodes) {
+  FaultCodes[FaultCodes["FaultVideoSource"] = 2001] = "FaultVideoSource";
+  FaultCodes[FaultCodes["FaultVideoUnexpected"] = 2099] = "FaultVideoUnexpected";
+})(FaultCodes || (FaultCodes = {}));
+function playerReportFault(_x10, _x11) {
   return _playerReportFault.apply(this, arguments);
 }
 function _playerReportFault() {
-  _playerReportFault = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(msg, media) {
-    var playerSW, hasSW;
-    return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
+  _playerReportFault = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(msg, media) {
+    var code,
+      platform,
+      playerSW,
+      hasSW,
+      mediaFault,
+      channel,
+      _args6 = arguments;
+    return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
         case 0:
+          code = _args6.length > 2 && _args6[2] !== undefined ? _args6[2] : FaultCodes.FaultVideoUnexpected;
           // Immediately expire media and report a fault
+          platform = media.region.xlr.config.platform;
           playerSW = PwaSW();
-          _context7.next = 3;
+          _context6.next = 5;
           return playerSW.getSW();
-        case 3:
-          hasSW = _context7.sent;
-          if (hasSW) {
-            playerSW.postMsg({
-              type: 'MEDIA_FAULT',
-              code: 5002,
-              reason: msg,
+        case 5:
+          hasSW = _context6.sent;
+          mediaFault = {
+            type: 'MEDIA_FAULT',
+            code: code,
+            reason: msg,
+            mediaId: media.id,
+            regionId: media.region.id,
+            layoutId: media.region.layout.id,
+            date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+            // Temporary setting
+            expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
+          };
+          console.debug('playerReportFault >> Reporting media fault', {
+            mediaFault: mediaFault,
+            platform: platform,
+            hasSW: hasSW
+          });
+          if (!(platform === ConsumerPlatform.CHROMEOS && hasSW)) {
+            _context6.next = 12;
+            break;
+          }
+          return _context6.abrupt("return", playerSW.postMsg(mediaFault).then(function () {
+            // We try to prepare next media if we have more than 1 media
+            if (media.region.totalMediaObjects > 1) {
+              media.region.prepareNextMedia();
+            }
+          })["finally"](function () {
+            // Stopping media as we have reported the error as fault
+            console.debug('??? XLR.debug >> VideoMedia - Done reporting media fault', {
               mediaId: media.id,
-              regionId: media.region.id,
-              layoutId: media.region.layout.id,
-              date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-              // Temporary setting
-              expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
-            }).then(function () {
-              // We try to prepare next media if we have more than 1 media
-              if (media.region.totalMediaObjects > 1) {
-                media.region.prepareNextMedia();
-              }
-            })["finally"](function () {
-              // Stopping media as we have reported the error as fault
-              console.debug('??? XLR.debug >> VideoMedia - Done reporting media fault', {
-                mediaId: media.id,
-                regionItems: media.region.totalMediaObjects
-              });
+              regionItems: media.region.totalMediaObjects
             });
+          }));
+        case 12:
+          if (!(platform === ConsumerPlatform.ELECTRON)) {
+            _context6.next = 17;
+            break;
           }
-        case 5:
+          // Create a broadcast channel to report media fault to the main process
+          channel = new BroadcastChannel('player-faults-bc');
+          channel.postMessage(mediaFault);
+          console.debug('playerReportFault >> Electron platform - posted media fault to channel', {
+            mediaFault: mediaFault
+          });
+          // channel.close();
+          return _context6.abrupt("return", Promise.resolve());
+        case 17:
+          return _context6.abrupt("return", Promise.resolve());
+        case 18:
         case "end":
-          return _context7.stop();
+          return _context6.stop();
       }
-    }, _callee7);
+    }, _callee6);
   }));
   return _playerReportFault.apply(this, arguments);
 }
@@ -73838,7 +73875,7 @@ let nanoid = (size = 21) => {
 function AudioMedia(media) {
   var audioMediaObject = {
     init: function init() {
-      var $audioMedia = document.getElementById(getMediaId(media));
+      var $audioMedia = media.html;
       var $playBtn = null;
       if ($audioMedia) {
         $audioMedia.onloadstart = function () {
@@ -73901,6 +73938,8 @@ var Media = /*#__PURE__*/function () {
       _this$xml3,
       _this$xml4,
       _this$xml5,
+      _this$xml6,
+      _this$xml7,
       _this = this;
     _classCallCheck(this, Media);
     _defineProperty(this, "attachedAudio", false);
@@ -73913,6 +73952,7 @@ var Media = /*#__PURE__*/function () {
     _defineProperty(this, "enableStat", false);
     _defineProperty(this, "fileId", '');
     _defineProperty(this, "finished", false);
+    _defineProperty(this, "fromDt", '');
     _defineProperty(this, "html", null);
     _defineProperty(this, "id", '');
     _defineProperty(this, "idCounter", 0);
@@ -73934,6 +73974,7 @@ var Media = /*#__PURE__*/function () {
     _defineProperty(this, "state", MediaState.IDLE);
     _defineProperty(this, "tempSrc", '');
     _defineProperty(this, "timeoutId", setTimeout(function () {}, 0));
+    _defineProperty(this, "toDt", '');
     _defineProperty(this, "type", '');
     _defineProperty(this, "uri", '');
     _defineProperty(this, "url", null);
@@ -73960,12 +74001,14 @@ var Media = /*#__PURE__*/function () {
     this.duration = parseInt((_this$xml4 = this.xml) === null || _this$xml4 === void 0 ? void 0 : _this$xml4.getAttribute('duration')) || 0;
     this.enableStat = Boolean(((_this$xml5 = this.xml) === null || _this$xml5 === void 0 ? void 0 : _this$xml5.getAttribute('enableStat')) || false);
     this.hasCommandExecuted = false;
+    this.fromDt = ((_this$xml6 = this.xml) === null || _this$xml6 === void 0 ? void 0 : _this$xml6.getAttribute('fromDt')) || '';
+    this.toDt = ((_this$xml7 = this.xml) === null || _this$xml7 === void 0 ? void 0 : _this$xml7.getAttribute('toDt')) || '';
     this.on('start', function (media) {
       if (media.state === MediaState.PLAYING) return;
       media.state = MediaState.PLAYING;
       if (media.mediaType === 'video') {
-        var videoMedia = VideoMedia(media, _this.xlr);
-        videoMedia.init();
+        media.videoHandler = VideoMedia(media, _this.xlr);
+        media.videoHandler.init();
         if (media.duration > 0) {
           _this.startMediaTimer(media);
         }
@@ -74092,8 +74135,8 @@ var Media = /*#__PURE__*/function () {
           if (media.mediaType === 'video') {
             // Dispose the video media
             console.debug("??? XLR.debug >> VideoMedia::stop - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-            if (media.player !== undefined) {
-              VideoMedia(media, _this2.xlr).stop(true);
+            if (media.videoHandler !== undefined) {
+              media.videoHandler.stop(true);
             }
           }
         }
@@ -74108,8 +74151,8 @@ var Media = /*#__PURE__*/function () {
   }, {
     key: "init",
     value: function init() {
-      var _this$xml6;
-      var mediaOptions = (_this$xml6 = this.xml) === null || _this$xml6 === void 0 ? void 0 : _this$xml6.getElementsByTagName('options');
+      var _this$xml8;
+      var mediaOptions = (_this$xml8 = this.xml) === null || _this$xml8 === void 0 ? void 0 : _this$xml8.getElementsByTagName('options');
       if (mediaOptions) {
         for (var _i = 0, _Array$from = Array.from(mediaOptions); _i < _Array$from.length; _i++) {
           var _options = _Array$from[_i];
@@ -74164,6 +74207,10 @@ var Media = /*#__PURE__*/function () {
         }
       } else if (this.xlr.config.platform === ConsumerPlatform.ELECTRON) {
         tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
+        // this is an SSP Layout
+        if (this.region.layout.layoutId === -1) {
+          tmpUrl = this.uri;
+        }
       }
       this.url = tmpUrl;
       // Loop if media has loop, or if region has loop and a single media
@@ -74206,8 +74253,8 @@ var Media = /*#__PURE__*/function () {
           mediaType: _this3.mediaType,
           containerName: _this3.containerName
         });
-        var $region = document.querySelector('#' + _this3.region.containerName);
-        var $media = $region !== null && $region.querySelector('.' + mediaId);
+        var $region = _this3.region.html;
+        var $media = $region.querySelector('.' + mediaId);
         if (!$media) {
           $media = getNewMedia();
         }
@@ -74271,13 +74318,13 @@ var Media = /*#__PURE__*/function () {
         }
       };
       var getNewMedia = function getNewMedia() {
-        var $region = document.getElementById("".concat(_this3.region.containerName));
+        var $region = _this3.region.html;
         // This function is for checking whether
         // the region still has to show a media item
         // when another region is not finished yet
         if (_this3.region.complete && !_this3.region.layout.allEnded) {
           // Add currentMedia to the region
-          $region && $region.insertBefore(_this3.html, $region.lastElementChild);
+          $region.insertBefore(_this3.html, $region.lastElementChild);
           return _this3.html;
         }
         return null;
@@ -74288,23 +74335,18 @@ var Media = /*#__PURE__*/function () {
     key: "stop",
     value: function () {
       var _stop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var $media;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              $media = document.getElementById(getMediaId({
-                mediaType: this.mediaType,
-                containerName: this.containerName
-              }));
-              if ($media) {
-                $media.style.display = 'none';
-                $media.remove();
+              if (this.html) {
+                this.html.style.display = 'none';
+                this.html.remove();
               }
               // Release blob URLs for image media to prevent memory leaks on long-running signage
               if (this.mediaType === 'image' && this.url) {
                 BlobLoader.release(this.url);
               }
-            case 3:
+            case 2:
             case "end":
               return _context.stop();
           }
@@ -74477,18 +74519,30 @@ var Region = /*#__PURE__*/function () {
       this.html = $region;
       /* Parse region media objects */
       var regionMediaItems = Array.from(this.xml.getElementsByTagName('media'));
-      this.totalMediaObjects = regionMediaItems.length;
       $layout && $layout.appendChild(this.html);
       Array.from(regionMediaItems).forEach( /*#__PURE__*/function () {
         var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(mediaXml, indx) {
-          var mediaObj;
+          var fromDt, toDt, mediaObj;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
+                fromDt = mediaXml.getAttribute('fromDt') || '';
+                toDt = mediaXml.getAttribute('toDt') || '';
+                if (isMediaActive(fromDt, toDt)) {
+                  _context.next = 5;
+                  break;
+                }
+                console.debug('??? XLR.debug >> Region::prepareRegion - skipping expired/inactive media', {
+                  mediaId: mediaXml.getAttribute('id'),
+                  fromDt: fromDt,
+                  toDt: toDt
+                });
+                return _context.abrupt("return");
+              case 5:
                 mediaObj = new Media(_this, (mediaXml === null || mediaXml === void 0 ? void 0 : mediaXml.getAttribute('id')) || '', mediaXml, _this.options, _this.xlr);
                 mediaObj.index = indx;
                 _this.mediaObjects.push(mediaObj);
-              case 3:
+              case 8:
               case "end":
                 return _context.stop();
             }
@@ -74498,6 +74552,7 @@ var Region = /*#__PURE__*/function () {
           return _ref.apply(this, arguments);
         };
       }());
+      this.totalMediaObjects = this.mediaObjects.length;
       console.debug('??? XLR.debug >> Region - done looping through media', {
         mediaObjects: this.mediaObjects
       });
@@ -74553,6 +74608,23 @@ var Region = /*#__PURE__*/function () {
     key: "prepareNextMedia",
     value: function prepareNextMedia() {
       var nextMediaIndex = (this.currentMediaIndex + 1) % this.totalMediaObjects;
+      // Skip over any media items that are no longer within their active date window
+      var skippedCount = 0;
+      while (skippedCount < this.totalMediaObjects) {
+        var candidate = this.mediaObjects[nextMediaIndex];
+        if (isMediaActive(candidate.fromDt, candidate.toDt)) {
+          break;
+        }
+        skippedCount++;
+        nextMediaIndex = (nextMediaIndex + 1) % this.totalMediaObjects;
+      }
+      // Nothing to pre-load when:
+      // - every item is expired, OR
+      // - the only active item is the one currently playing (skip loop wrapped back to it)
+      if (skippedCount >= this.totalMediaObjects || nextMediaIndex === this.currentMediaIndex) {
+        console.debug('<><> XLR.debug >> [Region::prepareNextMedia()] - no active next media to preload');
+        return;
+      }
       var nextMedia = this.mediaObjects[nextMediaIndex];
       console.debug('<><> XLR.debug >> [Media] - [Region::prepareNextMedia()] - Preparing next media', {
         currentMediaIndex: this.currentMediaIndex,
@@ -74593,9 +74665,21 @@ var Region = /*#__PURE__*/function () {
   }, {
     key: "run",
     value: function run() {
+      var _this$currMedia, _this$oldMedia2;
       console.debug('??? XLR.debug >> Region Called Region::run > ', this.id);
       // Reset region states
       this.reset();
+      // All media were filtered out (all expired/inactive before this run started)
+      if (this.mediaObjects.length === 0) {
+        console.debug('??? XLR.debug >> Region::run - no active media, finishing region', this.id);
+        this.finished();
+        return;
+      }
+      console.debug('??? XLR.debug >> Region Called Region::run - after reset > ', {
+        regionId: this.id,
+        currMedia: (_this$currMedia = this.currMedia) === null || _this$currMedia === void 0 ? void 0 : _this$currMedia.containerName,
+        oldMedia: (_this$oldMedia2 = this.oldMedia) === null || _this$oldMedia2 === void 0 ? void 0 : _this$oldMedia2.containerName
+      });
       if (this.currMedia) {
         this.transitionNodes(this.oldMedia, this.currMedia);
       }
@@ -74644,6 +74728,7 @@ var Region = /*#__PURE__*/function () {
           // Hide oldMedia
           if (oldMedia) {
             var $layout = document.querySelector("#".concat(_this2.layout.containerName, "[data-sequence=\"").concat(_this2.layout.index, "\"]"));
+            if (!$layout) return;
             var $region = $layout.querySelector('#' + _this2.containerName);
             var $oldMedia = $region ? $region.querySelector('.' + getMediaId(oldMedia)) : null;
             if ($oldMedia) {
@@ -74664,7 +74749,7 @@ var Region = /*#__PURE__*/function () {
                       $videoWrapper.style.setProperty('visibility', 'hidden');
                       $videoWrapper.style.setProperty('z-index', '-999');
                       $videoWrapper.style.setProperty('opacity', '0');
-                      if (oldMedia.player && oldMedia.videoHandler) {
+                      if (oldMedia.videoHandler) {
                         oldMedia.videoHandler.stop(true);
                       }
                     }
@@ -74724,13 +74809,13 @@ var Region = /*#__PURE__*/function () {
   }, {
     key: "playNextMedia",
     value: function playNextMedia() {
-      var _this$oldMedia2, _this$currMedia, _this$nxtMedia, _this$currMedia2, _this$currMedia3, _this$currMedia4, _this$currMedia5, _this$currMedia6, _this$oldMedia3, _this$currMedia7, _this$nxtMedia2;
+      var _this$oldMedia3, _this$currMedia2, _this$nxtMedia, _this$currMedia3, _this$currMedia4, _this$currMedia5, _this$currMedia6, _this$oldMedia4, _this$currMedia7, _this$nxtMedia2;
       console.debug('??? XLR.debug Region playing next media', {
         regionId: this.id,
         currentMediaIndex: this.currentMediaIndex,
         mediaItemsLn: this.mediaObjects.length,
-        oldMedia: (_this$oldMedia2 = this.oldMedia) === null || _this$oldMedia2 === void 0 ? void 0 : _this$oldMedia2.containerName,
-        currMedia: (_this$currMedia = this.currMedia) === null || _this$currMedia === void 0 ? void 0 : _this$currMedia.containerName,
+        oldMedia: (_this$oldMedia3 = this.oldMedia) === null || _this$oldMedia3 === void 0 ? void 0 : _this$oldMedia3.containerName,
+        currMedia: (_this$currMedia2 = this.currMedia) === null || _this$currMedia2 === void 0 ? void 0 : _this$currMedia2.containerName,
         nxtMedia: (_this$nxtMedia = this.nxtMedia) === null || _this$nxtMedia === void 0 ? void 0 : _this$nxtMedia.containerName
       });
       /* The current media has finished running */
@@ -74740,33 +74825,20 @@ var Region = /*#__PURE__*/function () {
         });
         return;
       }
-      // Are we in a playlist, and has the playlist completed a full cycle?
-      var isLastMediaInPlaylist = this.currentMediaIndex === this.mediaObjects.length - 1 && this.mediaObjects.length > 1;
-      // If yes, enable shell command widgets again (if any), so they execute on the next playlist cycle
-      if (isLastMediaInPlaylist) {
-        this.mediaObjects.forEach(function (media) {
-          if (media.mediaType === 'shellcommand') {
-            // reset per-playlist-cycle execution state
-            media.hasCommandExecuted = false;
-          }
-        });
-      }
-      if (!this.layout.isOverlay && this.currentMediaIndex === this.mediaObjects.length - 1) {
-        this.finished();
-        if (this.layout.allEnded) {
-          console.debug('??? XLR.debug >> Region - playNextMedia - layout all ended');
-          return;
-        }
-      }
+      // Snapshot the index of the media that just ended so we can detect
+      // cycle completion after the skip loop runs.
+      var origIndex = this.currentMediaIndex;
       // When the region has completed and when currentMedia is html
       // Then, preserve the currentMedia state
-      if (this.complete && ((_this$currMedia2 = this.currMedia) === null || _this$currMedia2 === void 0 ? void 0 : _this$currMedia2.render) === 'html') {
+      if (this.complete && ((_this$currMedia3 = this.currMedia) === null || _this$currMedia3 === void 0 ? void 0 : _this$currMedia3.render) === 'html') {
         return;
       }
       // When the region has completed and mediaObjects.length = 1
-      // and curMedia.loop = false, then put the media on
-      // its current state
-      if (this.complete && this.mediaObjects.length === 1 && ((_this$currMedia3 = this.currMedia) === null || _this$currMedia3 === void 0 ? void 0 : _this$currMedia3.render) !== 'html' && (((_this$currMedia4 = this.currMedia) === null || _this$currMedia4 === void 0 ? void 0 : _this$currMedia4.mediaType) === 'image' || ((_this$currMedia5 = this.currMedia) === null || _this$currMedia5 === void 0 ? void 0 : _this$currMedia5.mediaType) === 'video') && !((_this$currMedia6 = this.currMedia) !== null && _this$currMedia6 !== void 0 && _this$currMedia6.loop)) {
+      // and render is not html, preserve the current media state without
+      // calling transitionNodes (which would remove the media from DOM for 1s).
+      // Do NOT restart the media timer here — the layout will end naturally when
+      // regionExpired() detects all regions complete on the next cycle.
+      if (this.complete && this.mediaObjects.length === 1 && ((_this$currMedia4 = this.currMedia) === null || _this$currMedia4 === void 0 ? void 0 : _this$currMedia4.render) !== 'html' && (((_this$currMedia5 = this.currMedia) === null || _this$currMedia5 === void 0 ? void 0 : _this$currMedia5.mediaType) === 'image' || ((_this$currMedia6 = this.currMedia) === null || _this$currMedia6 === void 0 ? void 0 : _this$currMedia6.mediaType) === 'video')) {
         return;
       }
       if (this.currMedia) {
@@ -74774,17 +74846,51 @@ var Region = /*#__PURE__*/function () {
       } else {
         this.oldMedia = undefined;
       }
-      this.currentMediaIndex = (this.currentMediaIndex + 1) % this.totalMediaObjects;
+      this.currentMediaIndex = (origIndex + 1) % this.totalMediaObjects;
       this.currMedia = this.mediaObjects[this.currentMediaIndex];
+      // Skip media items that are no longer within their active date window
+      var skippedCount = 0;
+      while (this.currMedia && !isMediaActive(this.currMedia.fromDt, this.currMedia.toDt)) {
+        skippedCount++;
+        if (skippedCount >= this.totalMediaObjects) {
+          // Every item in the playlist has expired; finish this region
+          console.debug('??? XLR.debug >> Region::playNextMedia - all media expired, finishing region', this.id);
+          this.finished();
+          return;
+        }
+        this.currentMediaIndex = (this.currentMediaIndex + 1) % this.totalMediaObjects;
+        this.currMedia = this.mediaObjects[this.currentMediaIndex];
+      }
       this.nxtMedia = this.mediaObjects[(this.currentMediaIndex + 1) % this.totalMediaObjects];
+      // A full playlist cycle has been traversed when the total advancement
+      // (the initial +1 step plus any skips over expired items) reaches or
+      // crosses the end of the array.
+      var crossedEnd = origIndex + 1 + skippedCount >= this.totalMediaObjects;
+      // Re-enable shell command widgets at the end of each full cycle so they
+      // execute again on the next pass.
+      if (crossedEnd && this.mediaObjects.length > 1) {
+        this.mediaObjects.forEach(function (media) {
+          if (media.mediaType === 'shellcommand') {
+            // reset per-playlist-cycle execution state
+            media.hasCommandExecuted = false;
+          }
+        });
+      }
       console.debug('??? XLR.debug >> End Region::playNextMedia > execute transitionNodes', {
         regionId: this.id,
         currentMediaIndex: this.currentMediaIndex,
         mediaItemsLn: this.mediaObjects.length,
-        oldMedia: (_this$oldMedia3 = this.oldMedia) === null || _this$oldMedia3 === void 0 ? void 0 : _this$oldMedia3.containerName,
+        oldMedia: (_this$oldMedia4 = this.oldMedia) === null || _this$oldMedia4 === void 0 ? void 0 : _this$oldMedia4.containerName,
         currMedia: (_this$currMedia7 = this.currMedia) === null || _this$currMedia7 === void 0 ? void 0 : _this$currMedia7.containerName,
         nxtMedia: (_this$nxtMedia2 = this.nxtMedia) === null || _this$nxtMedia2 === void 0 ? void 0 : _this$nxtMedia2.containerName
       });
+      if (!this.layout.isOverlay && crossedEnd) {
+        this.finished();
+        if (this.layout.allEnded) {
+          console.debug('??? XLR.debug >> Region - playNextMedia - layout all ended');
+          return;
+        }
+      }
       this.transitionNodes(this.oldMedia, this.currMedia);
     }
   }, {
@@ -74813,8 +74919,7 @@ var Region = /*#__PURE__*/function () {
   }, {
     key: "exitTransition",
     value: function exitTransition() {
-      /* TODO: Actually implement region exit transitions */
-      document.getElementById("".concat(this.containerName));
+      /* TODO: Actually implement region exit transitions using this.html */
       console.debug('Called Region::exitTransition ', this.id);
       this.exitTransitionComplete();
     }
@@ -75114,7 +75219,7 @@ var ActionController = /*#__PURE__*/function () {
             if (dataset.source === 'region') {
               // Try to find the region
               if (regionObj.id === dataset.sourceid) {
-                $sourceObj = document.getElementById(regionObj.containerName);
+                $sourceObj = regionObj.html;
                 break;
               }
             } else if (dataset.source === 'widget') {
@@ -75123,7 +75228,7 @@ var ActionController = /*#__PURE__*/function () {
               for (var _i2 = 0, _mediaObjects = mediaObjects; _i2 < _mediaObjects.length; _i2++) {
                 var mediaObject = _mediaObjects[_i2];
                 if (mediaObject.id === dataset.sourceid) {
-                  $sourceObj = document.getElementById(mediaObject.containerName);
+                  $sourceObj = mediaObject.html;
                   break;
                 }
               }
@@ -75388,7 +75493,11 @@ var Layout = /*#__PURE__*/function () {
     this.on('start', function (layout) {
       layout.done = false;
       layout.state = ELayoutState.RUNNING;
-      console.debug('>>>> XLR.debug Layout start emitted > Layout ID > ', layout.id);
+      console.debug('>>>> XLR.debug Layout start emitted > Layout > ', {
+        layoutId: layout.id,
+        layoutIndex: layout.index,
+        layoutState: layout.state
+      });
       // Check if stats are enabled for the layout
       if (layout.enableStat) {
         _this.statsBC.postMessage({
@@ -75409,12 +75518,21 @@ var Layout = /*#__PURE__*/function () {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               if (!(layout.state === ELayoutState.CANCELLED)) {
-                _context2.next = 2;
+                _context2.next = 3;
                 break;
               }
+              console.debug('>>>> XLR.debug Layout end emitted but layout is already cancelled > Layout ID > ', {
+                layoutId: layout.id,
+                layoutIndex: layout.index,
+                layoutState: layout.state
+              });
               return _context2.abrupt("return");
-            case 2:
-              console.debug('>>>> XLR.debug Ending layout with ID of > ', layout.layoutId);
+            case 3:
+              console.debug('>>>> XLR.debug Ending layout', {
+                layoutId: layout.id,
+                layoutIndex: layout.index,
+                layoutState: layout.state
+              });
               /* Remove layout that has ended */
               $layout = document.querySelector("#".concat(layout.containerName, "[data-sequence=\"").concat(layout.index, "\"]")); // Only update layout.state when last state === RUNNING
               if (layout.state === ELayoutState.RUNNING) {
@@ -75425,6 +75543,8 @@ var Layout = /*#__PURE__*/function () {
               console.debug('>>> XLR.debug Layout end emitted > Layout ID > ', {
                 $layout: $layout,
                 layoutId: layout.id,
+                layoutIndex: layout.index,
+                layoutState: layout.state,
                 isOverlay: layout.isOverlay,
                 isInterrupt: layout.isInterrupt()
               });
@@ -75451,9 +75571,9 @@ var Layout = /*#__PURE__*/function () {
               }
               // Emit layout end event
               console.debug('>>>>> XLR.debug Awaited XLR::emitSync > End - Calling layoutEnd event');
-              _context2.next = 12;
+              _context2.next = 13;
               return layout.xlr.emitSync('layoutEnd', layout);
-            case 12:
+            case 13:
               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 () {
@@ -75483,7 +75603,7 @@ var Layout = /*#__PURE__*/function () {
                   };
                 }());
               }
-            case 13:
+            case 14:
             case "end":
               return _context2.stop();
           }
@@ -75496,6 +75616,34 @@ var Layout = /*#__PURE__*/function () {
     this.on('cancelled', function (layout) {
       console.debug('>>>>> XLR.debug / Layout cancelled > Layout ID > ', layout.id);
       layout.state = ELayoutState.CANCELLED;
+      layout.inLoop = false;
+      // 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),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var region = _step.value;
+          var _iterator2 = _createForOfIteratorHelper(region.mediaObjects),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var media = _step2.value;
+              if (media.videoHandler) {
+                media.videoHandler.stop(true);
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
     });
   }
   return _createClass(Layout, [{
@@ -75637,6 +75785,14 @@ var Layout = /*#__PURE__*/function () {
       if ($splashScreen) {
         $splashScreen.style.display = 'none';
       }
+      // Check if $layoutContainer is still in the DOM before trying to play regions, as the layout may have been removed while waiting for a long-running region to finish.
+      console.debug('??? XLR.debug >> Layout::run() - Checking if layout container is still in the DOM before playing regions...', {
+        layoutId: this.id,
+        layoutContainerExists: !!$layoutContainer,
+        $layoutContainer: $layoutContainer,
+        layoutIndex: this.index,
+        shouldParse: false
+      });
       if ($layoutContainer) {
         $layoutContainer.style.setProperty('visibility', 'visible');
         $layoutContainer.style.setProperty('opacity', '1');
@@ -75667,19 +75823,19 @@ var Layout = /*#__PURE__*/function () {
     key: "regionExpired",
     value: function regionExpired() {
       this.allExpired = true;
-      var _iterator = _createForOfIteratorHelper(this.regions),
-        _step;
+      var _iterator3 = _createForOfIteratorHelper(this.regions),
+        _step3;
       try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var layoutRegion = _step.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var layoutRegion = _step3.value;
           if (!layoutRegion.complete) {
             this.allExpired = false;
           }
         }
       } catch (err) {
-        _iterator.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator.f();
+        _iterator3.f();
       }
       if (this.allExpired) {
         this.end();
@@ -75690,17 +75846,17 @@ var Layout = /*#__PURE__*/function () {
     value: function end() {
       console.debug('Executing Layout::end and Calling Region::end ', this);
       /* Ask the layout to gracefully stop running now */
-      var _iterator2 = _createForOfIteratorHelper(this.regions),
-        _step2;
+      var _iterator4 = _createForOfIteratorHelper(this.regions),
+        _step4;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var layoutRegion = _step2.value;
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var layoutRegion = _step4.value;
           layoutRegion.end();
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator2.f();
+        _iterator4.f();
       }
     }
   }, {
@@ -75713,7 +75869,11 @@ var Layout = /*#__PURE__*/function () {
         }
       }
       if (this.allEnded) {
-        console.debug('starting to end layout . . .');
+        console.debug('starting to end layout . . .', {
+          layoutId: this.layoutId,
+          layoutIndex: this.index,
+          layoutState: this.state
+        });
         if (this.xlr.config.platform === ConsumerPlatform.CMS) {
           var $end = document.getElementById('play_ended');
           var $preview = document.getElementById('screen_container');
@@ -75812,6 +75972,42 @@ var Layout = /*#__PURE__*/function () {
         (_$layout$parentElemen2 = $layout.parentElement) === null || _$layout$parentElemen2 === void 0 || _$layout$parentElemen2.removeChild($layout);
       }
     }
+  }, {
+    key: "discardLayout",
+    value: function discardLayout() {
+      var caller = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LayoutPlaybackType.NEXT;
+      // Dispose any video.js players that were initialized during prepareVideoMedia
+      // but never played. The isDisposed() guard makes this safe to call on
+      // layouts that were fully played as well.
+      var _iterator5 = _createForOfIteratorHelper(this.regions),
+        _step5;
+      try {
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var region = _step5.value;
+          var _iterator6 = _createForOfIteratorHelper(region.mediaObjects),
+            _step6;
+          try {
+            for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+              var media = _step6.value;
+              if (media.player && !media.player.isDisposed()) {
+                media.player.dispose();
+                media.player = undefined;
+                media.html = null;
+              }
+            }
+          } catch (err) {
+            _iterator6.e(err);
+          } finally {
+            _iterator6.f();
+          }
+        }
+      } catch (err) {
+        _iterator5.e(err);
+      } finally {
+        _iterator5.f();
+      }
+      this.removeLayout(caller);
+    }
   }, {
     key: "getXlf",
     value: function getXlf() {
@@ -76054,6 +76250,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
   }());
   xlrObject.on('updateLoop', /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(inputLayouts) {
+      var _xlrObject$currentLay;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -76062,7 +76259,17 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             return xlrObject.updateLoop(inputLayouts);
           case 3:
             xlrObject.isUpdatingLoop = false;
-          case 4:
+            // If the running layout finished while isUpdatingLoop was true, the
+            // layout end-handler bailed out of prepareLayouts() early and the
+            // subsequent playLayouts() call saw currentLayout.done === true and
+            // skipped run() — leaving a black screen.  Catch up now that the flag
+            // is clear.
+            if ((_xlrObject$currentLay = xlrObject.currentLayout) !== null && _xlrObject$currentLay !== void 0 && _xlrObject$currentLay.done) {
+              xlrObject.prepareLayouts().then(function (xlr) {
+                return xlrObject.playLayouts(xlr);
+              });
+            }
+          case 5:
           case "end":
             return _context3.stop();
         }
@@ -76092,40 +76299,35 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
       return _ref4.apply(this, arguments);
     };
   }());
-  /**
-   * Asynchronous event emitter. Extended nanoevents event emitter.
-   *
-   * NOTE: Known limitation — nanoevents emit() is synchronous.
-   * Any async event handlers registered via .on() are fire-and-forget;
-   * emitSync does NOT await them. The returned Promise resolves
-   * immediately after handlers are invoked, not after they complete.
-   *
-   * @param eventName
-   * @param args
-   */
-  xlrObject.emitSync = function (eventName) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-    return new Promise( /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(resolve) {
-        var _xlrObject$emitter;
-        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
-            case 0:
-              (_xlrObject$emitter = xlrObject.emitter).emit.apply(_xlrObject$emitter, [eventName].concat(args));
-              resolve();
-            case 2:
-            case "end":
-              return _context5.stop();
-          }
-        }, _callee5);
-      }));
-      return function (_x4) {
-        return _ref5.apply(this, arguments);
-      };
-    }());
-  };
+  xlrObject.emitSync = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(eventName) {
+      var _xlrObject$emitter$ev;
+      var _len,
+        args,
+        _key,
+        handlers,
+        _args5 = arguments;
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            for (_len = _args5.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+              args[_key - 1] = _args5[_key];
+            }
+            handlers = (_xlrObject$emitter$ev = xlrObject.emitter.events[eventName]) !== null && _xlrObject$emitter$ev !== void 0 ? _xlrObject$emitter$ev : [];
+            _context5.next = 4;
+            return Promise.all(handlers.map(function (handler) {
+              return handler.apply(void 0, args);
+            }));
+          case 4:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return function (_x4) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
   xlrObject.bootstrap = function () {
     // Place to set configurations and initialize required props
     var self = this;
@@ -76160,12 +76362,21 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
       if ($splashScreen && $splashScreen.style.display === 'block') {
         $splashScreen === null || $splashScreen === void 0 || $splashScreen.hide();
       }
+      console.debug('>>>> XLR.debug XLR::playLayouts > currentLayout', {
+        layoutId: xlr.currentLayout.layoutId,
+        layoutIndex: xlr.currentLayout.index,
+        layoutState: xlr.currentLayout.state
+      });
       if (!xlr.currentLayout.done) {
         // Hide overlays when current layout is interrupt
         if (xlr.currentLayout.isInterrupt()) {
           xlrObject.overlayLayoutManager.stopOverlays();
         }
-        console.log('>>>> XLR.debug XLR::playSchedules > Running currentLayout', xlr.currentLayout);
+        console.debug('>>>> XLR.debug XLR::playLayouts > Running currentLayout', {
+          layoutId: xlr.currentLayout.layoutId,
+          layoutIndex: xlr.currentLayout.index,
+          layoutState: xlr.currentLayout.state
+        });
         xlr.currentLayout.run();
       }
     } else {
@@ -76243,7 +76454,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
                     _context7.next = 10;
                     return _overlay.finishAllRegions();
                   case 10:
-                    _overlay.removeLayout();
+                    _overlay.removeLayout(LayoutPlaybackType.OVERLAY);
                   case 11:
                     _context7.next = 14;
                     break;
@@ -76309,6 +76520,31 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
     var $layout = document.querySelector("#".concat(containerName, "[data-sequence=\"").concat(layoutIndex, "\"]"));
     return $layout !== null;
   };
+  // Scans screen_container for non-overlay layout divs and removes any that
+  // are not the current or next active layout. Prevents DOM accumulation when
+  // prepareLayouts() races with updateLoop and multiple same-layoutId elements
+  // end up in screen_container (e.g. transitioning from a 1-layout loop where
+  // two elements exist for the same layout to a multi-layout schedule).
+  // keepCurrent / keepNext:
+  //   undefined  → fall back to this.currentLayout / this.nextLayout
+  //   null       → keep nothing for that slot (explicit "no layout to preserve")
+  //   ILayout    → keep exactly that instance
+  xlrObject.cleanupOrphanedLayouts = function (keepCurrent, keepNext) {
+    var $screen = document.getElementById('screen_container');
+    if (!$screen) return;
+    var current = keepCurrent !== undefined ? keepCurrent : this.currentLayout;
+    var next = keepNext !== undefined ? keepNext : this.nextLayout;
+    Array.from($screen.querySelectorAll(':scope > div:not(.is-overlay)')).forEach(function (el) {
+      var div = el;
+      var isCurrentLayout = current && div.id === current.containerName && div.dataset.sequence === String(current.index);
+      var isNextLayout = next && div.id === next.containerName && div.dataset.sequence === String(next.index);
+      if (!isCurrentLayout && !isNextLayout) {
+        var _div$parentElement;
+        console.debug('XLR::cleanupOrphanedLayouts - removing orphaned layout element', div.id);
+        (_div$parentElement = div.parentElement) === null || _div$parentElement === void 0 || _div$parentElement.removeChild(div);
+      }
+    });
+  };
   xlrObject.updateLoop = /*#__PURE__*/function () {
     var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11(inputLayouts) {
       var _this$currentLayout,
@@ -76355,11 +76591,11 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
               };
             }();
             if (isCurrentLayoutValid) {
-              _context11.next = 54;
+              _context11.next = 55;
               break;
             }
             if (!playback.hasDefaultOnly) {
-              _context11.next = 33;
+              _context11.next = 34;
               break;
             }
             if (!(this.currentLayout && playback.currentLayout && this.currentLayout.layoutId !== playback.currentLayout.layoutId)) {
@@ -76372,82 +76608,102 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
           case 19:
             this.currentLayout.removeLayout();
           case 20:
-            _context11.next = 22;
+            // Discard old nextLayout before replacing it — same as the
+            // other two branches do, otherwise the prepared DOM element
+            // and any video.js players are orphaned.
+            if (this.nextLayout && this.isLayoutInDOM(this.nextLayout.containerName, this.nextLayout.index)) {
+              this.nextLayout.discardLayout(LayoutPlaybackType.NEXT);
+            }
+            _context11.next = 23;
             return this.prepareLayoutXlf(playback.currentLayout);
-          case 22:
+          case 23:
             this.currentLayout = _context11.sent;
             this.currentLayoutId = this.currentLayout.layoutId;
             _context11.t0 = this;
-            _context11.next = 27;
+            _context11.next = 28;
             return this.prepareLayoutXlf(playback.nextLayout);
-          case 27:
+          case 28:
             _context11.t1 = _context11.sent;
-            _context11.next = 30;
+            _context11.next = 31;
             return _context11.t0.prepareForSsp.call(_context11.t0, _context11.t1);
-          case 30:
+          case 31:
             this.nextLayout = _context11.sent;
-            _context11.next = 50;
+            _context11.next = 51;
             break;
-          case 33:
+          case 34:
             if (!(this.currentLayout && this.isLayoutInDOM(this.currentLayout.containerName, this.currentLayout.index))) {
-              _context11.next = 38;
+              _context11.next = 39;
               break;
             }
             this.currentLayout.inLoop = false;
-            _context11.next = 37;
+            _context11.next = 38;
             return this.currentLayout.finishAllRegions();
-          case 37:
-            this.currentLayout.removeLayout();
           case 38:
+            this.currentLayout.removeLayout();
+          case 39:
             if (this.nextLayout && this.isLayoutInDOM(this.nextLayout.containerName, this.nextLayout.index)) {
-              this.nextLayout.removeLayout();
+              this.nextLayout.discardLayout(LayoutPlaybackType.NEXT);
             }
             if (!playback.currentLayout) {
-              _context11.next = 42;
+              _context11.next = 43;
               break;
             }
-            _context11.next = 42;
+            _context11.next = 43;
             return prepareNewCurrentLayout();
-          case 42:
+          case 43:
             if (!playback.nextLayout) {
-              _context11.next = 50;
+              _context11.next = 51;
               break;
             }
             _context11.t2 = this;
-            _context11.next = 46;
+            _context11.next = 47;
             return this.prepareLayoutXlf(playback.nextLayout);
-          case 46:
+          case 47:
             _context11.t3 = _context11.sent;
-            _context11.next = 49;
+            _context11.next = 50;
             return _context11.t2.prepareForSsp.call(_context11.t2, _context11.t3);
-          case 49:
-            this.nextLayout = _context11.sent;
           case 50:
-            _context11.next = 52;
+            this.nextLayout = _context11.sent;
+          case 51:
+            _context11.next = 53;
             return this.playSchedules(this);
-          case 52:
+          case 53:
             _context11.next = 67;
             break;
-          case 54:
+          case 55:
             // Remove next layout if it is in the DOM
             if (this.nextLayout && this.isLayoutInDOM(this.nextLayout.containerName, this.nextLayout.index)) {
-              this.nextLayout.removeLayout();
+              this.nextLayout.discardLayout(LayoutPlaybackType.NEXT);
             }
-            // Prepare new current layout
+            // Purge any other orphaned layouts from screen_container that belong
+            // to the old single-layout loop. When there was only one layout in the
+            // loop, prepareLayouts() kept two DOM elements alive (current + next,
+            // both the same layoutId but different containerNames). On a schedule
+            // change the this.nextLayout check above only discards the element
+            // currently referenced by this.nextLayout, but concurrent
+            // prepareLayouts() calls can leave earlier same-layoutId elements
+            // behind.
+            // Pass null (not undefined) for keepNext: undefined would fall back to
+            // this.nextLayout which may still reference the just-discarded layout
+            // or — if isLayoutInDOM returned false and discardLayout was skipped —
+            // the orphan itself, causing cleanupOrphanedLayouts to preserve it.
+            // null means "no next to keep"; we are about to prepare a fresh one.
+            this.cleanupOrphanedLayouts(this.currentLayout, null);
+            // The current layout is still valid and running — do NOT replace the
+            // live currentLayout object.  Only refresh the queued nextLayout so
+            // that when the running layout finishes it transitions to the correct
+            // position in the updated loop.  Using playback.currentLayout (the
+            // slot that follows the running layout in the new queue) as the new
+            // nextLayout keeps the cycle in order; the slot after that will be
+            // prepared by the normal prepareLayouts() call at transition time.
             if (!playback.currentLayout) {
-              _context11.next = 58;
-              break;
-            }
-            _context11.next = 58;
-            return prepareNewCurrentLayout();
-          case 58:
-            if (!playback.nextLayout) {
               _context11.next = 66;
               break;
             }
+            this.currentLayoutIndex = playback.currentLayoutIndex;
             _context11.t4 = this;
             _context11.next = 62;
-            return this.prepareLayoutXlf(playback.nextLayout);
+            return this.prepareLayoutXlf(playback.currentLayout);
           case 62:
             _context11.t5 = _context11.sent;
             _context11.next = 65;
@@ -76553,8 +76809,21 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
               _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
             }
           } else {
+            var _this$currentLayout4, _this$currentLayout5;
             _currentLayout = this.nextLayout;
             _currentLayoutIndex = _currentLayout.index;
+            // updateLoop can re-queue the same index that is currently
+            // playing (e.g. it fires while nextLayout.index === currentLayout.index).
+            // When that layout then ends, the catch-up prepareLayouts() would
+            // replay the same slot instead of advancing.  Detect this by checking
+            // whether the queued next-to-current is at the same index as the
+            // layout that just finished, and advance past it so the following
+            // slot (e.g. an SSP that now has an ad) becomes current instead.
+            if (this.inputLayouts.length > 1 && (_this$currentLayout4 = this.currentLayout) !== null && _this$currentLayout4 !== void 0 && _this$currentLayout4.done && _currentLayoutIndex === ((_this$currentLayout5 = this.currentLayout) === null || _this$currentLayout5 === void 0 ? void 0 : _this$currentLayout5.index)) {
+              _currentLayoutIndex = (_currentLayoutIndex + 1) % this.inputLayouts.length;
+              _currentLayout = this.getLayout(this.inputLayouts[_currentLayoutIndex]);
+              _currentLayout = setLayoutIndex(_currentLayout, _currentLayoutIndex);
+            }
             _nextLayoutIndex = (_currentLayoutIndex + 1) % this.inputLayouts.length;
             _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
             _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
@@ -76610,6 +76879,10 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
         var activeLayout = inputLayout;
         if (isCMS) {
           activeLayout.index = 0;
+          // id stays null without this — setLayoutIndex returns undefined for CMS layouts
+          if (activeLayout.id == null) {
+            activeLayout.id = activeLayout.layoutId;
+          }
         } else {
           activeLayout = _objectSpread2({}, this.uniqueLayouts[inputLayout.layoutId]);
         }
@@ -76640,7 +76913,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
   };
   xlrObject.prepareLayouts = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
     var _layoutPlayback$curre, _layoutPlayback$curre2;
-    var self, layoutPlayback, currentLayoutXlf, nextLayoutXlf, layouts;
+    var self, layoutPlayback, currentLayoutXlf, wasCurrentReused, nextLayoutXlf, layouts;
     return _regeneratorRuntime().wrap(function _callee14$(_context14) {
       while (1) switch (_context14.prev = _context14.next) {
         case 0:
@@ -76663,7 +76936,12 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             shouldParse: false
           });
           self.currentLayoutId = (_layoutPlayback$curre = layoutPlayback.currentLayout) === null || _layoutPlayback$curre === void 0 ? void 0 : _layoutPlayback$curre.layoutId;
-          if (!((_layoutPlayback$curre2 = layoutPlayback.currentLayout) !== null && _layoutPlayback$curre2 !== void 0 && _layoutPlayback$curre2.layoutNode)) {
+          // Only reuse the existing Layout instance if it is fully healthy —
+          // a done=true instance was removed from the DOM (e.g. an SSP slot that
+          // had no ad), and an empty-XLF instance has no regions so it can never
+          // advance the cycle.  In either case re-prepare from scratch so we get
+          // a fresh request (which may now have a valid ad / XLF).
+          if (!((_layoutPlayback$curre2 = layoutPlayback.currentLayout) !== null && _layoutPlayback$curre2 !== void 0 && _layoutPlayback$curre2.layoutNode && !layoutPlayback.currentLayout.done && layoutPlayback.currentLayout.xlfString !== '')) {
             _context14.next = 12;
             break;
           }
@@ -76677,27 +76955,40 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
           _context14.t0 = _context14.sent;
         case 15:
           currentLayoutXlf = _context14.t0;
-          _context14.next = 18;
+          // True when the same object was returned (reused); false when a fresh
+          // Layout was constructed by prepareLayoutXlf above.
+          wasCurrentReused = currentLayoutXlf === layoutPlayback.currentLayout;
+          _context14.next = 19;
           return self.prepareLayoutXlf(layoutPlayback.nextLayout);
-        case 18:
+        case 19:
           nextLayoutXlf = _context14.sent;
           _context14.t1 = Promise;
           _context14.t2 = currentLayoutXlf;
-          _context14.next = 23;
+          _context14.next = 24;
           return self.prepareForSsp(nextLayoutXlf);
-        case 23:
+        case 24:
           _context14.t3 = _context14.sent;
           _context14.t4 = [_context14.t2, _context14.t3];
-          _context14.next = 27;
+          _context14.next = 28;
           return _context14.t1.all.call(_context14.t1, _context14.t4);
-        case 27:
+        case 28:
           layouts = _context14.sent;
-          // Return early when layout loop is updating
-          if (self.isUpdatingLoop) {
-            if (layoutPlayback.nextLayout && nextLayoutXlf && this.isLayoutInDOM(nextLayoutXlf.containerName, nextLayoutXlf.index)) {
-              nextLayoutXlf.removeLayout();
-            }
+          if (!(self.isUpdatingLoop || layouts[0].done)) {
+            _context14.next = 33;
+            break;
+          }
+          // If currentLayout was freshly prepared (not reused from nextLayout),
+          // its DOM element was just appended — discard it now so it does not
+          // accumulate in screen_container. Also disposes any video.js players
+          // that were initialized during prepareVideoMedia but never played.
+          if (!wasCurrentReused && this.isLayoutInDOM(currentLayoutXlf.containerName, currentLayoutXlf.index)) {
+            currentLayoutXlf.discardLayout(LayoutPlaybackType.NEXT);
+          }
+          if (layoutPlayback.nextLayout && nextLayoutXlf && this.isLayoutInDOM(nextLayoutXlf.containerName, nextLayoutXlf.index)) {
+            nextLayoutXlf.discardLayout(LayoutPlaybackType.NEXT);
           }
+          return _context14.abrupt("return", Promise.resolve(self));
+        case 33:
           console.debug('>>>>> XLR.debug prepared layout XLF', layouts);
           return _context14.abrupt("return", new Promise( /*#__PURE__*/function () {
             var _ref14 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13(resolve) {
@@ -76714,8 +77005,15 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
                     self.currentLayout = self.layouts.current;
                     self.currentLayoutId = self.currentLayout.layoutId;
                     self.nextLayout = self.layouts.next;
+                    // Evict any orphaned layout DOM elements that aren't the current
+                    // or next layout. Concurrent prepareLayouts() calls can each append
+                    // a freshly-prepared nextLayout to screen_container and then
+                    // overwrite this.nextLayout, leaving earlier elements behind.
+                    // Calling this here — with explicit references — ensures every
+                    // completed prepare cycle leaves the DOM in a clean state.
+                    self.cleanupOrphanedLayouts(self.currentLayout, self.nextLayout);
                     resolve(xlrObject);
-                  case 8:
+                  case 9:
                   case "end":
                     return _context13.stop();
                 }
@@ -76725,7 +77023,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
               return _ref14.apply(this, arguments);
             };
           }()));
-        case 31:
+        case 35:
         case "end":
           return _context14.stop();
       }
@@ -76753,34 +77051,38 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
               newOptions.xlfUrl = inputLayout.path;
             }
             if (!(inputLayout && inputLayout.layoutNode === undefined)) {
-              _context15.next = 21;
+              _context15.next = 22;
               break;
             }
             if (!(inputLayout.layoutId === -1)) {
-              _context15.next = 14;
+              _context15.next = 15;
               break;
             }
             _context15.next = 10;
             return self.emitSync('adRequest', inputLayout.index);
           case 10:
             sspInputLayout = self.inputLayouts[inputLayout.index];
+            console.debug('XLR::prepareLayoutXlf > SSP input layout', {
+              sspInputLayout: sspInputLayout,
+              inputLayout: inputLayout
+            });
             // @ts-ignore
-            layoutXlf = ((_sspInputLayout = sspInputLayout) === null || _sspInputLayout === void 0 ? void 0 : _sspInputLayout.getXlf()) || '';
-            _context15.next = 17;
+            layoutXlf = typeof ((_sspInputLayout = sspInputLayout) === null || _sspInputLayout === void 0 ? void 0 : _sspInputLayout.getXlf) === 'function' ? sspInputLayout.getXlf() : '';
+            _context15.next = 18;
             break;
-          case 14:
-            _context15.next = 16;
+          case 15:
+            _context15.next = 17;
             return getXlf(newOptions);
-          case 16:
-            layoutXlf = _context15.sent;
           case 17:
+            layoutXlf = _context15.sent;
+          case 18:
             parser = new window.DOMParser();
             layoutXlfNode = parser.parseFromString(layoutXlf, 'text/xml');
-            _context15.next = 22;
+            _context15.next = 23;
             break;
-          case 21:
-            layoutXlfNode = inputLayout && inputLayout.layoutNode;
           case 22:
+            layoutXlfNode = inputLayout && inputLayout.layoutNode;
+          case 23:
             isOverlayLayout = !!(inputLayout !== null && inputLayout !== void 0 && inputLayout.isOverlay);
             return _context15.abrupt("return", new Promise(function (resolve) {
               var _inputLayout$ad;
@@ -76805,13 +77107,22 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
                 xlrLayoutObj.duration = sspInputLayout.duration || 0;
                 xlrLayoutObj.ad = sspInputLayout.ad;
               }
+              var xlrLayout;
               if (isOverlayLayout) {
-                resolve(new OverlayLayout(xlrLayoutObj, newOptions, self, layoutXlfNode));
+                xlrLayout = new OverlayLayout(xlrLayoutObj, newOptions, self, layoutXlfNode);
               } else {
-                resolve(new Layout(xlrLayoutObj, newOptions, self, layoutXlfNode));
+                xlrLayout = new Layout(xlrLayoutObj, newOptions, self, layoutXlfNode);
               }
+              // Advance the shared counter so the next prepareLayoutXlf() call
+              // starts from where this layout left off — prevents every layout
+              // instance from reusing idCounter=1 and colliding on the same
+              // containerName / DOM element.
+              if (props.options) {
+                props.options.idCounter = newOptions.idCounter;
+              }
+              resolve(xlrLayout);
             }));
-          case 24:
+          case 25:
           case "end":
             return _context15.stop();
         }
@@ -76823,46 +77134,49 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
   }();
   xlrObject.prepareForSsp = /*#__PURE__*/function () {
     var _ref16 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16(nextLayout) {
-      var self, _nextLayout, nextIndex, inputLayout, nextLayoutObj;
+      var self, _nextLayout, iterations, maxIterations, nextIndex, inputLayout, nextLayoutObj;
       return _regeneratorRuntime().wrap(function _callee16$(_context16) {
         while (1) switch (_context16.prev = _context16.next) {
           case 0:
             self = this;
             _nextLayout = nextLayout;
-          case 2:
-            if (!(_nextLayout && _nextLayout.xlfString === '')) {
-              _context16.next = 17;
-              break;
-            }
-            // Remove skipped layout
-            _nextLayout.removeLayout();
-            // Get next valid layout
-            // We will skip next layout that has no valid xlf
-            nextIndex = _nextLayout.index + 1;
-            if (!(nextIndex >= self.inputLayouts.length)) {
-              _context16.next = 7;
+            iterations = 0;
+            maxIterations = self.inputLayouts.length;
+          case 4:
+            if (!(_nextLayout && _nextLayout.xlfString === '' && iterations < maxIterations)) {
+              _context16.next = 20;
               break;
             }
-            return _context16.abrupt("break", 17);
-          case 7:
+            // Remove the empty slot's DOM element before skipping past it
+            _nextLayout.removeLayout(LayoutPlaybackType.NEXT);
+            iterations++;
+            // Advance to the next slot, wrapping around so a trailing SSP slot
+            // with no ad does not strand the queue at the end of the array.
+            nextIndex = (_nextLayout.index + 1) % self.inputLayouts.length;
             inputLayout = self.inputLayouts[nextIndex];
             if (inputLayout) {
-              _context16.next = 10;
+              _context16.next = 11;
               break;
             }
-            return _context16.abrupt("break", 17);
-          case 10:
+            return _context16.abrupt("break", 20);
+          case 11:
             nextLayoutObj = self.getLayout(inputLayout);
             nextLayoutObj = setLayoutIndex(nextLayoutObj, nextIndex);
-            _context16.next = 14;
+            if (nextLayoutObj) {
+              _context16.next = 15;
+              break;
+            }
+            return _context16.abrupt("break", 20);
+          case 15:
+            _context16.next = 17;
             return self.prepareLayoutXlf(nextLayoutObj);
-          case 14:
+          case 17:
             _nextLayout = _context16.sent;
-            _context16.next = 2;
+            _context16.next = 4;
             break;
-          case 17:
+          case 20:
             return _context16.abrupt("return", _nextLayout);
-          case 18:
+          case 21:
           case "end":
             return _context16.stop();
         }
@@ -76874,7 +77188,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
   }();
   xlrObject.gotoPrevLayout = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
     var _this4 = this;
-    var _currentLayoutIndex, _assumedPrevIndex, _this$currentLayout4;
+    var _currentLayoutIndex, _assumedPrevIndex, _this$currentLayout6;
     return _regeneratorRuntime().wrap(function _callee18$(_context18) {
       while (1) switch (_context18.prev = _context18.next) {
         case 0:
@@ -76897,7 +77211,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             break;
           }
           _context18.next = 8;
-          return (_this$currentLayout4 = this.currentLayout) === null || _this$currentLayout4 === void 0 ? void 0 : _this$currentLayout4.finishAllRegions();
+          return (_this$currentLayout6 = this.currentLayout) === null || _this$currentLayout6 === void 0 ? void 0 : _this$currentLayout6.finishAllRegions();
         case 8:
           // and set the previous layout as current layout
           this.currentLayoutIndex = _assumedPrevIndex;
@@ -76925,7 +77239,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
     }, _callee18, this);
   }));
   xlrObject.gotoNextLayout = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
-    var _xlrObject$currentLay;
+    var _xlrObject$currentLay2;
     return _regeneratorRuntime().wrap(function _callee19$(_context19) {
       while (1) switch (_context19.prev = _context19.next) {
         case 0:
@@ -76935,7 +77249,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             shouldParse: false
           });
           _context19.next = 3;
-          return (_xlrObject$currentLay = xlrObject.currentLayout) === null || _xlrObject$currentLay === void 0 ? void 0 : _xlrObject$currentLay.finishAllRegions();
+          return (_xlrObject$currentLay2 = xlrObject.currentLayout) === null || _xlrObject$currentLay2 === void 0 ? void 0 : _xlrObject$currentLay2.finishAllRegions();
         case 3:
         case "end":
           return _context19.stop();
@@ -76947,11 +77261,16 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
     if (layout !== null) {
       layout.index = xlrInputLayout.index;
     }
+    console.debug('XLR::updateInputLayout', {
+      layoutIndex: layoutIndex,
+      layout: layout,
+      xlrInputLayout: xlrInputLayout
+    });
     this.inputLayouts[layoutIndex] = layout || xlrInputLayout;
   };
   xlrObject.bootstrap();
   return xlrObject;
 }
 
-export { Action, ActionsWrapper, AudioMedia, ConsumerPlatform, ELayoutState, ELayoutType, LayoutPlaybackType, Media, MediaState, Region, VideoMedia, audioFileType, capitalizeStr, composeBgUrlByPlatform, composeMediaUrl, composeResourceUrl, composeResourceUrlByPlatform, composeVideoSource, createMediaElement, XiboLayoutRenderer as default, defaultTrans, defaultVjsOpts, fadeInElem, fadeOutElem, fetchJSON, fetchText, flyInElem, flyOutElem, flyTransitionKeyframes, getAllAttributes, getDataBlob, getFileExt, getIndexByLayoutId, getLayout, getLayoutIndexByLayoutId, getMediaId, getXlf, hasDefaultOnly, hasSspLayout, initRenderingDOM, initialLayout, initialMedia, initialRegion, initialXlr, isEmpty, isLayoutValid, nextId, playerReportFault, preloadMediaBlob, prepareAudioMedia, prepareHtmlMedia, prepareImageMedia, prepareVideoMedia, setExpiry, transitionElement, videoFileType, vjsDefaultOptions };
+export { Action, ActionsWrapper, AudioMedia, ConsumerPlatform, ELayoutState, ELayoutType, FaultCodes, LayoutPlaybackType, Media, MediaState, Region, VideoMedia, audioFileType, capitalizeStr, composeBgUrlByPlatform, composeMediaUrl, composeResourceUrl, composeResourceUrlByPlatform, composeVideoSource, createMediaElement, XiboLayoutRenderer as default, defaultTrans, defaultVjsOpts, fadeInElem, fadeOutElem, fetchJSON, fetchText, flyInElem, flyOutElem, flyTransitionKeyframes, getAllAttributes, getDataBlob, getFileExt, getIndexByLayoutId, getLayout, getLayoutIndexByLayoutId, getMediaId, getXlf, hasDefaultOnly, hasSspLayout, initRenderingDOM, initialLayout, initialRegion, initialXlr, isEmpty, isLayoutValid, isMediaActive, nextId, playerReportFault, preloadMediaBlob, prepareAudioMedia, prepareHtmlMedia, prepareImageMedia, prepareVideoMedia, reportToPlayerPlatform, setExpiry, transitionElement, videoFileType, vjsDefaultOptions };
 //# sourceMappingURL=xibo-layout-renderer.esm.js.map