@xibosignage/xibo-layout-renderer 1.0.23 → 1.0.25

package/dist/xibo-layout-renderer.js

@@ -834,31 +834,37 @@ var XiboLayoutRenderer = (function (exports) {
               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);
                   };
                 }()));
@@ -987,7 +993,7 @@ var XiboLayoutRenderer = (function (exports) {
             }
           }, _callee3, this, [[12, 21, 24, 27]]);
         }));
-        function prepareOverlayLayouts(_x3, _x4) {
+        function prepareOverlayLayouts(_x4, _x5) {
           return _prepareOverlayLayouts.apply(this, arguments);
         }
         return prepareOverlayLayouts;
@@ -998,7 +1004,8 @@ var XiboLayoutRenderer = (function (exports) {
         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) {
@@ -1016,21 +1023,25 @@ var XiboLayoutRenderer = (function (exports) {
               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);
           };
         }());
@@ -72516,6 +72527,269 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
   }
 
+  function composeVideoSource($media, media) {
+    // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
+    var vidType = videoFileType(getFileExt(media.uri));
+    // Only add one source per type
+    if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
+      var $videoSource = document.createElement('source');
+      $videoSource.src = media.url;
+      $videoSource.type = vidType;
+      $media.insertBefore($videoSource, $media.lastElementChild);
+    }
+    return $media;
+  }
+  var defaultVjsOpts = {
+    autoplay: false,
+    muted: true,
+    // Start muted to allow autoplay policies
+    preload: 'auto',
+    controls: false
+  };
+  var vjsDefaultOptions = function vjsDefaultOptions(opts) {
+    return _objectSpread2({
+      controls: false,
+      preload: 'auto',
+      autoplay: false,
+      muted: true
+    }, opts);
+  };
+  var reportToPlayerPlatform = [exports.ConsumerPlatform.CHROMEOS, exports.ConsumerPlatform.ELECTRON];
+  function VideoMedia(media, xlr) {
+    var mediaId = getMediaId(media);
+    var videoPlayer = {
+      duration: 0,
+      init: function init() {
+        var _this = this;
+        var triggerTimeUpdate = false; // Used for media.duration === 0
+        videoPlayer.duration = media.duration;
+        var vjsPlayer = videojs(mediaId);
+        if (vjsPlayer) {
+          vjsPlayer.on('loadstart', function () {
+            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
+          });
+          vjsPlayer.on('loadedmetadata', function () {
+            if (media.duration === 0) {
+              videoPlayer.duration = vjsPlayer.duration();
+            }
+            console.debug('??? XLR.debug >> VideoMedia: loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
+          });
+          vjsPlayer.on('canplay', function () {
+            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+          });
+          vjsPlayer.on('playing', function () {
+            // Update duration
+            if (videoPlayer.duration === 0) {
+              videoPlayer.duration = vjsPlayer.duration();
+            }
+            console.debug('??? XLR.debug >> VideoMedia: playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
+            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
+          });
+          // @NOTE: When video is paused due to fail in unmuting the video
+          // and video has media.duration = 0, the video will stay paused and the video cycle won't end
+          // @TODO: Add timer when video is paused due to unmuting fail and duration that is equal to 0
+          // @NOTE: The pause issue when unmuting the video is mainly on a browser level.
+          // Please visit https://developer.chrome.com/blog/autoplay/ for more info.
+          vjsPlayer.ready(function () {
+            // Add guard making sure that video element is present
+            var videoElem = document.querySelector(".media--item.".concat(mediaId));
+            if (!document.body.contains(videoElem)) {
+              media.emitter.emit('cancelled', media);
+              return;
+            }
+            if (vjsPlayer !== undefined) {
+              vjsPlayer.muted(true);
+              // Race promise between a 0.5s play and a 5s skip
+              Promise.race([new Promise(function (resolve, reject) {
+                return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                  return _regeneratorRuntime().wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Trying to force play after 0.1 seconds"));
+                        // Try to force play here
+                        _context.prev = 1;
+                        if (!(vjsPlayer.currentTime() === 0)) {
+                          _context.next = 6;
+                          break;
+                        }
+                        // Set video mute/unmute based on setting once playing
+                        vjsPlayer.muted(media.muted);
+                        _context.next = 6;
+                        return vjsPlayer.play();
+                      case 6:
+                        // Resolve if play works
+                        resolve(true);
+                        _context.next = 12;
+                        break;
+                      case 9:
+                        _context.prev = 9;
+                        _context.t0 = _context["catch"](1);
+                        // Reject race if play fails
+                        reject('Play failed');
+                      case 12:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee, null, [[1, 9]]);
+                })), 100);
+              }), new Promise(function (_, reject) {
+                return setTimeout(function () {
+                  return reject('Timeout');
+                }, 5000);
+              })]).then(function () {
+                console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay started"));
+              })["catch"]( /*#__PURE__*/function () {
+                var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(error) {
+                  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                    while (1) switch (_context2.prev = _context2.next) {
+                      case 0:
+                        if (error === 'Timeout') {
+                          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                          _this.stop();
+                        } else {
+                          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                          if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                            playerReportFault('Media autoplay error', media).then(function () {
+                              _this.stop();
+                            });
+                          }
+                        }
+                      case 1:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2);
+                }));
+                return function (_x) {
+                  return _ref2.apply(this, arguments);
+                };
+              }());
+              // Optional: Reset the flag automatically when a new video loads or the source changes
+              vjsPlayer.on('loadstart', function () {
+                triggerTimeUpdate = false;
+              });
+              if (media.duration === 0) {
+                vjsPlayer.on('timeupdate', function () {
+                  var preloadBufferTimeMs = 2000;
+                  var mediaDuration = vjsPlayer.duration();
+                  var currentTime = vjsPlayer.currentTime();
+                  var regionHasMultipleMedia = media.region.totalMediaObjects > 1;
+                  var remainingTimeMs = 0;
+                  if (mediaDuration !== undefined && currentTime !== undefined) {
+                    remainingTimeMs = (mediaDuration - currentTime) * 1000;
+                  }
+                  if (regionHasMultipleMedia && remainingTimeMs === 0 && !triggerTimeUpdate) {
+                    // We don't have data yet and we must immediately prepare next media
+                    media.region.prepareNextMedia();
+                  } else if (regionHasMultipleMedia && remainingTimeMs <= preloadBufferTimeMs && !triggerTimeUpdate) {
+                    // Check if remaining time is less than preloadBufferTimeMs and the action hasn't been triggered yet
+                    console.log('Less than preloadBufferTimeMs remaining! Do something now.');
+                    // Prepare next media in region
+                    media.region.prepareNextMedia();
+                    triggerTimeUpdate = true; // Set the flag to prevent re-triggering
+                  }
+                  // Reset the flag if the user seeks back to a point where more than preloadBufferTimeMs remain
+                  if (remainingTimeMs > preloadBufferTimeMs) {
+                    triggerTimeUpdate = false;
+                  }
+                });
+              }
+            }
+          });
+          vjsPlayer.on('error', /*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(err) {
+              return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+                while (1) switch (_context3.prev = _context3.next) {
+                  case 0:
+                    console.debug("??? XLR.debug >> VideoMedia: Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
+                    if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                      playerReportFault('Video file source not supported', media).then(function () {
+                        _this.stop();
+                      });
+                    } else {
+                      // End media after 5 seconds
+                      setTimeout(function () {
+                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
+                        _this.stop();
+                      }, 5000);
+                    }
+                  case 2:
+                  case "end":
+                    return _context3.stop();
+                }
+              }, _callee3);
+            }));
+            return function (_x2) {
+              return _ref3.apply(this, arguments);
+            };
+          }());
+          if (media.duration === 0) {
+            vjsPlayer.on('ended', function () {
+              console.debug("??? XLR.debug >> VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+              _this.stop();
+            });
+          }
+        }
+      },
+      stop: function stop() {
+        var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        var vjsPlayer = media.player;
+        console.debug('??? XLR.debug >> VideoMedia::stop', {
+          vjsPlayer: vjsPlayer,
+          isDisposed: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.isDisposed_,
+          el: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.el_
+        });
+        // Expire the media and dispose the video
+        if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
+          if (!disposeOnly) {
+            media.emitter.emit('end', media);
+          }
+          vjsPlayer.dispose();
+          // Clear up media player
+          media.player = undefined;
+        } else {
+          media.player = undefined;
+          media.html = null;
+          media.emitter.emit('end', media);
+        }
+      },
+      play: function play() {
+        var _this2 = this;
+        var vjsPlayer = videojs(mediaId);
+        if (vjsPlayer !== undefined) {
+          var _vjsPlayer$play;
+          (_vjsPlayer$play = vjsPlayer.play()) === null || _vjsPlayer$play === void 0 || _vjsPlayer$play["catch"]( /*#__PURE__*/function () {
+            var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(error) {
+              return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
+                  case 0:
+                    if (error === 'Timeout') {
+                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                      _this2.stop();
+                    } else {
+                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                      if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                        playerReportFault('Media autoplay error', media).then(function () {
+                          _this2.stop();
+                        });
+                      }
+                    }
+                  case 1:
+                  case "end":
+                    return _context4.stop();
+                }
+              }, _callee4);
+            }));
+            return function (_x3) {
+              return _ref4.apply(this, arguments);
+            };
+          }());
+        }
+      }
+    };
+    return videoPlayer;
+  }
+
   /*
    * Copyright (C) 2024 Xibo Signage Ltd
    *
@@ -72750,65 +73024,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     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);
@@ -72950,418 +73165,754 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     PreviewTranslations["target"] = "Target";
   })(PreviewTranslations || (PreviewTranslations = {}));
 
-  function composeVideoSource($media, media) {
-    // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
-    var vidType = videoFileType(getFileExt(media.uri));
-    // Only add one source per type
-    if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
-      var $videoSource = document.createElement('source');
-      $videoSource.src = media.url;
-      $videoSource.type = vidType;
-      $media.insertBefore($videoSource, $media.lastElementChild);
+  function nextId(options) {
+    if (options.idCounter > 500) {
+      options.idCounter = 0;
     }
-    return $media;
+    options.idCounter = options.idCounter + 1;
+    return options.idCounter;
   }
-  var defaultVjsOpts = {
-    autoplay: false,
-    muted: true,
-    // Start muted to allow autoplay policies
-    preload: 'auto',
-    controls: false
+  var getMediaId = function getMediaId(_ref) {
+    var mediaType = _ref.mediaType,
+      containerName = _ref.containerName;
+    var mediaId = containerName;
+    if (mediaType === 'video') {
+      mediaId = mediaId + '-vid';
+    } else if (mediaType === 'audio') {
+      mediaId = mediaId + '-aud';
+    }
+    return mediaId;
   };
-  var vjsDefaultOptions = function vjsDefaultOptions(opts) {
-    return _objectSpread2({
-      controls: false,
-      preload: 'auto',
-      autoplay: false,
-      muted: true
-    }, opts);
+  var capitalizeStr = function capitalizeStr(inputStr) {
+    if (inputStr === null) {
+      return '';
+    }
+    return String(inputStr).charAt(0).toUpperCase() + String(inputStr).substring(1);
   };
-  function videoMediaHandler(media, platform) {
-    var videoPlayer = {
-      player: undefined,
-      duration: 0,
-      stop: function stop(disposeOnly) {}
-    };
-    var playerReportFault = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(msg) {
-        var playerSW, hasSW;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              // Immediately expire media and report a fault
-              playerSW = PwaSW();
-              _context.next = 3;
-              return playerSW.getSW();
-            case 3:
-              hasSW = _context.sent;
-              media.region.layout.state = exports.ELayoutState.ERROR;
-              media.region.layout.errorCode = 405;
-              if (hasSW) {
-                playerSW.postMsg({
-                  type: 'MEDIA_FAULT',
-                  code: 5002,
-                  reason: msg,
-                  mediaId: media.id,
-                  regionId: media.region.id,
-                  layoutId: media.region.layout.id,
-                  date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-                  // Temporary setting
-                  expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
-                })["finally"](function () {
-                  videoPlayer.stop();
-                });
-              } else {
-                videoPlayer.stop();
+  function getDataBlob(_x, _x2) {
+    return _getDataBlob.apply(this, arguments);
+  }
+  function _getDataBlob() {
+    _getDataBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(src, jwtToken) {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            return _context3.abrupt("return", fetch(src, {
+              method: 'GET',
+              headers: {
+                'X-PREVIEW-JWT': jwtToken || ''
               }
-            case 7:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function playerReportFault(_x) {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    videoPlayer.duration = media.duration;
-    if (media.player) {
-      videoPlayer.player = media.player;
-    } else {
-      // Load on demand if it has not been cached
-      var vjsElem = media.html;
-      var vidType = videoFileType(getFileExt(media.uri));
-      if (vjsElem === null) {
-        // Use media containerName instead for VJS id
-        vjsElem = media.containerName;
-      }
-      videoPlayer.player = videojs(vjsElem, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-        sources: [{
-          src: media.url,
-          type: vidType
-        }]
-      }));
-      media.player = videoPlayer.player;
-    }
-    videoPlayer.stop = function () {
-      var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      // Expire the media and dispose the video
-      if (videoPlayer.player !== undefined) {
-        if (!disposeOnly) {
-          media.emitter.emit('end', media);
+            }).then(function (res) {
+              return res.blob();
+            }).then(function (blob) {
+              return new Promise(function (res, rej) {
+                var reader = new FileReader();
+                reader.onloadend = function () {
+                  return res(reader.result);
+                };
+                reader.onerror = rej;
+                reader.readAsDataURL(blob);
+              });
+            }));
+          case 1:
+          case "end":
+            return _context3.stop();
         }
-        // Dispose player
-        videoPlayer.player.dispose();
-        // Clear up media player
-        videoPlayer.player = undefined;
-        media.player = undefined;
-      }
-    };
-    videoPlayer.player.on('loadstart', function () {
-      console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-    });
-    videoPlayer.player.one('loadedmetadata', function () {
-      if (media.duration === 0 && videoPlayer.player !== undefined) {
-        videoPlayer.duration = videoPlayer.player.duration();
-      }
-      console.debug('??? XLR.debug >> VideoMedia - loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
-    });
-    videoPlayer.player.one('playing', function () {
-      console.debug('??? XLR.debug >> VideoMedia - playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
-      console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-      videoPlayer.player && videoPlayer.player.muted(media.muted);
-    });
-    videoPlayer.player.on('error', /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              console.debug("??? XLR.debug >> VideoMedia - Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-              if (!(platform === 'chromeOS')) {
-                _context2.next = 6;
-                break;
+      }, _callee3);
+    }));
+    return _getDataBlob.apply(this, arguments);
+  }
+  function preloadMediaBlob(_x3, _x4, _x5) {
+    return _preloadMediaBlob.apply(this, arguments);
+  }
+  function _preloadMediaBlob() {
+    _preloadMediaBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(src, type, jwtToken) {
+      var res, blob, data;
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.next = 2;
+            return fetch(src, {
+              method: 'GET',
+              headers: {
+                'X-PREVIEW-JWT': jwtToken || ''
               }
-              _context2.next = 4;
-              return playerReportFault('Video file source not supported');
-            case 4:
-              _context2.next = 7;
+            });
+          case 2:
+            res = _context4.sent;
+            blob = new Blob();
+            if (!(type === 'image')) {
+              _context4.next = 8;
               break;
-            case 6:
-              // End media after 5 seconds
-              setTimeout(function () {
-                console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
-                videoPlayer.stop();
-              }, 5000);
-            case 7:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function (_x2) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
-    // Register on.("end") when media.duration is 0
-    if (media.duration === 0) {
-      videoPlayer.player.on('ended', function () {
-        console.debug("??? XLR.debug >> VideoMedia - onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-        videoPlayer.stop();
-      });
-    }
-    return videoPlayer;
-  }
-  function VideoMedia(media, xlr) {
-    var mediaId = getMediaId(media);
-    var videoPlayer = {
-      duration: 0,
-      init: function init() {
-        var _this = this;
-        var triggerTimeUpdate = false; // Used for media.duration === 0
-        videoPlayer.duration = media.duration;
-        var vjsPlayer = videojs(mediaId);
-        if (vjsPlayer) {
-          vjsPlayer.on('loadstart', function () {
-            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-          });
-          vjsPlayer.on('loadedmetadata', function () {
-            if (media.duration === 0) {
-              videoPlayer.duration = vjsPlayer.duration();
-            }
-            console.debug('??? XLR.debug >> VideoMedia: loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
-          });
-          vjsPlayer.on('canplay', function () {
-            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-          });
-          vjsPlayer.on('playing', function () {
-            // Update duration
-            if (videoPlayer.duration === 0) {
-              videoPlayer.duration = vjsPlayer.duration();
             }
-            console.debug('??? XLR.debug >> VideoMedia: playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
-            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-          });
-          // @NOTE: When video is paused due to fail in unmuting the video
-          // and video has media.duration = 0, the video will stay paused and the video cycle won't end
-          // @TODO: Add timer when video is paused due to unmuting fail and duration that is equal to 0
-          // @NOTE: The pause issue when unmuting the video is mainly on a browser level.
-          // Please visit https://developer.chrome.com/blog/autoplay/ for more info.
-          vjsPlayer.ready(function () {
-            // Add guard making sure that video element is present
-            var videoElem = document.querySelector(".media--item.".concat(mediaId));
-            if (!document.body.contains(videoElem)) {
-              media.emitter.emit('cancelled', media);
-              return;
+            blob = new Blob();
+            _context4.next = 19;
+            break;
+          case 8:
+            if (!(type === 'video')) {
+              _context4.next = 14;
+              break;
             }
-            if (vjsPlayer !== undefined) {
-              vjsPlayer.muted(true);
-              // Race promise between a 0.5s play and a 5s skip
-              Promise.race([new Promise(function (resolve, reject) {
-                return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-                  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-                    while (1) switch (_context3.prev = _context3.next) {
-                      case 0:
-                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Trying to force play after 0.1 seconds"));
-                        // Try to force play here
-                        _context3.prev = 1;
-                        if (!(vjsPlayer.currentTime() === 0)) {
-                          _context3.next = 6;
-                          break;
-                        }
-                        // Set video mute/unmute based on setting once playing
-                        vjsPlayer.muted(media.muted);
-                        _context3.next = 6;
-                        return vjsPlayer.play();
-                      case 6:
-                        // Resolve if play works
-                        resolve(true);
-                        _context3.next = 12;
-                        break;
-                      case 9:
-                        _context3.prev = 9;
-                        _context3.t0 = _context3["catch"](1);
-                        // Reject race if play fails
-                        reject('Play failed');
-                      case 12:
-                      case "end":
-                        return _context3.stop();
-                    }
-                  }, _callee3, null, [[1, 9]]);
-                })), 100);
-              }), new Promise(function (_, reject) {
-                return setTimeout(function () {
-                  return reject('Timeout');
-                }, 5000);
-              })]).then(function () {
-                console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay started"));
-              })["catch"]( /*#__PURE__*/function () {
-                var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(error) {
-                  return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-                    while (1) switch (_context4.prev = _context4.next) {
-                      case 0:
-                        if (error === 'Timeout') {
-                          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
-                          _this.stop();
-                        } else {
-                          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
-                          if (xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                            playerReportFault('Media autoplay error', media).then(function () {
-                              _this.stop();
-                            });
-                          }
-                        }
-                      case 1:
-                      case "end":
-                        return _context4.stop();
-                    }
-                  }, _callee4);
-                }));
-                return function (_x3) {
-                  return _ref4.apply(this, arguments);
-                };
-              }());
-              // Optional: Reset the flag automatically when a new video loads or the source changes
-              vjsPlayer.on('loadstart', function () {
-                triggerTimeUpdate = false;
-              });
-              if (media.duration === 0) {
-                vjsPlayer.on('timeupdate', function () {
-                  var preloadBufferTimeMs = 2000;
-                  var mediaDuration = vjsPlayer.duration();
-                  var currentTime = vjsPlayer.currentTime();
-                  var regionHasMultipleMedia = media.region.totalMediaObjects > 1;
-                  var remainingTimeMs = 0;
-                  if (mediaDuration !== undefined && currentTime !== undefined) {
-                    remainingTimeMs = (mediaDuration - currentTime) * 1000;
-                  }
-                  if (regionHasMultipleMedia && remainingTimeMs === 0 && !triggerTimeUpdate) {
-                    // We don't have data yet and we must immediately prepare next media
-                    media.region.prepareNextMedia();
-                  } else if (regionHasMultipleMedia && remainingTimeMs <= preloadBufferTimeMs && !triggerTimeUpdate) {
-                    // Check if remaining time is less than preloadBufferTimeMs and the action hasn't been triggered yet
-                    console.log('Less than preloadBufferTimeMs remaining! Do something now.');
-                    // Prepare next media in region
-                    media.region.prepareNextMedia();
-                    triggerTimeUpdate = true; // Set the flag to prevent re-triggering
-                  }
-                  // Reset the flag if the user seeks back to a point where more than preloadBufferTimeMs remain
-                  if (remainingTimeMs > preloadBufferTimeMs) {
-                    triggerTimeUpdate = false;
-                  }
-                });
-              }
+            _context4.next = 11;
+            return res.blob();
+          case 11:
+            blob = _context4.sent;
+            _context4.next = 19;
+            break;
+          case 14:
+            if (!(type === 'audio')) {
+              _context4.next = 19;
+              break;
             }
