@xibosignage/xibo-layout-renderer 1.0.23 → 1.0.24

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

@@ -72513,6 +72513,269 @@ if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
   videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
 }
 
+function composeVideoSource($media, media) {
+  // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
+  var vidType = videoFileType(getFileExt(media.uri));
+  // Only add one source per type
+  if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
+    var $videoSource = document.createElement('source');
+    $videoSource.src = media.url;
+    $videoSource.type = vidType;
+    $media.insertBefore($videoSource, $media.lastElementChild);
+  }
+  return $media;
+}
+var defaultVjsOpts = {
+  autoplay: false,
+  muted: true,
+  // Start muted to allow autoplay policies
+  preload: 'auto',
+  controls: false
+};
+var vjsDefaultOptions = function vjsDefaultOptions(opts) {
+  return _objectSpread2({
+    controls: false,
+    preload: 'auto',
+    autoplay: false,
+    muted: true
+  }, opts);
+};
+var reportToPlayerPlatform = [ConsumerPlatform.CHROMEOS, ConsumerPlatform.ELECTRON];
+function VideoMedia(media, xlr) {
+  var mediaId = getMediaId(media);
+  var videoPlayer = {
+    duration: 0,
+    init: function init() {
+      var _this = this;
+      var triggerTimeUpdate = false; // Used for media.duration === 0
+      videoPlayer.duration = media.duration;
+      var vjsPlayer = videojs(mediaId);
+      if (vjsPlayer) {
+        vjsPlayer.on('loadstart', function () {
+          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
+        });
+        vjsPlayer.on('loadedmetadata', function () {
+          if (media.duration === 0) {
+            videoPlayer.duration = vjsPlayer.duration();
+          }
+          console.debug('??? XLR.debug >> VideoMedia: loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
+        });
+        vjsPlayer.on('canplay', function () {
+          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+        });
+        vjsPlayer.on('playing', function () {
+          // Update duration
+          if (videoPlayer.duration === 0) {
+            videoPlayer.duration = vjsPlayer.duration();
+          }
+          console.debug('??? XLR.debug >> VideoMedia: playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
+          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
+        });
+        // @NOTE: When video is paused due to fail in unmuting the video
+        // and video has media.duration = 0, the video will stay paused and the video cycle won't end
+        // @TODO: Add timer when video is paused due to unmuting fail and duration that is equal to 0
+        // @NOTE: The pause issue when unmuting the video is mainly on a browser level.
+        // Please visit https://developer.chrome.com/blog/autoplay/ for more info.
+        vjsPlayer.ready(function () {
+          // Add guard making sure that video element is present
+          var videoElem = document.querySelector(".media--item.".concat(mediaId));
+          if (!document.body.contains(videoElem)) {
+            media.emitter.emit('cancelled', media);
+            return;
+          }
+          if (vjsPlayer !== undefined) {
+            vjsPlayer.muted(true);
+            // Race promise between a 0.5s play and a 5s skip
+            Promise.race([new Promise(function (resolve, reject) {
+              return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                return _regeneratorRuntime().wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Trying to force play after 0.1 seconds"));
+                      // Try to force play here
+                      _context.prev = 1;
+                      if (!(vjsPlayer.currentTime() === 0)) {
+                        _context.next = 6;
+                        break;
+                      }
+                      // Set video mute/unmute based on setting once playing
+                      vjsPlayer.muted(media.muted);
+                      _context.next = 6;
+                      return vjsPlayer.play();
+                    case 6:
+                      // Resolve if play works
+                      resolve(true);
+                      _context.next = 12;
+                      break;
+                    case 9:
+                      _context.prev = 9;
+                      _context.t0 = _context["catch"](1);
+                      // Reject race if play fails
+                      reject('Play failed');
+                    case 12:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee, null, [[1, 9]]);
+              })), 100);
+            }), new Promise(function (_, reject) {
+              return setTimeout(function () {
+                return reject('Timeout');
+              }, 5000);
+            })]).then(function () {
+              console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay started"));
+            })["catch"]( /*#__PURE__*/function () {
+              var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(error) {
+                return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      if (error === 'Timeout') {
+                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                        _this.stop();
+                      } else {
+                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                        if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                          playerReportFault('Media autoplay error', media).then(function () {
+                            _this.stop();
+                          });
+                        }
+                      }
+                    case 1:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }, _callee2);
+              }));
+              return function (_x) {
+                return _ref2.apply(this, arguments);
+              };
+            }());
+            // Optional: Reset the flag automatically when a new video loads or the source changes
+            vjsPlayer.on('loadstart', function () {
+              triggerTimeUpdate = false;
+            });
+            if (media.duration === 0) {
+              vjsPlayer.on('timeupdate', function () {
+                var preloadBufferTimeMs = 2000;
+                var mediaDuration = vjsPlayer.duration();
+                var currentTime = vjsPlayer.currentTime();
+                var regionHasMultipleMedia = media.region.totalMediaObjects > 1;
+                var remainingTimeMs = 0;
+                if (mediaDuration !== undefined && currentTime !== undefined) {
+                  remainingTimeMs = (mediaDuration - currentTime) * 1000;
+                }
+                if (regionHasMultipleMedia && remainingTimeMs === 0 && !triggerTimeUpdate) {
+                  // We don't have data yet and we must immediately prepare next media
+                  media.region.prepareNextMedia();
+                } else if (regionHasMultipleMedia && remainingTimeMs <= preloadBufferTimeMs && !triggerTimeUpdate) {
+                  // Check if remaining time is less than preloadBufferTimeMs and the action hasn't been triggered yet
+                  console.log('Less than preloadBufferTimeMs remaining! Do something now.');
+                  // Prepare next media in region
+                  media.region.prepareNextMedia();
+                  triggerTimeUpdate = true; // Set the flag to prevent re-triggering
+                }
+                // Reset the flag if the user seeks back to a point where more than preloadBufferTimeMs remain
+                if (remainingTimeMs > preloadBufferTimeMs) {
+                  triggerTimeUpdate = false;
+                }
+              });
+            }
+          }
+        });
+        vjsPlayer.on('error', /*#__PURE__*/function () {
+          var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(err) {
+            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+              while (1) switch (_context3.prev = _context3.next) {
+                case 0:
+                  console.debug("??? XLR.debug >> VideoMedia: Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
+                  if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                    playerReportFault('Video file source not supported', media).then(function () {
+                      _this.stop();
+                    });
+                  } else {
+                    // End media after 5 seconds
+                    setTimeout(function () {
+                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
+                      _this.stop();
+                    }, 5000);
+                  }
+                case 2:
+                case "end":
+                  return _context3.stop();
+              }
+            }, _callee3);
+          }));
+          return function (_x2) {
+            return _ref3.apply(this, arguments);
+          };
+        }());
+        if (media.duration === 0) {
+          vjsPlayer.on('ended', function () {
+            console.debug("??? XLR.debug >> VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+            _this.stop();
+          });
+        }
+      }
+    },
+    stop: function stop() {
+      var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var vjsPlayer = media.player;
+      console.debug('??? XLR.debug >> VideoMedia::stop', {
+        vjsPlayer: vjsPlayer,
+        isDisposed: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.isDisposed_,
+        el: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.el_
+      });
+      // Expire the media and dispose the video
+      if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
+        if (!disposeOnly) {
+          media.emitter.emit('end', media);
+        }
+        vjsPlayer.dispose();
+        // Clear up media player
+        media.player = undefined;
+      } else {
+        media.player = undefined;
+        media.html = null;
+        media.emitter.emit('end', media);
+      }
+    },
+    play: function play() {
+      var _this2 = this;
+      var vjsPlayer = videojs(mediaId);
+      if (vjsPlayer !== undefined) {
+        var _vjsPlayer$play;
+        (_vjsPlayer$play = vjsPlayer.play()) === null || _vjsPlayer$play === void 0 || _vjsPlayer$play["catch"]( /*#__PURE__*/function () {
+          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(error) {
+            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+              while (1) switch (_context4.prev = _context4.next) {
+                case 0:
+                  if (error === 'Timeout') {
+                    console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                    _this2.stop();
+                  } else {
+                    console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                    if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                      playerReportFault('Media autoplay error', media).then(function () {
+                        _this2.stop();
+                      });
+                    }
+                  }
+                case 1:
+                case "end":
+                  return _context4.stop();
+              }
+            }, _callee4);
+          }));
+          return function (_x3) {
+            return _ref4.apply(this, arguments);
+          };
+        }());
+      }
+    }
+  };
+  return videoPlayer;
+}
+
 /*
  * Copyright (C) 2024 Xibo Signage Ltd
  *
@@ -72747,65 +73010,6 @@ var flyTransitionKeyframes = function flyTransitionKeyframes(params) {
   return keyframes;
 };
 
-function AudioMedia(media) {
-  var audioMediaObject = {
-    init: function init() {
-      var $audioMedia = document.getElementById(getMediaId(media));
-      var $playBtn = null;
-      if ($audioMedia) {
-        $audioMedia.onloadstart = function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-        };
-        $audioMedia.onloadeddata = function () {
-          if ($audioMedia.readyState >= 2) {
-            console.debug("".concat(capitalizeStr(media.mediaType), " data for media > ").concat(media.id, " has been fully loaded . . ."));
-          }
-        };
-        $audioMedia.oncanplay = function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-        };
-        $audioMedia.onplaying = function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-          if ($playBtn !== null) {
-            $playBtn.remove();
-          }
-        };
-        var audioPlayPromise = $audioMedia.play();
-        if (audioPlayPromise !== undefined) {
-          audioPlayPromise.then(function () {
-            console.debug('autoplay started . . .');
-            // Autoplay restarted
-          })["catch"](function (error) {
-            if (error.name === 'NotAllowedError') {
-              var _$audioMedia$parentNo;
-              // Let's show a play audio button
-              $playBtn = document.createElement('button');
-              $playBtn.classList.add('play-audio-btn');
-              $playBtn.textContent = 'Play Audio';
-              $playBtn.addEventListener('click', function () {
-                $audioMedia.muted = false;
-                $audioMedia.play();
-              });
-              (_$audioMedia$parentNo = $audioMedia.parentNode) === null || _$audioMedia$parentNo === void 0 || _$audioMedia$parentNo.insertBefore($playBtn, $audioMedia.nextSibling);
-            }
-          });
-        }
-        if (media.duration === 0) {
-          $audioMedia.ondurationchange = function () {
-            console.debug('Showing Media ' + media.id + ' for ' + $audioMedia.duration + 's of Region ' + media.region.regionId);
-          };
-          $audioMedia.onended = function () {
-            var _media$emitter;
-            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-            (_media$emitter = media.emitter) === null || _media$emitter === void 0 || _media$emitter.emit('end', media);
-          };
-        }
-      }
-    }
-  };
-  return audioMediaObject;
-}
-
 var BlobLoader = /*#__PURE__*/function () {
   function BlobLoader() {
     _classCallCheck(this, BlobLoader);
@@ -72947,1102 +73151,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 = 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 === 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 === ConsumerPlatform.CHROMEOS) {
-                    playerReportFault('Video file source not supported', media).then(function () {
-                      _this.stop();
-                    });
-                  } else {
-                    // End media after 5 seconds
-                    setTimeout(function () {
-                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
-                      _this.stop();
-                    }, 5000);
-                  }
-                case 2:
-                case "end":
-                  return _context5.stop();
-              }
-            }, _callee5);
-          }));
-          return function (_x4) {
-            return _ref5.apply(this, arguments);
-          };
-        }());
-        if (media.duration === 0) {
-          vjsPlayer.on('ended', function () {
-            console.debug("??? XLR.debug >> VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-            _this.stop();
+          _context4.next = 17;
+          return res.arrayBuffer();
+        case 17:
+          data = _context4.sent;
+          blob = new Blob([data], {
+            type: audioFileType(getFileExt(src))
           });
-        }
+        case 19:
+          return _context4.abrupt("return", URL.createObjectURL(blob));
+        case 20:
+        case "end":
+          return _context4.stop();
       }
-    },
-    stop: function stop() {
-      var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var vjsPlayer = media.player;
-      console.debug('??? XLR.debug >> VideoMedia::stop', {
-        vjsPlayer: vjsPlayer,
-        isDisposed: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.isDisposed_,
-        el: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.el_
-      });
-      // Expire the media and dispose the video
-      if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
-        if (!disposeOnly) {
-          media.emitter.emit('end', media);
-        }
-        vjsPlayer.dispose();
-        // Clear up media player
-        media.player = undefined;
-      } else {
-        media.player = undefined;
-        media.html = null;
-        media.emitter.emit('end', media);
+    }, _callee4);
+  }));
+  return _preloadMediaBlob.apply(this, arguments);
+}
+function fetchJSON(_x6, _x7) {
+  return _fetchJSON.apply(this, arguments);
+}
+function _fetchJSON() {
+  _fetchJSON = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(url, jwtToken) {
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          return _context5.abrupt("return", fetch(url, {
+            method: 'GET',
+            headers: {
+              'X-PREVIEW-JWT': jwtToken || ''
+            }
+          }).then(function (res) {
+            return res.json();
+          })["catch"](function (err) {
+            console.debug(err);
+          }));
+        case 1:
+        case "end":
+          return _context5.stop();
       }
-    },
-    play: function play() {
-      var _this2 = this;
-      var vjsPlayer = videojs(mediaId);
-      if (vjsPlayer !== undefined) {
-        var _vjsPlayer$play;
-        (_vjsPlayer$play = vjsPlayer.play()) === null || _vjsPlayer$play === void 0 || _vjsPlayer$play["catch"]( /*#__PURE__*/function () {
-          var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(error) {
-            return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-              while (1) switch (_context6.prev = _context6.next) {
-                case 0:
-                  if (error === 'Timeout') {
-                    console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
-                    _this2.stop();
-                  } else {
-                    console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
-                    if (xlr.config.platform === ConsumerPlatform.CHROMEOS) {
-                      playerReportFault('Media autoplay error', media).then(function () {
-                        _this2.stop();
-                      });
-                    }
-                  }
-                case 1:
-                case "end":
-                  return _context6.stop();
-              }
-            }, _callee6);
+    }, _callee5);
+  }));
+  return _fetchJSON.apply(this, arguments);
+}
+function fetchText(_x8, _x9) {
+  return _fetchText.apply(this, arguments);
+}
+function _fetchText() {
+  _fetchText = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(url, jwtToken) {
+    return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          return _context6.abrupt("return", fetch(url, {
+            method: 'GET',
+            headers: {
+              'X-PREVIEW-JWT': jwtToken || ''
+            }
+          }).then(function (res) {
+            return res.text();
+          }).then(function (responseText) {
+            if (String(responseText).length > 0) {
+              return responseText;
+            } else {
+              return '';
+            }
+          })["catch"](function (err) {
+            console.debug(err);
+            return err === null || err === void 0 ? void 0 : err.message;
           }));
-          return function (_x5) {
-            return _ref6.apply(this, arguments);
-          };
-        }());
+        case 1:
+        case "end":
+          return _context6.stop();
       }
