@xibosignage/xibo-layout-renderer 1.0.23 → 1.0.24

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

@@ -72517,6 +72517,269 @@ if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
   videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
 }
 
+function composeVideoSource($media, media) {
+  // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
+  var vidType = videoFileType(getFileExt(media.uri));
+  // Only add one source per type
+  if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
+    var $videoSource = document.createElement('source');
+    $videoSource.src = media.url;
+    $videoSource.type = vidType;
+    $media.insertBefore($videoSource, $media.lastElementChild);
+  }
+  return $media;
+}
+var defaultVjsOpts = {
+  autoplay: false,
+  muted: true,
+  // Start muted to allow autoplay policies
+  preload: 'auto',
+  controls: false
+};
+var vjsDefaultOptions = function vjsDefaultOptions(opts) {
+  return _objectSpread2({
+    controls: false,
+    preload: 'auto',
+    autoplay: false,
+    muted: true
+  }, opts);
+};
+var reportToPlayerPlatform = [exports.ConsumerPlatform.CHROMEOS, exports.ConsumerPlatform.ELECTRON];
+function VideoMedia(media, xlr) {
+  var mediaId = getMediaId(media);
+  var videoPlayer = {
+    duration: 0,
+    init: function init() {
+      var _this = this;
+      var triggerTimeUpdate = false; // Used for media.duration === 0
+      videoPlayer.duration = media.duration;
+      var vjsPlayer = videojs(mediaId);
+      if (vjsPlayer) {
+        vjsPlayer.on('loadstart', function () {
+          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
+        });
+        vjsPlayer.on('loadedmetadata', function () {
+          if (media.duration === 0) {
+            videoPlayer.duration = vjsPlayer.duration();
+          }
+          console.debug('??? XLR.debug >> VideoMedia: loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
+        });
+        vjsPlayer.on('canplay', function () {
+          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+        });
+        vjsPlayer.on('playing', function () {
+          // Update duration
+          if (videoPlayer.duration === 0) {
+            videoPlayer.duration = vjsPlayer.duration();
+          }
+          console.debug('??? XLR.debug >> VideoMedia: playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
+          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
+        });
+        // @NOTE: When video is paused due to fail in unmuting the video
+        // and video has media.duration = 0, the video will stay paused and the video cycle won't end
+        // @TODO: Add timer when video is paused due to unmuting fail and duration that is equal to 0
+        // @NOTE: The pause issue when unmuting the video is mainly on a browser level.
+        // Please visit https://developer.chrome.com/blog/autoplay/ for more info.
+        vjsPlayer.ready(function () {
+          // Add guard making sure that video element is present
+          var videoElem = document.querySelector(".media--item.".concat(mediaId));
+          if (!document.body.contains(videoElem)) {
+            media.emitter.emit('cancelled', media);
+            return;
+          }
+          if (vjsPlayer !== undefined) {
+            vjsPlayer.muted(true);
+            // Race promise between a 0.5s play and a 5s skip
+            Promise.race([new Promise(function (resolve, reject) {
+              return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                return _regeneratorRuntime().wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Trying to force play after 0.1 seconds"));
+                      // Try to force play here
+                      _context.prev = 1;
+                      if (!(vjsPlayer.currentTime() === 0)) {
+                        _context.next = 6;
+                        break;
+                      }
+                      // Set video mute/unmute based on setting once playing
+                      vjsPlayer.muted(media.muted);
+                      _context.next = 6;
+                      return vjsPlayer.play();
+                    case 6:
+                      // Resolve if play works
+                      resolve(true);
+                      _context.next = 12;
+                      break;
+                    case 9:
+                      _context.prev = 9;
+                      _context.t0 = _context["catch"](1);
+                      // Reject race if play fails
+                      reject('Play failed');
+                    case 12:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee, null, [[1, 9]]);
+              })), 100);
+            }), new Promise(function (_, reject) {
+              return setTimeout(function () {
+                return reject('Timeout');
+              }, 5000);
+            })]).then(function () {
+              console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay started"));
+            })["catch"]( /*#__PURE__*/function () {
+              var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(error) {
+                return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      if (error === 'Timeout') {
+                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                        _this.stop();
+                      } else {
+                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                        if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                          playerReportFault('Media autoplay error', media).then(function () {
+                            _this.stop();
+                          });
+                        }
+                      }
+                    case 1:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }, _callee2);
+              }));
+              return function (_x) {
+                return _ref2.apply(this, arguments);
+              };
+            }());
+            // Optional: Reset the flag automatically when a new video loads or the source changes
+            vjsPlayer.on('loadstart', function () {
+              triggerTimeUpdate = false;
+            });
+            if (media.duration === 0) {
+              vjsPlayer.on('timeupdate', function () {
+                var preloadBufferTimeMs = 2000;
+                var mediaDuration = vjsPlayer.duration();
+                var currentTime = vjsPlayer.currentTime();
+                var regionHasMultipleMedia = media.region.totalMediaObjects > 1;
+                var remainingTimeMs = 0;
+                if (mediaDuration !== undefined && currentTime !== undefined) {
+                  remainingTimeMs = (mediaDuration - currentTime) * 1000;
+                }
+                if (regionHasMultipleMedia && remainingTimeMs === 0 && !triggerTimeUpdate) {
+                  // We don't have data yet and we must immediately prepare next media
+                  media.region.prepareNextMedia();
+                } else if (regionHasMultipleMedia && remainingTimeMs <= preloadBufferTimeMs && !triggerTimeUpdate) {
+                  // Check if remaining time is less than preloadBufferTimeMs and the action hasn't been triggered yet
+                  console.log('Less than preloadBufferTimeMs remaining! Do something now.');
+                  // Prepare next media in region
+                  media.region.prepareNextMedia();
+                  triggerTimeUpdate = true; // Set the flag to prevent re-triggering
+                }
+                // Reset the flag if the user seeks back to a point where more than preloadBufferTimeMs remain
+                if (remainingTimeMs > preloadBufferTimeMs) {
+                  triggerTimeUpdate = false;
+                }
+              });
+            }
+          }
+        });
+        vjsPlayer.on('error', /*#__PURE__*/function () {
+          var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(err) {
+            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+              while (1) switch (_context3.prev = _context3.next) {
+                case 0:
+                  console.debug("??? XLR.debug >> VideoMedia: Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
+                  if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                    playerReportFault('Video file source not supported', media).then(function () {
+                      _this.stop();
+                    });
+                  } else {
+                    // End media after 5 seconds
+                    setTimeout(function () {
+                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
+                      _this.stop();
+                    }, 5000);
+                  }
+                case 2:
+                case "end":
+                  return _context3.stop();
+              }
+            }, _callee3);
+          }));
+          return function (_x2) {
+            return _ref3.apply(this, arguments);
+          };
+        }());
+        if (media.duration === 0) {
+          vjsPlayer.on('ended', function () {
+            console.debug("??? XLR.debug >> VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+            _this.stop();
+          });
+        }
+      }
+    },
+    stop: function stop() {
+      var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var vjsPlayer = media.player;
+      console.debug('??? XLR.debug >> VideoMedia::stop', {
+        vjsPlayer: vjsPlayer,
+        isDisposed: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.isDisposed_,
+        el: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.el_
+      });
+      // Expire the media and dispose the video
+      if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
+        if (!disposeOnly) {
+          media.emitter.emit('end', media);
+        }
+        vjsPlayer.dispose();
+        // Clear up media player
+        media.player = undefined;
+      } else {
+        media.player = undefined;
+        media.html = null;
+        media.emitter.emit('end', media);
+      }
+    },
+    play: function play() {
+      var _this2 = this;
+      var vjsPlayer = videojs(mediaId);
+      if (vjsPlayer !== undefined) {
+        var _vjsPlayer$play;
+        (_vjsPlayer$play = vjsPlayer.play()) === null || _vjsPlayer$play === void 0 || _vjsPlayer$play["catch"]( /*#__PURE__*/function () {
+          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(error) {
+            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+              while (1) switch (_context4.prev = _context4.next) {
+                case 0:
+                  if (error === 'Timeout') {
+                    console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                    _this2.stop();
+                  } else {
+                    console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                    if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                      playerReportFault('Media autoplay error', media).then(function () {
+                        _this2.stop();
+                      });
+                    }
+                  }
+                case 1:
+                case "end":
+                  return _context4.stop();
+              }
+            }, _callee4);
+          }));
+          return function (_x3) {
+            return _ref4.apply(this, arguments);
+          };
+        }());
+      }
+    }
+  };
+  return videoPlayer;
+}
+
 /*
  * Copyright (C) 2024 Xibo Signage Ltd
  *
@@ -72751,65 +73014,6 @@ var flyTransitionKeyframes = function flyTransitionKeyframes(params) {
   return keyframes;
 };
 
-function AudioMedia(media) {
-  var audioMediaObject = {
-    init: function init() {
-      var $audioMedia = document.getElementById(getMediaId(media));
-      var $playBtn = null;
-      if ($audioMedia) {
-        $audioMedia.onloadstart = function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-        };
-        $audioMedia.onloadeddata = function () {
-          if ($audioMedia.readyState >= 2) {
-            console.debug("".concat(capitalizeStr(media.mediaType), " data for media > ").concat(media.id, " has been fully loaded . . ."));
-          }
-        };
-        $audioMedia.oncanplay = function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-        };
-        $audioMedia.onplaying = function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-          if ($playBtn !== null) {
-            $playBtn.remove();
-          }
-        };
-        var audioPlayPromise = $audioMedia.play();
-        if (audioPlayPromise !== undefined) {
-          audioPlayPromise.then(function () {
-            console.debug('autoplay started . . .');
-            // Autoplay restarted
-          })["catch"](function (error) {
-            if (error.name === 'NotAllowedError') {
-              var _$audioMedia$parentNo;
-              // Let's show a play audio button
-              $playBtn = document.createElement('button');
-              $playBtn.classList.add('play-audio-btn');
-              $playBtn.textContent = 'Play Audio';
-              $playBtn.addEventListener('click', function () {
-                $audioMedia.muted = false;
-                $audioMedia.play();
-              });
-              (_$audioMedia$parentNo = $audioMedia.parentNode) === null || _$audioMedia$parentNo === void 0 || _$audioMedia$parentNo.insertBefore($playBtn, $audioMedia.nextSibling);
-            }
-          });
-        }
-        if (media.duration === 0) {
-          $audioMedia.ondurationchange = function () {
-            console.debug('Showing Media ' + media.id + ' for ' + $audioMedia.duration + 's of Region ' + media.region.regionId);
-          };
-          $audioMedia.onended = function () {
-            var _media$emitter;
-            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-            (_media$emitter = media.emitter) === null || _media$emitter === void 0 || _media$emitter.emit('end', media);
-          };
-        }
-      }
-    }
-  };
-  return audioMediaObject;
-}
-
 var BlobLoader = /*#__PURE__*/function () {
   function BlobLoader() {
     _classCallCheck(this, BlobLoader);
@@ -72951,1102 +73155,253 @@ var PreviewTranslations;
   PreviewTranslations["target"] = "Target";
 })(PreviewTranslations || (PreviewTranslations = {}));
 