-          });
-          vjsPlayer.on('error', /*#__PURE__*/function () {
-            var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(err) {
-              return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-                while (1) switch (_context5.prev = _context5.next) {
-                  case 0:
-                    console.debug("??? XLR.debug >> VideoMedia: Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-                    if (xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                      playerReportFault('Video file source not supported', media).then(function () {
-                        _this.stop();
-                      });
-                    } else {
-                      // End media after 5 seconds
-                      setTimeout(function () {
-                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
-                        _this.stop();
-                      }, 5000);
-                    }
-                  case 2:
-                  case "end":
-                    return _context5.stop();
-                }
-              }, _callee5);
-            }));
-            return function (_x4) {
-              return _ref5.apply(this, arguments);
-            };
-          }());
-          if (media.duration === 0) {
-            vjsPlayer.on('ended', function () {
-              console.debug("??? XLR.debug >> VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-              _this.stop();
+            _context4.next = 17;
+            return res.arrayBuffer();
+          case 17:
+            data = _context4.sent;
+            blob = new Blob([data], {
+              type: audioFileType(getFileExt(src))
             });
-          }
+          case 19:
+            return _context4.abrupt("return", URL.createObjectURL(blob));
+          case 20:
+          case "end":
+            return _context4.stop();
         }
-      },
-      stop: function stop() {
-        var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-        var vjsPlayer = media.player;
-        console.debug('??? XLR.debug >> VideoMedia::stop', {
-          vjsPlayer: vjsPlayer,
-          isDisposed: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.isDisposed_,
-          el: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.el_
-        });
-        // Expire the media and dispose the video
-        if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
-          if (!disposeOnly) {
-            media.emitter.emit('end', media);
-          }
-          vjsPlayer.dispose();
-          // Clear up media player
-          media.player = undefined;
-        } else {
-          media.player = undefined;
-          media.html = null;
-          media.emitter.emit('end', media);
+      }, _callee4);
+    }));
+    return _preloadMediaBlob.apply(this, arguments);
+  }
+  function fetchJSON(_x6, _x7) {
+    return _fetchJSON.apply(this, arguments);
+  }
+  function _fetchJSON() {
+    _fetchJSON = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(url, jwtToken) {
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            return _context5.abrupt("return", fetch(url, {
+              method: 'GET',
+              headers: {
+                'X-PREVIEW-JWT': jwtToken || ''
+              }
+            }).then(function (res) {
+              return res.json();
+            })["catch"](function (err) {
+              console.debug(err);
+            }));
+          case 1:
+          case "end":
+            return _context5.stop();
         }
-      },
-      play: function play() {
-        var _this2 = this;
-        var vjsPlayer = videojs(mediaId);
-        if (vjsPlayer !== undefined) {
-          var _vjsPlayer$play;
-          (_vjsPlayer$play = vjsPlayer.play()) === null || _vjsPlayer$play === void 0 || _vjsPlayer$play["catch"]( /*#__PURE__*/function () {
-            var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(error) {
-              return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-                while (1) switch (_context6.prev = _context6.next) {
-                  case 0:
-                    if (error === 'Timeout') {
-                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
-                      _this2.stop();
-                    } else {
-                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
-                      if (xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                        playerReportFault('Media autoplay error', media).then(function () {
-                          _this2.stop();
-                        });
-                      }
-                    }
-                  case 1:
-                  case "end":
-                    return _context6.stop();
-                }
-              }, _callee6);
+      }, _callee5);
+    }));
+    return _fetchJSON.apply(this, arguments);
+  }
+  function fetchText(_x8, _x9) {
+    return _fetchText.apply(this, arguments);
+  }
+  function _fetchText() {
+    _fetchText = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(url, jwtToken) {
+      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            return _context6.abrupt("return", fetch(url, {
+              method: 'GET',
+              headers: {
+                'X-PREVIEW-JWT': jwtToken || ''
+              }
+            }).then(function (res) {
+              return res.text();
+            }).then(function (responseText) {
+              if (String(responseText).length > 0) {
+                return responseText;
+              } else {
+                return '';
+              }
+            })["catch"](function (err) {
+              console.debug(err);
+              return err === null || err === void 0 ? void 0 : err.message;
             }));
-            return function (_x5) {
-              return _ref6.apply(this, arguments);
-            };
-          }());
+          case 1:
+          case "end":
+            return _context6.stop();
         }
