@xibosignage/xibo-layout-renderer 1.0.23 → 1.0.25

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

@@ -835,31 +835,37 @@ var OverlayLayoutManager = /*#__PURE__*/function () {
             case 0:
               _context2.next = 2;
               return Promise.all(list.map( /*#__PURE__*/function () {
-                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(item) {
-                  var inputOverlay, overlayLayout, $overlay;
+                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(item, index) {
+                  var _item$index;
+                  var inputOverlay, overlayLayout, $overlay, _overlayLayout$zIndex;
                   return _regeneratorRuntime().wrap(function _callee$(_context) {
                     while (1) switch (_context.prev = _context.next) {
                       case 0:
                         inputOverlay = {};
                         inputOverlay = _objectSpread2(_objectSpread2({}, inputOverlay), item);
-                        inputOverlay.index = item.index;
+                        inputOverlay.index = (_item$index = item.index) !== null && _item$index !== void 0 ? _item$index : index;
                         _context.next = 5;
                         return _this.parent.prepareLayoutXlf(_objectSpread2(_objectSpread2({}, initialLayout), inputOverlay));
                       case 5:
                         overlayLayout = _context.sent;
+                        console.debug('<> XLR.debug OverlayLayoutManager::parseOverlays prepared overlay layout', {
+                          overlayLayout: overlayLayout,
+                          inputOverlay: inputOverlay
+                        });
                         // Hide all overlays first
                         $overlay = document.querySelector("#".concat(overlayLayout.containerName, "[data-sequence=\"").concat(overlayLayout.index, "\"]"));
                         if ($overlay !== null) {
-                          $overlay.style.setProperty('display', 'none');
+                          $overlay.style.setProperty('visibility', 'hidden');
+                          $overlay.style.setProperty('z-index', "".concat((_overlayLayout$zIndex = overlayLayout.zIndex) !== null && _overlayLayout$zIndex !== void 0 ? _overlayLayout$zIndex : -999));
                         }
                         return _context.abrupt("return", overlayLayout);
-                      case 9:
+                      case 10:
                       case "end":
                         return _context.stop();
                     }
                   }, _callee);
                 }));
-                return function (_x2) {
+                return function (_x2, _x3) {
                   return _ref.apply(this, arguments);
                 };
               }()));
@@ -988,7 +994,7 @@ var OverlayLayoutManager = /*#__PURE__*/function () {
           }
         }, _callee3, this, [[12, 21, 24, 27]]);
       }));
-      function prepareOverlayLayouts(_x3, _x4) {
+      function prepareOverlayLayouts(_x4, _x5) {
         return _prepareOverlayLayouts.apply(this, arguments);
       }
       return prepareOverlayLayouts;
@@ -999,7 +1005,8 @@ var OverlayLayoutManager = /*#__PURE__*/function () {
       var _this$parent$currentL;
       if (this.overlays.length === 0) return;
       if (this.parent && (_this$parent$currentL = this.parent.currentLayout) !== null && _this$parent$currentL !== void 0 && _this$parent$currentL.isInterrupt()) {
-        this.container.style.setProperty('display', 'none');
+        this.container.style.setProperty('visibility', 'hidden');
+        this.container.style.setProperty('z-index', '-999');
         return;
       }
       this.overlays.forEach(function (overlay) {
@@ -1017,21 +1024,25 @@ var OverlayLayoutManager = /*#__PURE__*/function () {
             while (1) switch (_context5.prev = _context5.next) {
               case 0:
                 overlayHtml = document.querySelector("#".concat(overlay.containerName, "[data-sequence=\"").concat(overlay.index, "\"]"));
+                console.debug('<> XLR.debug OverlayLayoutManager::stopOverlays', {
+                  overlay: overlay,
+                  overlayHtml: overlayHtml
+                });
                 if (!(overlayHtml !== null)) {
-                  _context5.next = 5;
+                  _context5.next = 6;
                   break;
                 }
-                _context5.next = 4;
+                _context5.next = 5;
                 return overlay.finishAllRegions();
-              case 4:
-                overlay.emitter.emit('end', overlay);
               case 5:
+                overlay.emitter.emit('end', overlay);
+              case 6:
               case "end":
                 return _context5.stop();
             }
           }, _callee4);
         }));
-        return function (_x5) {
+        return function (_x6) {
           return _ref2.apply(this, arguments);
         };
       }());
@@ -72517,6 +72528,269 @@ if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
   videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
 }
 
+function composeVideoSource($media, media) {
+  // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
+  var vidType = videoFileType(getFileExt(media.uri));
+  // Only add one source per type
+  if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
+    var $videoSource = document.createElement('source');
+    $videoSource.src = media.url;
+    $videoSource.type = vidType;
+    $media.insertBefore($videoSource, $media.lastElementChild);
+  }
+  return $media;
+}
+var defaultVjsOpts = {
+  autoplay: false,
+  muted: true,
+  // Start muted to allow autoplay policies
+  preload: 'auto',
+  controls: false
+};
+var vjsDefaultOptions = function vjsDefaultOptions(opts) {
+  return _objectSpread2({
+    controls: false,
+    preload: 'auto',
+    autoplay: false,
+    muted: true
+  }, opts);
+};
+var reportToPlayerPlatform = [exports.ConsumerPlatform.CHROMEOS, exports.ConsumerPlatform.ELECTRON];
+function VideoMedia(media, xlr) {
+  var mediaId = getMediaId(media);
+  var videoPlayer = {
+    duration: 0,
+    init: function init() {
+      var _this = this;
+      var triggerTimeUpdate = false; // Used for media.duration === 0
+      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 . . ."));
+        });
+        vjsPlayer.on('loadedmetadata', function () {
+          if (media.duration === 0) {
+            videoPlayer.duration = vjsPlayer.duration();
+          }
+          console.debug('??? XLR.debug >> VideoMedia: loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
+        });
+        vjsPlayer.on('canplay', function () {
+          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+        });
+        vjsPlayer.on('playing', function () {
+          // Update duration
+          if (videoPlayer.duration === 0) {
+            videoPlayer.duration = vjsPlayer.duration();
+          }
+          console.debug('??? XLR.debug >> VideoMedia: playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
+          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
+        });
+        // @NOTE: When video is paused due to fail in unmuting the video
+        // and video has media.duration = 0, the video will stay paused and the video cycle won't end
+        // @TODO: Add timer when video is paused due to unmuting fail and duration that is equal to 0
+        // @NOTE: The pause issue when unmuting the video is mainly on a browser level.
+        // Please visit https://developer.chrome.com/blog/autoplay/ for more info.
+        vjsPlayer.ready(function () {
+          // Add guard making sure that video element is present
+          var videoElem = document.querySelector(".media--item.".concat(mediaId));
+          if (!document.body.contains(videoElem)) {
+            media.emitter.emit('cancelled', media);
+            return;
+          }
+          if (vjsPlayer !== undefined) {
+            vjsPlayer.muted(true);
+            // Race promise between a 0.5s play and a 5s skip
+            Promise.race([new Promise(function (resolve, reject) {
+              return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                return _regeneratorRuntime().wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Trying to force play after 0.1 seconds"));
+                      // Try to force play here
+                      _context.prev = 1;
+                      if (!(vjsPlayer.currentTime() === 0)) {
+                        _context.next = 6;
+                        break;
+                      }
+                      // Set video mute/unmute based on setting once playing
+                      vjsPlayer.muted(media.muted);
+                      _context.next = 6;
+                      return vjsPlayer.play();
+                    case 6:
+                      // Resolve if play works
+                      resolve(true);
+                      _context.next = 12;
+                      break;
+                    case 9:
+                      _context.prev = 9;
+                      _context.t0 = _context["catch"](1);
+                      // Reject race if play fails
+                      reject('Play failed');
+                    case 12:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee, null, [[1, 9]]);
+              })), 100);
+            }), new Promise(function (_, reject) {
+              return setTimeout(function () {
+                return reject('Timeout');
+              }, 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);
+              };
+            }());
+            // Optional: Reset the flag automatically when a new video loads or the source changes
+            vjsPlayer.on('loadstart', function () {
+              triggerTimeUpdate = false;
+            });
+            if (media.duration === 0) {
+              vjsPlayer.on('timeupdate', function () {
+                var preloadBufferTimeMs = 2000;
+                var mediaDuration = vjsPlayer.duration();
+                var currentTime = vjsPlayer.currentTime();
+                var regionHasMultipleMedia = media.region.totalMediaObjects > 1;
+                var remainingTimeMs = 0;
+                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) {
+                  // 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
+                }
+                // Reset the flag if the user seeks back to a point where more than preloadBufferTimeMs remain
+                if (remainingTimeMs > preloadBufferTimeMs) {
+                  triggerTimeUpdate = false;
+                }
+              });
+            }
+          }
+        });
+        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);
+          };
+        }());
+        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 . . ."));
+            _this.stop();
+          });
+        }
+      }
+    },
+    stop: function stop() {
+      var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var vjsPlayer = 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_
+      });
+      // Expire the media and dispose the video
+      if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
+        if (!disposeOnly) {
+          media.emitter.emit('end', media);
+        }
+        vjsPlayer.dispose();
+        // Clear up media player
+        media.player = undefined;
+      } else {
+        media.player = undefined;
+        media.html = null;
+        media.emitter.emit('end', media);
+      }
+    },
+    play: function play() {
+      var _this2 = this;
+      var vjsPlayer = videojs(mediaId);
+      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) {
+                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"));
+                    _this2.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 () {
+                        _this2.stop();
+                      });
+                    }
+                  }
+                case 1:
+                case "end":
+                  return _context4.stop();
+              }
+            }, _callee4);
+          }));
+          return function (_x3) {
+            return _ref4.apply(this, arguments);
+          };
+        }());
+      }
+    }
+  };
+  return videoPlayer;
+}
+
 /*
  * Copyright (C) 2024 Xibo Signage Ltd
  *
@@ -72751,65 +73025,6 @@ var flyTransitionKeyframes = function flyTransitionKeyframes(params) {
   return keyframes;
 };
 
-function AudioMedia(media) {
-  var audioMediaObject = {
-    init: function init() {
-      var $audioMedia = document.getElementById(getMediaId(media));
-      var $playBtn = null;
-      if ($audioMedia) {
-        $audioMedia.onloadstart = function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-        };
-        $audioMedia.onloadeddata = function () {
-          if ($audioMedia.readyState >= 2) {
-            console.debug("".concat(capitalizeStr(media.mediaType), " data for media > ").concat(media.id, " has been fully loaded . . ."));
-          }
-        };
-        $audioMedia.oncanplay = function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-        };
-        $audioMedia.onplaying = function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-          if ($playBtn !== null) {
-            $playBtn.remove();
-          }
-        };
-        var audioPlayPromise = $audioMedia.play();
-        if (audioPlayPromise !== undefined) {
-          audioPlayPromise.then(function () {
-            console.debug('autoplay started . . .');
-            // Autoplay restarted
-          })["catch"](function (error) {
-            if (error.name === 'NotAllowedError') {
-              var _$audioMedia$parentNo;
-              // Let's show a play audio button
-              $playBtn = document.createElement('button');
-              $playBtn.classList.add('play-audio-btn');
-              $playBtn.textContent = 'Play Audio';
-              $playBtn.addEventListener('click', function () {
-                $audioMedia.muted = false;
-                $audioMedia.play();
-              });
-              (_$audioMedia$parentNo = $audioMedia.parentNode) === null || _$audioMedia$parentNo === void 0 || _$audioMedia$parentNo.insertBefore($playBtn, $audioMedia.nextSibling);
-            }
-          });
-        }
-        if (media.duration === 0) {
-          $audioMedia.ondurationchange = function () {
-            console.debug('Showing Media ' + media.id + ' for ' + $audioMedia.duration + 's of Region ' + media.region.regionId);
-          };
-          $audioMedia.onended = function () {
-            var _media$emitter;
-            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-            (_media$emitter = media.emitter) === null || _media$emitter === void 0 || _media$emitter.emit('end', media);
-          };
-        }
-      }
-    }
-  };
-  return audioMediaObject;
-}
-
 var BlobLoader = /*#__PURE__*/function () {
   function BlobLoader() {
     _classCallCheck(this, BlobLoader);
@@ -72951,418 +73166,754 @@ var PreviewTranslations;
   PreviewTranslations["target"] = "Target";
 })(PreviewTranslations || (PreviewTranslations = {}));
 
