@xibosignage/xibo-layout-renderer 1.0.23 → 1.0.25

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

@@ -831,31 +831,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);
                 };
               }()));
@@ -984,7 +990,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;
@@ -995,7 +1001,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) {
@@ -1013,21 +1020,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);
         };
       }());
@@ -72513,6 +72524,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 = [ConsumerPlatform.CHROMEOS, 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
  *
@@ -72747,65 +73021,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);
@@ -72947,418 +73162,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 = 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 === 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 === 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 === 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 === ConsumerPlatform.CMS && Boolean(params.regionOptions.previewJwt)) {
+    resourceUrl += '&jwt=' + params.regionOptions.previewJwt;
+  }
+  if (options.platform === ConsumerPlatform.CHROMEOS) {
+    var resourceEndpoint = '/required-files/resource/';
+    if (!params.isGlobalContent && params.isImageOrVideo) {
+      resourceUrl = resourceEndpoint + params.fileId + '?saveAs=' + params.uri;
+    }
+  } else if (options.platform === 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 === ConsumerPlatform.CMS) {
+    bgImageUrl = params.options.layoutBackgroundDownloadUrl.replace(":id", params.id) + '&preview=1&width=' + params.sWidth + '&height=' + params.sHeight + '&dynamic&proportional=0';
+  } else if (platform === ConsumerPlatform.CHROMEOS) {
+    bgImageUrl = composeMediaUrl({
+      uri: params.bgImage
+    });
+  } else if (platform === 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 !== 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 === 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);
@@ -73509,12 +74060,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;
@@ -73587,7 +74144,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;
@@ -73600,861 +74158,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 !== 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 === ConsumerPlatform.CHROMEOS) {
-          commandString = options.chromeoscommand || '';
-        } else if (this.xlr.config.platform === ConsumerPlatform.ANDROID) {
-          commandString = options.androidcommand || '';
-        } else if (this.xlr.config.platform === ConsumerPlatform.LINUX) {
-          commandString = options.linuxcommand || '';
-        } else if (this.xlr.config.platform === ConsumerPlatform.TIZEN) {
-          commandString = options.tizencommand || '';
-        } else if (this.xlr.config.platform === ConsumerPlatform.WEBOS) {
-          commandString = options.weboscommand || '';
-        } else if (this.xlr.config.platform === 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 === 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 !== 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 !== 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 === 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 === ConsumerPlatform.CHROMEOS) {
+          commandString = options.chromeoscommand || '';
+        } else if (this.xlr.config.platform === ConsumerPlatform.ANDROID) {
+          commandString = options.androidcommand || '';
+        } else if (this.xlr.config.platform === ConsumerPlatform.LINUX) {
+          commandString = options.linuxcommand || '';
+        } else if (this.xlr.config.platform === ConsumerPlatform.TIZEN) {
+          commandString = options.tizencommand || '';
+        } else if (this.xlr.config.platform === ConsumerPlatform.WEBOS) {
+          commandString = options.weboscommand || '';
+        } else if (this.xlr.config.platform === 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 =====
@@ -74612,10 +74522,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();
       }
     }
@@ -74648,6 +74554,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);
     }
   }, {
@@ -74666,36 +74577,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);
-        // }
       }
     }
   }, {
@@ -74709,116 +74590,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 !== 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() {
@@ -74832,7 +74603,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) {
@@ -74848,7 +74619,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') {
@@ -74862,11 +74633,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() {
@@ -74905,7 +74683,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 () {
@@ -74931,9 +74709,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
               }
             }
           }
@@ -75199,7 +74974,7 @@ var ActionController = /*#__PURE__*/function () {
           };
         }
         // Only render webhook controller in CMS
-        if (this.parent.xlr.config.platform !== 'CMS') {
+        if (this.parent.xlr.config.platform !== ConsumerPlatform.CMS) {
           this.$actionController.style.display = 'none';
           return;
         }
@@ -75221,10 +74996,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",
@@ -75297,10 +75078,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 === 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 === ConsumerPlatform.CHROMEOS) {
           // Set target layout as active layout
           this.openLayoutInPlayer(actionData.layoutcode, options);
         }
@@ -75462,6 +75243,12 @@ function _getXlf() {
             fetchOptions.headers = {
               'Content-Type': 'text/xml'
             };
+          } else if (layoutOptions.platform === 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;
           }