+      }, _callee6);
+    }));
+    return _fetchText.apply(this, arguments);
+  }
+  function getFileExt(filename) {
+    var filenameArr = String(filename).split('.');
+    return filenameArr[filenameArr.length - 1];
+  }
+  function audioFileType(str) {
+    var validAudioTypes = {
+      'mp3': 'audio/mp3',
+      'wav': 'audio/wav',
+      'ogg': 'audio/ogg'
+    };
+    if (Boolean(validAudioTypes[str])) {
+      return validAudioTypes[str];
+    }
+    return undefined;
+  }
+  function videoFileType(str) {
+    var validVideoTypes = {
+      'mp4': 'video/mp4',
+      'webm': 'video/webm',
+      'wmv': 'video/x-ms-wmv'
+    };
+    if (Boolean(validVideoTypes[str])) {
+      return validVideoTypes[str];
+    }
+    return undefined;
+  }
+  function composeResourceUrlByPlatform(options, params) {
+    var resourceUrl = '';
+    if (params.regionOptions && Boolean(params.regionOptions.getResourceUrl)) {
+      resourceUrl = params.regionOptions.getResourceUrl.replace(":regionId", params.regionId).replace(":id", params.mediaId) + '?preview=1&layoutPreview=1';
+    }
+    if (options.platform === exports.ConsumerPlatform.CMS && Boolean(params.regionOptions.previewJwt)) {
+      resourceUrl += '&jwt=' + params.regionOptions.previewJwt;
+    }
+    if (options.platform === exports.ConsumerPlatform.CHROMEOS) {
+      var resourceEndpoint = '/required-files/resource/';
+      if (!params.isGlobalContent && params.isImageOrVideo) {
+        resourceUrl = resourceEndpoint + params.fileId + '?saveAs=' + params.uri;
+      }
+    } else if (options.platform === exports.ConsumerPlatform.ELECTRON) {
+      if (params.render === 'html' || params.mediaType === 'ticker' || params.mediaType === 'webpage') {
+        resourceUrl = options.appHost + 'layout_' + params.layoutId + '_region_' + params.regionId + '_media_' + params.mediaId + '.html';
+      } else if (params.render === 'native' && params.isImageOrVideo) {
+        resourceUrl = options.appHost + params.uri;
       }
+    } else if (!Boolean(params['mediaType'])) {
+      resourceUrl += '&scale_override=' + params.scaleFactor;
+    }
+    return resourceUrl;
+  }
+  function composeResourceUrl(options, params) {
+    var _options$config, _options$config2, _options$config3;
+    var schemaVersion = options && ((_options$config = options.config) === null || _options$config === void 0 ? void 0 : _options$config.schemaVersion);
+    var hardwareKey = options && ((_options$config2 = options.config) === null || _options$config2 === void 0 ? void 0 : _options$config2.hardwareKey);
+    var serverKey = options && ((_options$config3 = options.config) === null || _options$config3 === void 0 ? void 0 : _options$config3.cmsKey);
+    return '/pwa/getResource' + '?v=' + schemaVersion + '&serverKey=' + serverKey + '&hardwareKey=' + hardwareKey + '&layoutId=' + params.layoutId + '&regionId=' + params.regionId + '&mediaId=' + params.mediaId;
+  }
+  function composeMediaUrl(params) {
+    return '/xmds.php?file=' + params.uri;
+  }
+  function composeBgUrlByPlatform(platform, params) {
+    var bgImageUrl = '';
+    if (platform === exports.ConsumerPlatform.CMS) {
+      bgImageUrl = params.options.layoutBackgroundDownloadUrl.replace(":id", params.id) + '&preview=1&width=' + params.sWidth + '&height=' + params.sHeight + '&dynamic&proportional=0';
+    } else if (platform === exports.ConsumerPlatform.CHROMEOS) {
+      bgImageUrl = composeMediaUrl({
+        uri: params.bgImage
+      });
+    } else if (platform === exports.ConsumerPlatform.ELECTRON) {
+      bgImageUrl = params.options.appHost + params.bgImage;
+    }
+    return bgImageUrl;
+  }
+  function getIndexByLayoutId(layoutsInput, layoutId) {
+    var layoutIndexes = layoutsInput.reduce(function (a, b, indx) {
+      a[Number(b.layoutId)] = _objectSpread2(_objectSpread2({}, b), {}, {
+        index: indx
+      });
+      return a;
+    }, {});
+    if (layoutId === null || !layoutId) {
+      return layoutIndexes;
+    }
+    if (Boolean(layoutIndexes[layoutId])) {
+      return layoutIndexes[layoutId];
+    }
+    // Defaults to 0
+    return {
+      index: 0
     };
-    return videoPlayer;
   }