-function composeVideoSource($media, media) {
-  // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
-  var vidType = videoFileType(getFileExt(media.uri));
-  // Only add one source per type
-  if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
-    var $videoSource = document.createElement('source');
-    $videoSource.src = media.url;
-    $videoSource.type = vidType;
-    $media.insertBefore($videoSource, $media.lastElementChild);
+function nextId(options) {
+  if (options.idCounter > 500) {
+    options.idCounter = 0;
   }
-  return $media;
+  options.idCounter = options.idCounter + 1;
+  return options.idCounter;
 }
-var defaultVjsOpts = {
-  autoplay: false,
-  muted: true,
-  // Start muted to allow autoplay policies
-  preload: 'auto',
-  controls: false
+var getMediaId = function getMediaId(_ref) {
+  var mediaType = _ref.mediaType,
+    containerName = _ref.containerName;
+  var mediaId = containerName;
+  if (mediaType === 'video') {
+    mediaId = mediaId + '-vid';
+  } else if (mediaType === 'audio') {
+    mediaId = mediaId + '-aud';
+  }
+  return mediaId;
 };
-var vjsDefaultOptions = function vjsDefaultOptions(opts) {
-  return _objectSpread2({
-    controls: false,
-    preload: 'auto',
-    autoplay: false,
-    muted: true
-  }, opts);
+var capitalizeStr = function capitalizeStr(inputStr) {
+  if (inputStr === null) {
+    return '';
+  }
+  return String(inputStr).charAt(0).toUpperCase() + String(inputStr).substring(1);
 };
-function videoMediaHandler(media, platform) {
-  var videoPlayer = {
-    player: undefined,
-    duration: 0,
-    stop: function stop(disposeOnly) {}
-  };
-  var playerReportFault = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(msg) {
-      var playerSW, hasSW;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            // Immediately expire media and report a fault
-            playerSW = PwaSW();
-            _context.next = 3;
-            return playerSW.getSW();
-          case 3:
-            hasSW = _context.sent;
-            media.region.layout.state = exports.ELayoutState.ERROR;
-            media.region.layout.errorCode = 405;
-            if (hasSW) {
-              playerSW.postMsg({
-                type: 'MEDIA_FAULT',
-                code: 5002,
-                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')
-              })["finally"](function () {
-                videoPlayer.stop();
-              });
-            } else {
-              videoPlayer.stop();
+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) {
+        case 0:
+          return _context3.abrupt("return", fetch(src, {
+            method: 'GET',
+            headers: {
+              'X-PREVIEW-JWT': jwtToken || ''
             }
-          case 7:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function playerReportFault(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  videoPlayer.duration = media.duration;
-  if (media.player) {
-    videoPlayer.player = media.player;
-  } else {
-    // Load on demand if it has not been cached
-    var vjsElem = media.html;
-    var vidType = videoFileType(getFileExt(media.uri));
-    if (vjsElem === null) {
-      // Use media containerName instead for VJS id
-      vjsElem = media.containerName;
-    }
-    videoPlayer.player = videojs(vjsElem, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-      sources: [{
-        src: media.url,
-        type: vidType
-      }]
-    }));
-    media.player = videoPlayer.player;
-  }
-  videoPlayer.stop = function () {
-    var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    // Expire the media and dispose the video
-    if (videoPlayer.player !== undefined) {
-      if (!disposeOnly) {
-        media.emitter.emit('end', media);
+          }).then(function (res) {
+            return res.blob();
+          }).then(function (blob) {
+            return new Promise(function (res, rej) {
+              var reader = new FileReader();
+              reader.onloadend = function () {
+                return res(reader.result);
+              };
+              reader.onerror = rej;
+              reader.readAsDataURL(blob);
+            });
+          }));
+        case 1:
+        case "end":
+          return _context3.stop();
       }
-      // Dispose player
-      videoPlayer.player.dispose();
-      // Clear up media player
-      videoPlayer.player = undefined;
-      media.player = undefined;
-    }
-  };
-  videoPlayer.player.on('loadstart', function () {
-    console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-  });
-  videoPlayer.player.one('loadedmetadata', function () {
-    if (media.duration === 0 && videoPlayer.player !== undefined) {
-      videoPlayer.duration = videoPlayer.player.duration();
-    }
-    console.debug('??? XLR.debug >> VideoMedia - loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
-  });
-  videoPlayer.player.one('playing', function () {
-    console.debug('??? XLR.debug >> VideoMedia - playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
-    console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-    videoPlayer.player && videoPlayer.player.muted(media.muted);
-  });
-  videoPlayer.player.on('error', /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            console.debug("??? XLR.debug >> VideoMedia - Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-            if (!(platform === 'chromeOS')) {
-              _context2.next = 6;
-              break;
+    }, _callee3);
+  }));
+  return _getDataBlob.apply(this, arguments);
+}
+function preloadMediaBlob(_x3, _x4, _x5) {
+  return _preloadMediaBlob.apply(this, arguments);
+}
+function _preloadMediaBlob() {
+  _preloadMediaBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(src, type, jwtToken) {
+    var res, blob, data;
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _context4.next = 2;
+          return fetch(src, {
+            method: 'GET',
+            headers: {
+              'X-PREVIEW-JWT': jwtToken || ''
             }
-            _context2.next = 4;
-            return playerReportFault('Video file source not supported');
-          case 4:
-            _context2.next = 7;
+          });
+        case 2:
+          res = _context4.sent;
+          blob = new Blob();
+          if (!(type === 'image')) {
+            _context4.next = 8;
             break;
-          case 6:
-            // End media after 5 seconds
-            setTimeout(function () {
-              console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
-              videoPlayer.stop();
-            }, 5000);
-          case 7:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function (_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }());
-  // Register on.("end") when media.duration is 0
-  if (media.duration === 0) {
-    videoPlayer.player.on('ended', function () {
-      console.debug("??? XLR.debug >> VideoMedia - onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-      videoPlayer.stop();
-    });
-  }
-  return videoPlayer;
-}
-function VideoMedia(media, xlr) {
-  var mediaId = getMediaId(media);
-  var videoPlayer = {
-    duration: 0,
-    init: function init() {
-      var _this = this;
-      var triggerTimeUpdate = false; // Used for media.duration === 0
-      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 . . ."));
-        });
-        vjsPlayer.on('loadedmetadata', function () {
-          if (media.duration === 0) {
-            videoPlayer.duration = vjsPlayer.duration();
-          }
-          console.debug('??? XLR.debug >> VideoMedia: loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
-        });
-        vjsPlayer.on('canplay', function () {
-          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-        });
-        vjsPlayer.on('playing', function () {
-          // Update duration
-          if (videoPlayer.duration === 0) {
-            videoPlayer.duration = vjsPlayer.duration();
           }
-          console.debug('??? XLR.debug >> VideoMedia: playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
-          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-        });
-        // @NOTE: When video is paused due to fail in unmuting the video
-        // and video has media.duration = 0, the video will stay paused and the video cycle won't end
-        // @TODO: Add timer when video is paused due to unmuting fail and duration that is equal to 0
-        // @NOTE: The pause issue when unmuting the video is mainly on a browser level.
-        // Please visit https://developer.chrome.com/blog/autoplay/ for more info.
-        vjsPlayer.ready(function () {
-          // Add guard making sure that video element is present
-          var videoElem = document.querySelector(".media--item.".concat(mediaId));
-          if (!document.body.contains(videoElem)) {
-            media.emitter.emit('cancelled', media);
-            return;
+          blob = new Blob();
+          _context4.next = 19;
+          break;
+        case 8:
+          if (!(type === 'video')) {
+            _context4.next = 14;
+            break;
           }
-          if (vjsPlayer !== undefined) {
-            vjsPlayer.muted(true);
-            // Race promise between a 0.5s play and a 5s skip
-            Promise.race([new Promise(function (resolve, reject) {
-              return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-                return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-                  while (1) switch (_context3.prev = _context3.next) {
-                    case 0:
-                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Trying to force play after 0.1 seconds"));
-                      // Try to force play here
-                      _context3.prev = 1;
-                      if (!(vjsPlayer.currentTime() === 0)) {
-                        _context3.next = 6;
-                        break;
-                      }
-                      // Set video mute/unmute based on setting once playing
-                      vjsPlayer.muted(media.muted);
-                      _context3.next = 6;
-                      return vjsPlayer.play();
-                    case 6:
-                      // Resolve if play works
-                      resolve(true);
-                      _context3.next = 12;
-                      break;
-                    case 9:
-                      _context3.prev = 9;
-                      _context3.t0 = _context3["catch"](1);
-                      // Reject race if play fails
-                      reject('Play failed');
-                    case 12:
-                    case "end":
-                      return _context3.stop();
-                  }
-                }, _callee3, null, [[1, 9]]);
-              })), 100);
-            }), new Promise(function (_, reject) {
-              return setTimeout(function () {
-                return reject('Timeout');
-              }, 5000);
-            })]).then(function () {
-              console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay started"));
-            })["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) {
-                    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 (xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                          playerReportFault('Media autoplay error', media).then(function () {
-                            _this.stop();
-                          });
-                        }
-                      }
-                    case 1:
-                    case "end":
-                      return _context4.stop();
-                  }
-                }, _callee4);
-              }));
-              return function (_x3) {
-                return _ref4.apply(this, arguments);
-              };
-            }());
-            // Optional: Reset the flag automatically when a new video loads or the source changes
-            vjsPlayer.on('loadstart', function () {
-              triggerTimeUpdate = false;
-            });
-            if (media.duration === 0) {
-              vjsPlayer.on('timeupdate', function () {
-                var preloadBufferTimeMs = 2000;
-                var mediaDuration = vjsPlayer.duration();
-                var currentTime = vjsPlayer.currentTime();
-                var regionHasMultipleMedia = media.region.totalMediaObjects > 1;
-                var remainingTimeMs = 0;
-                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) {
-                  // 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
-                }
-                // Reset the flag if the user seeks back to a point where more than preloadBufferTimeMs remain
-                if (remainingTimeMs > preloadBufferTimeMs) {
-                  triggerTimeUpdate = false;
-                }
-              });
-            }
+          _context4.next = 11;
+          return res.blob();
+        case 11:
+          blob = _context4.sent;
+          _context4.next = 19;
+          break;
+        case 14:
+          if (!(type === 'audio')) {
+            _context4.next = 19;
+            break;
           }
-        });
-        vjsPlayer.on('error', /*#__PURE__*/function () {
-          var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(err) {
-            return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-              while (1) switch (_context5.prev = _context5.next) {
-                case 0:
-                  console.debug("??? XLR.debug >> VideoMedia: Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-                  if (xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                    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 _context5.stop();
-              }
-            }, _callee5);
-          }));
-          return function (_x4) {
-            return _ref5.apply(this, arguments);
-          };
-        }());
-        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 . . ."));
-            _this.stop();
+          _context4.next = 17;
+          return res.arrayBuffer();
+        case 17:
+          data = _context4.sent;
+          blob = new Blob([data], {
+            type: audioFileType(getFileExt(src))
           });
-        }
+        case 19:
+          return _context4.abrupt("return", URL.createObjectURL(blob));
+        case 20:
+        case "end":
+          return _context4.stop();
       }
-    },
-    stop: function stop() {
-      var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var vjsPlayer = 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_
-      });
-      // Expire the media and dispose the video
-      if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
-        if (!disposeOnly) {
-          media.emitter.emit('end', media);
-        }
-        vjsPlayer.dispose();
-        // Clear up media player
-        media.player = undefined;
-      } else {
-        media.player = undefined;
-        media.html = null;
-        media.emitter.emit('end', media);
+    }, _callee4);
+  }));
+  return _preloadMediaBlob.apply(this, arguments);
+}
+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) {
+        case 0:
+          return _context5.abrupt("return", fetch(url, {
+            method: 'GET',
+            headers: {
+              'X-PREVIEW-JWT': jwtToken || ''
+            }
+          }).then(function (res) {
+            return res.json();
+          })["catch"](function (err) {
+            console.debug(err);
+          }));
+        case 1:
+        case "end":
+          return _context5.stop();
       }
-    },
-    play: function play() {
-      var _this2 = this;
-      var vjsPlayer = videojs(mediaId);
-      if (vjsPlayer !== undefined) {
-        var _vjsPlayer$play;
-        (_vjsPlayer$play = vjsPlayer.play()) === null || _vjsPlayer$play === void 0 || _vjsPlayer$play["catch"]( /*#__PURE__*/function () {
-          var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(error) {
-            return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-              while (1) switch (_context6.prev = _context6.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"));
-                    _this2.stop();
-                  } else {
-                    console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
-                    if (xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                      playerReportFault('Media autoplay error', media).then(function () {
-                        _this2.stop();
-                      });
-                    }
-                  }
-                case 1:
-                case "end":
-                  return _context6.stop();
-              }
-            }, _callee6);
+    }, _callee5);
+  }));
+  return _fetchJSON.apply(this, arguments);
+}
+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) {
+        case 0:
+          return _context6.abrupt("return", fetch(url, {
+            method: 'GET',
+            headers: {
+              'X-PREVIEW-JWT': jwtToken || ''
+            }
+          }).then(function (res) {
+            return res.text();
+          }).then(function (responseText) {
+            if (String(responseText).length > 0) {
+              return responseText;
+            } else {
+              return '';
+            }
+          })["catch"](function (err) {
+            console.debug(err);
+            return err === null || err === void 0 ? void 0 : err.message;
           }));
-          return function (_x5) {
-            return _ref6.apply(this, arguments);
-          };
-        }());
+        case 1:
+        case "end":
+          return _context6.stop();
       }