-function composeVideoSource($media, media) {
-  // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
-  var vidType = videoFileType(getFileExt(media.uri));
-  // Only add one source per type
-  if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
-    var $videoSource = document.createElement('source');
-    $videoSource.src = media.url;
-    $videoSource.type = vidType;
-    $media.insertBefore($videoSource, $media.lastElementChild);
+function nextId(options) {
+  if (options.idCounter > 500) {
+    options.idCounter = 0;
   }
-  return $media;
+  options.idCounter = options.idCounter + 1;
+  return options.idCounter;
 }
-var defaultVjsOpts = {
-  autoplay: false,
-  muted: true,
-  // Start muted to allow autoplay policies
-  preload: 'auto',
-  controls: false
+var getMediaId = function getMediaId(_ref) {
+  var mediaType = _ref.mediaType,
+    containerName = _ref.containerName;
+  var mediaId = containerName;
+  if (mediaType === 'video') {
+    mediaId = mediaId + '-vid';
+  } else if (mediaType === 'audio') {
+    mediaId = mediaId + '-aud';
+  }
+  return mediaId;
 };
-var vjsDefaultOptions = function vjsDefaultOptions(opts) {
-  return _objectSpread2({
-    controls: false,
-    preload: 'auto',
-    autoplay: false,
-    muted: true
-  }, opts);
+var capitalizeStr = function capitalizeStr(inputStr) {
+  if (inputStr === null) {
+    return '';
+  }
+  return String(inputStr).charAt(0).toUpperCase() + String(inputStr).substring(1);
 };
-function videoMediaHandler(media, platform) {
-  var videoPlayer = {
-    player: undefined,
-    duration: 0,
-    stop: function stop(disposeOnly) {}
-  };
-  var playerReportFault = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(msg) {
-      var playerSW, hasSW;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            // Immediately expire media and report a fault
-            playerSW = PwaSW();
-            _context.next = 3;
-            return playerSW.getSW();
-          case 3:
-            hasSW = _context.sent;
-            media.region.layout.state = exports.ELayoutState.ERROR;
-            media.region.layout.errorCode = 405;
-            if (hasSW) {
-              playerSW.postMsg({
-                type: 'MEDIA_FAULT',
-                code: 5002,
-                reason: msg,
-                mediaId: media.id,
-                regionId: media.region.id,
-                layoutId: media.region.layout.id,
-                date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-                // Temporary setting
-                expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
-              })["finally"](function () {
-                videoPlayer.stop();
-              });
-            } else {
-              videoPlayer.stop();
+function getDataBlob(_x, _x2) {
+  return _getDataBlob.apply(this, arguments);
+}
+function _getDataBlob() {
+  _getDataBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(src, jwtToken) {
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          return _context3.abrupt("return", fetch(src, {
+            method: 'GET',
+            headers: {
+              'X-PREVIEW-JWT': jwtToken || ''
             }
-          case 7:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function playerReportFault(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  videoPlayer.duration = media.duration;
-  if (media.player) {
-    videoPlayer.player = media.player;
-  } else {
-    // Load on demand if it has not been cached
-    var vjsElem = media.html;
-    var vidType = videoFileType(getFileExt(media.uri));
-    if (vjsElem === null) {
-      // Use media containerName instead for VJS id
-      vjsElem = media.containerName;
-    }
-    videoPlayer.player = videojs(vjsElem, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-      sources: [{
-        src: media.url,
-        type: vidType
-      }]
-    }));
-    media.player = videoPlayer.player;
-  }
-  videoPlayer.stop = function () {
-    var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    // Expire the media and dispose the video
-    if (videoPlayer.player !== undefined) {
-      if (!disposeOnly) {
-        media.emitter.emit('end', media);
+          }).then(function (res) {
+            return res.blob();
+          }).then(function (blob) {
+            return new Promise(function (res, rej) {
+              var reader = new FileReader();
+              reader.onloadend = function () {
+                return res(reader.result);
+              };
+              reader.onerror = rej;
+              reader.readAsDataURL(blob);
+            });
+          }));
+        case 1:
+        case "end":
+          return _context3.stop();
       }
-      // Dispose player
-      videoPlayer.player.dispose();
-      // Clear up media player
-      videoPlayer.player = undefined;
-      media.player = undefined;
-    }
-  };
-  videoPlayer.player.on('loadstart', function () {
-    console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-  });
-  videoPlayer.player.one('loadedmetadata', function () {
-    if (media.duration === 0 && videoPlayer.player !== undefined) {
-      videoPlayer.duration = videoPlayer.player.duration();
-    }
-    console.debug('??? XLR.debug >> VideoMedia - loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
-  });
-  videoPlayer.player.one('playing', function () {
-    console.debug('??? XLR.debug >> VideoMedia - playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
-    console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-    videoPlayer.player && videoPlayer.player.muted(media.muted);
-  });
-  videoPlayer.player.on('error', /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            console.debug("??? XLR.debug >> VideoMedia - Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-            if (!(platform === 'chromeOS')) {
-              _context2.next = 6;
-              break;
+    }, _callee3);
+  }));
+  return _getDataBlob.apply(this, arguments);
+}
+function preloadMediaBlob(_x3, _x4, _x5) {
+  return _preloadMediaBlob.apply(this, arguments);
+}
+function _preloadMediaBlob() {
+  _preloadMediaBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(src, type, jwtToken) {
+    var res, blob, data;
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _context4.next = 2;
+          return fetch(src, {
+            method: 'GET',
+            headers: {
+              'X-PREVIEW-JWT': jwtToken || ''
             }
-            _context2.next = 4;
-            return playerReportFault('Video file source not supported');
-          case 4:
-            _context2.next = 7;
+          });
+        case 2:
+          res = _context4.sent;
+          blob = new Blob();
+          if (!(type === 'image')) {
+            _context4.next = 8;
             break;
-          case 6:
-            // End media after 5 seconds
-            setTimeout(function () {
-              console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
-              videoPlayer.stop();
-            }, 5000);
-          case 7:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function (_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }());
-  // Register on.("end") when media.duration is 0
-  if (media.duration === 0) {
-    videoPlayer.player.on('ended', function () {
-      console.debug("??? XLR.debug >> VideoMedia - onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-      videoPlayer.stop();
-    });
-  }
-  return videoPlayer;
-}
-function VideoMedia(media, xlr) {
-  var mediaId = getMediaId(media);
-  var videoPlayer = {
-    duration: 0,
-    init: function init() {
-      var _this = this;
-      var triggerTimeUpdate = false; // Used for media.duration === 0
-      videoPlayer.duration = media.duration;
-      var vjsPlayer = videojs(mediaId);
-      if (vjsPlayer) {
-        vjsPlayer.on('loadstart', function () {
-          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-        });
-        vjsPlayer.on('loadedmetadata', function () {
-          if (media.duration === 0) {
-            videoPlayer.duration = vjsPlayer.duration();
           }
-          console.debug('??? XLR.debug >> VideoMedia: loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
-        });
-        vjsPlayer.on('canplay', function () {
-          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-        });
-        vjsPlayer.on('playing', function () {
-          // Update duration
-          if (videoPlayer.duration === 0) {
-            videoPlayer.duration = vjsPlayer.duration();
+          blob = new Blob();
+          _context4.next = 19;
+          break;
+        case 8:
+          if (!(type === 'video')) {
+            _context4.next = 14;
+            break;
           }
-          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;
+          _context4.next = 11;
+          return res.blob();
+        case 11:
+          blob = _context4.sent;
+          _context4.next = 19;
+          break;
+        case 14:
+          if (!(type === 'audio')) {
+            _context4.next = 19;
+            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;
-                }
-              });
-            }
-          }
-        });
-        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'
   };
-  return videoPlayer;
+  if (Boolean(validAudioTypes[str])) {
+    return validAudioTypes[str];
+  }
+  return undefined;
 }
-
-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);
-    _defineProperty(this, "html", null);
-    _defineProperty(this, "id", '');
-    _defineProperty(this, "idCounter", 0);
-    _defineProperty(this, "iframe", null);
-    _defineProperty(this, "iframeName", '');
-    _defineProperty(this, "index", 0);
-    _defineProperty(this, "loadIframeOnRun", false);
-    _defineProperty(this, "loop", false);
-    _defineProperty(this, "mediaId", '');
-    _defineProperty(this, "mediaType", '');
-    _defineProperty(this, "muted", false);
-    _defineProperty(this, "options", {});
-    _defineProperty(this, "player", undefined);
-    _defineProperty(this, "ready", true);
-    _defineProperty(this, "region", {});
-    _defineProperty(this, "render", 'html');
-    _defineProperty(this, "schemaVersion", '1');
-    _defineProperty(this, "singlePlay", false);
-    _defineProperty(this, "state", MediaState.IDLE);
-    _defineProperty(this, "tempSrc", '');
-    _defineProperty(this, "timeoutId", setTimeout(function () {}, 0));
-    _defineProperty(this, "type", '');
-    _defineProperty(this, "uri", '');
-    _defineProperty(this, "url", null);
-    _defineProperty(this, "useDuration", false);
-    _defineProperty(this, "xml", null);
-    _defineProperty(this, "videoHandler", void 0);
-    _defineProperty(this, "mediaTimer", void 0);
-    _defineProperty(this, "mediaTimeCount", 0);
-    _defineProperty(this, "xlr", {});
-    _defineProperty(this, "statsBC", new BroadcastChannel('statsBC'));
-    _defineProperty(this, "hasCommandExecuted", void 0);
-    this.region = region;
-    this.id = mediaId;
-    this.mediaId = this.id;
-    this.xml = xml;
-    this.options = options;
-    this.xlr = xlr;
-    this.fileId = ((_this$xml = this.xml) === null || _this$xml === void 0 ? void 0 : _this$xml.getAttribute('fileId')) || '';
-    this.idCounter = nextId(this.options);
-    this.containerName = "M-".concat(this.id, "-").concat(this.idCounter);
-    this.iframeName = "".concat(this.containerName, "-iframe");
-    this.mediaType = ((_this$xml2 = this.xml) === null || _this$xml2 === void 0 ? void 0 : _this$xml2.getAttribute('type')) || '';
-    this.render = ((_this$xml3 = this.xml) === null || _this$xml3 === void 0 ? void 0 : _this$xml3.getAttribute('render')) || '';
-    this.duration = parseInt((_this$xml4 = this.xml) === null || _this$xml4 === void 0 ? void 0 : _this$xml4.getAttribute('duration')) || 0;
-    this.enableStat = Boolean(((_this$xml5 = this.xml) === null || _this$xml5 === void 0 ? void 0 : _this$xml5.getAttribute('enableStat')) || false);
-    this.hasCommandExecuted = false;
-    this.on('start', function (media) {
-      if (media.state === MediaState.PLAYING) return;
-      media.state = MediaState.PLAYING;
-      if (media.mediaType === 'video') {
-        var videoMedia = VideoMedia(media, _this.xlr);
-        videoMedia.init();
-        if (media.duration > 0) {
-          _this.startMediaTimer(media);
-        }
-      } else if (media.mediaType === 'audio') {
-        AudioMedia(media).init();
-        if (media.duration > 0) {
-          _this.startMediaTimer(media);
-        }
-      } else if (media.mediaType === 'shellcommand') {
-        if (_this.hasCommandExecuted && !_this.loop) {
-          return;
-        }
-        _this.hasCommandExecuted = true;
-        _this.emitCommand(media);
-        if (media.duration > 0) {
-          _this.startMediaTimer(media);
-        }
-      } else {
-        _this.startMediaTimer(media);
-      }
-      // Check if stats are enabled for the layout
-      if (media.enableStat) {
-        _this.statsBC.postMessage({
-          action: 'START_STAT',
-          mediaId: parseInt(media.id),
-          layoutId: media.region.layout.id,
-          scheduleId: media.region.layout.scheduleId,
-          type: 'media'
-        });
-      }
-      // Emit media/widget start event
-      console.debug('Media::Emitter > Start - Calling widgetStart event');
-      _this.xlr.emitter.emit('widgetStart', parseInt(media.id));
-    });
-    this.on('end', function (media) {
-      if (media.state === MediaState.ENDED) return;
-      media.state = MediaState.ENDED;
-      if (_this.mediaTimer) {
-        clearInterval(_this.mediaTimer);
-        _this.mediaTimeCount = 0;
-      }
-      // Check if stats are enabled for the layout
-      if (media.enableStat) {
-        _this.statsBC.postMessage({
-          action: 'END_STAT',
-          mediaId: parseInt(media.id),
-          layoutId: media.region.layout.id,
-          scheduleId: media.region.layout.scheduleId,
-          type: 'media'
-        });
-      }
-      // Emit media/widget end event
-      console.debug('Media::Emitter > End - Calling widgetEnd event', {
-        mediaId: media.id,
-        regionId: media.region.id,
-        layoutId: media.region.layout.id
-      });
-      _this.xlr.emitter.emit('widgetEnd', parseInt(media.id));
-      media.region.playNextMedia();
-    });
-    this.on('cancelled', function (media) {
-      if (media.state === MediaState.CANCELLED) return;
-      media.state = MediaState.CANCELLED;
-      if (_this.mediaTimer) {
-        clearInterval(_this.mediaTimer);
-        _this.mediaTimeCount = 0;
-      }
-      // Check if stats are enabled for the layout
-      if (media.enableStat) {
-        _this.statsBC.postMessage({
-          action: 'END_STAT',
-          mediaId: parseInt(media.id),
-          layoutId: media.region.layout.id,
-          scheduleId: media.region.layout.scheduleId,
-          type: 'media'
-        });
-      }
-      // Emit media/widget end event
-      console.debug('Media::Emitter > End - Calling widgetEnd event', {
-        mediaId: media.id,
-        regionId: media.region.id,
-        layoutId: media.region.layout.id
-      });
-      _this.xlr.emitter.emit('widgetEnd', parseInt(media.id));
-      media.region.playNextMedia();
-    });
-    // Initialize Media object
-    this.init();
+function videoFileType(str) {
+  var validVideoTypes = {
+    'mp4': 'video/mp4',
+    'webm': 'video/webm',
+    'wmv': 'video/x-ms-wmv'
+  };
+  if (Boolean(validVideoTypes[str])) {
+    return validVideoTypes[str];
   }
-  return _createClass(Media, [{
-    key: "startMediaTimer",
-    value: function startMediaTimer(media) {
-      var _this2 = this;
-      var preloadTimeMs = 2000;
-      var preloadTimeBufferMs = media.duration * 1000 - preloadTimeMs;
-      var isPreparingNextMedia = false;
-      if (preloadTimeBufferMs < preloadTimeMs) {
-        // Use media duration when preloadTimeBufferMs is less than the preloadTimeMs
-        preloadTimeBufferMs = media.duration * 1000;
-      }
-      this.mediaTimer = setInterval(function () {
-        _this2.mediaTimeCount++;
-        var elapsedTimeMs = _this2.mediaTimeCount * 1000;
-        // prepare region's next media
-        if (_this2.region.totalMediaObjects > 1 && elapsedTimeMs >= preloadTimeBufferMs && !isPreparingNextMedia) {
-          isPreparingNextMedia = true;
-          _this2.region.prepareNextMedia();
-        }
-        if (_this2.mediaTimeCount > media.duration) {
-          console.debug('??? XLR.debug >> Media::startMediaTimer: emit>end: on media ' + media.id + ' of Region ' + media.region.regionId);
-          console.debug('??? XLR.debug >> Media::startMediaTimer - Media::Emitter > End', {
-            currentLayout: _this2.xlr.currentLayout,
-            media: media,
-            region: media.region,
-            layout: media.region.layout
-          });
-          media.emitter.emit('end', media);
-          if (media.mediaType === 'video') {
-            // Dispose the video media
-            console.debug("??? XLR.debug >> VideoMedia::stop - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-            if (media.player !== undefined) {
-              VideoMedia(media, _this2.xlr).stop(true);
-            }
-          }
-        }
-      }, 1000);
-      console.debug('startMediaTimer: Showing Media ' + media.id + ' for ' + media.duration + 's of Region ' + media.region.regionId);
-    }
-  }, {
-    key: "on",
-    value: function on(event, callback) {
-      return this.emitter.on(event, callback);
+  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;
     }
-  }, {
-    key: "init",
-    value: function init() {
-      var _this$xml6;
-      var mediaOptions = (_this$xml6 = this.xml) === null || _this$xml6 === void 0 ? void 0 : _this$xml6.getElementsByTagName('options');
-      if (mediaOptions) {
-        for (var _i = 0, _Array$from = Array.from(mediaOptions); _i < _Array$from.length; _i++) {
-          var _options = _Array$from[_i];
-          // Get options
-          var _mediaOptions = _options.children;
-          for (var _i2 = 0, _Array$from2 = Array.from(_mediaOptions); _i2 < _Array$from2.length; _i2++) {
-            var mediaOption = _Array$from2[_i2];
-            this.options[mediaOption.nodeName.toLowerCase()] = mediaOption.textContent;
-          }
-        }
-      }
-      // Check for options.uri and add it to media
-      if (Boolean(this.options['uri'])) {
-        this.uri = this.options['uri'];
-      }
-      // Show in fullscreen?
-      if (this.options.showfullscreen === "1") {
-        // Set dimensions as the layout ones
-        this.divWidth = this.region.layout.sWidth;
-        this.divHeight = this.region.layout.sHeight;
-      } else {
-        // Set dimensions as the region ones
-        this.divWidth = this.region.sWidth;
-        this.divHeight = this.region.sHeight;
-      }
-      var resourceUrlParams = _objectSpread2(_objectSpread2({}, this.xlr.config.config), {}, {
-        regionOptions: this.region.options,
-        layoutId: this.region.layout.layoutId,
-        regionId: this.region.id,
-        mediaId: this.id,
-        fileId: this.fileId,
-        scaleFactor: this.region.layout.scaleFactor,
-        uri: this.uri,
-        isGlobalContent: this.mediaType === 'global',
-        isImageOrVideo: this.mediaType === 'image' || this.mediaType === 'video'
-      });
-      if (this.mediaType === 'image' || this.mediaType === 'video') {
-        resourceUrlParams.mediaType = this.mediaType;
-      }
-      var tmpUrl = '';
-      if (this.xlr.config.platform === exports.ConsumerPlatform.CMS) {
-        tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
-      } else if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-        tmpUrl = composeResourceUrl(this.xlr.config, resourceUrlParams);
-        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);
+  } 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;
     }
-  }, {
-    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;
+  } else if (!Boolean(params['mediaType'])) {
+    resourceUrl += '&scale_override=' + params.scaleFactor;
   }
-  options.idCounter = options.idCounter + 1;
-  return options.idCounter;
+  return resourceUrl;
 }
-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 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 _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 composeMediaUrl(params) {
+  return '/xmds.php?file=' + params.uri;
 }
-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 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) {
@@ -74247,218 +73602,755 @@ function createMediaElement(mediaObject) {
             case "end":
               return _context.stop();
           }
-        }, _callee);
-      }))();
+        }, _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);
+}
+
+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);
+    _defineProperty(this, "html", null);
+    _defineProperty(this, "id", '');
+    _defineProperty(this, "idCounter", 0);
+    _defineProperty(this, "iframe", null);
+    _defineProperty(this, "iframeName", '');
+    _defineProperty(this, "index", 0);
+    _defineProperty(this, "loadIframeOnRun", false);
+    _defineProperty(this, "loop", false);
+    _defineProperty(this, "mediaId", '');
+    _defineProperty(this, "mediaType", '');
+    _defineProperty(this, "muted", false);
+    _defineProperty(this, "options", {});
+    _defineProperty(this, "player", undefined);
+    _defineProperty(this, "ready", true);
+    _defineProperty(this, "region", {});
+    _defineProperty(this, "render", 'html');
+    _defineProperty(this, "schemaVersion", '1');
+    _defineProperty(this, "singlePlay", false);
+    _defineProperty(this, "state", MediaState.IDLE);
+    _defineProperty(this, "tempSrc", '');
+    _defineProperty(this, "timeoutId", setTimeout(function () {}, 0));
+    _defineProperty(this, "type", '');
+    _defineProperty(this, "uri", '');
+    _defineProperty(this, "url", null);
+    _defineProperty(this, "useDuration", false);
+    _defineProperty(this, "xml", null);
+    _defineProperty(this, "videoHandler", void 0);
+    _defineProperty(this, "mediaTimer", void 0);
+    _defineProperty(this, "mediaTimeCount", 0);
+    _defineProperty(this, "xlr", {});
+    _defineProperty(this, "statsBC", new BroadcastChannel('statsBC'));
+    _defineProperty(this, "hasCommandExecuted", void 0);
+    this.region = region;
+    this.id = mediaId;
+    this.mediaId = this.id;
+    this.xml = xml;
+    this.options = options;
+    this.xlr = xlr;
+    this.fileId = ((_this$xml = this.xml) === null || _this$xml === void 0 ? void 0 : _this$xml.getAttribute('fileId')) || '';
+    this.idCounter = nextId(this.options);
+    this.containerName = "M-".concat(this.id, "-").concat(this.idCounter);
+    this.iframeName = "".concat(this.containerName, "-iframe");
+    this.mediaType = ((_this$xml2 = this.xml) === null || _this$xml2 === void 0 ? void 0 : _this$xml2.getAttribute('type')) || '';
+    this.render = ((_this$xml3 = this.xml) === null || _this$xml3 === void 0 ? void 0 : _this$xml3.getAttribute('render')) || '';
+    this.duration = parseInt((_this$xml4 = this.xml) === null || _this$xml4 === void 0 ? void 0 : _this$xml4.getAttribute('duration')) || 0;
+    this.enableStat = Boolean(((_this$xml5 = this.xml) === null || _this$xml5 === void 0 ? void 0 : _this$xml5.getAttribute('enableStat')) || false);
+    this.hasCommandExecuted = false;
+    this.on('start', function (media) {
+      if (media.state === MediaState.PLAYING) return;
+      media.state = MediaState.PLAYING;
+      if (media.mediaType === 'video') {
+        var videoMedia = VideoMedia(media, _this.xlr);
+        videoMedia.init();
+        if (media.duration > 0) {
+          _this.startMediaTimer(media);
+        }
+      } else if (media.mediaType === 'audio') {
+        AudioMedia(media).init();
+        if (media.duration > 0) {
+          _this.startMediaTimer(media);
+        }
+      } else if (media.mediaType === 'shellcommand') {
+        if (_this.hasCommandExecuted && !_this.loop) {
+          return;
+        }
+        _this.hasCommandExecuted = true;
+        _this.emitCommand(media);
+        if (media.duration > 0) {
+          _this.startMediaTimer(media);
+        }
+      } else {
+        _this.startMediaTimer(media);
+      }
+      // Check if stats are enabled for the layout
+      if (media.enableStat) {
+        _this.statsBC.postMessage({
+          action: 'START_STAT',
+          mediaId: parseInt(media.id),
+          layoutId: media.region.layout.id,
+          scheduleId: media.region.layout.scheduleId,
+          type: 'media'
+        });
+      }
+      // Emit media/widget start event
+      console.debug('Media::Emitter > Start - Calling widgetStart event');
+      _this.xlr.emitter.emit('widgetStart', parseInt(media.id));
+    });
+    this.on('end', function (media) {
+      if (media.state === MediaState.ENDED) return;
+      media.state = MediaState.ENDED;
+      if (_this.mediaTimer) {
+        clearInterval(_this.mediaTimer);
+        _this.mediaTimeCount = 0;
+      }
+      // Check if stats are enabled for the layout
+      if (media.enableStat) {
+        _this.statsBC.postMessage({
+          action: 'END_STAT',
+          mediaId: parseInt(media.id),
+          layoutId: media.region.layout.id,
+          scheduleId: media.region.layout.scheduleId,
+          type: 'media'
+        });
+      }
+      // Emit media/widget end event
+      console.debug('Media::Emitter > End - Calling widgetEnd event', {
+        mediaId: media.id,
+        regionId: media.region.id,
+        layoutId: media.region.layout.id
+      });
+      _this.xlr.emitter.emit('widgetEnd', parseInt(media.id));
+      media.region.playNextMedia();
+    });
+    this.on('cancelled', function (media) {
+      if (media.state === MediaState.CANCELLED) return;
+      media.state = MediaState.CANCELLED;
+      if (_this.mediaTimer) {
+        clearInterval(_this.mediaTimer);
+        _this.mediaTimeCount = 0;
+      }
+      // Check if stats are enabled for the layout
+      if (media.enableStat) {
+        _this.statsBC.postMessage({
+          action: 'END_STAT',
+          mediaId: parseInt(media.id),
+          layoutId: media.region.layout.id,
+          scheduleId: media.region.layout.scheduleId,
+          type: 'media'
+        });
+      }
+      // Emit media/widget end event
+      console.debug('Media::Emitter > End - Calling widgetEnd event', {
+        mediaId: media.id,
+        regionId: media.region.id,
+        layoutId: media.region.layout.id
+      });
+      _this.xlr.emitter.emit('widgetEnd', parseInt(media.id));
+      media.region.playNextMedia();
+    });
+    // Initialize Media object
+    this.init();
+  }
+  return _createClass(Media, [{
+    key: "startMediaTimer",
+    value: function startMediaTimer(media) {
+      var _this2 = this;
+      var preloadTimeMs = 2000;
+      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 / 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;
+        // prepare region's next media
+        if (_this2.region.totalMediaObjects > 1 && elapsedTimeMs >= preloadTimeBufferMs && !isPreparingNextMedia) {
+          isPreparingNextMedia = true;
+          _this2.region.prepareNextMedia();
+        }
+        if (_this2.mediaTimeCount > media.duration) {
+          console.debug('??? XLR.debug >> Media::startMediaTimer: emit>end: on media ' + media.id + ' of Region ' + media.region.regionId);
+          console.debug('??? XLR.debug >> Media::startMediaTimer - Media::Emitter > End', {
+            currentLayout: _this2.xlr.currentLayout,
+            media: media,
+            region: media.region,
+            layout: media.region.layout
+          });
+          media.emitter.emit('end', media);
+          if (media.mediaType === 'video') {
+            // Dispose the video media
+            console.debug("??? XLR.debug >> VideoMedia::stop - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+            if (media.player !== undefined) {
+              VideoMedia(media, _this2.xlr).stop(true);
+            }
+          }
+        }
+      }, 1000);
+      console.debug('startMediaTimer: Showing Media ' + media.id + ' for ' + media.duration + 's of Region ' + media.region.regionId);
     }
-  }
-  // 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;
+  }, {
+    key: "on",
+    value: function on(event, callback) {
+      return this.emitter.on(event, callback);
     }
-    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);
+  }, {
+    key: "init",
+    value: function init() {
+      var _this$xml6;
+      var mediaOptions = (_this$xml6 = this.xml) === null || _this$xml6 === void 0 ? void 0 : _this$xml6.getElementsByTagName('options');
+      if (mediaOptions) {
+        for (var _i = 0, _Array$from = Array.from(mediaOptions); _i < _Array$from.length; _i++) {
+          var _options = _Array$from[_i];
+          // Get options
+          var _mediaOptions = _options.children;
+          for (var _i2 = 0, _Array$from2 = Array.from(_mediaOptions); _i2 < _Array$from2.length; _i2++) {
+            var mediaOption = _Array$from2[_i2];
+            this.options[mediaOption.nodeName.toLowerCase()] = mediaOption.textContent;
+          }
+        }
+      }
+      // Check for options.uri and add it to media
+      if (Boolean(this.options['uri'])) {
+        this.uri = this.options['uri'];
+      }
+      // Show in fullscreen?
+      if (this.options.showfullscreen === "1") {
+        // Set dimensions as the layout ones
+        this.divWidth = this.region.layout.sWidth;
+        this.divHeight = this.region.layout.sHeight;
+      } else {
+        // Set dimensions as the region ones
+        this.divWidth = this.region.sWidth;
+        this.divHeight = this.region.sHeight;
+      }
+      var resourceUrlParams = _objectSpread2(_objectSpread2({}, this.xlr.config.config), {}, {
+        regionOptions: this.region.options,
+        layoutId: this.region.layout.layoutId,
+        regionId: this.region.id,
+        mediaId: this.id,
+        fileId: this.fileId,
+        scaleFactor: this.region.layout.scaleFactor,
+        uri: this.uri,
+        isGlobalContent: this.mediaType === 'global',
+        isImageOrVideo: this.mediaType === 'image' || this.mediaType === 'video',
+        render: this.render
+      });
+      if (this.mediaType === 'image' || this.mediaType === 'video') {
+        resourceUrlParams.mediaType = this.mediaType;
+      }
+      var tmpUrl = '';
+      if (this.xlr.config.platform === exports.ConsumerPlatform.CMS) {
+        tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
+      } else if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
+        tmpUrl = composeResourceUrl(this.xlr.config, resourceUrlParams);
+        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;
+          }
+        }
+      } 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);
     }