-
-  var Media = /*#__PURE__*/function () {
-    function Media(region, mediaId, xml, options, xlr) {
-      var _this$xml,
-        _this$xml2,
-        _this$xml3,
-        _this$xml4,
-        _this$xml5,
-        _this = this;
-      _classCallCheck(this, Media);
-      _defineProperty(this, "attachedAudio", false);
-      _defineProperty(this, "checkIframeStatus", false);
-      _defineProperty(this, "containerName", '');
-      _defineProperty(this, "divHeight", 0);
-      _defineProperty(this, "divWidth", 0);
-      _defineProperty(this, "duration", 0);
-      _defineProperty(this, "emitter", createNanoEvents());
+  function isEmpty(input) {
+    return !Boolean(input) || String(input).length === 0;
+  }
+  function getAllAttributes(elem) {
+    if (!elem || elem === null) {
+      return {};
+    }
+    return elem.getAttributeNames().reduce(function (obj, name) {
+      return _objectSpread2(_objectSpread2({}, obj), {}, _defineProperty({}, name, {
+        value: elem.getAttribute(name)
+      }));
+    }, {});
+  }
+  /**
+   * Create expiration day based on current date
+   * @param numDays Number of days as expiry
+   * @returns JSON string format of date
+   */
+  function setExpiry(numDays) {
+    var today = new Date();
+    return new Date(today.setHours(24 * numDays || 1)).toJSON();
+  }
+  /**
+   * Check if given layout exists in the loop using layoutId
+   * @param layouts Schedule loop unique layouts (uniqueLayouts)
+   * @param layoutId Layout ID of the layout to look for
+   *
+   * @return boolean
+   */
+  function isLayoutValid(layouts, layoutId) {
+    if (layouts.length < 1 || !layoutId) {
+      return false;
+    }
+    var layoutIndex = layouts.findIndex(function (l) {
+      return l.layoutId === layoutId;
+    });
+    return layoutIndex !== -1;
+  }
+  function getLayoutIndexByLayoutId(layouts, layoutId) {
+    if (layouts.length < 1 || !layoutId) {
+      return null;
+    }
+    return layouts.findIndex(function (l) {
+      return l.layoutId === layoutId;
+    });
+  }
+  function hasDefaultOnly(inputLayouts) {
+    var _inputLayouts$0$respo;
+    if (!inputLayouts) {
+      return false;
+    }
+    return inputLayouts.length === 1 && ((_inputLayouts$0$respo = inputLayouts[0].response) === null || _inputLayouts$0$respo === void 0 ? void 0 : _inputLayouts$0$respo.nodeName) === 'default';
+  }
+  function hasSspLayout(inputLayouts) {
+    var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!inputLayouts || inputLayouts.length === 0) {
+      return defaultValue;
+    }
+    return inputLayouts.find(function (layout) {
+      return layout.layoutId === -1;
+    }) !== undefined;
+  }
+  function prepareIframe(media) {
+    var iframe = document.createElement('iframe');
+    iframe.scrolling = 'no';
+    iframe.id = media.iframeName;
+    iframe.width = "".concat(media.divWidth, "px");
+    iframe.height = "".concat(media.divHeight, "px");
+    iframe.style.cssText = "border: 0;";
+    if ((media.render === 'html' || media.render === 'webpage') && media.url !== null) {
+      iframe.src = media.url;
+    } else {
+      iframe.src = "".concat(media.url, "&width=").concat(media.divWidth, "&height=").concat(media.divHeight);
+    }
+    return iframe;
+  }
+  function prepareImage(media, container) {
+    if (media.options['scaletype'] === 'stretch') {
+      container.style.cssText = container.style.cssText.concat("background-size: 100% 100%;");
+    } else if (media.options['scaletype'] === 'fit') {
+      container.style.cssText = container.style.cssText.concat("background-size: cover;");
+    } else {
+      // Center scale type, do we have align or valign?
+      var align = media.options['align'] == "" ? "center" : media.options['align'];
+      var valign = media.options['valign'] == "" || media.options['valign'] == "middle" ? "center" : media.options['valign'];
+      container.style.cssText = container.style.cssText.concat("background-position: ".concat(align, " ").concat(valign));
+    }
+    return container;
+  }
+  function prepareVideo(media, container) {
+    var $videoMedia = composeVideoSource(container, media);
+    var isMuted = false;
+    if (Boolean(media.options['mute'])) {
+      isMuted = media.options.mute === '1';
+    }
+    if (Boolean(media.options['scaletype'])) {
+      if (media.options.scaletype === 'stretch') {
+        $videoMedia.style.objectFit = 'fill';
+      }
+    }
+    $videoMedia.classList.add('video-js', 'vjs-default-skin');
+    if (media.loop) {
+      media.loop = true;
+      $videoMedia.loop = true;
+    }
+    media.muted = isMuted;
+    return $videoMedia;
+  }
+  function prepareAudio(media, container) {
+    var $audioMedia = container;
+    $audioMedia.preload = 'auto';
+    $audioMedia.textContent = 'Unsupported Audio';
+    $audioMedia.autoplay = true;
+    if (media.loop) {
+      $audioMedia.loop = true;
+    }
+    return $audioMedia;
+  }
+  function createMediaElement(mediaObject) {
+    var self = mediaObject;
+    var mediaId = getMediaId(self);
+    var mediaSelector = ".media--item.".concat(mediaId);
+    var $media = self.region.html.querySelector(mediaSelector);
+    if ($media === null) {
+      if (self.mediaType === 'video') {
+        $media = document.createElement('video');
+      } else if (self.mediaType === 'audio') {
+        $media = new Audio();
+      } else {
+        $media = document.createElement('div');
+      }
+      $media.id = mediaId;
+    }
+    $media.dataset.mediaId = self.id;
+    $media.dataset.mediaType = self.mediaType;
+    $media.dataset.type = self.type;
+    $media.dataset.render = self.render;
+    $media.dataset.duration = String(self.duration);
+    $media.dataset.fileId = self.fileId;
+    $media.className = "media--item ".concat(mediaId);
+    /* Scale the Content Container */
+    var cssText = "\n        width: ".concat(self.divWidth, "px;\n        height: ").concat(self.divHeight, "px;\n        position: absolute;\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center;\n    ");
+    if (self.mediaType !== 'video') {
+      cssText += "\n            visibility: hidden;\n            opacity: 0;\n            z-index: 0;\n        ";
+    }
+    $media.style.cssText = cssText;
+    if (self.render === 'html' || self.mediaType === 'ticker' || self.mediaType === 'webpage') {
+      self.checkIframeStatus = true;
+      self.iframe = prepareIframe(self);
+    } else if (self.mediaType === "image") {
+      $media = prepareImage(self, $media);
+    } else if (self.mediaType === 'video') {
+      $media = prepareVideo(self, $media);
+    } else if (self.mediaType === 'audio') {
+      $media = prepareAudio(self, $media);
+    }
+    // Duration is per item condition
+    if ((self.render === 'html' || self.mediaType === 'ticker') && self.url !== null) {
+      /* Check if the ticker duration is based on the number of items in the feed */
+      if (self.options['durationisperitem'] === '1') {
+        var regex = new RegExp('<!-- NUMITEMS=(.*?) -->');
+        _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var html, res;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return fetchJSON("".concat(self.url, "&width=").concat(self.divWidth, "&height=").concat(self.divHeight), self.options.previewJwt);
+              case 2:
+                html = _context.sent;
+                console.debug({
+                  html: html
+                });
+                res = regex.exec(html);
+                if (res !== null) {
+                  self.duration = parseInt(String(self.duration)) * parseInt(res[1]);
+                }
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }))();
+      }
+    }
+    // Check if the media has fade-in/out transitions
+    if (Boolean(self.options['transin']) && Boolean(self.options['transinduration'])) {
+      var transInDuration = Number(self.options.transinduration);
+      var fadeInTrans = transitionElement('fadeIn', {
+        duration: transInDuration
+      });
+      $media.animate(fadeInTrans.keyframes, fadeInTrans.timing);
+    }
+    // Add media to the region
+    // Second media if exists, will be off-canvas
+    // All added media will be hidden by default
+    // It will start showing when region.nextMedia() function is called
+    // When there's only 1 item and loop = false, don't remove the item but leave it at its last state
+    // For image, and only 1 item, it should still have the transition for next state
+    // Add conditions for video duration being 0 or 1 and also the loop property
+    // For video url, we have to create a URL out of the XLF video URL
+    /**
+     * @DONE
+     * Case 1: Video duration = 0, this will play the video for its entire duration
+     * Case 2: Video duration is set > 0 and loop = false
+     * E.g. Set duration = 100s, video duration = 62s
+     * the video will play until 62s and will stop to its last frame until 100s
+     * After 100s, it will expire
+     * Case 3: Video duration is set > 0 and loop = true
+     * E.g. Set duration = 100s, video duration = 62s, loop = true
+     * the video will play until 62s and will loop through until the remaining 38s
+     * to complete the 100s set duration
+     */
+    // Add html node to media for
+    // self.html = $media;
+    return $media;
+  }
+  function prepareVideoMedia(media, region) {
+    var mediaId = getMediaId(media);
+    // Check if html is ready and is in the DOM
+    if (media.html !== null) {
+      // Clean up video.js instance
+      var existingPlayer = videojs.getPlayer(mediaId);
+      if (existingPlayer !== undefined) {
+        existingPlayer.dispose();
+        media.player = undefined;
+      }
+      var $layout = region.layout.html;
+      var layoutSelector = '#' + region.layout.containerName + '[data-sequence="' + region.layout.index + '"]';
+      var $layoutWithIndex = document.querySelector(layoutSelector);
+      var $region = document.querySelector('#' + region.containerName);
+      var mediaInRegion = $region === null || $region === void 0 ? void 0 : $region.querySelector('.' + mediaId);
+      console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
+        layoutSelector: layoutSelector,
+        $layoutWithIndex: $layoutWithIndex,
+        $region: $region,
+        mediaInRegion: mediaInRegion,
+        mediaHtml: media.html,
+        existingPlayer: existingPlayer,
+        mediaId: mediaId,
+        layoutInDOM: document.body.contains($layout)
+      });
+      if (!mediaInRegion) {
+        media.html = createMediaElement(media);
+      } else {
+        mediaInRegion.remove();
+        media.html = createMediaElement(media);
+      }
+      // Append fresh copy of the media into the region
+      $region !== null && $region.appendChild(media.html);
+      var isMediaInDOM = document.body.contains(media.html);
+      console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
+        isMediaInDOM: isMediaInDOM,
+        mediaHtml: media.html,
+        mediaId: mediaId
+      });
+      // Initialize video.js
+      media.player = videojs(mediaId, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
+        errorDisplay: region.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
+        loop: media.loop
+      }));
+      media.player.on('error', /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (media.region.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
+                  playerReportFault('Video file not supported', media).then(function () {
+                    media.emitter.emit('end', media);
+                  });
+                }
+              case 1:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function (_x10) {
+          return _ref3.apply(this, arguments);
+        };
+      }());
+      media.player.el().style.setProperty('visibility', 'hidden');
+      media.player.el().style.setProperty('opacity', '0');
+      media.player.el().style.setProperty('z-index', '-99');
+    }
+  }
+  function prepareImageMedia(media, region) {
+    var mediaId = getMediaId(media);
+    media.html.style.setProperty('background-image', "url(".concat(media.url));
+    // Check if media in region
+    // Remove old copy before inserting fresh copy
+    var mediaInRegion = region.html.querySelector('.' + mediaId);
+    if (mediaInRegion) {
+      mediaInRegion.remove();
+    }
+    // Append media to its region
+    var $region = document.querySelector('#' + region.containerName);
+    $region !== null && $region.appendChild(media.html);
+  }
+  function prepareAudioMedia(media, region) {
+    var mediaId = getMediaId(media);
+    if (media.url !== null) {
+      media.html.src = media.url;
+    }
+    // Check if media in region
+    // Remove old copy before inserting fresh copy of the media
+    var mediaInRegion = region.html.querySelector('.' + mediaId);
+    if (mediaInRegion) {
+      mediaInRegion.remove();
+    }
+    // Append media to its region
+    var $region = document.querySelector('#' + region.containerName);
+    $region !== null && $region.appendChild(media.html);
+  }
+  function prepareHtmlMedia(media, region) {
+    // Set state as false ( for now )
+    media.ready = false;
+    if (media.html) {
+      var mediaId = getMediaId(media);
+      // Clean up old copy of the media
+      // before inserting fresh copy
+      var $layout = document.querySelector("#".concat(region.layout.containerName, "[data-sequence=\"").concat(region.layout.index, "\"]"));
+      var $region = $layout.querySelector('#' + region.containerName);
+      var mediaInRegion = $region.querySelector('.' + mediaId);
+      console.debug('<><> XLR.debug >> [Media] - [Generators::prepareHtmlMedia]', {
+        mediaId: mediaId,
+        mediaInRegion: mediaInRegion
+      });
+      // Append iframe
+      media.html.innerHTML = '';
+      media.html.appendChild(media.iframe);
+      if (!mediaInRegion) {
+        // Add fresh copy of the media into the region
+        var _$region = document.querySelector('#' + region.containerName);
+        _$region !== null && _$region.appendChild(media.html);
+        media.ready = true;
+      }
+    }
+  }
+  function playerReportFault(_x11, _x12) {
+    return _playerReportFault.apply(this, arguments);
+  }
+  function _playerReportFault() {
+    _playerReportFault = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(msg, media) {
+      var playerSW, hasSW;
+      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            // Immediately expire media and report a fault
+            playerSW = PwaSW();
+            _context7.next = 3;
+            return playerSW.getSW();
+          case 3:
+            hasSW = _context7.sent;
+            if (hasSW) {
+              playerSW.postMsg({
+                type: 'MEDIA_FAULT',
+                code: 5002,
+                reason: msg,
+                mediaId: media.id,
+                regionId: media.region.id,
+                layoutId: media.region.layout.id,
+                date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+                // Temporary setting
+                expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
+              }).then(function () {
+                // We try to prepare next media if we have more than 1 media
+                if (media.region.totalMediaObjects > 1) {
+                  media.region.prepareNextMedia();
+                }
+              })["finally"](function () {
+                // Stopping media as we have reported the error as fault
+                console.debug('??? XLR.debug >> VideoMedia - Done reporting media fault', {
+                  mediaId: media.id,
+                  regionItems: media.region.totalMediaObjects
+                });
+              });
+            }
+          case 5:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
+    }));
+    return _playerReportFault.apply(this, arguments);
+  }
+  function setLayoutIndex(layout, layoutIndex) {
+    if (!layout || layout.id === null) {
+      return;
+    }
+    layout.index = layoutIndex;
+    return layout;
+  }
+
+  const urlAlphabet =
+    'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+  /* @ts-self-types="./index.d.ts" */
+  let nanoid = (size = 21) => {
+    let id = '';
+    let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
+    while (size--) {
+      id += urlAlphabet[bytes[size] & 63];
+    }
+    return id
+  };
+
+  function AudioMedia(media) {
+    var audioMediaObject = {
+      init: function init() {
+        var $audioMedia = document.getElementById(getMediaId(media));
+        var $playBtn = null;
+        if ($audioMedia) {
+          $audioMedia.onloadstart = function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
+          };
+          $audioMedia.onloadeddata = function () {
+            if ($audioMedia.readyState >= 2) {
+              console.debug("".concat(capitalizeStr(media.mediaType), " data for media > ").concat(media.id, " has been fully loaded . . ."));
+            }
+          };
+          $audioMedia.oncanplay = function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+          };
+          $audioMedia.onplaying = function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
+            if ($playBtn !== null) {
+              $playBtn.remove();
+            }
+          };
+          var audioPlayPromise = $audioMedia.play();
+          if (audioPlayPromise !== undefined) {
+            audioPlayPromise.then(function () {
+              console.debug('autoplay started . . .');
+              // Autoplay restarted
+            })["catch"](function (error) {
+              if (error.name === 'NotAllowedError') {
+                var _$audioMedia$parentNo;
+                // Let's show a play audio button
+                $playBtn = document.createElement('button');
+                $playBtn.classList.add('play-audio-btn');
+                $playBtn.textContent = 'Play Audio';
+                $playBtn.addEventListener('click', function () {
+                  $audioMedia.muted = false;
+                  $audioMedia.play();
+                });
+                (_$audioMedia$parentNo = $audioMedia.parentNode) === null || _$audioMedia$parentNo === void 0 || _$audioMedia$parentNo.insertBefore($playBtn, $audioMedia.nextSibling);
+              }
+            });
+          }
+          if (media.duration === 0) {
+            $audioMedia.ondurationchange = function () {
+              console.debug('Showing Media ' + media.id + ' for ' + $audioMedia.duration + 's of Region ' + media.region.regionId);
+            };
+            $audioMedia.onended = function () {
+              var _media$emitter;
+              console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+              (_media$emitter = media.emitter) === null || _media$emitter === void 0 || _media$emitter.emit('end', media);
+            };
+          }
+        }
+      }
+    };
+    return audioMediaObject;
+  }
+
+  var Media = /*#__PURE__*/function () {
+    function Media(region, mediaId, xml, options, xlr) {
+      var _this$xml,
+        _this$xml2,
+        _this$xml3,
+        _this$xml4,
+        _this$xml5,
+        _this = this;
+      _classCallCheck(this, Media);
+      _defineProperty(this, "attachedAudio", false);
+      _defineProperty(this, "checkIframeStatus", false);
+      _defineProperty(this, "containerName", '');
+      _defineProperty(this, "divHeight", 0);
+      _defineProperty(this, "divWidth", 0);
+      _defineProperty(this, "duration", 0);
+      _defineProperty(this, "emitter", createNanoEvents());
       _defineProperty(this, "enableStat", false);
       _defineProperty(this, "fileId", '');
       _defineProperty(this, "finished", false);
@@ -73512,12 +74063,18 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       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;
@@ -73590,7 +74147,8 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           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;
@@ -73603,861 +74161,213 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           if (this.mediaType === 'image' || this.mediaType === 'video' || this.mediaType === 'audio') {
             tmpUrl = composeMediaUrl(resourceUrlParams);
             // this is an SSP Layout
-            if (this.region.layout.layoutId === -1) {
-              tmpUrl = this.uri;
-            }
-          }
-        }
-        this.url = tmpUrl;
-        // Loop if media has loop, or if region has loop and a single media
-        this.loop = this.options['loop'] == '1' || this.region.options['loop'] == '1' && this.region.totalMediaObjects == 1;
-        this.html = createMediaElement(this);
-      }
-    }, {
-      key: "run",
-      value: function run() {
-        var _this3 = this;
-        var transInDuration = 1;
-        var transInDirection = 'E';
-        if (Boolean(this.options['transinduration'])) {
-          transInDuration = Number(this.options.transinduration);
-        }
-        if (Boolean(this.options['transindirection'])) {
-          transInDirection = this.options.transindirection;
-        }
-        var defaultTransInOptions = {
-          duration: transInDuration
-        };
-        var transIn = transitionElement('defaultIn', {
-          duration: defaultTransInOptions.duration
-        });
-        if (Boolean(this.options['transin'])) {
-          var transInName = this.options['transin'];
-          if (transInName === 'fly') {
-            transInName = "".concat(transInName, "In");
-            defaultTransInOptions.keyframes = flyTransitionKeyframes({
-              trans: 'in',
-              direction: transInDirection,
-              height: this.divHeight,
-              width: this.divWidth
-            });
-          }
-          transIn = transitionElement(transInName, defaultTransInOptions);
-        }
-        var showCurrentMedia = function showCurrentMedia() {
-          var mediaId = getMediaId({
-            mediaType: _this3.mediaType,
-            containerName: _this3.containerName
-          });
-          var $region = document.querySelector('#' + _this3.region.containerName);
-          var $media = $region !== null && $region.querySelector('.' + mediaId);
-          if (!$media) {
-            $media = getNewMedia();
-          }
-          console.debug('??? XLR.debug >> Media run - show current media:', {
-            inDOM: document.body.contains($media),
-            mediaId: mediaId,
-            $media: $media,
-            mediaObject: _this3
-          });
-          if ($media) {
-            if (_this3.mediaType === 'video') {
-              var _this3$player, _this3$player2, _this3$player3, _this3$player4;
-              console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::START', {
-                mediaPlayer: _this3.player,
-                isDisposed: (_this3$player = _this3.player) === null || _this3$player === void 0 ? void 0 : _this3$player.isDisposed(),
-                el: (_this3$player2 = _this3.player) === null || _this3$player2 === void 0 ? void 0 : _this3$player2.el_
-              });
-              // Make sure that vjs is available on the media
-              // Else, re-initialize
-              if (_this3.player !== undefined) {
-                var existingPlayer = videojs(mediaId);
-                if (existingPlayer) {
-                  _this3.player = existingPlayer;
-                } else {
-                  if (_this3.player.isDisposed_) {
-                    _this3.player = undefined;
-                    _this3.player = videojs(mediaId, _objectSpread2({}, vjsDefaultOptions({
-                      errorDisplay: _this3.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-                      loop: _this3.loop
-                    })));
-                  }
-                }
-              }
-              console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::END', {
-                mediaPlayer: _this3.player,
-                isDisposed: (_this3$player3 = _this3.player) === null || _this3$player3 === void 0 ? void 0 : _this3$player3.isDisposed(),
-                el: (_this3$player4 = _this3.player) === null || _this3$player4 === void 0 ? void 0 : _this3$player4.el_
-              });
-              if (_this3.player !== undefined && _this3.player.el_ !== null) {
-                _this3.player.el().style.setProperty('visibility', 'visible');
-                _this3.player.el().style.setProperty('z-index', '10');
-                _this3.player.el().style.setProperty('opacity', '1');
-              }
-            } else {
-              console.debug('??? XLR.debug >> Media::run() > showCurrentMedia', {
-                mediaType: _this3.mediaType,
-                render: _this3.render,
-                $media: $media,
-                state: _this3.state
-              });
-              $media.style.setProperty('visibility', 'visible');
-              $media.style.setProperty('z-index', '10');
-              $media.style.setProperty('opacity', '1');
-            }
-            if (Boolean(_this3.options['transin'])) {
-              $media.animate(transIn.keyframes, transIn.timing);
-            }
-            if (!_this3.region.layout.isOverlay || _this3.region.layout.isOverlay && _this3.region.totalMediaObjects > 1) {
-              _this3.emitter.emit('start', _this3);
-            }
-          }
-        };
-        var getNewMedia = function getNewMedia() {
-          var $region = document.getElementById("".concat(_this3.region.containerName));
-          // This function is for checking whether
-          // the region still has to show a media item
-          // when another region is not finished yet
-          if (_this3.region.complete && !_this3.region.layout.allEnded) {
-            // Add currentMedia to the region
-            $region && $region.insertBefore(_this3.html, $region.lastElementChild);
-            return _this3.html;
-          }
-          return null;
-        };
-        showCurrentMedia();
-      }
-    }, {
-      key: "stop",
-      value: function () {
-        var _stop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-          var $media;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                $media = document.getElementById(getMediaId({
-                  mediaType: this.mediaType,
-                  containerName: this.containerName
-                }));
-                if ($media) {
-                  $media.style.display = 'none';
-                  $media.remove();
-                }
-                // Release blob URLs for image media to prevent memory leaks on long-running signage
-                if (this.mediaType === 'image' && this.url) {
-                  BlobLoader.release(this.url);
-                }
-              case 3:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee, this);
-        }));
-        function stop() {
-          return _stop.apply(this, arguments);
-        }
-        return stop;
-      }()
-      /**
-       * Emits a command from the shell command widget.
-       *
-       * @param media
-       * @private
-       */
-    }, {
-      key: "emitCommand",
-      value: function emitCommand(media) {
-        if (media.mediaType !== 'shellcommand') {
-          return;
-        }
-        var options = media.options;
-        if (options.commandtype === 'storedCommand' && options.commandcode) {
-          console.debug('Media::Emitter > Shell Command - Calling commandCodeReceived event');
-          this.xlr.emitter.emit('commandCodeReceived', options.commandcode);
-          return;
-        }
-        var commandString = '';
-        if (options.useglobalcommand === '1') {
-          commandString = options.globalcommand || '';
-        } else {
-          // Use platform-specific command when available
-          if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-            commandString = options.chromeoscommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.ANDROID) {
-            commandString = options.androidcommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.LINUX) {
-            commandString = options.linuxcommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.TIZEN) {
-            commandString = options.tizencommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.WEBOS) {
-            commandString = options.weboscommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.WINDOWS) {
-            commandString = options.windowscommand || '';
-          }
-          // Fall back to the global command if the platform-specific one
-          // is missing, not configured, or not supported yet
-          if (!commandString && options.globalcommand) {
-            commandString = options.globalcommand;
-          }
-        }
-        if (commandString) {
-          console.debug('Media::Emitter > Shell Command - Calling commandStringReceived event');
-          this.xlr.emitter.emit('commandStringReceived', commandString);
-          return;
-        }
-      }
-    }]);
-  }();
-
-  function nextId(options) {
-    if (options.idCounter > 500) {
-      options.idCounter = 0;
-    }
-    options.idCounter = options.idCounter + 1;
-    return options.idCounter;
-  }
-  var getMediaId = function getMediaId(_ref) {
-    var mediaType = _ref.mediaType,
-      containerName = _ref.containerName;
-    var mediaId = containerName;
-    if (mediaType === 'video') {
-      mediaId = mediaId + '-vid';
-    } else if (mediaType === 'audio') {
-      mediaId = mediaId + '-aud';
-    }
-    return mediaId;
-  };
-  var capitalizeStr = function capitalizeStr(inputStr) {
-    if (inputStr === null) {
-      return '';
-    }
-    return String(inputStr).charAt(0).toUpperCase() + String(inputStr).substring(1);
-  };
-  function getDataBlob(_x, _x2) {
-    return _getDataBlob.apply(this, arguments);
-  }
-  function _getDataBlob() {
-    _getDataBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(src, jwtToken) {
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            return _context3.abrupt("return", fetch(src, {
-              method: 'GET',
-              headers: {
-                'X-PREVIEW-JWT': jwtToken || ''
-              }
-            }).then(function (res) {
-              return res.blob();
-            }).then(function (blob) {
-              return new Promise(function (res, rej) {
-                var reader = new FileReader();
-                reader.onloadend = function () {
-                  return res(reader.result);
-                };
-                reader.onerror = rej;
-                reader.readAsDataURL(blob);
-              });
-            }));
-          case 1:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return _getDataBlob.apply(this, arguments);
-  }
-  function preloadMediaBlob(_x3, _x4, _x5) {
-    return _preloadMediaBlob.apply(this, arguments);
-  }
-  function _preloadMediaBlob() {
-    _preloadMediaBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(src, type, jwtToken) {
-      var res, blob, data;
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            _context4.next = 2;
-            return fetch(src, {
-              method: 'GET',
-              headers: {
-                'X-PREVIEW-JWT': jwtToken || ''
-              }
-            });
-          case 2:
-            res = _context4.sent;
-            blob = new Blob();
-            if (!(type === 'image')) {
-              _context4.next = 8;
-              break;
-            }
-            blob = new Blob();
-            _context4.next = 19;
-            break;
-          case 8:
-            if (!(type === 'video')) {
-              _context4.next = 14;
-              break;
-            }
-            _context4.next = 11;
-            return res.blob();
-          case 11:
-            blob = _context4.sent;
-            _context4.next = 19;
-            break;
-          case 14:
-            if (!(type === 'audio')) {
-              _context4.next = 19;
-              break;
-            }
-            _context4.next = 17;
-            return res.arrayBuffer();
-          case 17:
-            data = _context4.sent;
-            blob = new Blob([data], {
-              type: audioFileType(getFileExt(src))
-            });
-          case 19:
-            return _context4.abrupt("return", URL.createObjectURL(blob));
-          case 20:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4);
-    }));
-    return _preloadMediaBlob.apply(this, arguments);
-  }
-  function fetchJSON(_x6, _x7) {
-    return _fetchJSON.apply(this, arguments);
-  }
-  function _fetchJSON() {
-    _fetchJSON = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(url, jwtToken) {
-      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            return _context5.abrupt("return", fetch(url, {
-              method: 'GET',
-              headers: {
-                'X-PREVIEW-JWT': jwtToken || ''
-              }
-            }).then(function (res) {
-              return res.json();
-            })["catch"](function (err) {
-              console.debug(err);
-            }));
-          case 1:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5);
-    }));
-    return _fetchJSON.apply(this, arguments);
-  }
-  function fetchText(_x8, _x9) {
-    return _fetchText.apply(this, arguments);
-  }
-  function _fetchText() {
-    _fetchText = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(url, jwtToken) {
-      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
-          case 0:
-            return _context6.abrupt("return", fetch(url, {
-              method: 'GET',
-              headers: {
-                'X-PREVIEW-JWT': jwtToken || ''
-              }
-            }).then(function (res) {
-              return res.text();
-            }).then(function (responseText) {
-              if (String(responseText).length > 0) {
-                return responseText;
-              } else {
-                return '';
-              }
-            })["catch"](function (err) {
-              console.debug(err);
-              return err === null || err === void 0 ? void 0 : err.message;
-            }));
-          case 1:
-          case "end":
-            return _context6.stop();
-        }
-      }, _callee6);
-    }));
-    return _fetchText.apply(this, arguments);
-  }
-  function getFileExt(filename) {
-    var filenameArr = String(filename).split('.');
-    return filenameArr[filenameArr.length - 1];
-  }
-  function audioFileType(str) {
-    var validAudioTypes = {
-      'mp3': 'audio/mp3',
-      'wav': 'audio/wav',
-      'ogg': 'audio/ogg'
-    };
-    if (Boolean(validAudioTypes[str])) {
-      return validAudioTypes[str];
-    }
-    return undefined;
-  }
-  function videoFileType(str) {
-    var validVideoTypes = {
-      'mp4': 'video/mp4',
-      'webm': 'video/webm',
-      'wmv': 'video/x-ms-wmv'
-    };
-    if (Boolean(validVideoTypes[str])) {
-      return validVideoTypes[str];
-    }
-    return undefined;
-  }
-  function composeResourceUrlByPlatform(options, params) {
-    var resourceUrl = params.regionOptions.getResourceUrl.replace(":regionId", params.regionId).replace(":id", params.mediaId) + '?preview=1&layoutPreview=1';
-    if (options.platform === 'CMS') {
-      resourceUrl += '&jwt=' + params.regionOptions.previewJwt;
-    }
-    if (options.platform === 'chromeOS') {
-      var resourceEndpoint = '/required-files/resource/';
-      if (!params.isGlobalContent && params.isImageOrVideo) {
-        resourceUrl = resourceEndpoint + params.fileId + '?saveAs=' + params.uri;
-      }
-    } else if (!Boolean(params['mediaType'])) {
-      resourceUrl += '&scale_override=' + params.scaleFactor;
-    }
-    return resourceUrl;
-  }
-  function composeResourceUrl(options, params) {
-    var _options$config, _options$config2, _options$config3;
-    var schemaVersion = options && ((_options$config = options.config) === null || _options$config === void 0 ? void 0 : _options$config.schemaVersion);
-    var hardwareKey = options && ((_options$config2 = options.config) === null || _options$config2 === void 0 ? void 0 : _options$config2.hardwareKey);
-    var serverKey = options && ((_options$config3 = options.config) === null || _options$config3 === void 0 ? void 0 : _options$config3.cmsKey);
-    return '/pwa/getResource' + '?v=' + schemaVersion + '&serverKey=' + serverKey + '&hardwareKey=' + hardwareKey + '&layoutId=' + params.layoutId + '&regionId=' + params.regionId + '&mediaId=' + params.mediaId;
-  }
-  function composeMediaUrl(params) {
-    return '/xmds.php?file=' + params.uri;
-  }
-  function composeBgUrlByPlatform(platform, params) {
-    var bgImageUrl = '';
-    if (platform === 'CMS') {
-      bgImageUrl = params.layoutBackgroundDownloadUrl.replace(":id", params.layout.id) + '&preview=1&width=' + params.layout.sWidth + '&height=' + params.layout.sHeight + '&dynamic&proportional=0';
-    } else if (platform === 'chromeOS') {
-      bgImageUrl = composeMediaUrl({
-        uri: params.layout.bgImage
-      });
-    }
-    // @TODO: Add condition to handle electron platform
-    return bgImageUrl;
-  }
-  function getIndexByLayoutId(layoutsInput, layoutId) {
-    var layoutIndexes = layoutsInput.reduce(function (a, b, indx) {
-      a[Number(b.layoutId)] = _objectSpread2(_objectSpread2({}, b), {}, {
-        index: indx
-      });
-      return a;
-    }, {});
-    if (layoutId === null || !layoutId) {
-      return layoutIndexes;
-    }
-    if (Boolean(layoutIndexes[layoutId])) {
-      return layoutIndexes[layoutId];
-    }
-    // Defaults to 0
-    return {
-      index: 0
-    };
-  }
-  function isEmpty(input) {
-    return !Boolean(input) || String(input).length === 0;
-  }
-  function getAllAttributes(elem) {
-    if (!elem || elem === null) {
-      return {};
-    }
-    return elem.getAttributeNames().reduce(function (obj, name) {
-      return _objectSpread2(_objectSpread2({}, obj), {}, _defineProperty({}, name, {
-        value: elem.getAttribute(name)
-      }));
-    }, {});
-  }
-  /**
-   * Create expiration day based on current date
-   * @param numDays Number of days as expiry
-   * @returns JSON string format of date
-   */
-  function setExpiry(numDays) {
-    var today = new Date();
-    return new Date(today.setHours(24 * numDays || 1)).toJSON();
-  }
-  /**
-   * Check if given layout exists in the loop using layoutId
-   * @param layouts Schedule loop unique layouts (uniqueLayouts)
-   * @param layoutId Layout ID of the layout to look for
-   *
-   * @return boolean
-   */
-  function isLayoutValid(layouts, layoutId) {
-    if (layouts.length < 1 || !layoutId) {
-      return false;
-    }
-    var layoutIndex = layouts.findIndex(function (l) {
-      return l.layoutId === layoutId;
-    });
-    return layoutIndex !== -1;
-  }
-  function getLayoutIndexByLayoutId(layouts, layoutId) {
-    if (layouts.length < 1 || !layoutId) {
-      return null;
-    }
-    return layouts.findIndex(function (l) {
-      return l.layoutId === layoutId;
-    });
-  }
-  function hasDefaultOnly(inputLayouts) {
-    var _inputLayouts$0$respo;
-    if (!inputLayouts) {
-      return false;
-    }
-    return inputLayouts.length === 1 && ((_inputLayouts$0$respo = inputLayouts[0].response) === null || _inputLayouts$0$respo === void 0 ? void 0 : _inputLayouts$0$respo.nodeName) === 'default';
-  }
-  function hasSspLayout(inputLayouts) {
-    var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    if (!inputLayouts || inputLayouts.length === 0) {
-      return defaultValue;
-    }
-    return inputLayouts.find(function (layout) {
-      return layout.layoutId === -1;
-    }) !== undefined;
-  }
-  function prepareIframe(media) {
-    var iframe = document.createElement('iframe');
-    iframe.scrolling = 'no';
-    iframe.id = media.iframeName;
-    iframe.width = "".concat(media.divWidth, "px");
-    iframe.height = "".concat(media.divHeight, "px");
-    iframe.style.cssText = "border: 0;";
-    if ((media.render === 'html' || media.render === 'webpage') && media.url !== null) {
-      iframe.src = media.url;
-    } else {
-      iframe.src = "".concat(media.url, "&width=").concat(media.divWidth, "&height=").concat(media.divHeight);
-    }
-    return iframe;
-  }
-  function prepareImage(media, container) {
-    if (media.options['scaletype'] === 'stretch') {
-      container.style.cssText = container.style.cssText.concat("background-size: 100% 100%;");
-    } else if (media.options['scaletype'] === 'fit') {
-      container.style.cssText = container.style.cssText.concat("background-size: cover;");
-    } else {
-      // Center scale type, do we have align or valign?
-      var align = media.options['align'] == "" ? "center" : media.options['align'];
-      var valign = media.options['valign'] == "" || media.options['valign'] == "middle" ? "center" : media.options['valign'];
-      container.style.cssText = container.style.cssText.concat("background-position: ".concat(align, " ").concat(valign));
-    }
-    return container;
-  }
-  function prepareVideo(media, container) {
-    var $videoMedia = composeVideoSource(container, media);
-    var isMuted = false;
-    if (Boolean(media.options['mute'])) {
-      isMuted = media.options.mute === '1';
-    }
-    if (Boolean(media.options['scaletype'])) {
-      if (media.options.scaletype === 'stretch') {
-        $videoMedia.style.objectFit = 'fill';
-      }
-    }
-    $videoMedia.classList.add('video-js', 'vjs-default-skin');
-    if (media.loop) {
-      media.loop = true;
-      $videoMedia.loop = true;
-    }
-    media.muted = isMuted;
-    return $videoMedia;
-  }
-  function prepareAudio(media, container) {
-    var $audioMedia = container;
-    $audioMedia.preload = 'auto';
-    $audioMedia.textContent = 'Unsupported Audio';
-    $audioMedia.autoplay = true;
-    if (media.loop) {
-      $audioMedia.loop = true;
-    }
-    return $audioMedia;
-  }
-  function createMediaElement(mediaObject) {
-    var self = mediaObject;
-    var mediaId = getMediaId(self);
-    var mediaSelector = ".media--item.".concat(mediaId);
-    var $media = self.region.html.querySelector(mediaSelector);
-    if ($media === null) {
-      if (self.mediaType === 'video') {
-        $media = document.createElement('video');
-      } else if (self.mediaType === 'audio') {
-        $media = new Audio();
-      } else {
-        $media = document.createElement('div');
+            if (this.region.layout.layoutId === -1) {
+              tmpUrl = this.uri;
+            }
+          }
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.ELECTRON) {
+          tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
+        }
+        this.url = tmpUrl;
+        // Loop if media has loop, or if region has loop and a single media
+        this.loop = this.options['loop'] == '1' || this.region.options['loop'] == '1' && this.region.totalMediaObjects == 1;
+        this.html = createMediaElement(this);
       }