+    }, _callee6);
+  }));
+  return _fetchText.apply(this, arguments);
+}
+function getFileExt(filename) {
+  var filenameArr = String(filename).split('.');
+  return filenameArr[filenameArr.length - 1];
+}
+function audioFileType(str) {
+  var validAudioTypes = {
+    'mp3': 'audio/mp3',
+    'wav': 'audio/wav',
+    'ogg': 'audio/ogg'
+  };
+  if (Boolean(validAudioTypes[str])) {
+    return validAudioTypes[str];
+  }
+  return undefined;
+}
+function videoFileType(str) {
+  var validVideoTypes = {
+    'mp4': 'video/mp4',
+    'webm': 'video/webm',
+    'wmv': 'video/x-ms-wmv'
+  };
+  if (Boolean(validVideoTypes[str])) {
+    return validVideoTypes[str];
+  }
+  return undefined;
+}
+function composeResourceUrlByPlatform(options, params) {
+  var resourceUrl = '';
+  if (params.regionOptions && Boolean(params.regionOptions.getResourceUrl)) {
+    resourceUrl = params.regionOptions.getResourceUrl.replace(":regionId", params.regionId).replace(":id", params.mediaId) + '?preview=1&layoutPreview=1';
+  }
+  if (options.platform === exports.ConsumerPlatform.CMS && Boolean(params.regionOptions.previewJwt)) {
+    resourceUrl += '&jwt=' + params.regionOptions.previewJwt;
+  }
+  if (options.platform === exports.ConsumerPlatform.CHROMEOS) {
+    var resourceEndpoint = '/required-files/resource/';
+    if (!params.isGlobalContent && params.isImageOrVideo) {
+      resourceUrl = resourceEndpoint + params.fileId + '?saveAs=' + params.uri;
+    }
+  } else if (options.platform === exports.ConsumerPlatform.ELECTRON) {
+    if (params.render === 'html' || params.mediaType === 'ticker' || params.mediaType === 'webpage') {
+      resourceUrl = options.appHost + 'layout_' + params.layoutId + '_region_' + params.regionId + '_media_' + params.mediaId + '.html';
+    } else if (params.render === 'native' && params.isImageOrVideo) {
+      resourceUrl = options.appHost + params.uri;
     }
+  } else if (!Boolean(params['mediaType'])) {
+    resourceUrl += '&scale_override=' + params.scaleFactor;
+  }
+  return resourceUrl;
+}
+function composeResourceUrl(options, params) {
+  var _options$config, _options$config2, _options$config3;
+  var schemaVersion = options && ((_options$config = options.config) === null || _options$config === void 0 ? void 0 : _options$config.schemaVersion);
+  var hardwareKey = options && ((_options$config2 = options.config) === null || _options$config2 === void 0 ? void 0 : _options$config2.hardwareKey);
+  var serverKey = options && ((_options$config3 = options.config) === null || _options$config3 === void 0 ? void 0 : _options$config3.cmsKey);
+  return '/pwa/getResource' + '?v=' + schemaVersion + '&serverKey=' + serverKey + '&hardwareKey=' + hardwareKey + '&layoutId=' + params.layoutId + '&regionId=' + params.regionId + '&mediaId=' + params.mediaId;
+}
+function composeMediaUrl(params) {
+  return '/xmds.php?file=' + params.uri;
+}
+function composeBgUrlByPlatform(platform, params) {
+  var bgImageUrl = '';
+  if (platform === exports.ConsumerPlatform.CMS) {
+    bgImageUrl = params.options.layoutBackgroundDownloadUrl.replace(":id", params.id) + '&preview=1&width=' + params.sWidth + '&height=' + params.sHeight + '&dynamic&proportional=0';
+  } else if (platform === exports.ConsumerPlatform.CHROMEOS) {
+    bgImageUrl = composeMediaUrl({
+      uri: params.bgImage
+    });
+  } else if (platform === exports.ConsumerPlatform.ELECTRON) {
+    bgImageUrl = params.options.appHost + params.bgImage;
+  }
+  return bgImageUrl;
+}
+function getIndexByLayoutId(layoutsInput, layoutId) {
+  var layoutIndexes = layoutsInput.reduce(function (a, b, indx) {
+    a[Number(b.layoutId)] = _objectSpread2(_objectSpread2({}, b), {}, {
+      index: indx
+    });
+    return a;
+  }, {});
+  if (layoutId === null || !layoutId) {
+    return layoutIndexes;
+  }
+  if (Boolean(layoutIndexes[layoutId])) {
+    return layoutIndexes[layoutId];
+  }
+  // Defaults to 0
+  return {
+    index: 0
   };
-  return videoPlayer;
 }