-    }
+    }, _callee6);
+  }));
+  return _fetchText.apply(this, arguments);
+}
+function getFileExt(filename) {
+  var filenameArr = String(filename).split('.');
+  return filenameArr[filenameArr.length - 1];
+}
+function audioFileType(str) {
+  var validAudioTypes = {
+    'mp3': 'audio/mp3',
+    'wav': 'audio/wav',
+    'ogg': 'audio/ogg'
   };
-  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 === ConsumerPlatform.CMS && Boolean(params.regionOptions.previewJwt)) {
+    resourceUrl += '&jwt=' + params.regionOptions.previewJwt;
+  }
+  if (options.platform === ConsumerPlatform.CHROMEOS) {
+    var resourceEndpoint = '/required-files/resource/';
+    if (!params.isGlobalContent && params.isImageOrVideo) {
+      resourceUrl = resourceEndpoint + params.fileId + '?saveAs=' + params.uri;
     }
-  }, {
-    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 === ConsumerPlatform.CMS) {
-        tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
-      } else if (this.xlr.config.platform === 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 === 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 !== ConsumerPlatform.CHROMEOS,
-                    loop: _this3.loop
-                  })));
-                }
-              }
-            }
-            console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::END', {
-              mediaPlayer: _this3.player,
-              isDisposed: (_this3$player3 = _this3.player) === null || _this3$player3 === void 0 ? void 0 : _this3$player3.isDisposed(),
-              el: (_this3$player4 = _this3.player) === null || _this3$player4 === void 0 ? void 0 : _this3$player4.el_
-            });
-            if (_this3.player !== undefined && _this3.player.el_ !== null) {
-              _this3.player.el().style.setProperty('visibility', 'visible');
-              _this3.player.el().style.setProperty('z-index', '10');
-              _this3.player.el().style.setProperty('opacity', '1');
-            }
-          } else {
-            console.debug('??? XLR.debug >> Media::run() > showCurrentMedia', {
-              mediaType: _this3.mediaType,
-              render: _this3.render,
-              $media: $media,
-              state: _this3.state
-            });
-            $media.style.setProperty('visibility', 'visible');
-            $media.style.setProperty('z-index', '10');
-            $media.style.setProperty('opacity', '1');
-          }
-          if (Boolean(_this3.options['transin'])) {
-            $media.animate(transIn.keyframes, transIn.timing);
-          }
-          if (!_this3.region.layout.isOverlay || _this3.region.layout.isOverlay && _this3.region.totalMediaObjects > 1) {
-            _this3.emitter.emit('start', _this3);
-          }
-        }
-      };
-      var getNewMedia = function getNewMedia() {
-        var $region = document.getElementById("".concat(_this3.region.containerName));
-        // This function is for checking whether
-        // the region still has to show a media item
-        // when another region is not finished yet
-        if (_this3.region.complete && !_this3.region.layout.allEnded) {
-          // Add currentMedia to the region
-          $region && $region.insertBefore(_this3.html, $region.lastElementChild);
-          return _this3.html;
-        }
-        return null;
-      };
-      showCurrentMedia();
-    }
-  }, {
-    key: "stop",
-    value: function () {
-      var _stop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var $media;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              $media = document.getElementById(getMediaId({
-                mediaType: this.mediaType,
-                containerName: this.containerName
-              }));
-              if ($media) {
-                $media.style.display = 'none';
-                $media.remove();
-              }
-              // Release blob URLs for image media to prevent memory leaks on long-running signage
-              if (this.mediaType === 'image' && this.url) {
-                BlobLoader.release(this.url);
-              }
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function stop() {
-        return _stop.apply(this, arguments);
-      }
-      return stop;
-    }()
-    /**
-     * Emits a command from the shell command widget.
-     *
-     * @param media
-     * @private
-     */
-  }, {
-    key: "emitCommand",
-    value: function emitCommand(media) {
-      if (media.mediaType !== 'shellcommand') {
-        return;
-      }
-      var options = media.options;
-      if (options.commandtype === 'storedCommand' && options.commandcode) {
-        console.debug('Media::Emitter > Shell Command - Calling commandCodeReceived event');
-        this.xlr.emitter.emit('commandCodeReceived', options.commandcode);
-        return;
-      }
-      var commandString = '';
-      if (options.useglobalcommand === '1') {
-        commandString = options.globalcommand || '';
-      } else {
-        // Use platform-specific command when available
-        if (this.xlr.config.platform === ConsumerPlatform.CHROMEOS) {
-          commandString = options.chromeoscommand || '';
-        } else if (this.xlr.config.platform === ConsumerPlatform.ANDROID) {
-          commandString = options.androidcommand || '';
-        } else if (this.xlr.config.platform === ConsumerPlatform.LINUX) {
-          commandString = options.linuxcommand || '';
-        } else if (this.xlr.config.platform === ConsumerPlatform.TIZEN) {
-          commandString = options.tizencommand || '';
-        } else if (this.xlr.config.platform === ConsumerPlatform.WEBOS) {
-          commandString = options.weboscommand || '';
-        } else if (this.xlr.config.platform === ConsumerPlatform.WINDOWS) {
-          commandString = options.windowscommand || '';
-        }
-        // Fall back to the global command if the platform-specific one
-        // is missing, not configured, or not supported yet
-        if (!commandString && options.globalcommand) {
-          commandString = options.globalcommand;
-        }
-      }
-      if (commandString) {
-        console.debug('Media::Emitter > Shell Command - Calling commandStringReceived event');
-        this.xlr.emitter.emit('commandStringReceived', commandString);
-        return;
-      }
-    }
-  }]);
-}();
-
-function nextId(options) {
-  if (options.idCounter > 500) {
-    options.idCounter = 0;
+  } 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 === ConsumerPlatform.CMS) {
+    bgImageUrl = params.options.layoutBackgroundDownloadUrl.replace(":id", params.id) + '&preview=1&width=' + params.sWidth + '&height=' + params.sHeight + '&dynamic&proportional=0';
+  } else if (platform === ConsumerPlatform.CHROMEOS) {
+    bgImageUrl = composeMediaUrl({
+      uri: params.bgImage
+    });
+  } else if (platform === ConsumerPlatform.ELECTRON) {
+    bgImageUrl = params.options.appHost + params.bgImage;
+  }
+  return bgImageUrl;
 }
 function getIndexByLayoutId(layoutsInput, layoutId) {
   var layoutIndexes = layoutsInput.reduce(function (a, b, indx) {
@@ -74243,218 +73598,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 !== ConsumerPlatform.CHROMEOS,
+      loop: media.loop
+    }));
+    media.player.on('error', /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (media.region.xlr.config.platform === ConsumerPlatform.CHROMEOS) {
+                playerReportFault('Video file not supported', media).then(function () {
+                  media.emitter.emit('end', media);
+                });
+              }
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x10) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
+    media.player.el().style.setProperty('visibility', 'hidden');
+    media.player.el().style.setProperty('opacity', '0');
+    media.player.el().style.setProperty('z-index', '-99');
+  }
+}
+function prepareImageMedia(media, region) {
+  var mediaId = getMediaId(media);
+  media.html.style.setProperty('background-image', "url(".concat(media.url));
+  // Check if media in region
+  // Remove old copy before inserting fresh copy
+  var mediaInRegion = region.html.querySelector('.' + mediaId);
+  if (mediaInRegion) {
+    mediaInRegion.remove();
+  }
+  // Append media to its region
+  var $region = document.querySelector('#' + region.containerName);
+  $region !== null && $region.appendChild(media.html);
+}
+function prepareAudioMedia(media, region) {
+  var mediaId = getMediaId(media);
+  if (media.url !== null) {
+    media.html.src = media.url;
+  }
+  // Check if media in region
+  // Remove old copy before inserting fresh copy of the media
+  var mediaInRegion = region.html.querySelector('.' + mediaId);
+  if (mediaInRegion) {
+    mediaInRegion.remove();
+  }
+  // Append media to its region
+  var $region = document.querySelector('#' + region.containerName);
+  $region !== null && $region.appendChild(media.html);
+}
+function prepareHtmlMedia(media, region) {
+  // Set state as false ( for now )
+  media.ready = false;
+  if (media.html) {
+    var mediaId = getMediaId(media);
+    // Clean up old copy of the media
+    // before inserting fresh copy
+    var $layout = document.querySelector("#".concat(region.layout.containerName, "[data-sequence=\"").concat(region.layout.index, "\"]"));
+    var $region = $layout.querySelector('#' + region.containerName);
+    var mediaInRegion = $region.querySelector('.' + mediaId);
+    console.debug('<><> XLR.debug >> [Media] - [Generators::prepareHtmlMedia]', {
+      mediaId: mediaId,
+      mediaInRegion: mediaInRegion
+    });
+    // Append iframe
+    media.html.innerHTML = '';
+    media.html.appendChild(media.iframe);
+    if (!mediaInRegion) {
+      // Add fresh copy of the media into the region
+      var _$region = document.querySelector('#' + region.containerName);
+      _$region !== null && _$region.appendChild(media.html);
+      media.ready = true;
+    }
+  }
+}
+function playerReportFault(_x11, _x12) {
+  return _playerReportFault.apply(this, arguments);
+}
+function _playerReportFault() {
+  _playerReportFault = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(msg, media) {
+    var playerSW, hasSW;
+    return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          // Immediately expire media and report a fault
+          playerSW = PwaSW();
+          _context7.next = 3;
+          return playerSW.getSW();
+        case 3:
+          hasSW = _context7.sent;
+          if (hasSW) {
+            playerSW.postMsg({
+              type: 'MEDIA_FAULT',
+              code: 5002,
+              reason: msg,
+              mediaId: media.id,
+              regionId: media.region.id,
+              layoutId: media.region.layout.id,
+              date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+              // Temporary setting
+              expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
+            }).then(function () {
+              // We try to prepare next media if we have more than 1 media
+              if (media.region.totalMediaObjects > 1) {
+                media.region.prepareNextMedia();
+              }
+            })["finally"](function () {
+              // Stopping media as we have reported the error as fault
+              console.debug('??? XLR.debug >> VideoMedia - Done reporting media fault', {
+                mediaId: media.id,
+                regionItems: media.region.totalMediaObjects
+              });
+            });
+          }
+        case 5:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  }));
+  return _playerReportFault.apply(this, arguments);
+}
+
+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 === ConsumerPlatform.CMS) {
+        tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
+      } else if (this.xlr.config.platform === 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 === 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 !== 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 !== 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 === ConsumerPlatform.CHROMEOS) {
-                playerReportFault('Video file not supported', media).then(function () {
-                  media.emitter.emit('end', media);
-                });
+              $media = document.getElementById(getMediaId({
+                mediaType: this.mediaType,
+                containerName: this.containerName
+              }));
+              if ($media) {
+                $media.style.display = 'none';
+                $media.remove();
               }
-            case 1:
+              // Release blob URLs for image media to prevent memory leaks on long-running signage
+              if (this.mediaType === 'image' && this.url) {
+                BlobLoader.release(this.url);
+              }
+            case 3:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
-        }, _callee2);
+        }, _callee, this);
       }));