-      $media.id = mediaId;
-    }
-    $media.dataset.mediaId = self.id;
-    $media.dataset.mediaType = self.mediaType;
-    $media.dataset.type = self.type;
-    $media.dataset.render = self.render;
-    $media.dataset.duration = String(self.duration);
-    $media.dataset.fileId = self.fileId;
-    $media.className = "media--item ".concat(mediaId);
-    /* Scale the Content Container */
-    var cssText = "\n        width: ".concat(self.divWidth, "px;\n        height: ").concat(self.divHeight, "px;\n        position: absolute;\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center;\n    ");
-    if (self.mediaType !== 'video') {
-      cssText += "\n            visibility: hidden;\n            opacity: 0;\n            z-index: 0;\n        ";
-    }
-    $media.style.cssText = cssText;
-    if (self.render === 'html' || self.mediaType === 'ticker' || self.mediaType === 'webpage') {
-      self.checkIframeStatus = true;
-      self.iframe = prepareIframe(self);
-    } else if (self.mediaType === "image") {
-      $media = prepareImage(self, $media);
-    } else if (self.mediaType === 'video') {
-      $media = prepareVideo(self, $media);
-    } else if (self.mediaType === 'audio') {
-      $media = prepareAudio(self, $media);
-    }
-    // Duration is per item condition
-    if ((self.render === 'html' || self.mediaType === 'ticker') && self.url !== null) {
-      /* Check if the ticker duration is based on the number of items in the feed */
-      if (self.options['durationisperitem'] === '1') {
-        var regex = new RegExp('<!-- NUMITEMS=(.*?) -->');
-        _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-          var html, res;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return fetchJSON("".concat(self.url, "&width=").concat(self.divWidth, "&height=").concat(self.divHeight), self.options.previewJwt);
-              case 2:
-                html = _context.sent;
-                console.debug({
-                  html: html
-                });
-                res = regex.exec(html);
-                if (res !== null) {
-                  self.duration = parseInt(String(self.duration)) * parseInt(res[1]);
+    }, {
+      key: "run",
+      value: function run() {
+        var _this3 = this;
+        var transInDuration = 1;
+        var transInDirection = 'E';
+        if (Boolean(this.options['transinduration'])) {
+          transInDuration = Number(this.options.transinduration);
+        }
+        if (Boolean(this.options['transindirection'])) {
+          transInDirection = this.options.transindirection;
+        }
+        var defaultTransInOptions = {
+          duration: transInDuration
+        };
+        var transIn = transitionElement('defaultIn', {
+          duration: defaultTransInOptions.duration
+        });
+        if (Boolean(this.options['transin'])) {
+          var transInName = this.options['transin'];
+          if (transInName === 'fly') {
+            transInName = "".concat(transInName, "In");
+            defaultTransInOptions.keyframes = flyTransitionKeyframes({
+              trans: 'in',
+              direction: transInDirection,
+              height: this.divHeight,
+              width: this.divWidth
+            });
+          }
+          transIn = transitionElement(transInName, defaultTransInOptions);
+        }
+        var showCurrentMedia = function showCurrentMedia() {
+          var mediaId = getMediaId({
+            mediaType: _this3.mediaType,
+            containerName: _this3.containerName
+          });
+          var $region = document.querySelector('#' + _this3.region.containerName);
+          var $media = $region !== null && $region.querySelector('.' + mediaId);
+          if (!$media) {
+            $media = getNewMedia();
+          }
+          console.debug('??? XLR.debug >> Media run - show current media:', {
+            inDOM: document.body.contains($media),
+            mediaId: mediaId,
+            $media: $media,
+            mediaObject: _this3
+          });
+          if ($media) {
+            if (_this3.mediaType === 'video') {
+              var _this3$player, _this3$player2, _this3$player3, _this3$player4;
+              console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::START', {
+                mediaPlayer: _this3.player,
+                isDisposed: (_this3$player = _this3.player) === null || _this3$player === void 0 ? void 0 : _this3$player.isDisposed(),
+                el: (_this3$player2 = _this3.player) === null || _this3$player2 === void 0 ? void 0 : _this3$player2.el_
+              });
+              // Make sure that vjs is available on the media
+              // Else, re-initialize
+              if (_this3.player !== undefined) {
+                var existingPlayer = videojs(mediaId);
+                if (existingPlayer) {
+                  _this3.player = existingPlayer;
+                } else {
+                  if (_this3.player.isDisposed_) {
+                    _this3.player = undefined;
+                    _this3.player = videojs(mediaId, _objectSpread2({}, vjsDefaultOptions({
+                      errorDisplay: _this3.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
+                      loop: _this3.loop
+                    })));
+                  }
                 }
-              case 6:
-              case "end":
-                return _context.stop();
+              }
+              console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::END', {
+                mediaPlayer: _this3.player,
+                isDisposed: (_this3$player3 = _this3.player) === null || _this3$player3 === void 0 ? void 0 : _this3$player3.isDisposed(),
+                el: (_this3$player4 = _this3.player) === null || _this3$player4 === void 0 ? void 0 : _this3$player4.el_
+              });
+              if (_this3.player !== undefined && _this3.player.el_ !== null) {
+                _this3.player.el().style.setProperty('visibility', 'visible');
+                _this3.player.el().style.setProperty('z-index', '10');
+                _this3.player.el().style.setProperty('opacity', '1');
+              }
+            } else {
+              console.debug('??? XLR.debug >> Media::run() > showCurrentMedia', {
+                mediaType: _this3.mediaType,
+                render: _this3.render,
+                $media: $media,
+                state: _this3.state
+              });
+              $media.style.setProperty('visibility', 'visible');
+              $media.style.setProperty('z-index', '10');
+              $media.style.setProperty('opacity', '1');
             }
-          }, _callee);
-        }))();
-      }
-    }
-    // Check if the media has fade-in/out transitions
-    if (Boolean(self.options['transin']) && Boolean(self.options['transinduration'])) {
-      var transInDuration = Number(self.options.transinduration);
-      var fadeInTrans = transitionElement('fadeIn', {
-        duration: transInDuration
-      });
-      $media.animate(fadeInTrans.keyframes, fadeInTrans.timing);
-    }
-    // Add media to the region
-    // Second media if exists, will be off-canvas
-    // All added media will be hidden by default
-    // It will start showing when region.nextMedia() function is called
-    // When there's only 1 item and loop = false, don't remove the item but leave it at its last state
-    // For image, and only 1 item, it should still have the transition for next state
-    // Add conditions for video duration being 0 or 1 and also the loop property
-    // For video url, we have to create a URL out of the XLF video URL
-    /**
-     * @DONE
-     * Case 1: Video duration = 0, this will play the video for its entire duration
-     * Case 2: Video duration is set > 0 and loop = false
-     * E.g. Set duration = 100s, video duration = 62s
-     * the video will play until 62s and will stop to its last frame until 100s
-     * After 100s, it will expire
-     * Case 3: Video duration is set > 0 and loop = true
-     * E.g. Set duration = 100s, video duration = 62s, loop = true
-     * the video will play until 62s and will loop through until the remaining 38s
-     * to complete the 100s set duration
-     */
-    // Add html node to media for
-    // self.html = $media;
-    return $media;
-  }
-  function prepareVideoMedia(media, region) {
-    var mediaId = getMediaId(media);
-    // Check if html is ready and is in the DOM
-    if (media.html !== null) {
-      // Clean up video.js instance
-      var existingPlayer = videojs.getPlayer(mediaId);
-      if (existingPlayer !== undefined) {
-        existingPlayer.dispose();
-        media.player = undefined;
-      }
-      var $layout = region.layout.html;
-      var layoutSelector = '#' + region.layout.containerName + '[data-sequence="' + region.layout.index + '"]';
-      var $layoutWithIndex = document.querySelector(layoutSelector);
-      var $region = document.querySelector('#' + region.containerName);
-      var mediaInRegion = $region === null || $region === void 0 ? void 0 : $region.querySelector('.' + mediaId);
-      console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
-        layoutSelector: layoutSelector,
-        $layoutWithIndex: $layoutWithIndex,
-        $region: $region,
-        mediaInRegion: mediaInRegion,
-        mediaHtml: media.html,
-        existingPlayer: existingPlayer,
-        mediaId: mediaId,
-        layoutInDOM: document.body.contains($layout)
-      });
-      if (!mediaInRegion) {
-        media.html = createMediaElement(media);
-      } else {
-        mediaInRegion.remove();
-        media.html = createMediaElement(media);
+            if (Boolean(_this3.options['transin'])) {
+              $media.animate(transIn.keyframes, transIn.timing);
+            }
+            if (!_this3.region.layout.isOverlay || _this3.region.layout.isOverlay && _this3.region.totalMediaObjects > 1) {
+              _this3.emitter.emit('start', _this3);
+            }
+          }
+        };
+        var getNewMedia = function getNewMedia() {
+          var $region = document.getElementById("".concat(_this3.region.containerName));
+          // This function is for checking whether
+          // the region still has to show a media item
+          // when another region is not finished yet
+          if (_this3.region.complete && !_this3.region.layout.allEnded) {
+            // Add currentMedia to the region
+            $region && $region.insertBefore(_this3.html, $region.lastElementChild);
+            return _this3.html;
+          }
+          return null;
+        };
+        showCurrentMedia();
       }