-
-var Media = /*#__PURE__*/function () {
-  function Media(region, mediaId, xml, options, xlr) {
-    var _this$xml,
-      _this$xml2,
-      _this$xml3,
-      _this$xml4,
-      _this$xml5,
-      _this = this;
-    _classCallCheck(this, Media);
-    _defineProperty(this, "attachedAudio", false);
-    _defineProperty(this, "checkIframeStatus", false);
-    _defineProperty(this, "containerName", '');
-    _defineProperty(this, "divHeight", 0);
-    _defineProperty(this, "divWidth", 0);
-    _defineProperty(this, "duration", 0);
-    _defineProperty(this, "emitter", createNanoEvents());
+function isEmpty(input) {
+  return !Boolean(input) || String(input).length === 0;
+}
+function getAllAttributes(elem) {
+  if (!elem || elem === null) {
+    return {};
+  }
+  return elem.getAttributeNames().reduce(function (obj, name) {
+    return _objectSpread2(_objectSpread2({}, obj), {}, _defineProperty({}, name, {
+      value: elem.getAttribute(name)
+    }));
+  }, {});
+}
+/**
+ * Create expiration day based on current date
+ * @param numDays Number of days as expiry
+ * @returns JSON string format of date
+ */
+function setExpiry(numDays) {
+  var today = new Date();
+  return new Date(today.setHours(24 * numDays || 1)).toJSON();
+}
+/**
+ * Check if given layout exists in the loop using layoutId
+ * @param layouts Schedule loop unique layouts (uniqueLayouts)
+ * @param layoutId Layout ID of the layout to look for
+ *
+ * @return boolean
+ */
+function isLayoutValid(layouts, layoutId) {
+  if (layouts.length < 1 || !layoutId) {
+    return false;
+  }
+  var layoutIndex = layouts.findIndex(function (l) {
+    return l.layoutId === layoutId;
+  });
+  return layoutIndex !== -1;
+}
+function getLayoutIndexByLayoutId(layouts, layoutId) {
+  if (layouts.length < 1 || !layoutId) {
+    return null;
+  }
+  return layouts.findIndex(function (l) {
+    return l.layoutId === layoutId;
+  });
+}
+function hasDefaultOnly(inputLayouts) {
+  var _inputLayouts$0$respo;
+  if (!inputLayouts) {
+    return false;
+  }
+  return inputLayouts.length === 1 && ((_inputLayouts$0$respo = inputLayouts[0].response) === null || _inputLayouts$0$respo === void 0 ? void 0 : _inputLayouts$0$respo.nodeName) === 'default';
+}
+function hasSspLayout(inputLayouts) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (!inputLayouts || inputLayouts.length === 0) {
+    return defaultValue;
+  }
+  return inputLayouts.find(function (layout) {
+    return layout.layoutId === -1;
+  }) !== undefined;
+}
+function prepareIframe(media) {
+  var iframe = document.createElement('iframe');
+  iframe.scrolling = 'no';
+  iframe.id = media.iframeName;
+  iframe.width = "".concat(media.divWidth, "px");
+  iframe.height = "".concat(media.divHeight, "px");
+  iframe.style.cssText = "border: 0;";
+  if ((media.render === 'html' || media.render === 'webpage') && media.url !== null) {
+    iframe.src = media.url;
+  } else {
+    iframe.src = "".concat(media.url, "&width=").concat(media.divWidth, "&height=").concat(media.divHeight);
+  }
+  return iframe;
+}
+function prepareImage(media, container) {
+  if (media.options['scaletype'] === 'stretch') {
+    container.style.cssText = container.style.cssText.concat("background-size: 100% 100%;");
+  } else if (media.options['scaletype'] === 'fit') {
+    container.style.cssText = container.style.cssText.concat("background-size: cover;");
+  } else {
+    // Center scale type, do we have align or valign?
+    var align = media.options['align'] == "" ? "center" : media.options['align'];
+    var valign = media.options['valign'] == "" || media.options['valign'] == "middle" ? "center" : media.options['valign'];
+    container.style.cssText = container.style.cssText.concat("background-position: ".concat(align, " ").concat(valign));
+  }
+  return container;
+}
+function prepareVideo(media, container) {
+  var $videoMedia = composeVideoSource(container, media);
+  var isMuted = false;
+  if (Boolean(media.options['mute'])) {
+    isMuted = media.options.mute === '1';
+  }
+  if (Boolean(media.options['scaletype'])) {
+    if (media.options.scaletype === 'stretch') {
+      $videoMedia.style.objectFit = 'fill';
+    }
+  }
+  $videoMedia.classList.add('video-js', 'vjs-default-skin');
+  if (media.loop) {
+    media.loop = true;
+    $videoMedia.loop = true;
+  }
+  media.muted = isMuted;
+  return $videoMedia;
+}
+function prepareAudio(media, container) {
+  var $audioMedia = container;
+  $audioMedia.preload = 'auto';
+  $audioMedia.textContent = 'Unsupported Audio';
+  $audioMedia.autoplay = true;
+  if (media.loop) {
+    $audioMedia.loop = true;
+  }
+  return $audioMedia;
+}
+function createMediaElement(mediaObject) {
+  var self = mediaObject;
+  var mediaId = getMediaId(self);
+  var mediaSelector = ".media--item.".concat(mediaId);
+  var $media = self.region.html.querySelector(mediaSelector);
+  if ($media === null) {
+    if (self.mediaType === 'video') {
+      $media = document.createElement('video');
+    } else if (self.mediaType === 'audio') {
+      $media = new Audio();
+    } else {
+      $media = document.createElement('div');
+    }
+    $media.id = mediaId;
+  }
+  $media.dataset.mediaId = self.id;
+  $media.dataset.mediaType = self.mediaType;
+  $media.dataset.type = self.type;
+  $media.dataset.render = self.render;
+  $media.dataset.duration = String(self.duration);
+  $media.dataset.fileId = self.fileId;
+  $media.className = "media--item ".concat(mediaId);
+  /* Scale the Content Container */
+  var cssText = "\n        width: ".concat(self.divWidth, "px;\n        height: ").concat(self.divHeight, "px;\n        position: absolute;\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center;\n    ");
+  if (self.mediaType !== 'video') {
+    cssText += "\n            visibility: hidden;\n            opacity: 0;\n            z-index: 0;\n        ";
+  }
+  $media.style.cssText = cssText;
+  if (self.render === 'html' || self.mediaType === 'ticker' || self.mediaType === 'webpage') {
+    self.checkIframeStatus = true;
+    self.iframe = prepareIframe(self);
+  } else if (self.mediaType === "image") {
+    $media = prepareImage(self, $media);
+  } else if (self.mediaType === 'video') {
+    $media = prepareVideo(self, $media);
+  } else if (self.mediaType === 'audio') {
+    $media = prepareAudio(self, $media);
+  }
+  // Duration is per item condition
+  if ((self.render === 'html' || self.mediaType === 'ticker') && self.url !== null) {
+    /* Check if the ticker duration is based on the number of items in the feed */
+    if (self.options['durationisperitem'] === '1') {
+      var regex = new RegExp('<!-- NUMITEMS=(.*?) -->');
+      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var html, res;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetchJSON("".concat(self.url, "&width=").concat(self.divWidth, "&height=").concat(self.divHeight), self.options.previewJwt);
+            case 2:
+              html = _context.sent;
+              console.debug({
+                html: html
+              });
+              res = regex.exec(html);
+              if (res !== null) {
+                self.duration = parseInt(String(self.duration)) * parseInt(res[1]);
+              }
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }))();
+    }
+  }
+  // Check if the media has fade-in/out transitions
+  if (Boolean(self.options['transin']) && Boolean(self.options['transinduration'])) {
+    var transInDuration = Number(self.options.transinduration);
+    var fadeInTrans = transitionElement('fadeIn', {
+      duration: transInDuration
+    });
+    $media.animate(fadeInTrans.keyframes, fadeInTrans.timing);
+  }
+  // Add media to the region
+  // Second media if exists, will be off-canvas
+  // All added media will be hidden by default
+  // It will start showing when region.nextMedia() function is called
+  // When there's only 1 item and loop = false, don't remove the item but leave it at its last state
+  // For image, and only 1 item, it should still have the transition for next state
+  // Add conditions for video duration being 0 or 1 and also the loop property
+  // For video url, we have to create a URL out of the XLF video URL
+  /**
+   * @DONE
+   * Case 1: Video duration = 0, this will play the video for its entire duration
+   * Case 2: Video duration is set > 0 and loop = false
+   * E.g. Set duration = 100s, video duration = 62s
+   * the video will play until 62s and will stop to its last frame until 100s
+   * After 100s, it will expire
+   * Case 3: Video duration is set > 0 and loop = true
+   * E.g. Set duration = 100s, video duration = 62s, loop = true
+   * the video will play until 62s and will loop through until the remaining 38s
+   * to complete the 100s set duration
+   */
+  // Add html node to media for
+  // self.html = $media;
+  return $media;
+}
+function prepareVideoMedia(media, region) {
+  var mediaId = getMediaId(media);
+  // Check if html is ready and is in the DOM
+  if (media.html !== null) {
+    // Clean up video.js instance
+    var existingPlayer = videojs.getPlayer(mediaId);
+    if (existingPlayer !== undefined) {
+      existingPlayer.dispose();
+      media.player = undefined;
+    }
+    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 mediaInRegion = $region === null || $region === void 0 ? void 0 : $region.querySelector('.' + mediaId);
+    console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
+      layoutSelector: layoutSelector,
+      $layoutWithIndex: $layoutWithIndex,
+      $region: $region,
+      mediaInRegion: mediaInRegion,
+      mediaHtml: media.html,
+      existingPlayer: existingPlayer,
+      mediaId: mediaId,
+      layoutInDOM: document.body.contains($layout)
+    });
+    if (!mediaInRegion) {
+      media.html = createMediaElement(media);
+    } else {
+      mediaInRegion.remove();
+      media.html = createMediaElement(media);
+    }
+    // Append fresh copy of the media into the region
+    $region !== null && $region.appendChild(media.html);
+    var isMediaInDOM = document.body.contains(media.html);
+    console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
+      isMediaInDOM: isMediaInDOM,
+      mediaHtml: media.html,
+      mediaId: mediaId
+    });
+    // Initialize video.js
+    media.player = videojs(mediaId, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
+      errorDisplay: region.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
+      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 === exports.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');
+  }
+}
+function prepareImageMedia(media, region) {
+  var mediaId = getMediaId(media);
+  media.html.style.setProperty('background-image', "url(".concat(media.url));
+  // Check if media in region
+  // Remove old copy before inserting fresh copy
+  var mediaInRegion = region.html.querySelector('.' + mediaId);
+  if (mediaInRegion) {
+    mediaInRegion.remove();
+  }
+  // Append media to its region
+  var $region = document.querySelector('#' + region.containerName);
+  $region !== null && $region.appendChild(media.html);
+}
+function prepareAudioMedia(media, region) {
+  var mediaId = getMediaId(media);
+  if (media.url !== null) {
+    media.html.src = media.url;
+  }
+  // Check if media in region
+  // Remove old copy before inserting fresh copy of the media
+  var mediaInRegion = region.html.querySelector('.' + mediaId);
+  if (mediaInRegion) {
+    mediaInRegion.remove();
+  }
+  // Append media to its region
+  var $region = document.querySelector('#' + region.containerName);
+  $region !== null && $region.appendChild(media.html);
+}
+function prepareHtmlMedia(media, region) {
+  // Set state as false ( for now )
+  media.ready = false;
+  if (media.html) {
+    var mediaId = getMediaId(media);
+    // Clean up old copy of the media
+    // before inserting fresh copy
+    var $layout = document.querySelector("#".concat(region.layout.containerName, "[data-sequence=\"").concat(region.layout.index, "\"]"));
+    var $region = $layout.querySelector('#' + region.containerName);
+    var mediaInRegion = $region.querySelector('.' + mediaId);
+    console.debug('<><> XLR.debug >> [Media] - [Generators::prepareHtmlMedia]', {
+      mediaId: mediaId,
+      mediaInRegion: mediaInRegion
+    });
+    // Append iframe
+    media.html.innerHTML = '';
+    media.html.appendChild(media.iframe);
+    if (!mediaInRegion) {
+      // Add fresh copy of the media into the region
+      var _$region = document.querySelector('#' + region.containerName);
+      _$region !== null && _$region.appendChild(media.html);
+      media.ready = true;
+    }
+  }
+}
+function playerReportFault(_x11, _x12) {
+  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) {
+        case 0:
+          // Immediately expire media and report a fault
+          playerSW = PwaSW();
+          _context7.next = 3;
+          return playerSW.getSW();
+        case 3:
+          hasSW = _context7.sent;
+          if (hasSW) {
+            playerSW.postMsg({
+              type: 'MEDIA_FAULT',
+              code: 5002,
+              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')
+            }).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
+              });
+            });
+          }
+        case 5:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  }));
+  return _playerReportFault.apply(this, arguments);
+}
+function setLayoutIndex(layout, layoutIndex) {
+  if (!layout || layout.id === null) {
+    return;
+  }
+  layout.index = layoutIndex;
+  return layout;
+}
+
+const urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+/* @ts-self-types="./index.d.ts" */
+let nanoid = (size = 21) => {
+  let id = '';
+  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
+  while (size--) {
+    id += urlAlphabet[bytes[size] & 63];
+  }
+  return id
+};
+
+function AudioMedia(media) {
+  var audioMediaObject = {
+    init: function init() {
+      var $audioMedia = document.getElementById(getMediaId(media));
+      var $playBtn = null;
+      if ($audioMedia) {
+        $audioMedia.onloadstart = function () {
+          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
+        };
+        $audioMedia.onloadeddata = function () {
+          if ($audioMedia.readyState >= 2) {
+            console.debug("".concat(capitalizeStr(media.mediaType), " data for media > ").concat(media.id, " has been fully loaded . . ."));
+          }
+        };
+        $audioMedia.oncanplay = function () {
+          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+        };
+        $audioMedia.onplaying = function () {
+          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
+          if ($playBtn !== null) {
+            $playBtn.remove();
+          }
+        };
+        var audioPlayPromise = $audioMedia.play();
+        if (audioPlayPromise !== undefined) {
+          audioPlayPromise.then(function () {
+            console.debug('autoplay started . . .');
+            // Autoplay restarted
+          })["catch"](function (error) {
+            if (error.name === 'NotAllowedError') {
+              var _$audioMedia$parentNo;
+              // Let's show a play audio button
+              $playBtn = document.createElement('button');
+              $playBtn.classList.add('play-audio-btn');
+              $playBtn.textContent = 'Play Audio';
+              $playBtn.addEventListener('click', function () {
+                $audioMedia.muted = false;
+                $audioMedia.play();
+              });
+              (_$audioMedia$parentNo = $audioMedia.parentNode) === null || _$audioMedia$parentNo === void 0 || _$audioMedia$parentNo.insertBefore($playBtn, $audioMedia.nextSibling);
+            }
+          });
+        }
+        if (media.duration === 0) {
+          $audioMedia.ondurationchange = function () {
+            console.debug('Showing Media ' + media.id + ' for ' + $audioMedia.duration + 's of Region ' + media.region.regionId);
+          };
+          $audioMedia.onended = function () {
+            var _media$emitter;
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+            (_media$emitter = media.emitter) === null || _media$emitter === void 0 || _media$emitter.emit('end', media);
+          };
+        }
+      }
+    }
+  };
+  return audioMediaObject;
+}
+
+var Media = /*#__PURE__*/function () {
+  function Media(region, mediaId, xml, options, xlr) {
+    var _this$xml,
+      _this$xml2,
+      _this$xml3,
+      _this$xml4,
+      _this$xml5,
+      _this = this;
+    _classCallCheck(this, Media);
+    _defineProperty(this, "attachedAudio", false);
+    _defineProperty(this, "checkIframeStatus", false);
+    _defineProperty(this, "containerName", '');
+    _defineProperty(this, "divHeight", 0);
+    _defineProperty(this, "divWidth", 0);
+    _defineProperty(this, "duration", 0);
+    _defineProperty(this, "emitter", createNanoEvents());
     _defineProperty(this, "enableStat", false);
     _defineProperty(this, "fileId", '');
     _defineProperty(this, "finished", false);
@@ -73513,12 +74064,18 @@ var Media = /*#__PURE__*/function () {
     value: function startMediaTimer(media) {
       var _this2 = this;
       var preloadTimeMs = 2000;
-      var preloadTimeBufferMs = media.duration * 1000 - preloadTimeMs;
+      var preloadTimeBufferMs = media.duration * 1000 / 2 - preloadTimeMs;
       var isPreparingNextMedia = false;
       if (preloadTimeBufferMs < preloadTimeMs) {
         // Use media duration when preloadTimeBufferMs is less than the preloadTimeMs
-        preloadTimeBufferMs = media.duration * 1000;
+        preloadTimeBufferMs = media.duration / 2 * 1000;
       }
+      console.debug('<><> XLR.debug >> [Media::startMediaTimer]', {
+        preloadTimeMs: preloadTimeMs,
+        preloadTimeBufferMs: preloadTimeBufferMs,
+        isPreparingNextMedia: isPreparingNextMedia,
+        mediaDuration: media.duration
+      });
       this.mediaTimer = setInterval(function () {
         _this2.mediaTimeCount++;
         var elapsedTimeMs = _this2.mediaTimeCount * 1000;
@@ -73591,7 +74148,8 @@ var Media = /*#__PURE__*/function () {
         scaleFactor: this.region.layout.scaleFactor,
         uri: this.uri,
         isGlobalContent: this.mediaType === 'global',
-        isImageOrVideo: this.mediaType === 'image' || this.mediaType === 'video'
+        isImageOrVideo: this.mediaType === 'image' || this.mediaType === 'video',
+        render: this.render
       });
       if (this.mediaType === 'image' || this.mediaType === 'video') {
         resourceUrlParams.mediaType = this.mediaType;
@@ -73604,861 +74162,213 @@ var Media = /*#__PURE__*/function () {
         if (this.mediaType === 'image' || this.mediaType === 'video' || this.mediaType === 'audio') {
           tmpUrl = composeMediaUrl(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
-      this.loop = this.options['loop'] == '1' || this.region.options['loop'] == '1' && this.region.totalMediaObjects == 1;
-      this.html = createMediaElement(this);
-    }
-  }, {
-    key: "run",
-    value: function run() {
-      var _this3 = this;
-      var transInDuration = 1;
-      var transInDirection = 'E';
-      if (Boolean(this.options['transinduration'])) {
-        transInDuration = Number(this.options.transinduration);
-      }
-      if (Boolean(this.options['transindirection'])) {
-        transInDirection = this.options.transindirection;
-      }
-      var defaultTransInOptions = {
-        duration: transInDuration
-      };
-      var transIn = transitionElement('defaultIn', {
-        duration: defaultTransInOptions.duration
-      });
-      if (Boolean(this.options['transin'])) {
-        var transInName = this.options['transin'];
-        if (transInName === 'fly') {
-          transInName = "".concat(transInName, "In");
-          defaultTransInOptions.keyframes = flyTransitionKeyframes({
-            trans: 'in',
-            direction: transInDirection,
-            height: this.divHeight,
-            width: this.divWidth
-          });
-        }
-        transIn = transitionElement(transInName, defaultTransInOptions);
-      }
-      var showCurrentMedia = function showCurrentMedia() {
-        var mediaId = getMediaId({
-          mediaType: _this3.mediaType,
-          containerName: _this3.containerName
-        });
-        var $region = document.querySelector('#' + _this3.region.containerName);
-        var $media = $region !== null && $region.querySelector('.' + mediaId);
-        if (!$media) {
-          $media = getNewMedia();
-        }
-        console.debug('??? XLR.debug >> Media run - show current media:', {
-          inDOM: document.body.contains($media),
-          mediaId: mediaId,
-          $media: $media,
-          mediaObject: _this3
-        });
-        if ($media) {
-          if (_this3.mediaType === 'video') {
-            var _this3$player, _this3$player2, _this3$player3, _this3$player4;
-            console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::START', {
-              mediaPlayer: _this3.player,
-              isDisposed: (_this3$player = _this3.player) === null || _this3$player === void 0 ? void 0 : _this3$player.isDisposed(),
-              el: (_this3$player2 = _this3.player) === null || _this3$player2 === void 0 ? void 0 : _this3$player2.el_
-            });
-            // Make sure that vjs is available on the media
-            // Else, re-initialize
-            if (_this3.player !== undefined) {
-              var existingPlayer = videojs(mediaId);
-              if (existingPlayer) {
-                _this3.player = existingPlayer;
-              } else {
-                if (_this3.player.isDisposed_) {
-                  _this3.player = undefined;
-                  _this3.player = videojs(mediaId, _objectSpread2({}, vjsDefaultOptions({
-                    errorDisplay: _this3.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-                    loop: _this3.loop
-                  })));
-                }
-              }
-            }
-            console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::END', {
-              mediaPlayer: _this3.player,
-              isDisposed: (_this3$player3 = _this3.player) === null || _this3$player3 === void 0 ? void 0 : _this3$player3.isDisposed(),
-              el: (_this3$player4 = _this3.player) === null || _this3$player4 === void 0 ? void 0 : _this3$player4.el_
-            });
-            if (_this3.player !== undefined && _this3.player.el_ !== null) {
-              _this3.player.el().style.setProperty('visibility', 'visible');
-              _this3.player.el().style.setProperty('z-index', '10');
-              _this3.player.el().style.setProperty('opacity', '1');
-            }
-          } else {
-            console.debug('??? XLR.debug >> Media::run() > showCurrentMedia', {
-              mediaType: _this3.mediaType,
-              render: _this3.render,
-              $media: $media,
-              state: _this3.state
-            });
-            $media.style.setProperty('visibility', 'visible');
-            $media.style.setProperty('z-index', '10');
-            $media.style.setProperty('opacity', '1');
-          }
-          if (Boolean(_this3.options['transin'])) {
-            $media.animate(transIn.keyframes, transIn.timing);
-          }
-          if (!_this3.region.layout.isOverlay || _this3.region.layout.isOverlay && _this3.region.totalMediaObjects > 1) {
-            _this3.emitter.emit('start', _this3);
-          }
-        }
-      };
-      var getNewMedia = function getNewMedia() {
-        var $region = document.getElementById("".concat(_this3.region.containerName));
-        // 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);
-          return _this3.html;
-        }
-        return null;
-      };
-      showCurrentMedia();
-    }
-  }, {
-    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();
-              }
-              // 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 "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function stop() {
-        return _stop.apply(this, arguments);
-      }
-      return stop;
-    }()
-    /**
-     * Emits a command from the shell command widget.
-     *
-     * @param media
-     * @private
-     */
-  }, {
-    key: "emitCommand",
-    value: function emitCommand(media) {
-      if (media.mediaType !== 'shellcommand') {
-        return;
-      }
-      var options = media.options;
-      if (options.commandtype === 'storedCommand' && options.commandcode) {
-        console.debug('Media::Emitter > Shell Command - Calling commandCodeReceived event');
-        this.xlr.emitter.emit('commandCodeReceived', options.commandcode);
-        return;
-      }
-      var commandString = '';
-      if (options.useglobalcommand === '1') {
-        commandString = options.globalcommand || '';
-      } else {
-        // Use platform-specific command when available
-        if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-          commandString = options.chromeoscommand || '';
-        } else if (this.xlr.config.platform === exports.ConsumerPlatform.ANDROID) {
-          commandString = options.androidcommand || '';
-        } else if (this.xlr.config.platform === exports.ConsumerPlatform.LINUX) {
-          commandString = options.linuxcommand || '';
-        } else if (this.xlr.config.platform === exports.ConsumerPlatform.TIZEN) {
-          commandString = options.tizencommand || '';
-        } else if (this.xlr.config.platform === exports.ConsumerPlatform.WEBOS) {
-          commandString = options.weboscommand || '';
-        } else if (this.xlr.config.platform === exports.ConsumerPlatform.WINDOWS) {
-          commandString = options.windowscommand || '';
-        }
-        // Fall back to the global command if the platform-specific one
-        // is missing, not configured, or not supported yet
-        if (!commandString && options.globalcommand) {
-          commandString = options.globalcommand;
-        }
-      }
-      if (commandString) {
-        console.debug('Media::Emitter > Shell Command - Calling commandStringReceived event');
-        this.xlr.emitter.emit('commandStringReceived', commandString);
-        return;
-      }
-    }
-  }]);
-}();
-
-function nextId(options) {
-  if (options.idCounter > 500) {
-    options.idCounter = 0;
-  }
-  options.idCounter = options.idCounter + 1;
-  return options.idCounter;
-}
-var getMediaId = function getMediaId(_ref) {
-  var mediaType = _ref.mediaType,
-    containerName = _ref.containerName;
-  var mediaId = containerName;
-  if (mediaType === 'video') {
-    mediaId = mediaId + '-vid';
-  } else if (mediaType === 'audio') {
-    mediaId = mediaId + '-aud';
-  }
-  return mediaId;
-};
-var capitalizeStr = function capitalizeStr(inputStr) {
-  if (inputStr === null) {
-    return '';
-  }
-  return String(inputStr).charAt(0).toUpperCase() + String(inputStr).substring(1);
-};
-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) {
-        case 0:
-          return _context3.abrupt("return", fetch(src, {
-            method: 'GET',
-            headers: {
-              'X-PREVIEW-JWT': jwtToken || ''
-            }
-          }).then(function (res) {
-            return res.blob();
-          }).then(function (blob) {
-            return new Promise(function (res, rej) {
-              var reader = new FileReader();
-              reader.onloadend = function () {
-                return res(reader.result);
-              };
-              reader.onerror = rej;
-              reader.readAsDataURL(blob);
-            });
-          }));
-        case 1:
-        case "end":
-          return _context3.stop();
-      }
-    }, _callee3);
-  }));
-  return _getDataBlob.apply(this, arguments);
-}
-function preloadMediaBlob(_x3, _x4, _x5) {
-  return _preloadMediaBlob.apply(this, arguments);
-}
-function _preloadMediaBlob() {
-  _preloadMediaBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(src, type, jwtToken) {
-    var res, blob, data;
-    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          _context4.next = 2;
-          return fetch(src, {
-            method: 'GET',
-            headers: {
-              'X-PREVIEW-JWT': jwtToken || ''
-            }
-          });
-        case 2:
-          res = _context4.sent;
-          blob = new Blob();
-          if (!(type === 'image')) {
-            _context4.next = 8;
-            break;
-          }
-          blob = new Blob();
-          _context4.next = 19;
-          break;
-        case 8:
-          if (!(type === 'video')) {
-            _context4.next = 14;
-            break;
-          }
-          _context4.next = 11;
-          return res.blob();
-        case 11:
-          blob = _context4.sent;
-          _context4.next = 19;
-          break;
-        case 14:
-          if (!(type === 'audio')) {
-            _context4.next = 19;
-            break;
-          }
-          _context4.next = 17;
-          return res.arrayBuffer();
-        case 17:
-          data = _context4.sent;
-          blob = new Blob([data], {
-            type: audioFileType(getFileExt(src))
-          });
-        case 19:
-          return _context4.abrupt("return", URL.createObjectURL(blob));
-        case 20:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  }));
-  return _preloadMediaBlob.apply(this, arguments);
-}
-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) {
-        case 0:
-          return _context5.abrupt("return", fetch(url, {
-            method: 'GET',
-            headers: {
-              'X-PREVIEW-JWT': jwtToken || ''
-            }
-          }).then(function (res) {
-            return res.json();
-          })["catch"](function (err) {
-            console.debug(err);
-          }));
-        case 1:
-        case "end":
-          return _context5.stop();
-      }
-    }, _callee5);
-  }));
-  return _fetchJSON.apply(this, arguments);
-}
-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) {
-        case 0:
-          return _context6.abrupt("return", fetch(url, {
-            method: 'GET',
-            headers: {
-              'X-PREVIEW-JWT': jwtToken || ''
-            }
-          }).then(function (res) {
-            return res.text();
-          }).then(function (responseText) {
-            if (String(responseText).length > 0) {
-              return responseText;
-            } else {
-              return '';
-            }
-          })["catch"](function (err) {
-            console.debug(err);
-            return err === null || err === void 0 ? void 0 : err.message;
-          }));
-        case 1:
-        case "end":
-          return _context6.stop();
-      }
-    }, _callee6);
-  }));
-  return _fetchText.apply(this, arguments);
-}
-function getFileExt(filename) {
-  var filenameArr = String(filename).split('.');
-  return filenameArr[filenameArr.length - 1];
-}
-function audioFileType(str) {
-  var validAudioTypes = {
-    'mp3': 'audio/mp3',
-    'wav': 'audio/wav',
-    'ogg': 'audio/ogg'
-  };
-  if (Boolean(validAudioTypes[str])) {
-    return validAudioTypes[str];
-  }
-  return undefined;
-}
-function videoFileType(str) {
-  var validVideoTypes = {
-    'mp4': 'video/mp4',
-    'webm': 'video/webm',
-    'wmv': 'video/x-ms-wmv'
-  };
-  if (Boolean(validVideoTypes[str])) {
-    return validVideoTypes[str];
-  }
-  return undefined;
-}
-function composeResourceUrlByPlatform(options, params) {
-  var resourceUrl = params.regionOptions.getResourceUrl.replace(":regionId", params.regionId).replace(":id", params.mediaId) + '?preview=1&layoutPreview=1';
-  if (options.platform === 'CMS') {
-    resourceUrl += '&jwt=' + params.regionOptions.previewJwt;
-  }
-  if (options.platform === 'chromeOS') {
-    var resourceEndpoint = '/required-files/resource/';
-    if (!params.isGlobalContent && params.isImageOrVideo) {
-      resourceUrl = resourceEndpoint + params.fileId + '?saveAs=' + params.uri;
-    }
-  } else if (!Boolean(params['mediaType'])) {
-    resourceUrl += '&scale_override=' + params.scaleFactor;
-  }
-  return resourceUrl;
-}
-function composeResourceUrl(options, params) {
-  var _options$config, _options$config2, _options$config3;
-  var schemaVersion = options && ((_options$config = options.config) === null || _options$config === void 0 ? void 0 : _options$config.schemaVersion);
-  var hardwareKey = options && ((_options$config2 = options.config) === null || _options$config2 === void 0 ? void 0 : _options$config2.hardwareKey);
-  var serverKey = options && ((_options$config3 = options.config) === null || _options$config3 === void 0 ? void 0 : _options$config3.cmsKey);
-  return '/pwa/getResource' + '?v=' + schemaVersion + '&serverKey=' + serverKey + '&hardwareKey=' + hardwareKey + '&layoutId=' + params.layoutId + '&regionId=' + params.regionId + '&mediaId=' + params.mediaId;
-}
-function composeMediaUrl(params) {
-  return '/xmds.php?file=' + params.uri;
-}
-function composeBgUrlByPlatform(platform, params) {
-  var bgImageUrl = '';
-  if (platform === 'CMS') {
-    bgImageUrl = params.layoutBackgroundDownloadUrl.replace(":id", params.layout.id) + '&preview=1&width=' + params.layout.sWidth + '&height=' + params.layout.sHeight + '&dynamic&proportional=0';
-  } else if (platform === 'chromeOS') {
-    bgImageUrl = composeMediaUrl({
-      uri: params.layout.bgImage
-    });
-  }
-  // @TODO: Add condition to handle electron platform
-  return bgImageUrl;
-}
-function getIndexByLayoutId(layoutsInput, layoutId) {
-  var layoutIndexes = layoutsInput.reduce(function (a, b, indx) {
-    a[Number(b.layoutId)] = _objectSpread2(_objectSpread2({}, b), {}, {
-      index: indx
-    });
-    return a;
-  }, {});
-  if (layoutId === null || !layoutId) {
-    return layoutIndexes;
-  }
-  if (Boolean(layoutIndexes[layoutId])) {
-    return layoutIndexes[layoutId];
-  }
-  // Defaults to 0
-  return {
-    index: 0
-  };
-}
-function isEmpty(input) {
-  return !Boolean(input) || String(input).length === 0;
-}
-function getAllAttributes(elem) {
-  if (!elem || elem === null) {
-    return {};
-  }
-  return elem.getAttributeNames().reduce(function (obj, name) {
-    return _objectSpread2(_objectSpread2({}, obj), {}, _defineProperty({}, name, {
-      value: elem.getAttribute(name)
-    }));
-  }, {});
-}
-/**
- * Create expiration day based on current date
- * @param numDays Number of days as expiry
- * @returns JSON string format of date
- */
-function setExpiry(numDays) {
-  var today = new Date();
-  return new Date(today.setHours(24 * numDays || 1)).toJSON();
-}
-/**
- * Check if given layout exists in the loop using layoutId
- * @param layouts Schedule loop unique layouts (uniqueLayouts)
- * @param layoutId Layout ID of the layout to look for
- *
- * @return boolean
- */
-function isLayoutValid(layouts, layoutId) {
-  if (layouts.length < 1 || !layoutId) {
-    return false;
-  }
-  var layoutIndex = layouts.findIndex(function (l) {
-    return l.layoutId === layoutId;
-  });
-  return layoutIndex !== -1;
-}
-function getLayoutIndexByLayoutId(layouts, layoutId) {
-  if (layouts.length < 1 || !layoutId) {
-    return null;
-  }
-  return layouts.findIndex(function (l) {
-    return l.layoutId === layoutId;
-  });
-}
-function hasDefaultOnly(inputLayouts) {
-  var _inputLayouts$0$respo;
-  if (!inputLayouts) {
-    return false;
-  }
-  return inputLayouts.length === 1 && ((_inputLayouts$0$respo = inputLayouts[0].response) === null || _inputLayouts$0$respo === void 0 ? void 0 : _inputLayouts$0$respo.nodeName) === 'default';
-}
-function hasSspLayout(inputLayouts) {
-  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (!inputLayouts || inputLayouts.length === 0) {
-    return defaultValue;
-  }
-  return inputLayouts.find(function (layout) {
-    return layout.layoutId === -1;
-  }) !== undefined;
-}
-function prepareIframe(media) {
-  var iframe = document.createElement('iframe');
-  iframe.scrolling = 'no';
-  iframe.id = media.iframeName;
-  iframe.width = "".concat(media.divWidth, "px");
-  iframe.height = "".concat(media.divHeight, "px");
-  iframe.style.cssText = "border: 0;";
-  if ((media.render === 'html' || media.render === 'webpage') && media.url !== null) {
-    iframe.src = media.url;
-  } else {
-    iframe.src = "".concat(media.url, "&width=").concat(media.divWidth, "&height=").concat(media.divHeight);
-  }
-  return iframe;
-}
-function prepareImage(media, container) {
-  if (media.options['scaletype'] === 'stretch') {
-    container.style.cssText = container.style.cssText.concat("background-size: 100% 100%;");
-  } else if (media.options['scaletype'] === 'fit') {
-    container.style.cssText = container.style.cssText.concat("background-size: cover;");
-  } else {
-    // Center scale type, do we have align or valign?
-    var align = media.options['align'] == "" ? "center" : media.options['align'];
-    var valign = media.options['valign'] == "" || media.options['valign'] == "middle" ? "center" : media.options['valign'];
-    container.style.cssText = container.style.cssText.concat("background-position: ".concat(align, " ").concat(valign));
-  }
-  return container;
-}
-function prepareVideo(media, container) {
-  var $videoMedia = composeVideoSource(container, media);
-  var isMuted = false;
-  if (Boolean(media.options['mute'])) {
-    isMuted = media.options.mute === '1';
-  }
-  if (Boolean(media.options['scaletype'])) {
-    if (media.options.scaletype === 'stretch') {
-      $videoMedia.style.objectFit = 'fill';
-    }
-  }
-  $videoMedia.classList.add('video-js', 'vjs-default-skin');
-  if (media.loop) {
-    media.loop = true;
-    $videoMedia.loop = true;
-  }
-  media.muted = isMuted;
-  return $videoMedia;
-}
-function prepareAudio(media, container) {
-  var $audioMedia = container;
-  $audioMedia.preload = 'auto';
-  $audioMedia.textContent = 'Unsupported Audio';
-  $audioMedia.autoplay = true;
-  if (media.loop) {
-    $audioMedia.loop = true;
-  }
-  return $audioMedia;
-}
-function createMediaElement(mediaObject) {
-  var self = mediaObject;
-  var mediaId = getMediaId(self);
-  var mediaSelector = ".media--item.".concat(mediaId);
-  var $media = self.region.html.querySelector(mediaSelector);
-  if ($media === null) {
-    if (self.mediaType === 'video') {
-      $media = document.createElement('video');
-    } else if (self.mediaType === 'audio') {
-      $media = new Audio();
-    } else {
-      $media = document.createElement('div');
+          if (this.region.layout.layoutId === -1) {
+            tmpUrl = this.uri;
+          }
+        }
+      } else if (this.xlr.config.platform === exports.ConsumerPlatform.ELECTRON) {
+        tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
+      }
+      this.url = tmpUrl;
+      // Loop if media has loop, or if region has loop and a single media
+      this.loop = this.options['loop'] == '1' || this.region.options['loop'] == '1' && this.region.totalMediaObjects == 1;
+      this.html = createMediaElement(this);
     }