-      return function (_x10) {
-        return _ref3.apply(this, arguments);
-      };
-    }());
-    media.player.el().style.setProperty('visibility', 'hidden');
-    media.player.el().style.setProperty('opacity', '0');
-    media.player.el().style.setProperty('z-index', '-99');
-  }
-}
-function prepareImageMedia(media, region) {
-  var mediaId = getMediaId(media);
-  media.html.style.setProperty('background-image', "url(".concat(media.url));
-  // Check if media in region
-  // Remove old copy before inserting fresh copy
-  var mediaInRegion = region.html.querySelector('.' + mediaId);
-  if (mediaInRegion) {
-    mediaInRegion.remove();
-  }
-  // Append media to its region
-  var $region = document.querySelector('#' + region.containerName);
-  $region !== null && $region.appendChild(media.html);
-}
-function prepareAudioMedia(media, region) {
-  var mediaId = getMediaId(media);
-  if (media.url !== null) {
-    media.html.src = media.url;
-  }
-  // Check if media in region
-  // Remove old copy before inserting fresh copy of the media
-  var mediaInRegion = region.html.querySelector('.' + mediaId);
-  if (mediaInRegion) {
-    mediaInRegion.remove();
-  }
-  // Append media to its region
-  var $region = document.querySelector('#' + region.containerName);
-  $region !== null && $region.appendChild(media.html);
-}
-function prepareHtmlMedia(media, region) {
-  // Set state as false ( for now )
-  media.ready = false;
-  if (media.html) {
-    var mediaId = getMediaId(media);
-    // Clean up old copy of the media
-    // before inserting fresh copy
-    var mediaInRegion = region.html.querySelector('.' + mediaId);
-    // Append iframe
-    media.html.innerHTML = '';
-    media.html.appendChild(media.iframe);
-    if (!mediaInRegion) {
-      // Add fresh copy of the media into the region
-      var $region = document.querySelector('#' + region.containerName);
-      $region !== null && $region.appendChild(media.html);
-      media.ready = true;
-    }
-  }
-}
-function playerReportFault(_x11, _x12) {
-  return _playerReportFault.apply(this, arguments);
-}
-function _playerReportFault() {
-  _playerReportFault = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(msg, media) {
-    var playerSW, hasSW;
-    return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
-        case 0:
-          // Immediately expire media and report a fault
-          playerSW = PwaSW();
-          _context7.next = 3;
-          return playerSW.getSW();
-        case 3:
-          hasSW = _context7.sent;
-          if (hasSW) {
-            playerSW.postMsg({
-              type: 'MEDIA_FAULT',
-              code: 5002,
-              reason: msg,
-              mediaId: media.id,
-              regionId: media.region.id,
-              layoutId: media.region.layout.id,
-              date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-              // Temporary setting
-              expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
-            }).then(function () {
-              // We try to prepare next media if we have more than 1 media
-              if (media.region.totalMediaObjects > 1) {
-                media.region.prepareNextMedia();
-              }
-            })["finally"](function () {
-              // Stopping media as we have reported the error as fault
-              console.debug('??? XLR.debug >> VideoMedia - Done reporting media fault', {
-                mediaId: media.id,
-                regionItems: media.region.totalMediaObjects
-              });
-            });
-          }
-        case 5:
-        case "end":
-          return _context7.stop();
+      function stop() {
+        return _stop.apply(this, arguments);
       }
-    }, _callee7);
-  }));
-  return _playerReportFault.apply(this, arguments);
-}
-
-const urlAlphabet =
-  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
-/* @ts-self-types="./index.d.ts" */
-let nanoid = (size = 21) => {
-  let id = '';
-  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
-  while (size--) {
-    id += urlAlphabet[bytes[size] & 63];
-  }
-  return id
-};
+      return stop;
+    }()
+    /**
+     * Emits a command from the shell command widget.
+     *
+     * @param media
+     * @private
+     */
+  }, {
+    key: "emitCommand",
+    value: function emitCommand(media) {
+      if (media.mediaType !== 'shellcommand') {
+        return;
+      }
+      var options = media.options;
+      if (options.commandtype === 'storedCommand' && options.commandcode) {
+        console.debug('Media::Emitter > Shell Command - Calling commandCodeReceived event');
+        this.xlr.emitter.emit('commandCodeReceived', options.commandcode);
+        return;
+      }
+      var commandString = '';
+      if (options.useglobalcommand === '1') {
+        commandString = options.globalcommand || '';
+      } else {
+        // Use platform-specific command when available
+        if (this.xlr.config.platform === ConsumerPlatform.CHROMEOS) {
+          commandString = options.chromeoscommand || '';
+        } else if (this.xlr.config.platform === ConsumerPlatform.ANDROID) {
+          commandString = options.androidcommand || '';
+        } else if (this.xlr.config.platform === ConsumerPlatform.LINUX) {
+          commandString = options.linuxcommand || '';
+        } else if (this.xlr.config.platform === ConsumerPlatform.TIZEN) {
+          commandString = options.tizencommand || '';
+        } else if (this.xlr.config.platform === ConsumerPlatform.WEBOS) {
+          commandString = options.weboscommand || '';
+        } else if (this.xlr.config.platform === ConsumerPlatform.WINDOWS) {
+          commandString = options.windowscommand || '';
+        }
+        // Fall back to the global command if the platform-specific one
+        // is missing, not configured, or not supported yet
+        if (!commandString && options.globalcommand) {
+          commandString = options.globalcommand;
+        }
+      }
+      if (commandString) {
+        console.debug('Media::Emitter > Shell Command - Calling commandStringReceived event');
+        this.xlr.emitter.emit('commandStringReceived', commandString);
+        return;
+      }
+    }
+  }]);
+}();
 
 var Region = /*#__PURE__*/function () {
   // ===== Constructor =====
@@ -74612,10 +74504,6 @@ var Region = /*#__PURE__*/function () {
       });
       // Prepare first media
       if (this.mediaObjects.length > 0) {
-        // Clean up region first
-        // if (this.html?.children.length > 0) {
-        //     this.html.innerHTML = '';
-        // }
         this.prepareFirstMedia();
       }
     }