-      // Append fresh copy of the media into the region
-      $region !== null && $region.appendChild(media.html);
-      var isMediaInDOM = document.body.contains(media.html);
-      console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
-        isMediaInDOM: isMediaInDOM,
-        mediaHtml: media.html,
-        mediaId: mediaId
-      });
-      // Initialize video.js
-      media.player = videojs(mediaId, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-        errorDisplay: region.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-        loop: media.loop
-      }));
-      media.player.on('error', /*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
-          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
+    }, {
+      key: "stop",
+      value: function () {
+        var _stop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var $media;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
               case 0:
-                if (media.region.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                  playerReportFault('Video file not supported', media).then(function () {
-                    media.emitter.emit('end', media);
-                  });
+                $media = document.getElementById(getMediaId({
+                  mediaType: this.mediaType,
+                  containerName: this.containerName
+                }));
+                if ($media) {
+                  $media.style.display = 'none';
+                  $media.remove();
                 }
-              case 1:
+                // Release blob URLs for image media to prevent memory leaks on long-running signage
+                if (this.mediaType === 'image' && this.url) {
+                  BlobLoader.release(this.url);
+                }
+              case 3:
               case "end":
-                return _context2.stop();
+                return _context.stop();
             }
-          }, _callee2);
+          }, _callee, this);
         }));
-        return function (_x10) {
-          return _ref3.apply(this, arguments);
-        };
-      }());
-      media.player.el().style.setProperty('visibility', 'hidden');
-      media.player.el().style.setProperty('opacity', '0');
-      media.player.el().style.setProperty('z-index', '-99');
-    }
-  }
-  function prepareImageMedia(media, region) {
-    var mediaId = getMediaId(media);
-    media.html.style.setProperty('background-image', "url(".concat(media.url));
-    // Check if media in region
-    // Remove old copy before inserting fresh copy
-    var mediaInRegion = region.html.querySelector('.' + mediaId);
-    if (mediaInRegion) {
-      mediaInRegion.remove();
-    }
-    // Append media to its region
-    var $region = document.querySelector('#' + region.containerName);
-    $region !== null && $region.appendChild(media.html);
-  }
-  function prepareAudioMedia(media, region) {
-    var mediaId = getMediaId(media);
-    if (media.url !== null) {
-      media.html.src = media.url;
-    }
-    // Check if media in region
-    // Remove old copy before inserting fresh copy of the media
-    var mediaInRegion = region.html.querySelector('.' + mediaId);
-    if (mediaInRegion) {
-      mediaInRegion.remove();
-    }
-    // Append media to its region
-    var $region = document.querySelector('#' + region.containerName);
-    $region !== null && $region.appendChild(media.html);
-  }
-  function prepareHtmlMedia(media, region) {
-    // Set state as false ( for now )
-    media.ready = false;
-    if (media.html) {
-      var mediaId = getMediaId(media);
-      // Clean up old copy of the media
-      // before inserting fresh copy
-      var mediaInRegion = region.html.querySelector('.' + mediaId);
-      // Append iframe
-      media.html.innerHTML = '';
-      media.html.appendChild(media.iframe);
-      if (!mediaInRegion) {
-        // Add fresh copy of the media into the region
-        var $region = document.querySelector('#' + region.containerName);
-        $region !== null && $region.appendChild(media.html);
-        media.ready = true;
-      }
-    }
-  }
-  function playerReportFault(_x11, _x12) {
-    return _playerReportFault.apply(this, arguments);
-  }
-  function _playerReportFault() {
-    _playerReportFault = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(msg, media) {
-      var playerSW, hasSW;
-      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
-          case 0:
-            // Immediately expire media and report a fault
-            playerSW = PwaSW();
-            _context7.next = 3;
-            return playerSW.getSW();
-          case 3:
-            hasSW = _context7.sent;
-            if (hasSW) {
-              playerSW.postMsg({
-                type: 'MEDIA_FAULT',
-                code: 5002,
-                reason: msg,
-                mediaId: media.id,
-                regionId: media.region.id,
-                layoutId: media.region.layout.id,
-                date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-                // Temporary setting
-                expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
-              }).then(function () {
-                // We try to prepare next media if we have more than 1 media
-                if (media.region.totalMediaObjects > 1) {
-                  media.region.prepareNextMedia();
-                }
-              })["finally"](function () {
-                // Stopping media as we have reported the error as fault
-                console.debug('??? XLR.debug >> VideoMedia - Done reporting media fault', {
-                  mediaId: media.id,
-                  regionItems: media.region.totalMediaObjects
-                });
-              });
-            }
-          case 5:
-          case "end":
-            return _context7.stop();
+        function stop() {
+          return _stop.apply(this, arguments);
         }
-      }, _callee7);
-    }));
-    return _playerReportFault.apply(this, arguments);
-  }
-
-  const urlAlphabet =
-    'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
-  /* @ts-self-types="./index.d.ts" */
-  let nanoid = (size = 21) => {
-    let id = '';
-    let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
-    while (size--) {
-      id += urlAlphabet[bytes[size] & 63];
-    }
-    return id
-  };
+        return stop;
+      }()
+      /**
+       * Emits a command from the shell command widget.
+       *
+       * @param media
+       * @private
+       */
+    }, {
+      key: "emitCommand",
+      value: function emitCommand(media) {
+        if (media.mediaType !== 'shellcommand') {
+          return;
+        }
+        var options = media.options;
+        if (options.commandtype === 'storedCommand' && options.commandcode) {
+          console.debug('Media::Emitter > Shell Command - Calling commandCodeReceived event');
+          this.xlr.emitter.emit('commandCodeReceived', options.commandcode);
+          return;
+        }
+        var commandString = '';
+        if (options.useglobalcommand === '1') {
+          commandString = options.globalcommand || '';
+        } else {
+          // Use platform-specific command when available
+          if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
+            commandString = options.chromeoscommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.ANDROID) {
+            commandString = options.androidcommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.LINUX) {
+            commandString = options.linuxcommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.TIZEN) {
+            commandString = options.tizencommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.WEBOS) {
+            commandString = options.weboscommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.WINDOWS) {
+            commandString = options.windowscommand || '';
+          }
+          // Fall back to the global command if the platform-specific one
+          // is missing, not configured, or not supported yet
+          if (!commandString && options.globalcommand) {
+            commandString = options.globalcommand;
+          }
+        }
+        if (commandString) {
+          console.debug('Media::Emitter > Shell Command - Calling commandStringReceived event');
+          this.xlr.emitter.emit('commandStringReceived', commandString);
+          return;
+        }
+      }
+    }]);
+  }();
 
   var Region = /*#__PURE__*/function () {
     // ===== Constructor =====
@@ -74615,10 +74525,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         });
         // Prepare first media
         if (this.mediaObjects.length > 0) {
-          // Clean up region first
-          // if (this.html?.children.length > 0) {
-          //     this.html.innerHTML = '';
-          // }
           this.prepareFirstMedia();
         }
       }