-    $media.id = mediaId;
-  }
-  $media.dataset.mediaId = self.id;
-  $media.dataset.mediaType = self.mediaType;
-  $media.dataset.type = self.type;
-  $media.dataset.render = self.render;
-  $media.dataset.duration = String(self.duration);
-  $media.dataset.fileId = self.fileId;
-  $media.className = "media--item ".concat(mediaId);
-  /* Scale the Content Container */
-  var cssText = "\n        width: ".concat(self.divWidth, "px;\n        height: ").concat(self.divHeight, "px;\n        position: absolute;\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center;\n    ");
-  if (self.mediaType !== 'video') {
-    cssText += "\n            visibility: hidden;\n            opacity: 0;\n            z-index: 0;\n        ";
-  }
-  $media.style.cssText = cssText;
-  if (self.render === 'html' || self.mediaType === 'ticker' || self.mediaType === 'webpage') {
-    self.checkIframeStatus = true;
-    self.iframe = prepareIframe(self);
-  } else if (self.mediaType === "image") {
-    $media = prepareImage(self, $media);
-  } else if (self.mediaType === 'video') {
-    $media = prepareVideo(self, $media);
-  } else if (self.mediaType === 'audio') {
-    $media = prepareAudio(self, $media);
-  }
-  // Duration is per item condition
-  if ((self.render === 'html' || self.mediaType === 'ticker') && self.url !== null) {
-    /* Check if the ticker duration is based on the number of items in the feed */
-    if (self.options['durationisperitem'] === '1') {
-      var regex = new RegExp('<!-- NUMITEMS=(.*?) -->');
-      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var html, res;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return fetchJSON("".concat(self.url, "&width=").concat(self.divWidth, "&height=").concat(self.divHeight), self.options.previewJwt);
-            case 2:
-              html = _context.sent;
-              console.debug({
-                html: html
-              });
-              res = regex.exec(html);
-              if (res !== null) {
-                self.duration = parseInt(String(self.duration)) * parseInt(res[1]);
+  }, {
+    key: "run",
+    value: function run() {
+      var _this3 = this;
+      var transInDuration = 1;
+      var transInDirection = 'E';
+      if (Boolean(this.options['transinduration'])) {
+        transInDuration = Number(this.options.transinduration);
+      }
+      if (Boolean(this.options['transindirection'])) {
+        transInDirection = this.options.transindirection;
+      }
+      var defaultTransInOptions = {
+        duration: transInDuration
+      };
+      var transIn = transitionElement('defaultIn', {
+        duration: defaultTransInOptions.duration
+      });
+      if (Boolean(this.options['transin'])) {
+        var transInName = this.options['transin'];
+        if (transInName === 'fly') {
+          transInName = "".concat(transInName, "In");
+          defaultTransInOptions.keyframes = flyTransitionKeyframes({
+            trans: 'in',
+            direction: transInDirection,
+            height: this.divHeight,
+            width: this.divWidth
+          });
+        }
+        transIn = transitionElement(transInName, defaultTransInOptions);
+      }
+      var showCurrentMedia = function showCurrentMedia() {
+        var mediaId = getMediaId({
+          mediaType: _this3.mediaType,
+          containerName: _this3.containerName
+        });
+        var $region = document.querySelector('#' + _this3.region.containerName);
+        var $media = $region !== null && $region.querySelector('.' + mediaId);
+        if (!$media) {
+          $media = getNewMedia();
+        }
+        console.debug('??? XLR.debug >> Media run - show current media:', {
+          inDOM: document.body.contains($media),
+          mediaId: mediaId,
+          $media: $media,
+          mediaObject: _this3
+        });
+        if ($media) {
+          if (_this3.mediaType === 'video') {
+            var _this3$player, _this3$player2, _this3$player3, _this3$player4;
+            console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::START', {
+              mediaPlayer: _this3.player,
+              isDisposed: (_this3$player = _this3.player) === null || _this3$player === void 0 ? void 0 : _this3$player.isDisposed(),
+              el: (_this3$player2 = _this3.player) === null || _this3$player2 === void 0 ? void 0 : _this3$player2.el_
+            });
+            // Make sure that vjs is available on the media
+            // Else, re-initialize
+            if (_this3.player !== undefined) {
+              var existingPlayer = videojs(mediaId);
+              if (existingPlayer) {
+                _this3.player = existingPlayer;
+              } else {
+                if (_this3.player.isDisposed_) {
+                  _this3.player = undefined;
+                  _this3.player = videojs(mediaId, _objectSpread2({}, vjsDefaultOptions({
+                    errorDisplay: _this3.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
+                    loop: _this3.loop
+                  })));
+                }
               }
-            case 6:
-            case "end":
-              return _context.stop();
+            }
+            console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::END', {
+              mediaPlayer: _this3.player,
+              isDisposed: (_this3$player3 = _this3.player) === null || _this3$player3 === void 0 ? void 0 : _this3$player3.isDisposed(),
+              el: (_this3$player4 = _this3.player) === null || _this3$player4 === void 0 ? void 0 : _this3$player4.el_
+            });
+            if (_this3.player !== undefined && _this3.player.el_ !== null) {
+              _this3.player.el().style.setProperty('visibility', 'visible');
+              _this3.player.el().style.setProperty('z-index', '10');
+              _this3.player.el().style.setProperty('opacity', '1');
+            }
+          } else {
+            console.debug('??? XLR.debug >> Media::run() > showCurrentMedia', {
+              mediaType: _this3.mediaType,
+              render: _this3.render,
+              $media: $media,
+              state: _this3.state
+            });
+            $media.style.setProperty('visibility', 'visible');
+            $media.style.setProperty('z-index', '10');
+            $media.style.setProperty('opacity', '1');
           }
-        }, _callee);
-      }))();
-    }
-  }
-  // Check if the media has fade-in/out transitions
-  if (Boolean(self.options['transin']) && Boolean(self.options['transinduration'])) {
-    var transInDuration = Number(self.options.transinduration);
-    var fadeInTrans = transitionElement('fadeIn', {
-      duration: transInDuration
-    });
-    $media.animate(fadeInTrans.keyframes, fadeInTrans.timing);
-  }
-  // Add media to the region
-  // Second media if exists, will be off-canvas
-  // All added media will be hidden by default
-  // It will start showing when region.nextMedia() function is called
-  // When there's only 1 item and loop = false, don't remove the item but leave it at its last state
-  // For image, and only 1 item, it should still have the transition for next state
-  // Add conditions for video duration being 0 or 1 and also the loop property
-  // For video url, we have to create a URL out of the XLF video URL
-  /**
-   * @DONE
-   * Case 1: Video duration = 0, this will play the video for its entire duration
-   * Case 2: Video duration is set > 0 and loop = false
-   * E.g. Set duration = 100s, video duration = 62s
-   * the video will play until 62s and will stop to its last frame until 100s
-   * After 100s, it will expire
-   * Case 3: Video duration is set > 0 and loop = true
-   * E.g. Set duration = 100s, video duration = 62s, loop = true
-   * the video will play until 62s and will loop through until the remaining 38s
-   * to complete the 100s set duration
-   */
-  // Add html node to media for
-  // self.html = $media;
-  return $media;
-}
-function prepareVideoMedia(media, region) {
-  var mediaId = getMediaId(media);
-  // Check if html is ready and is in the DOM
-  if (media.html !== null) {
-    // Clean up video.js instance
-    var existingPlayer = videojs.getPlayer(mediaId);
-    if (existingPlayer !== undefined) {
-      existingPlayer.dispose();
-      media.player = undefined;
-    }
-    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 mediaInRegion = $region === null || $region === void 0 ? void 0 : $region.querySelector('.' + mediaId);
-    console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
-      layoutSelector: layoutSelector,
-      $layoutWithIndex: $layoutWithIndex,
-      $region: $region,
-      mediaInRegion: mediaInRegion,
-      mediaHtml: media.html,
-      existingPlayer: existingPlayer,
-      mediaId: mediaId,
-      layoutInDOM: document.body.contains($layout)
-    });
-    if (!mediaInRegion) {
-      media.html = createMediaElement(media);
-    } else {
-      mediaInRegion.remove();
-      media.html = createMediaElement(media);
+          if (Boolean(_this3.options['transin'])) {
+            $media.animate(transIn.keyframes, transIn.timing);
+          }
+          if (!_this3.region.layout.isOverlay || _this3.region.layout.isOverlay && _this3.region.totalMediaObjects > 1) {
+            _this3.emitter.emit('start', _this3);
+          }
+        }
+      };
+      var getNewMedia = function getNewMedia() {
+        var $region = document.getElementById("".concat(_this3.region.containerName));
+        // 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);
+          return _this3.html;
+        }
+        return null;
+      };
+      showCurrentMedia();
     }