-    // 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: "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:
-              if (media.region.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                playerReportFault('Video file not supported', media).then(function () {
-                  media.emitter.emit('end', media);
-                });
+              $media = document.getElementById(getMediaId({
+                mediaType: this.mediaType,
+                containerName: this.containerName
+              }));
+              if ($media) {
+                $media.style.display = 'none';
+                $media.remove();
               }
-            case 1:
+              // Release blob URLs for image media to prevent memory leaks on long-running signage
+              if (this.mediaType === 'image' && this.url) {
+                BlobLoader.release(this.url);
+              }
+            case 3:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
-        }, _callee2);
+        }, _callee, this);
       }));
-      return function (_x10) {
-        return _ref3.apply(this, arguments);
-      };
-    }());
-    media.player.el().style.setProperty('visibility', 'hidden');
-    media.player.el().style.setProperty('opacity', '0');
-    media.player.el().style.setProperty('z-index', '-99');
-  }
-}
-function prepareImageMedia(media, region) {
-  var mediaId = getMediaId(media);
-  media.html.style.setProperty('background-image', "url(".concat(media.url));
-  // Check if media in region
-  // Remove old copy before inserting fresh copy
-  var mediaInRegion = region.html.querySelector('.' + mediaId);
-  if (mediaInRegion) {
-    mediaInRegion.remove();
-  }
-  // Append media to its region
-  var $region = document.querySelector('#' + region.containerName);
-  $region !== null && $region.appendChild(media.html);
-}
-function prepareAudioMedia(media, region) {
-  var mediaId = getMediaId(media);
-  if (media.url !== null) {
-    media.html.src = media.url;
-  }
-  // Check if media in region
-  // Remove old copy before inserting fresh copy of the media
-  var mediaInRegion = region.html.querySelector('.' + mediaId);
-  if (mediaInRegion) {
-    mediaInRegion.remove();
-  }
-  // Append media to its region
-  var $region = document.querySelector('#' + region.containerName);
-  $region !== null && $region.appendChild(media.html);
-}
-function prepareHtmlMedia(media, region) {
-  // Set state as false ( for now )
-  media.ready = false;
-  if (media.html) {
-    var mediaId = getMediaId(media);
-    // Clean up old copy of the media
-    // before inserting fresh copy
-    var mediaInRegion = region.html.querySelector('.' + mediaId);
-    // Append iframe
-    media.html.innerHTML = '';
-    media.html.appendChild(media.iframe);
-    if (!mediaInRegion) {
-      // Add fresh copy of the media into the region
-      var $region = document.querySelector('#' + region.containerName);
-      $region !== null && $region.appendChild(media.html);
-      media.ready = true;
-    }
-  }
-}
-function playerReportFault(_x11, _x12) {
-  return _playerReportFault.apply(this, arguments);
-}
-function _playerReportFault() {
-  _playerReportFault = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(msg, media) {
-    var playerSW, hasSW;
-    return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
-        case 0:
-          // Immediately expire media and report a fault
-          playerSW = PwaSW();
-          _context7.next = 3;
-          return playerSW.getSW();
-        case 3:
-          hasSW = _context7.sent;
-          if (hasSW) {
-            playerSW.postMsg({
-              type: 'MEDIA_FAULT',
-              code: 5002,
-              reason: msg,
-              mediaId: media.id,
-              regionId: media.region.id,
-              layoutId: media.region.layout.id,
-              date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-              // Temporary setting
-              expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
-            }).then(function () {
-              // We try to prepare next media if we have more than 1 media
-              if (media.region.totalMediaObjects > 1) {
-                media.region.prepareNextMedia();
-              }
-            })["finally"](function () {
-              // Stopping media as we have reported the error as fault
-              console.debug('??? XLR.debug >> VideoMedia - Done reporting media fault', {
-                mediaId: media.id,
-                regionItems: media.region.totalMediaObjects
-              });
-            });
-          }
-        case 5:
-        case "end":
-          return _context7.stop();
+      function stop() {
+        return _stop.apply(this, arguments);
       }
-    }, _callee7);
-  }));
-  return _playerReportFault.apply(this, arguments);
-}
-
-const urlAlphabet =
-  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
-/* @ts-self-types="./index.d.ts" */
-let nanoid = (size = 21) => {
-  let id = '';
-  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
-  while (size--) {
-    id += urlAlphabet[bytes[size] & 63];
-  }
-  return id
-};
+      return stop;
+    }()
+    /**
+     * Emits a command from the shell command widget.
+     *
+     * @param media
+     * @private
+     */
+  }, {
+    key: "emitCommand",
+    value: function emitCommand(media) {
+      if (media.mediaType !== 'shellcommand') {
+        return;
+      }
+      var options = media.options;
+      if (options.commandtype === 'storedCommand' && options.commandcode) {
+        console.debug('Media::Emitter > Shell Command - Calling commandCodeReceived event');
+        this.xlr.emitter.emit('commandCodeReceived', options.commandcode);
+        return;
+      }
+      var commandString = '';
+      if (options.useglobalcommand === '1') {
+        commandString = options.globalcommand || '';
+      } else {
+        // Use platform-specific command when available
+        if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
+          commandString = options.chromeoscommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.ANDROID) {
+          commandString = options.androidcommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.LINUX) {
+          commandString = options.linuxcommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.TIZEN) {
+          commandString = options.tizencommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.WEBOS) {
+          commandString = options.weboscommand || '';
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.WINDOWS) {
+          commandString = options.windowscommand || '';
+        }
+        // Fall back to the global command if the platform-specific one
+        // is missing, not configured, or not supported yet
+        if (!commandString && options.globalcommand) {
+          commandString = options.globalcommand;
+        }
+      }
+      if (commandString) {
+        console.debug('Media::Emitter > Shell Command - Calling commandStringReceived event');
+        this.xlr.emitter.emit('commandStringReceived', commandString);
+        return;
+      }
+    }
+  }]);
+}();
 
 var Region = /*#__PURE__*/function () {
   // ===== Constructor =====
@@ -74616,10 +74508,6 @@ var Region = /*#__PURE__*/function () {
       });
       // Prepare first media
       if (this.mediaObjects.length > 0) {
-        // Clean up region first
-        // if (this.html?.children.length > 0) {
-        //     this.html.innerHTML = '';
-        // }
         this.prepareFirstMedia();
       }
     }