@@ -75635,8 +75422,11 @@ var Layout = /*#__PURE__*/function () {
                 layout.state = 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');
@@ -75791,9 +75581,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, "\")"));
@@ -76058,7 +75849,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 !== 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;
@@ -76076,7 +75867,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 === ConsumerPlatform.CMS) {
                 $previewLoader.style.setProperty('background-image', "url(".concat(img, ")"));
                 $previewLoaderCaption.innerHTML = '<p>Loading Layout...</p>';
               }
@@ -76370,12 +76161,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
@@ -76723,8 +76514,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) {
@@ -76733,6 +76526,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
               _nextLayoutIndex = _currentLayoutIndex + 1;
             }
             _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+            _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
           } else {
             _nextLayout = _currentLayout;
           }
@@ -76745,20 +76539,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);
           }
         }
       }
@@ -76766,17 +76565,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) {
@@ -76793,7 +76597,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
     };
   };
   xlrObject.getLayout = function (inputLayout) {
-    var isCMS = this.config.platform === 'CMS';
+    var isCMS = this.config.platform === ConsumerPlatform.CMS;
     if (!isCMS && Object.keys(this.uniqueLayouts).length === 0) {
       return;
     }
@@ -76810,6 +76614,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;
       }
@@ -76938,9 +76747,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 === 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 === ConsumerPlatform.CHROMEOS || self.config.platform === ConsumerPlatform.ELECTRON) && inputLayout !== undefined) {
               newOptions.xlfUrl = inputLayout.path;
             }
             if (!(inputLayout && inputLayout.layoutNode === undefined)) {
@@ -77022,7 +76831,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             _nextLayout = nextLayout;
           case 2:
             if (!(_nextLayout && _nextLayout.xlfString === '')) {
-              _context16.next = 16;
+              _context16.next = 17;
               break;
             }
             // Remove skipped layout
@@ -77034,25 +76843,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();
         }
@@ -77143,5 +76953,5 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
   return xlrObject;
 }
 
-export { Action, ActionsWrapper, AudioMedia, ConsumerPlatform, ELayoutState, ELayoutType, LayoutPlaybackType, Media, MediaState, Region, VideoMedia, audioFileType, capitalizeStr, composeBgUrlByPlatform, composeMediaUrl, composeResourceUrl, composeResourceUrlByPlatform, composeVideoSource, createMediaElement, XiboLayoutRenderer as default, defaultTrans, defaultVjsOpts, fadeInElem, fadeOutElem, fetchJSON, fetchText, flyInElem, flyOutElem, flyTransitionKeyframes, getDataBlob, getFileExt, getIndexByLayoutId, getLayout, getMediaId, getXlf, hasDefaultOnly, initRenderingDOM, initialLayout, initialMedia, initialRegion, initialXlr, isEmpty, isLayoutValid, nextId, preloadMediaBlob, setExpiry, transitionElement, videoFileType, videoMediaHandler, vjsDefaultOptions };
+export { Action, ActionsWrapper, AudioMedia, ConsumerPlatform, ELayoutState, ELayoutType, LayoutPlaybackType, Media, MediaState, Region, VideoMedia, audioFileType, capitalizeStr, composeBgUrlByPlatform, composeMediaUrl, composeResourceUrl, composeResourceUrlByPlatform, composeVideoSource, createMediaElement, XiboLayoutRenderer as default, defaultTrans, defaultVjsOpts, fadeInElem, fadeOutElem, fetchJSON, fetchText, flyInElem, flyOutElem, flyTransitionKeyframes, getAllAttributes, getDataBlob, getFileExt, getIndexByLayoutId, getLayout, getLayoutIndexByLayoutId, getMediaId, getXlf, hasDefaultOnly, hasSspLayout, initRenderingDOM, initialLayout, initialMedia, initialRegion, initialXlr, isEmpty, isLayoutValid, nextId, playerReportFault, preloadMediaBlob, prepareAudioMedia, prepareHtmlMedia, prepareImageMedia, prepareVideoMedia, setExpiry, transitionElement, videoFileType, vjsDefaultOptions };
 //# sourceMappingURL=xibo-layout-renderer.esm.js.map