-    // Append fresh copy of the media into the region
-    $region !== null && $region.appendChild(media.html);
-    var isMediaInDOM = document.body.contains(media.html);
-    console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
-      isMediaInDOM: isMediaInDOM,
-      mediaHtml: media.html,
-      mediaId: mediaId
-    });
-    // Initialize video.js
-    media.player = videojs(mediaId, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-      errorDisplay: region.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-      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) {
+  }, {
+    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:
-              if (media.region.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                playerReportFault('Video file not supported', media).then(function () {
-                  media.emitter.emit('end', media);
-                });
+              $media = document.getElementById(getMediaId({
+                mediaType: this.mediaType,
+                containerName: this.containerName
+              }));
+              if ($media) {
+                $media.style.display = 'none';
+                $media.remove();
               }
-            case 1:
+              // 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 "end":
-              return _context2.stop();
+              return _context.stop();
           }
-        }, _callee2);
+        }, _callee, this);
       }));
-      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');
-  }
-}
-function prepareImageMedia(media, region) {
-  var mediaId = getMediaId(media);
-  media.html.style.setProperty('background-image', "url(".concat(media.url));
-  // Check if media in region
-  // Remove old copy before inserting fresh copy
-  var mediaInRegion = region.html.querySelector('.' + mediaId);
-  if (mediaInRegion) {
-    mediaInRegion.remove();
-  }
-  // Append media to its region
-  var $region = document.querySelector('#' + region.containerName);
-  $region !== null && $region.appendChild(media.html);
-}
-function prepareAudioMedia(media, region) {
-  var mediaId = getMediaId(media);
-  if (media.url !== null) {
-    media.html.src = media.url;
-  }
-  // Check if media in region
-  // Remove old copy before inserting fresh copy of the media
-  var mediaInRegion = region.html.querySelector('.' + mediaId);
-  if (mediaInRegion) {
-    mediaInRegion.remove();
-  }
-  // Append media to its region
-  var $region = document.querySelector('#' + region.containerName);
-  $region !== null && $region.appendChild(media.html);
-}
-function prepareHtmlMedia(media, region) {
-  // Set state as false ( for now )
-  media.ready = false;
-  if (media.html) {
-    var mediaId = getMediaId(media);
-    // Clean up old copy of the media
-    // before inserting fresh copy
-    var mediaInRegion = region.html.querySelector('.' + mediaId);
-    // Append iframe
-    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);
-      media.ready = true;
-    }
-  }
-}
-function playerReportFault(_x11, _x12) {
-  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) {
-        case 0:
-          // Immediately expire media and report a fault
-          playerSW = PwaSW();
-          _context7.next = 3;
-          return playerSW.getSW();
-        case 3:
-          hasSW = _context7.sent;
-          if (hasSW) {
-            playerSW.postMsg({
-              type: 'MEDIA_FAULT',
-              code: 5002,
-              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')
-            }).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
-              });
-            });
-          }
-        case 5:
-        case "end":
-          return _context7.stop();
+      function stop() {
+        return _stop.apply(this, arguments);
       }