@@ -74652,6 +74540,11 @@ var Region = /*#__PURE__*/function () {
     value: function prepareNextMedia() {
       var nextMediaIndex = (this.currentMediaIndex + 1) % this.totalMediaObjects;
       var nextMedia = this.mediaObjects[nextMediaIndex];
+      console.debug('<><> XLR.debug >> [Media] - [Region::prepareNextMedia()] - Preparing next media', {
+        currentMediaIndex: this.currentMediaIndex,
+        nextMediaIndex: nextMediaIndex,
+        nextMediaId: nextMedia.mediaId
+      });
       this.prepareMedia(nextMedia);
     }
   }, {
@@ -74670,36 +74563,6 @@ var Region = /*#__PURE__*/function () {
           regionId: this.id,
           oldMedia: (_this$oldMedia = this.oldMedia) === null || _this$oldMedia === void 0 ? void 0 : _this$oldMedia.containerName
         });
-        // const $region = document.getElementById(`${this.containerName}`);
-        // Preload first item
-        // if (this.currentMediaIndex > 0 && this.nxtMedia) {
-        //     // Prepare next items
-        //     this.prepareMedia(this.nxtMedia);
-        // } else {
-        //     this.prepareMedia(this.currMedia);
-        // }
-        // Append available media to region DOM
-        // if (this.currMedia) {
-        //
-        //     this.currEl = createMediaElement(this.currMedia);
-        //     this.currMedia.html = this.currEl;
-        //
-        //     console.debug('<> XLR.debug prepareMediaObjects::currMedia', {
-        //         currentMedia: this.currMedia.containerName,
-        //         regionId: this.id,
-        //     });
-        //     ($region) && $region.insertBefore(this.currEl as Node, $region.lastElementChild);
-        // }
-        // if (this.totalMediaObjects > 1 && this.nxtMedia) {
-        //     this.nxtEl = createMediaElement(this.nxtMedia);
-        //     this.nxtMedia.html = this.nxtEl;
-        //
-        //     console.debug('<> XLR.debug prepareMediaObjects::nxtMedia', {
-        //         nextMedia: this.nxtMedia.containerName,
-        //         regionId: this.id,
-        //     });
-        //     ($region) && $region.insertBefore(this.nxtEl as Node, $region.lastElementChild);
-        // }
       }
     }
   }, {
@@ -74713,116 +74576,6 @@ var Region = /*#__PURE__*/function () {
       this.layout.regions[this.index] = this;
       this.layout.regionExpired();
     }
-  }, {
-    key: "prepareVideo",
-    value: function () {
-      var _prepareVideo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(media, container) {
-        var _this2 = this;
-        var video;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              video = media.html;
-              if (media.url !== null) {
-                video.src = media.url;
-              }
-              container !== null && container.appendChild(media.html);
-              return _context2.abrupt("return", new Promise(function (resolve) {
-                var _media$videoHandler$p;
-                var vidType = videoFileType(getFileExt(media.uri));
-                // Initialize Video.js
-                media.player = videojs(video, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-                  errorDisplay: _this2.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-                  loop: media.loop,
-                  sources: [{
-                    src: media.url,
-                    type: vidType
-                  }] // Adjust MIME type if dynamic
-                }));
-                media.player.el().style.setProperty('visibility', 'hidden');
-                media.player.el().style.setProperty('z-index', '0');
-                media.player.el().style.setProperty('opacity', '0');
-                // Register video handler
-                media.videoHandler = videoMediaHandler(media, _this2.xlr.config.platform);
-                (_media$videoHandler$p = media.videoHandler.player) === null || _media$videoHandler$p === void 0 || _media$videoHandler$p.one('canplaythrough', function () {
-                  resolve();
-                });
-              }));
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      function prepareVideo(_x3, _x4) {
-        return _prepareVideo.apply(this, arguments);
-      }
-      return prepareVideo;
-    }()
-  }, {
-    key: "prepareImage",
-    value: function () {
-      var _prepareImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(media, container) {
-        var blobUrl, img;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              _context3.next = 2;
-              return BlobLoader.load(media.url);
-            case 2:
-              blobUrl = _context3.sent;
-              img = new Image(); // Wait for decoding to finish so there is no visual glitch
-              return _context3.abrupt("return", new Promise(function (resolve, reject) {
-                img.onload = function () {
-                  return resolve();
-                };
-                img.onerror = function (e) {
-                  return reject(e);
-                };
-                img.src = blobUrl;
-                if (media.html) {
-                  media.html.style.setProperty('background-image', "url(".concat(blobUrl, ")"));
-                }
-                container !== null && container.appendChild(media.html);
-              }));
-            case 5:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }));
-      function prepareImage(_x5, _x6) {
-        return _prepareImage.apply(this, arguments);
-      }
-      return prepareImage;
-    }()
-  }, {
-    key: "prepareIframe",
-    value: function prepareIframe(media, container) {
-      console.debug('??? XLR.debug >> Region prepareIframe - start');
-      return new Promise(function (resolve, reject) {
-        var iframe = media.iframe;
-        console.debug('??? XLR.debug >> Region prepareIframe - promise', {
-          iframe: iframe,
-          mediaType: media.mediaType,
-          container: container
-        });
-        if (iframe !== null) {
-          iframe.onload = function () {
-            return resolve();
-          };
-          iframe.onerror = function (e) {
-            return reject(e);
-          };
-          // Append iframe to html
-          if (media.html) {
-            media.html.innerHTML = '';
-            media.html.appendChild(iframe);
-          }
-          container !== null && container.appendChild(media.html);
-        }
-      });
-    }
   }, {
     key: "run",
     value: function run() {
@@ -74836,7 +74589,7 @@ var Region = /*#__PURE__*/function () {
   }, {
     key: "transitionNodes",
     value: function transitionNodes(oldMedia, newMedia) {
-      var _this3 = this;
+      var _this2 = this;
       var transOutDuration = 1;
       var transOutDirection = 'E';
       if (newMedia) {
@@ -74852,7 +74605,7 @@ var Region = /*#__PURE__*/function () {
         var transOut = transitionElement('defaultOut', {
           duration: defaultTransOutOptions.duration
         });
-        var transOutName;
+        var transOutName = '';
         if (oldMedia && Boolean(oldMedia.options['transout'])) {
           transOutName = oldMedia.options['transout'];
           if (transOutName === 'fly') {
@@ -74866,11 +74619,18 @@ var Region = /*#__PURE__*/function () {
           }
           transOut = transitionElement(transOutName, defaultTransOutOptions);
         }
+        console.debug('??? XLR.debug >> Region > transitionNodes - transOut options', {
+          transOutName: transOutName,
+          transOut: transOut,
+          transOutDuration: transOutDuration,
+          transOutDirection: transOutDirection,
+          totalMediaObjects: this.totalMediaObjects
+        });
         var hideOldMedia = function hideOldMedia() {
           // Hide oldMedia
           if (oldMedia) {
-            var _this3$layout$html;
-            var $region = (_this3$layout$html = _this3.layout.html) === null || _this3$layout$html === void 0 ? void 0 : _this3$layout$html.querySelector('#' + _this3.containerName);
+            var $layout = document.querySelector("#".concat(_this2.layout.containerName, "[data-sequence=\"").concat(_this2.layout.index, "\"]"));
+            var $region = $layout.querySelector('#' + _this2.containerName);
             var $oldMedia = $region ? $region.querySelector('.' + getMediaId(oldMedia)) : null;
             if ($oldMedia) {
               var removeOldMedia = function removeOldMedia() {
@@ -74909,7 +74669,7 @@ var Region = /*#__PURE__*/function () {
               if (Boolean(oldMedia.options['transout'])) {
                 oldMediaAnimate = $oldMedia.animate(transOut.keyframes, transOut.timing);
               }
-              if (Boolean(oldMedia.options['transout']) && _this3.totalMediaObjects > 1) {
+              if (Boolean(oldMedia.options['transout']) && _this2.totalMediaObjects > 1) {
                 if (transOutName === 'flyOut') {
                   // Reset last item to original position and state
                   oldMediaAnimate ? oldMediaAnimate.finished.then(function () {
@@ -74935,9 +74695,6 @@ var Region = /*#__PURE__*/function () {
               } else {
                 console.debug('??? XLR.debug >> Region transitionNode - hideOldMedia' + 'no transout and only 1 media');
                 removeOldMedia();
-                // Resolve this right away
-                // As a result, the transition between two media object
-                // seems like a cross-over
               }
             }
           }
@@ -75203,7 +74960,7 @@ var ActionController = /*#__PURE__*/function () {
           };
         }
         // Only render webhook controller in CMS
-        if (this.parent.xlr.config.platform !== 'CMS') {
+        if (this.parent.xlr.config.platform !== exports.ConsumerPlatform.CMS) {
           this.$actionController.style.display = 'none';
           return;
         }
@@ -75301,10 +75058,10 @@ var ActionController = /*#__PURE__*/function () {
     key: "runAction",
     value: function runAction(actionData, options) {
       if (actionData.actiontype == 'navLayout') {
-        if (this.parent.xlr.config.platform === 'CMS') {
+        if (this.parent.xlr.config.platform === exports.ConsumerPlatform.CMS) {
           // Open layout preview in a new tab
           this.openLayoutInNewTab(actionData.layoutcode, options);
-        } else if (this.parent.xlr.config.platform === 'chromeOS') {
+        } else if (this.parent.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
           // Set target layout as active layout
           this.openLayoutInPlayer(actionData.layoutcode, options);
         }
@@ -75466,6 +75223,12 @@ function _getXlf() {
             fetchOptions.headers = {
               'Content-Type': 'text/xml'
             };
+          } else if (layoutOptions.platform === exports.ConsumerPlatform.ELECTRON) {
+            xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
+            fetchOptions.mode = 'no-cors';
+            fetchOptions.headers = {
+              'Content-Type': 'text/xml'
+            };
           } else if (layoutOptions.appHost !== null) {
             xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
           }
@@ -75795,9 +75558,10 @@ var Layout = /*#__PURE__*/function () {
       if (!(this.bgImage === "" || typeof this.bgImage === 'undefined')) {
         /* Extract the image ID from the filename */
         this.bgId = this.bgImage.substring(0, this.bgImage.indexOf('.'));
-        var bgImageUrl = composeBgUrlByPlatform(this.xlr.config.platform, _objectSpread2(_objectSpread2({}, this.options), {}, {
-          layout: this
-        }));
+        var bgImageUrl = composeBgUrlByPlatform(this.xlr.config.platform, this);
+        console.debug('>>> XLR.debug Layout::parseXlf - Composed background image URL > ', {
+          bgImageUrl: bgImageUrl
+        });
         if ($layout) {
           if (!this.isOverlay) {
             $layout.style.setProperty('background-image', "url(\"".concat(bgImageUrl, "\")"));
@@ -76062,7 +75826,7 @@ function SplashScreen($parent, config) {
             case 0:
               $previewSplash.classList.add('preview-splash');
               // Don't show Xibo logo on CMS Preview
-              if (config && config.platform !== 'CMS') {
+              if (config && config.platform !== exports.ConsumerPlatform.CMS) {
                 splashScreenImg = img$1;
                 if ((_config$icons = config.icons) !== null && _config$icons !== void 0 && _config$icons.splashScreen && config.icons.splashScreen.length > 0) {
                   splashScreenImg = config.icons.splashScreen;
@@ -76080,7 +75844,7 @@ function SplashScreen($parent, config) {
               $previewLoader.classList.add('preview-loader');
               $previewLoaderCaption.classList.add('preview-loaderCaption');
               // Show loader bar and text on CMS Preview
-              if (config && config.platform === 'CMS') {
+              if (config && config.platform === exports.ConsumerPlatform.CMS) {
                 $previewLoader.style.setProperty('background-image', "url(".concat(img, ")"));
                 $previewLoaderCaption.innerHTML = '<p>Loading Layout...</p>';
               }
@@ -76797,7 +76561,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
     };
   };
   xlrObject.getLayout = function (inputLayout) {
-    var isCMS = this.config.platform === 'CMS';
+    var isCMS = this.config.platform === exports.ConsumerPlatform.CMS;
     if (!isCMS && Object.keys(this.uniqueLayouts).length === 0) {
       return;
     }
@@ -76942,9 +76706,9 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             self = this; // Compose layout props first
             // Clone options to avoid mutating the shared xlfUrl template
             newOptions = _objectSpread2({}, props.options);
-            if (self.config.platform === 'CMS' && inputLayout && Boolean(inputLayout.layoutId)) {
+            if (self.config.platform === exports.ConsumerPlatform.CMS && inputLayout && Boolean(inputLayout.layoutId)) {
               newOptions.xlfUrl = newOptions.xlfUrl.replace(':layoutId', String(inputLayout.layoutId));
-            } else if (self.config.platform === 'chromeOS' && inputLayout !== undefined) {
+            } else if ((self.config.platform === exports.ConsumerPlatform.CHROMEOS || self.config.platform === exports.ConsumerPlatform.ELECTRON) && inputLayout !== undefined) {
               newOptions.xlfUrl = inputLayout.path;
             }
             if (!(inputLayout && inputLayout.layoutNode === undefined)) {
@@ -77172,13 +76936,16 @@ exports.fetchText = fetchText;
 exports.flyInElem = flyInElem;
 exports.flyOutElem = flyOutElem;
 exports.flyTransitionKeyframes = flyTransitionKeyframes;
+exports.getAllAttributes = getAllAttributes;
 exports.getDataBlob = getDataBlob;
 exports.getFileExt = getFileExt;
 exports.getIndexByLayoutId = getIndexByLayoutId;
 exports.getLayout = getLayout;
+exports.getLayoutIndexByLayoutId = getLayoutIndexByLayoutId;
 exports.getMediaId = getMediaId;
 exports.getXlf = getXlf;
 exports.hasDefaultOnly = hasDefaultOnly;
+exports.hasSspLayout = hasSspLayout;
 exports.initRenderingDOM = initRenderingDOM;
 exports.initialLayout = initialLayout;
 exports.initialMedia = initialMedia;
@@ -77187,10 +76954,14 @@ exports.initialXlr = initialXlr;
 exports.isEmpty = isEmpty;
 exports.isLayoutValid = isLayoutValid;
 exports.nextId = nextId;
+exports.playerReportFault = playerReportFault;
 exports.preloadMediaBlob = preloadMediaBlob;
+exports.prepareAudioMedia = prepareAudioMedia;
+exports.prepareHtmlMedia = prepareHtmlMedia;
+exports.prepareImageMedia = prepareImageMedia;
+exports.prepareVideoMedia = prepareVideoMedia;
 exports.setExpiry = setExpiry;
 exports.transitionElement = transitionElement;
 exports.videoFileType = videoFileType;
-exports.videoMediaHandler = videoMediaHandler;
 exports.vjsDefaultOptions = vjsDefaultOptions;
 //# sourceMappingURL=xibo-layout-renderer.cjs.js.map