@@ -74651,6 +74557,11 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       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);
       }
     }, {
@@ -74669,36 +74580,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
             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);
-          // }
         }
       }
     }, {
@@ -74712,116 +74593,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         this.layout.regions[this.index] = this;
         this.layout.regionExpired();
       }
-    }, {
-      key: "prepareVideo",
-      value: function () {
-        var _prepareVideo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(media, container) {
-          var _this2 = this;
-          var video;
-          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
-              case 0:
-                video = media.html;
-                if (media.url !== null) {
-                  video.src = media.url;
-                }
-                container !== null && container.appendChild(media.html);
-                return _context2.abrupt("return", new Promise(function (resolve) {
-                  var _media$videoHandler$p;
-                  var vidType = videoFileType(getFileExt(media.uri));
-                  // Initialize Video.js
-                  media.player = videojs(video, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-                    errorDisplay: _this2.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-                    loop: media.loop,
-                    sources: [{
-                      src: media.url,
-                      type: vidType
-                    }] // Adjust MIME type if dynamic
-                  }));
-                  media.player.el().style.setProperty('visibility', 'hidden');
-                  media.player.el().style.setProperty('z-index', '0');
-                  media.player.el().style.setProperty('opacity', '0');
-                  // Register video handler
-                  media.videoHandler = videoMediaHandler(media, _this2.xlr.config.platform);
-                  (_media$videoHandler$p = media.videoHandler.player) === null || _media$videoHandler$p === void 0 || _media$videoHandler$p.one('canplaythrough', function () {
-                    resolve();
-                  });
-                }));
-              case 4:
-              case "end":
-                return _context2.stop();
-            }
-          }, _callee2);
-        }));
-        function prepareVideo(_x3, _x4) {
-          return _prepareVideo.apply(this, arguments);
-        }
-        return prepareVideo;
-      }()
-    }, {
-      key: "prepareImage",
-      value: function () {
-        var _prepareImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(media, container) {
-          var blobUrl, img;
-          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-            while (1) switch (_context3.prev = _context3.next) {
-              case 0:
-                _context3.next = 2;
-                return BlobLoader.load(media.url);
-              case 2:
-                blobUrl = _context3.sent;
-                img = new Image(); // Wait for decoding to finish so there is no visual glitch
-                return _context3.abrupt("return", new Promise(function (resolve, reject) {
-                  img.onload = function () {
-                    return resolve();
-                  };
-                  img.onerror = function (e) {
-                    return reject(e);
-                  };
-                  img.src = blobUrl;
-                  if (media.html) {
-                    media.html.style.setProperty('background-image', "url(".concat(blobUrl, ")"));
-                  }
-                  container !== null && container.appendChild(media.html);
-                }));
-              case 5:
-              case "end":
-                return _context3.stop();
-            }
-          }, _callee3);
-        }));
-        function prepareImage(_x5, _x6) {
-          return _prepareImage.apply(this, arguments);
-        }
-        return prepareImage;
-      }()
-    }, {
-      key: "prepareIframe",
-      value: function prepareIframe(media, container) {
-        console.debug('??? XLR.debug >> Region prepareIframe - start');
-        return new Promise(function (resolve, reject) {
-          var iframe = media.iframe;
-          console.debug('??? XLR.debug >> Region prepareIframe - promise', {
-            iframe: iframe,
-            mediaType: media.mediaType,
-            container: container
-          });
-          if (iframe !== null) {
-            iframe.onload = function () {
-              return resolve();
-            };
-            iframe.onerror = function (e) {
-              return reject(e);
-            };
-            // Append iframe to html
-            if (media.html) {
-              media.html.innerHTML = '';
-              media.html.appendChild(iframe);
-            }
-            container !== null && container.appendChild(media.html);
-          }
-        });
-      }
     }, {
       key: "run",
       value: function run() {
@@ -74835,7 +74606,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     }, {
       key: "transitionNodes",
       value: function transitionNodes(oldMedia, newMedia) {
-        var _this3 = this;
+        var _this2 = this;
         var transOutDuration = 1;
         var transOutDirection = 'E';
         if (newMedia) {
@@ -74851,7 +74622,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           var transOut = transitionElement('defaultOut', {
             duration: defaultTransOutOptions.duration
           });
-          var transOutName;
+          var transOutName = '';
           if (oldMedia && Boolean(oldMedia.options['transout'])) {
             transOutName = oldMedia.options['transout'];
             if (transOutName === 'fly') {
@@ -74865,11 +74636,18 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
             }
             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() {
@@ -74908,7 +74686,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 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 () {
@@ -74934,9 +74712,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 } 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
                 }
               }
             }
@@ -75202,7 +74977,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
             };
           }
           // Only render webhook controller in CMS
-          if (this.parent.xlr.config.platform !== 'CMS') {
+          if (this.parent.xlr.config.platform !== exports.ConsumerPlatform.CMS) {
             this.$actionController.style.display = 'none';
             return;
           }
@@ -75224,10 +74999,16 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     }, {
       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",
@@ -75300,10 +75081,10 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       key: "runAction",
       value: function runAction(actionData, options) {
         if (actionData.actiontype == 'navLayout') {
-          if (this.parent.xlr.config.platform === 'CMS') {
+          if (this.parent.xlr.config.platform === exports.ConsumerPlatform.CMS) {
             // Open layout preview in a new tab
             this.openLayoutInNewTab(actionData.layoutcode, options);
-          } else if (this.parent.xlr.config.platform === 'chromeOS') {
+          } else if (this.parent.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
             // Set target layout as active layout
             this.openLayoutInPlayer(actionData.layoutcode, options);
           }
@@ -75465,6 +75246,12 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
               fetchOptions.headers = {
                 'Content-Type': 'text/xml'
               };
+            } else if (layoutOptions.platform === exports.ConsumerPlatform.ELECTRON) {
+              xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
+              fetchOptions.mode = 'no-cors';
+              fetchOptions.headers = {
+                'Content-Type': 'text/xml'
+              };
             } else if (layoutOptions.appHost !== null) {
               xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
             }
@@ -75638,8 +75425,11 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                   layout.state = exports.ELayoutState.PLAYED;
                 }
                 layout.done = true;
-                console.debug({
-                  $layout: $layout
+                console.debug('>>> XLR.debug Layout end emitted > Layout ID > ', {
+                  $layout: $layout,
+                  layoutId: layout.id,
+                  isOverlay: layout.isOverlay,
+                  isInterrupt: layout.isInterrupt()
                 });
                 if ($layout !== null) {
                   $layout.style.setProperty('visibility', 'hidden');
@@ -75794,9 +75584,10 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         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, "\")"));
@@ -76061,7 +75852,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
               case 0:
                 $previewSplash.classList.add('preview-splash');
                 // Don't show Xibo logo on CMS Preview
-                if (config && config.platform !== 'CMS') {
+                if (config && config.platform !== exports.ConsumerPlatform.CMS) {
                   splashScreenImg = img$1;
                   if ((_config$icons = config.icons) !== null && _config$icons !== void 0 && _config$icons.splashScreen && config.icons.splashScreen.length > 0) {
                     splashScreenImg = config.icons.splashScreen;
@@ -76079,7 +75870,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 $previewLoader.classList.add('preview-loader');
                 $previewLoaderCaption.classList.add('preview-loaderCaption');
                 // Show loader bar and text on CMS Preview
-                if (config && config.platform === 'CMS') {
+                if (config && config.platform === exports.ConsumerPlatform.CMS) {
                   $previewLoader.style.setProperty('background-image', "url(".concat(img, ")"));
                   $previewLoaderCaption.innerHTML = '<p>Loading Layout...</p>';
                 }
@@ -76373,12 +76164,12 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           $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
@@ -76726,8 +76517,10 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
               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) {
@@ -76736,6 +76529,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 _nextLayoutIndex = _currentLayoutIndex + 1;
               }
               _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+              _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
             } else {
               _nextLayout = _currentLayout;
             }
@@ -76748,20 +76542,25 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                   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);
             }
           }
         }
@@ -76769,17 +76568,22 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         // 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) {
@@ -76796,7 +76600,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       };
     };
     xlrObject.getLayout = function (inputLayout) {
-      var isCMS = this.config.platform === 'CMS';
+      var isCMS = this.config.platform === exports.ConsumerPlatform.CMS;
       if (!isCMS && Object.keys(this.uniqueLayouts).length === 0) {
         return;
       }
@@ -76813,6 +76617,11 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
             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;
         }