-    }, _callee7);
-  }));
-  return _playerReportFault.apply(this, arguments);
-}
-
-const urlAlphabet =
-  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
-/* @ts-self-types="./index.d.ts" */
-let nanoid = (size = 21) => {
-  let id = '';
-  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
-  while (size--) {
-    id += urlAlphabet[bytes[size] & 63];
-  }
-  return id
-};
+      return stop;
+    }()
+    /**
+     * Emits a command from the shell command widget.
+     *
+     * @param media
+     * @private
+     */
+  }, {
+    key: "emitCommand",
+    value: function emitCommand(media) {
+      if (media.mediaType !== 'shellcommand') {
+        return;
+      }
+      var options = media.options;
+      if (options.commandtype === 'storedCommand' && options.commandcode) {
+        console.debug('Media::Emitter > Shell Command - Calling commandCodeReceived event');
+        this.xlr.emitter.emit('commandCodeReceived', options.commandcode);
+        return;
+      }
+      var commandString = '';
+      if (options.useglobalcommand === '1') {
+        commandString = options.globalcommand || '';
+      } else {
+        // Use platform-specific command when available
+        if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
+          commandString = options.chromeoscommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.ANDROID) {
+          commandString = options.androidcommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.LINUX) {
+          commandString = options.linuxcommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.TIZEN) {
+          commandString = options.tizencommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.WEBOS) {
+          commandString = options.weboscommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.WINDOWS) {
+          commandString = options.windowscommand || '';
+        }
+        // Fall back to the global command if the platform-specific one
+        // is missing, not configured, or not supported yet
+        if (!commandString && options.globalcommand) {
+          commandString = options.globalcommand;
+        }
+      }
+      if (commandString) {
+        console.debug('Media::Emitter > Shell Command - Calling commandStringReceived event');
+        this.xlr.emitter.emit('commandStringReceived', commandString);
+        return;
+      }
+    }
+  }]);
+}();
 
 var Region = /*#__PURE__*/function () {
   // ===== Constructor =====
@@ -74616,10 +74526,6 @@ var Region = /*#__PURE__*/function () {
       });
       // Prepare first media
       if (this.mediaObjects.length > 0) {
-        // Clean up region first
-        // if (this.html?.children.length > 0) {
-        //     this.html.innerHTML = '';
-        // }
         this.prepareFirstMedia();
       }
     }
@@ -74652,6 +74558,11 @@ var Region = /*#__PURE__*/function () {
     value: function prepareNextMedia() {
       var nextMediaIndex = (this.currentMediaIndex + 1) % this.totalMediaObjects;
       var nextMedia = this.mediaObjects[nextMediaIndex];
+      console.debug('<><> XLR.debug >> [Media] - [Region::prepareNextMedia()] - Preparing next media', {
+        currentMediaIndex: this.currentMediaIndex,
+        nextMediaIndex: nextMediaIndex,
+        nextMediaId: nextMedia.mediaId
+      });
       this.prepareMedia(nextMedia);
     }
   }, {
@@ -74670,36 +74581,6 @@ var Region = /*#__PURE__*/function () {
           regionId: this.id,
           oldMedia: (_this$oldMedia = this.oldMedia) === null || _this$oldMedia === void 0 ? void 0 : _this$oldMedia.containerName
         });