@@ -74648,6 +74536,11 @@ var Region = /*#__PURE__*/function () {
     value: function prepareNextMedia() {
       var nextMediaIndex = (this.currentMediaIndex + 1) % this.totalMediaObjects;
       var nextMedia = this.mediaObjects[nextMediaIndex];
+      console.debug('<><> XLR.debug >> [Media] - [Region::prepareNextMedia()] - Preparing next media', {
+        currentMediaIndex: this.currentMediaIndex,
+        nextMediaIndex: nextMediaIndex,
+        nextMediaId: nextMedia.mediaId
+      });
       this.prepareMedia(nextMedia);
     }
   }, {
@@ -74666,36 +74559,6 @@ var Region = /*#__PURE__*/function () {
           regionId: this.id,
           oldMedia: (_this$oldMedia = this.oldMedia) === null || _this$oldMedia === void 0 ? void 0 : _this$oldMedia.containerName
         });
-        // const $region = document.getElementById(`${this.containerName}`);
-        // Preload first item
-        // if (this.currentMediaIndex > 0 && this.nxtMedia) {
-        //     // Prepare next items
-        //     this.prepareMedia(this.nxtMedia);
-        // } else {
-        //     this.prepareMedia(this.currMedia);
-        // }
-        // Append available media to region DOM
-        // if (this.currMedia) {
-        //
-        //     this.currEl = createMediaElement(this.currMedia);
-        //     this.currMedia.html = this.currEl;
-        //
-        //     console.debug('<> XLR.debug prepareMediaObjects::currMedia', {
-        //         currentMedia: this.currMedia.containerName,
-        //         regionId: this.id,
-        //     });
-        //     ($region) && $region.insertBefore(this.currEl as Node, $region.lastElementChild);
-        // }
-        // if (this.totalMediaObjects > 1 && this.nxtMedia) {
-        //     this.nxtEl = createMediaElement(this.nxtMedia);
-        //     this.nxtMedia.html = this.nxtEl;
-        //
-        //     console.debug('<> XLR.debug prepareMediaObjects::nxtMedia', {
-        //         nextMedia: this.nxtMedia.containerName,
-        //         regionId: this.id,
-        //     });
-        //     ($region) && $region.insertBefore(this.nxtEl as Node, $region.lastElementChild);
-        // }
       }
     }
   }, {
@@ -74709,116 +74572,6 @@ var Region = /*#__PURE__*/function () {
       this.layout.regions[this.index] = this;
       this.layout.regionExpired();
     }
-  }, {
-    key: "prepareVideo",
-    value: function () {
-      var _prepareVideo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(media, container) {
-        var _this2 = this;
-        var video;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              video = media.html;
-              if (media.url !== null) {
-                video.src = media.url;
-              }
-              container !== null && container.appendChild(media.html);
-              return _context2.abrupt("return", new Promise(function (resolve) {
-                var _media$videoHandler$p;
-                var vidType = videoFileType(getFileExt(media.uri));
-                // Initialize Video.js
-                media.player = videojs(video, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-                  errorDisplay: _this2.xlr.config.platform !== ConsumerPlatform.CHROMEOS,
-                  loop: media.loop,
-                  sources: [{
-                    src: media.url,
-                    type: vidType
-                  }] // Adjust MIME type if dynamic
-                }));
-                media.player.el().style.setProperty('visibility', 'hidden');
-                media.player.el().style.setProperty('z-index', '0');
-                media.player.el().style.setProperty('opacity', '0');
-                // Register video handler
-                media.videoHandler = videoMediaHandler(media, _this2.xlr.config.platform);
-                (_media$videoHandler$p = media.videoHandler.player) === null || _media$videoHandler$p === void 0 || _media$videoHandler$p.one('canplaythrough', function () {
-                  resolve();
-                });
-              }));
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      function prepareVideo(_x3, _x4) {
-        return _prepareVideo.apply(this, arguments);
-      }
-      return prepareVideo;
-    }()
-  }, {
-    key: "prepareImage",
-    value: function () {
-      var _prepareImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(media, container) {
-        var blobUrl, img;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              _context3.next = 2;
-              return BlobLoader.load(media.url);
-            case 2:
-              blobUrl = _context3.sent;
-              img = new Image(); // Wait for decoding to finish so there is no visual glitch
-              return _context3.abrupt("return", new Promise(function (resolve, reject) {
-                img.onload = function () {
-                  return resolve();
-                };
-                img.onerror = function (e) {
-                  return reject(e);
-                };
-                img.src = blobUrl;
-                if (media.html) {
-                  media.html.style.setProperty('background-image', "url(".concat(blobUrl, ")"));
-                }
-                container !== null && container.appendChild(media.html);
-              }));
-            case 5:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }));
-      function prepareImage(_x5, _x6) {
-        return _prepareImage.apply(this, arguments);
-      }
-      return prepareImage;
-    }()
-  }, {
-    key: "prepareIframe",
-    value: function prepareIframe(media, container) {
-      console.debug('??? XLR.debug >> Region prepareIframe - start');
-      return new Promise(function (resolve, reject) {
-        var iframe = media.iframe;
-        console.debug('??? XLR.debug >> Region prepareIframe - promise', {
-          iframe: iframe,
-          mediaType: media.mediaType,
-          container: container
-        });
-        if (iframe !== null) {
-          iframe.onload = function () {
-            return resolve();
-          };
-          iframe.onerror = function (e) {
-            return reject(e);
-          };
-          // Append iframe to html
-          if (media.html) {
-            media.html.innerHTML = '';
-            media.html.appendChild(iframe);
-          }
-          container !== null && container.appendChild(media.html);
-        }
-      });
-    }
   }, {
     key: "run",
     value: function run() {
@@ -74832,7 +74585,7 @@ var Region = /*#__PURE__*/function () {
   }, {
     key: "transitionNodes",
     value: function transitionNodes(oldMedia, newMedia) {
-      var _this3 = this;
+      var _this2 = this;
       var transOutDuration = 1;
       var transOutDirection = 'E';
       if (newMedia) {
@@ -74848,7 +74601,7 @@ var Region = /*#__PURE__*/function () {
         var transOut = transitionElement('defaultOut', {
           duration: defaultTransOutOptions.duration
         });
-        var transOutName;
+        var transOutName = '';
         if (oldMedia && Boolean(oldMedia.options['transout'])) {
           transOutName = oldMedia.options['transout'];
           if (transOutName === 'fly') {
@@ -74862,11 +74615,18 @@ var Region = /*#__PURE__*/function () {
           }
           transOut = transitionElement(transOutName, defaultTransOutOptions);
         }
+        console.debug('??? XLR.debug >> Region > transitionNodes - transOut options', {
+          transOutName: transOutName,
+          transOut: transOut,
+          transOutDuration: transOutDuration,
+          transOutDirection: transOutDirection,
+          totalMediaObjects: this.totalMediaObjects
+        });
         var hideOldMedia = function hideOldMedia() {
           // Hide oldMedia
           if (oldMedia) {
-            var _this3$layout$html;
-            var $region = (_this3$layout$html = _this3.layout.html) === null || _this3$layout$html === void 0 ? void 0 : _this3$layout$html.querySelector('#' + _this3.containerName);
+            var $layout = document.querySelector("#".concat(_this2.layout.containerName, "[data-sequence=\"").concat(_this2.layout.index, "\"]"));
+            var $region = $layout.querySelector('#' + _this2.containerName);
             var $oldMedia = $region ? $region.querySelector('.' + getMediaId(oldMedia)) : null;
             if ($oldMedia) {
               var removeOldMedia = function removeOldMedia() {
@@ -74905,7 +74665,7 @@ var Region = /*#__PURE__*/function () {
               if (Boolean(oldMedia.options['transout'])) {
                 oldMediaAnimate = $oldMedia.animate(transOut.keyframes, transOut.timing);
               }
-              if (Boolean(oldMedia.options['transout']) && _this3.totalMediaObjects > 1) {
+              if (Boolean(oldMedia.options['transout']) && _this2.totalMediaObjects > 1) {
                 if (transOutName === 'flyOut') {
                   // Reset last item to original position and state
                   oldMediaAnimate ? oldMediaAnimate.finished.then(function () {
@@ -74931,9 +74691,6 @@ var Region = /*#__PURE__*/function () {
               } else {
                 console.debug('??? XLR.debug >> Region transitionNode - hideOldMedia' + 'no transout and only 1 media');
                 removeOldMedia();
-                // Resolve this right away
-                // As a result, the transition between two media object
-                // seems like a cross-over
               }
             }
           }
@@ -75199,7 +74956,7 @@ var ActionController = /*#__PURE__*/function () {
           };
         }
         // Only render webhook controller in CMS
-        if (this.parent.xlr.config.platform !== 'CMS') {
+        if (this.parent.xlr.config.platform !== ConsumerPlatform.CMS) {
           this.$actionController.style.display = 'none';
           return;
         }
@@ -75297,10 +75054,10 @@ var ActionController = /*#__PURE__*/function () {
     key: "runAction",
     value: function runAction(actionData, options) {
       if (actionData.actiontype == 'navLayout') {
-        if (this.parent.xlr.config.platform === 'CMS') {
+        if (this.parent.xlr.config.platform === ConsumerPlatform.CMS) {
           // Open layout preview in a new tab
           this.openLayoutInNewTab(actionData.layoutcode, options);
-        } else if (this.parent.xlr.config.platform === 'chromeOS') {
+        } else if (this.parent.xlr.config.platform === ConsumerPlatform.CHROMEOS) {
           // Set target layout as active layout
           this.openLayoutInPlayer(actionData.layoutcode, options);
         }
@@ -75462,6 +75219,12 @@ function _getXlf() {
             fetchOptions.headers = {
               'Content-Type': 'text/xml'
             };
+          } else if (layoutOptions.platform === ConsumerPlatform.ELECTRON) {
+            xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
+            fetchOptions.mode = 'no-cors';
+            fetchOptions.headers = {
+              'Content-Type': 'text/xml'
+            };
           } else if (layoutOptions.appHost !== null) {
             xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
           }
@@ -75791,9 +75554,10 @@ var Layout = /*#__PURE__*/function () {
       if (!(this.bgImage === "" || typeof this.bgImage === 'undefined')) {
         /* Extract the image ID from the filename */
         this.bgId = this.bgImage.substring(0, this.bgImage.indexOf('.'));
-        var bgImageUrl = composeBgUrlByPlatform(this.xlr.config.platform, _objectSpread2(_objectSpread2({}, this.options), {}, {
-          layout: this
-        }));
+        var bgImageUrl = composeBgUrlByPlatform(this.xlr.config.platform, this);
+        console.debug('>>> XLR.debug Layout::parseXlf - Composed background image URL > ', {
+          bgImageUrl: bgImageUrl
+        });
         if ($layout) {
           if (!this.isOverlay) {
             $layout.style.setProperty('background-image', "url(\"".concat(bgImageUrl, "\")"));
@@ -76058,7 +75822,7 @@ function SplashScreen($parent, config) {
             case 0:
               $previewSplash.classList.add('preview-splash');
               // Don't show Xibo logo on CMS Preview
-              if (config && config.platform !== 'CMS') {
+              if (config && config.platform !== ConsumerPlatform.CMS) {
                 splashScreenImg = img$1;
                 if ((_config$icons = config.icons) !== null && _config$icons !== void 0 && _config$icons.splashScreen && config.icons.splashScreen.length > 0) {
                   splashScreenImg = config.icons.splashScreen;
@@ -76076,7 +75840,7 @@ function SplashScreen($parent, config) {
               $previewLoader.classList.add('preview-loader');
               $previewLoaderCaption.classList.add('preview-loaderCaption');
               // Show loader bar and text on CMS Preview
-              if (config && config.platform === 'CMS') {
+              if (config && config.platform === ConsumerPlatform.CMS) {
                 $previewLoader.style.setProperty('background-image', "url(".concat(img, ")"));
                 $previewLoaderCaption.innerHTML = '<p>Loading Layout...</p>';
               }
@@ -76793,7 +76557,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
     };
   };
   xlrObject.getLayout = function (inputLayout) {
-    var isCMS = this.config.platform === 'CMS';
+    var isCMS = this.config.platform === ConsumerPlatform.CMS;
     if (!isCMS && Object.keys(this.uniqueLayouts).length === 0) {
       return;
     }
@@ -76938,9 +76702,9 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             self = this; // Compose layout props first
             // Clone options to avoid mutating the shared xlfUrl template
             newOptions = _objectSpread2({}, props.options);
-            if (self.config.platform === 'CMS' && inputLayout && Boolean(inputLayout.layoutId)) {
+            if (self.config.platform === ConsumerPlatform.CMS && inputLayout && Boolean(inputLayout.layoutId)) {
               newOptions.xlfUrl = newOptions.xlfUrl.replace(':layoutId', String(inputLayout.layoutId));
-            } else if (self.config.platform === 'chromeOS' && inputLayout !== undefined) {
+            } else if ((self.config.platform === ConsumerPlatform.CHROMEOS || self.config.platform === ConsumerPlatform.ELECTRON) && inputLayout !== undefined) {
               newOptions.xlfUrl = inputLayout.path;
             }
             if (!(inputLayout && inputLayout.layoutNode === undefined)) {
@@ -77143,5 +76907,5 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
   return xlrObject;
 }
 
-export { Action, ActionsWrapper, AudioMedia, ConsumerPlatform, ELayoutState, ELayoutType, LayoutPlaybackType, Media, MediaState, Region, VideoMedia, audioFileType, capitalizeStr, composeBgUrlByPlatform, composeMediaUrl, composeResourceUrl, composeResourceUrlByPlatform, composeVideoSource, createMediaElement, XiboLayoutRenderer as default, defaultTrans, defaultVjsOpts, fadeInElem, fadeOutElem, fetchJSON, fetchText, flyInElem, flyOutElem, flyTransitionKeyframes, getDataBlob, getFileExt, getIndexByLayoutId, getLayout, getMediaId, getXlf, hasDefaultOnly, initRenderingDOM, initialLayout, initialMedia, initialRegion, initialXlr, isEmpty, isLayoutValid, nextId, preloadMediaBlob, setExpiry, transitionElement, videoFileType, videoMediaHandler, vjsDefaultOptions };
+export { Action, ActionsWrapper, AudioMedia, ConsumerPlatform, ELayoutState, ELayoutType, LayoutPlaybackType, Media, MediaState, Region, VideoMedia, audioFileType, capitalizeStr, composeBgUrlByPlatform, composeMediaUrl, composeResourceUrl, composeResourceUrlByPlatform, composeVideoSource, createMediaElement, XiboLayoutRenderer as default, defaultTrans, defaultVjsOpts, fadeInElem, fadeOutElem, fetchJSON, fetchText, flyInElem, flyOutElem, flyTransitionKeyframes, getAllAttributes, getDataBlob, getFileExt, getIndexByLayoutId, getLayout, getLayoutIndexByLayoutId, getMediaId, getXlf, hasDefaultOnly, hasSspLayout, initRenderingDOM, initialLayout, initialMedia, initialRegion, initialXlr, isEmpty, isLayoutValid, nextId, playerReportFault, preloadMediaBlob, prepareAudioMedia, prepareHtmlMedia, prepareImageMedia, prepareVideoMedia, setExpiry, transitionElement, videoFileType, vjsDefaultOptions };
 //# sourceMappingURL=xibo-layout-renderer.esm.js.map