@@ -76941,9 +76750,9 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
               self = this; // Compose layout props first
               // Clone options to avoid mutating the shared xlfUrl template
               newOptions = _objectSpread2({}, props.options);
-              if (self.config.platform === 'CMS' && inputLayout && Boolean(inputLayout.layoutId)) {
+              if (self.config.platform === exports.ConsumerPlatform.CMS && inputLayout && Boolean(inputLayout.layoutId)) {
                 newOptions.xlfUrl = newOptions.xlfUrl.replace(':layoutId', String(inputLayout.layoutId));
-              } else if (self.config.platform === 'chromeOS' && inputLayout !== undefined) {
+              } else if ((self.config.platform === exports.ConsumerPlatform.CHROMEOS || self.config.platform === exports.ConsumerPlatform.ELECTRON) && inputLayout !== undefined) {
                 newOptions.xlfUrl = inputLayout.path;
               }
               if (!(inputLayout && inputLayout.layoutNode === undefined)) {
@@ -77025,7 +76834,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
               _nextLayout = nextLayout;
             case 2:
               if (!(_nextLayout && _nextLayout.xlfString === '')) {
-                _context16.next = 16;
+                _context16.next = 17;
                 break;
               }
               // Remove skipped layout
@@ -77037,25 +76846,26 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 _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();
           }
@@ -77171,13 +76981,16 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
   exports.flyInElem = flyInElem;
   exports.flyOutElem = flyOutElem;
   exports.flyTransitionKeyframes = flyTransitionKeyframes;
+  exports.getAllAttributes = getAllAttributes;
   exports.getDataBlob = getDataBlob;
   exports.getFileExt = getFileExt;
   exports.getIndexByLayoutId = getIndexByLayoutId;
   exports.getLayout = getLayout;
+  exports.getLayoutIndexByLayoutId = getLayoutIndexByLayoutId;
   exports.getMediaId = getMediaId;
   exports.getXlf = getXlf;
   exports.hasDefaultOnly = hasDefaultOnly;
+  exports.hasSspLayout = hasSspLayout;
   exports.initRenderingDOM = initRenderingDOM;
   exports.initialLayout = initialLayout;
   exports.initialMedia = initialMedia;
@@ -77186,11 +76999,15 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
   exports.isEmpty = isEmpty;
   exports.isLayoutValid = isLayoutValid;
   exports.nextId = nextId;
+  exports.playerReportFault = playerReportFault;
   exports.preloadMediaBlob = preloadMediaBlob;
+  exports.prepareAudioMedia = prepareAudioMedia;
+  exports.prepareHtmlMedia = prepareHtmlMedia;
+  exports.prepareImageMedia = prepareImageMedia;
+  exports.prepareVideoMedia = prepareVideoMedia;
   exports.setExpiry = setExpiry;
   exports.transitionElement = transitionElement;
   exports.videoFileType = videoFileType;
-  exports.videoMediaHandler = videoMediaHandler;
   exports.vjsDefaultOptions = vjsDefaultOptions;
 
   Object.defineProperty(exports, '__esModule', { value: true });