-        // const $region = document.getElementById(`${this.containerName}`);
-        // Preload first item
-        // if (this.currentMediaIndex > 0 && this.nxtMedia) {
-        //     // Prepare next items
-        //     this.prepareMedia(this.nxtMedia);
-        // } else {
-        //     this.prepareMedia(this.currMedia);
-        // }
-        // Append available media to region DOM
-        // if (this.currMedia) {
-        //
-        //     this.currEl = createMediaElement(this.currMedia);
-        //     this.currMedia.html = this.currEl;
-        //
-        //     console.debug('<> XLR.debug prepareMediaObjects::currMedia', {
-        //         currentMedia: this.currMedia.containerName,
-        //         regionId: this.id,
-        //     });
-        //     ($region) && $region.insertBefore(this.currEl as Node, $region.lastElementChild);
-        // }
-        // if (this.totalMediaObjects > 1 && this.nxtMedia) {
-        //     this.nxtEl = createMediaElement(this.nxtMedia);
-        //     this.nxtMedia.html = this.nxtEl;
-        //
-        //     console.debug('<> XLR.debug prepareMediaObjects::nxtMedia', {
-        //         nextMedia: this.nxtMedia.containerName,
-        //         regionId: this.id,
-        //     });
-        //     ($region) && $region.insertBefore(this.nxtEl as Node, $region.lastElementChild);
-        // }
       }
     }
   }, {
@@ -74713,116 +74594,6 @@ var Region = /*#__PURE__*/function () {
       this.layout.regions[this.index] = this;
       this.layout.regionExpired();
     }
-  }, {
-    key: "prepareVideo",
-    value: function () {
-      var _prepareVideo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(media, container) {
-        var _this2 = this;
-        var video;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              video = media.html;
-              if (media.url !== null) {
-                video.src = media.url;
-              }
-              container !== null && container.appendChild(media.html);
-              return _context2.abrupt("return", new Promise(function (resolve) {
-                var _media$videoHandler$p;
-                var vidType = videoFileType(getFileExt(media.uri));
-                // Initialize Video.js
-                media.player = videojs(video, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-                  errorDisplay: _this2.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-                  loop: media.loop,
-                  sources: [{
-                    src: media.url,
-                    type: vidType
-                  }] // Adjust MIME type if dynamic
-                }));
-                media.player.el().style.setProperty('visibility', 'hidden');
-                media.player.el().style.setProperty('z-index', '0');
-                media.player.el().style.setProperty('opacity', '0');
-                // Register video handler
-                media.videoHandler = videoMediaHandler(media, _this2.xlr.config.platform);
-                (_media$videoHandler$p = media.videoHandler.player) === null || _media$videoHandler$p === void 0 || _media$videoHandler$p.one('canplaythrough', function () {
-                  resolve();
-                });
-              }));
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      function prepareVideo(_x3, _x4) {
-        return _prepareVideo.apply(this, arguments);
-      }
-      return prepareVideo;
-    }()
-  }, {
-    key: "prepareImage",
-    value: function () {
-      var _prepareImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(media, container) {
-        var blobUrl, img;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              _context3.next = 2;
-              return BlobLoader.load(media.url);
-            case 2:
-              blobUrl = _context3.sent;
-              img = new Image(); // Wait for decoding to finish so there is no visual glitch
-              return _context3.abrupt("return", new Promise(function (resolve, reject) {
-                img.onload = function () {
-                  return resolve();
-                };
-                img.onerror = function (e) {
-                  return reject(e);
-                };
-                img.src = blobUrl;
-                if (media.html) {
-                  media.html.style.setProperty('background-image', "url(".concat(blobUrl, ")"));
-                }
-                container !== null && container.appendChild(media.html);
-              }));
-            case 5:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }));
-      function prepareImage(_x5, _x6) {
-        return _prepareImage.apply(this, arguments);
-      }
-      return prepareImage;
-    }()
-  }, {
-    key: "prepareIframe",
-    value: function prepareIframe(media, container) {
-      console.debug('??? XLR.debug >> Region prepareIframe - start');
-      return new Promise(function (resolve, reject) {
-        var iframe = media.iframe;
-        console.debug('??? XLR.debug >> Region prepareIframe - promise', {
-          iframe: iframe,
-          mediaType: media.mediaType,
-          container: container
-        });
-        if (iframe !== null) {
-          iframe.onload = function () {
-            return resolve();
-          };
-          iframe.onerror = function (e) {
-            return reject(e);
-          };
-          // Append iframe to html
-          if (media.html) {
-            media.html.innerHTML = '';
-            media.html.appendChild(iframe);
-          }
-          container !== null && container.appendChild(media.html);
-        }
-      });
-    }
   }, {
     key: "run",
     value: function run() {
@@ -74836,7 +74607,7 @@ var Region = /*#__PURE__*/function () {
   }, {
     key: "transitionNodes",
     value: function transitionNodes(oldMedia, newMedia) {
-      var _this3 = this;
+      var _this2 = this;
       var transOutDuration = 1;
       var transOutDirection = 'E';
       if (newMedia) {
@@ -74852,7 +74623,7 @@ var Region = /*#__PURE__*/function () {
         var transOut = transitionElement('defaultOut', {
           duration: defaultTransOutOptions.duration
         });
-        var transOutName;
+        var transOutName = '';
         if (oldMedia && Boolean(oldMedia.options['transout'])) {
           transOutName = oldMedia.options['transout'];
           if (transOutName === 'fly') {
@@ -74866,11 +74637,18 @@ var Region = /*#__PURE__*/function () {
           }
           transOut = transitionElement(transOutName, defaultTransOutOptions);
         }
+        console.debug('??? XLR.debug >> Region > transitionNodes - transOut options', {
+          transOutName: transOutName,
+          transOut: transOut,
+          transOutDuration: transOutDuration,
+          transOutDirection: transOutDirection,
+          totalMediaObjects: this.totalMediaObjects
+        });
         var hideOldMedia = function hideOldMedia() {
           // Hide oldMedia
           if (oldMedia) {
-            var _this3$layout$html;
-            var $region = (_this3$layout$html = _this3.layout.html) === null || _this3$layout$html === void 0 ? void 0 : _this3$layout$html.querySelector('#' + _this3.containerName);
+            var $layout = document.querySelector("#".concat(_this2.layout.containerName, "[data-sequence=\"").concat(_this2.layout.index, "\"]"));
+            var $region = $layout.querySelector('#' + _this2.containerName);
             var $oldMedia = $region ? $region.querySelector('.' + getMediaId(oldMedia)) : null;
             if ($oldMedia) {
               var removeOldMedia = function removeOldMedia() {
@@ -74909,7 +74687,7 @@ var Region = /*#__PURE__*/function () {
               if (Boolean(oldMedia.options['transout'])) {
                 oldMediaAnimate = $oldMedia.animate(transOut.keyframes, transOut.timing);
               }
-              if (Boolean(oldMedia.options['transout']) && _this3.totalMediaObjects > 1) {
+              if (Boolean(oldMedia.options['transout']) && _this2.totalMediaObjects > 1) {
                 if (transOutName === 'flyOut') {
                   // Reset last item to original position and state
                   oldMediaAnimate ? oldMediaAnimate.finished.then(function () {
@@ -74935,9 +74713,6 @@ var Region = /*#__PURE__*/function () {
               } else {
                 console.debug('??? XLR.debug >> Region transitionNode - hideOldMedia' + 'no transout and only 1 media');
                 removeOldMedia();
-                // Resolve this right away
-                // As a result, the transition between two media object
-                // seems like a cross-over
               }
             }
           }
@@ -75203,7 +74978,7 @@ var ActionController = /*#__PURE__*/function () {
           };
         }
         // Only render webhook controller in CMS
-        if (this.parent.xlr.config.platform !== 'CMS') {
+        if (this.parent.xlr.config.platform !== exports.ConsumerPlatform.CMS) {
           this.$actionController.style.display = 'none';
           return;
         }
@@ -75225,10 +75000,16 @@ var ActionController = /*#__PURE__*/function () {
   }, {
     key: "openLayoutInNewTab",
     value: function openLayoutInNewTab(layoutCode, options) {
-      if (confirm(this.translations.navigateToLayout.replace('[layoutTag]', layoutCode))) {
-        var url = options.layoutPreviewUrl.replace('[layoutCode]', layoutCode) + '?findByCode=1';
-        window.open(url, '_blank');
-      }
+      var url = options.layoutPreviewUrl.replace('[layoutCode]', layoutCode) + '?findByCode=1';
+      // Send a postMessage to the parent frame so the CMS can handle the confirmation
+      // and navigation (confirm() is blocked in sandboxed iframes without allow-modals).
+      window.parent.postMessage({
+        type: 'xlr:navLayout',
+        layoutCode: layoutCode,
+        url: url
+      }, '*');
+      // Also emit via the XLR event system for non-iframe consumers.
+      this.parent.xlr.emitter.emit('navLayout', layoutCode, url);
     }
   }, {
     key: "openLayoutInPlayer",
@@ -75301,10 +75082,10 @@ var ActionController = /*#__PURE__*/function () {
     key: "runAction",
     value: function runAction(actionData, options) {
       if (actionData.actiontype == 'navLayout') {
-        if (this.parent.xlr.config.platform === 'CMS') {
+        if (this.parent.xlr.config.platform === exports.ConsumerPlatform.CMS) {
           // Open layout preview in a new tab
           this.openLayoutInNewTab(actionData.layoutcode, options);
-        } else if (this.parent.xlr.config.platform === 'chromeOS') {
+        } else if (this.parent.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
           // Set target layout as active layout
           this.openLayoutInPlayer(actionData.layoutcode, options);
         }
@@ -75466,6 +75247,12 @@ function _getXlf() {
             fetchOptions.headers = {
               'Content-Type': 'text/xml'
             };
+          } else if (layoutOptions.platform === exports.ConsumerPlatform.ELECTRON) {
+            xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
+            fetchOptions.mode = 'no-cors';
+            fetchOptions.headers = {
+              'Content-Type': 'text/xml'
+            };
           } else if (layoutOptions.appHost !== null) {
             xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
           }
@@ -75639,8 +75426,11 @@ var Layout = /*#__PURE__*/function () {
                 layout.state = exports.ELayoutState.PLAYED;
               }
               layout.done = true;
-              console.debug({
-                $layout: $layout
+              console.debug('>>> XLR.debug Layout end emitted > Layout ID > ', {
+                $layout: $layout,
+                layoutId: layout.id,
+                isOverlay: layout.isOverlay,
+                isInterrupt: layout.isInterrupt()
               });
               if ($layout !== null) {
                 $layout.style.setProperty('visibility', 'hidden');
@@ -75795,9 +75585,10 @@ var Layout = /*#__PURE__*/function () {
       if (!(this.bgImage === "" || typeof this.bgImage === 'undefined')) {
         /* Extract the image ID from the filename */
         this.bgId = this.bgImage.substring(0, this.bgImage.indexOf('.'));
-        var bgImageUrl = composeBgUrlByPlatform(this.xlr.config.platform, _objectSpread2(_objectSpread2({}, this.options), {}, {
-          layout: this
-        }));
+        var bgImageUrl = composeBgUrlByPlatform(this.xlr.config.platform, this);
+        console.debug('>>> XLR.debug Layout::parseXlf - Composed background image URL > ', {
+          bgImageUrl: bgImageUrl
+        });
         if ($layout) {
           if (!this.isOverlay) {
             $layout.style.setProperty('background-image', "url(\"".concat(bgImageUrl, "\")"));
@@ -76062,7 +75853,7 @@ function SplashScreen($parent, config) {
             case 0:
               $previewSplash.classList.add('preview-splash');
               // Don't show Xibo logo on CMS Preview
-              if (config && config.platform !== 'CMS') {
+              if (config && config.platform !== exports.ConsumerPlatform.CMS) {
                 splashScreenImg = img$1;
                 if ((_config$icons = config.icons) !== null && _config$icons !== void 0 && _config$icons.splashScreen && config.icons.splashScreen.length > 0) {
                   splashScreenImg = config.icons.splashScreen;
@@ -76080,7 +75871,7 @@ function SplashScreen($parent, config) {
               $previewLoader.classList.add('preview-loader');
               $previewLoaderCaption.classList.add('preview-loaderCaption');
               // Show loader bar and text on CMS Preview
-              if (config && config.platform === 'CMS') {
+              if (config && config.platform === exports.ConsumerPlatform.CMS) {
                 $previewLoader.style.setProperty('background-image', "url(".concat(img, ")"));
                 $previewLoaderCaption.innerHTML = '<p>Loading Layout...</p>';
               }
@@ -76374,12 +76165,12 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
         $splashScreen === null || $splashScreen === void 0 || $splashScreen.hide();
       }
       if (!xlr.currentLayout.done) {
-        console.log('>>>> XLR.debug XLR::playSchedules > Running currentLayout', xlr.currentLayout);
-        xlr.currentLayout.run();
         // Hide overlays when current layout is interrupt
         if (xlr.currentLayout.isInterrupt()) {
           xlrObject.overlayLayoutManager.stopOverlays();
         }
+        console.log('>>>> XLR.debug XLR::playSchedules > Running currentLayout', xlr.currentLayout);
+        xlr.currentLayout.run();
       }
     } else {
       // Show splash screen
@@ -76727,8 +76518,10 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             var tempNextLayoutIndex = getLayoutIndexByLayoutId(this.inputLayouts, this.nextLayout.layoutId);
             _currentLayoutIndex = tempNextLayoutIndex !== null && tempNextLayoutIndex !== void 0 ? tempNextLayoutIndex : 0;
             _currentLayout = this.getLayout(this.inputLayouts[tempNextLayoutIndex !== null && tempNextLayoutIndex !== void 0 ? tempNextLayoutIndex : 0]);
+            _currentLayout = setLayoutIndex(_currentLayout, _currentLayoutIndex);
           } else {
             _currentLayout = this.getLayout(this.inputLayouts[0]);
+            _currentLayout = setLayoutIndex(_currentLayout, 0);
           }
           if (this.inputLayouts.length > 1) {
             if (_currentLayoutIndex + 1 > this.inputLayouts.length - 1) {
@@ -76737,6 +76530,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
               _nextLayoutIndex = _currentLayoutIndex + 1;
             }
             _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+            _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
           } else {
             _nextLayout = _currentLayout;
           }
@@ -76749,20 +76543,25 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
                 if (_currentLayout) {
                   _currentLayoutIndex = _currentLayout.index;
                 }
+                _currentLayout = setLayoutIndex(_currentLayout, _currentLayoutIndex);
                 _nextLayoutIndex = 0;
                 _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+                _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
               }
             } else {
               _currentLayoutIndex = this.nextLayout.index > this.inputLayouts.length - 1 ? 0 : this.nextLayout.index;
               _currentLayout = this.getLayout(this.inputLayouts[_currentLayoutIndex]);
+              _currentLayout = setLayoutIndex(_currentLayout, _currentLayoutIndex);
               _nextLayoutIndex = _currentLayoutIndex + 1 > this.inputLayouts.length - 1 ? 0 : _currentLayoutIndex + 1;
               _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+              _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
             }
           } else {
             _currentLayout = this.nextLayout;
             _currentLayoutIndex = _currentLayout.index;
             _nextLayoutIndex = (_currentLayoutIndex + 1) % this.inputLayouts.length;
             _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+            _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
           }
         }
       }
@@ -76770,17 +76569,22 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
       // Initial run: set both currentLayout and nextLayout
       if (hasLayout) {
         _currentLayout = this.getLayout(this.inputLayouts[_currentLayoutIndex]);
+        _currentLayout = setLayoutIndex(_currentLayout, _currentLayoutIndex);
         if (this.inputLayouts.length > 1) {
           _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+          _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
         } else {
           _nextLayout = this.getLayout(this.inputLayouts[0]);
+          _nextLayout = setLayoutIndex(_nextLayout, 0);
         }
       }
     }
     if (_currentLayout === undefined && _nextLayout === undefined) {
       if (_hasDefaultOnly) {
         _currentLayout = this.getLayout(this.inputLayouts[0]);
+        _currentLayout = setLayoutIndex(_currentLayout, 0);
         _nextLayout = this.getLayout(this.inputLayouts[0]);
+        _nextLayout = setLayoutIndex(_nextLayout, 0);
       }
     }
     if (_currentLayout !== undefined && _nextLayout !== undefined) {
@@ -76797,7 +76601,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
     };
   };
   xlrObject.getLayout = function (inputLayout) {
-    var isCMS = this.config.platform === 'CMS';
+    var isCMS = this.config.platform === exports.ConsumerPlatform.CMS;
     if (!isCMS && Object.keys(this.uniqueLayouts).length === 0) {
       return;
     }
@@ -76814,6 +76618,11 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
           activeLayout = _objectSpread2({}, this.uniqueLayouts[inputLayout.layoutId]);
         }
         _layout = _objectSpread2(_objectSpread2({}, _layout), activeLayout);
+        console.debug('XLR::getLayout > activeLayout from uniqueLayouts', {
+          activeLayout: activeLayout,
+          inputLayout: inputLayout,
+          uniqueLayouts: this.uniqueLayouts
+        });
         // Must set index/sequence from schedule loop
         _layout.index = activeLayout.index;
       }
@@ -76942,9 +76751,9 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             self = this; // Compose layout props first
             // Clone options to avoid mutating the shared xlfUrl template
             newOptions = _objectSpread2({}, props.options);
-            if (self.config.platform === 'CMS' && inputLayout && Boolean(inputLayout.layoutId)) {
+            if (self.config.platform === exports.ConsumerPlatform.CMS && inputLayout && Boolean(inputLayout.layoutId)) {
               newOptions.xlfUrl = newOptions.xlfUrl.replace(':layoutId', String(inputLayout.layoutId));
-            } else if (self.config.platform === 'chromeOS' && inputLayout !== undefined) {
+            } else if ((self.config.platform === exports.ConsumerPlatform.CHROMEOS || self.config.platform === exports.ConsumerPlatform.ELECTRON) && inputLayout !== undefined) {
               newOptions.xlfUrl = inputLayout.path;
             }
             if (!(inputLayout && inputLayout.layoutNode === undefined)) {
@@ -77026,7 +76835,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             _nextLayout = nextLayout;
           case 2:
             if (!(_nextLayout && _nextLayout.xlfString === '')) {
-              _context16.next = 16;
+              _context16.next = 17;
               break;
             }
             // Remove skipped layout
@@ -77038,25 +76847,26 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
               _context16.next = 7;
               break;
             }
-            return _context16.abrupt("break", 16);
+            return _context16.abrupt("break", 17);
           case 7:
             inputLayout = self.inputLayouts[nextIndex];
             if (inputLayout) {
               _context16.next = 10;
               break;
             }
-            return _context16.abrupt("break", 16);
+            return _context16.abrupt("break", 17);
           case 10:
             nextLayoutObj = self.getLayout(inputLayout);
-            _context16.next = 13;
+            nextLayoutObj = setLayoutIndex(nextLayoutObj, nextIndex);
+            _context16.next = 14;
             return self.prepareLayoutXlf(nextLayoutObj);
-          case 13:
+          case 14:
             _nextLayout = _context16.sent;
             _context16.next = 2;
             break;
-          case 16:
-            return _context16.abrupt("return", _nextLayout);
           case 17:
+            return _context16.abrupt("return", _nextLayout);
+          case 18:
           case "end":
             return _context16.stop();
         }
@@ -77172,13 +76982,16 @@ exports.fetchText = fetchText;
 exports.flyInElem = flyInElem;
 exports.flyOutElem = flyOutElem;
 exports.flyTransitionKeyframes = flyTransitionKeyframes;
+exports.getAllAttributes = getAllAttributes;
 exports.getDataBlob = getDataBlob;
 exports.getFileExt = getFileExt;
 exports.getIndexByLayoutId = getIndexByLayoutId;
 exports.getLayout = getLayout;
+exports.getLayoutIndexByLayoutId = getLayoutIndexByLayoutId;
 exports.getMediaId = getMediaId;
 exports.getXlf = getXlf;
 exports.hasDefaultOnly = hasDefaultOnly;
+exports.hasSspLayout = hasSspLayout;
 exports.initRenderingDOM = initRenderingDOM;
 exports.initialLayout = initialLayout;
 exports.initialMedia = initialMedia;
@@ -77187,10 +77000,14 @@ exports.initialXlr = initialXlr;
 exports.isEmpty = isEmpty;
 exports.isLayoutValid = isLayoutValid;
 exports.nextId = nextId;
+exports.playerReportFault = playerReportFault;
 exports.preloadMediaBlob = preloadMediaBlob;
+exports.prepareAudioMedia = prepareAudioMedia;
+exports.prepareHtmlMedia = prepareHtmlMedia;
+exports.prepareImageMedia = prepareImageMedia;
+exports.prepareVideoMedia = prepareVideoMedia;
 exports.setExpiry = setExpiry;
 exports.transitionElement = transitionElement;
 exports.videoFileType = videoFileType;
-exports.videoMediaHandler = videoMediaHandler;
 exports.vjsDefaultOptions = vjsDefaultOptions;
 //# sourceMappingURL=xibo-layout-renderer.cjs.js.map