@xibosignage/xibo-layout-renderer 1.0.23 → 1.0.24

package/dist/xibo-layout-renderer.js

@@ -72516,6 +72516,269 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
   }
 
+  function composeVideoSource($media, media) {
+    // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
+    var vidType = videoFileType(getFileExt(media.uri));
+    // Only add one source per type
+    if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
+      var $videoSource = document.createElement('source');
+      $videoSource.src = media.url;
+      $videoSource.type = vidType;
+      $media.insertBefore($videoSource, $media.lastElementChild);
+    }
+    return $media;
+  }
+  var defaultVjsOpts = {
+    autoplay: false,
+    muted: true,
+    // Start muted to allow autoplay policies
+    preload: 'auto',
+    controls: false
+  };
+  var vjsDefaultOptions = function vjsDefaultOptions(opts) {
+    return _objectSpread2({
+      controls: false,
+      preload: 'auto',
+      autoplay: false,
+      muted: true
+    }, opts);
+  };
+  var reportToPlayerPlatform = [exports.ConsumerPlatform.CHROMEOS, exports.ConsumerPlatform.ELECTRON];
+  function VideoMedia(media, xlr) {
+    var mediaId = getMediaId(media);
+    var videoPlayer = {
+      duration: 0,
+      init: function init() {
+        var _this = this;
+        var triggerTimeUpdate = false; // Used for media.duration === 0
+        videoPlayer.duration = media.duration;
+        var vjsPlayer = videojs(mediaId);
+        if (vjsPlayer) {
+          vjsPlayer.on('loadstart', function () {
+            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
+          });
+          vjsPlayer.on('loadedmetadata', function () {
+            if (media.duration === 0) {
+              videoPlayer.duration = vjsPlayer.duration();
+            }
+            console.debug('??? XLR.debug >> VideoMedia: loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
+          });
+          vjsPlayer.on('canplay', function () {
+            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+          });
+          vjsPlayer.on('playing', function () {
+            // Update duration
+            if (videoPlayer.duration === 0) {
+              videoPlayer.duration = vjsPlayer.duration();
+            }
+            console.debug('??? XLR.debug >> VideoMedia: playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
+            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
+          });
+          // @NOTE: When video is paused due to fail in unmuting the video
+          // and video has media.duration = 0, the video will stay paused and the video cycle won't end
+          // @TODO: Add timer when video is paused due to unmuting fail and duration that is equal to 0
+          // @NOTE: The pause issue when unmuting the video is mainly on a browser level.
+          // Please visit https://developer.chrome.com/blog/autoplay/ for more info.
+          vjsPlayer.ready(function () {
+            // Add guard making sure that video element is present
+            var videoElem = document.querySelector(".media--item.".concat(mediaId));
+            if (!document.body.contains(videoElem)) {
+              media.emitter.emit('cancelled', media);
+              return;
+            }
+            if (vjsPlayer !== undefined) {
+              vjsPlayer.muted(true);
+              // Race promise between a 0.5s play and a 5s skip
+              Promise.race([new Promise(function (resolve, reject) {
+                return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                  return _regeneratorRuntime().wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Trying to force play after 0.1 seconds"));
+                        // Try to force play here
+                        _context.prev = 1;
+                        if (!(vjsPlayer.currentTime() === 0)) {
+                          _context.next = 6;
+                          break;
+                        }
+                        // Set video mute/unmute based on setting once playing
+                        vjsPlayer.muted(media.muted);
+                        _context.next = 6;
+                        return vjsPlayer.play();
+                      case 6:
+                        // Resolve if play works
+                        resolve(true);
+                        _context.next = 12;
+                        break;
+                      case 9:
+                        _context.prev = 9;
+                        _context.t0 = _context["catch"](1);
+                        // Reject race if play fails
+                        reject('Play failed');
+                      case 12:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee, null, [[1, 9]]);
+                })), 100);
+              }), new Promise(function (_, reject) {
+                return setTimeout(function () {
+                  return reject('Timeout');
+                }, 5000);
+              })]).then(function () {
+                console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay started"));
+              })["catch"]( /*#__PURE__*/function () {
+                var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(error) {
+                  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                    while (1) switch (_context2.prev = _context2.next) {
+                      case 0:
+                        if (error === 'Timeout') {
+                          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                          _this.stop();
+                        } else {
+                          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                          if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                            playerReportFault('Media autoplay error', media).then(function () {
+                              _this.stop();
+                            });
+                          }
+                        }
+                      case 1:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2);
+                }));
+                return function (_x) {
+                  return _ref2.apply(this, arguments);
+                };
+              }());
+              // Optional: Reset the flag automatically when a new video loads or the source changes
+              vjsPlayer.on('loadstart', function () {
+                triggerTimeUpdate = false;
+              });
+              if (media.duration === 0) {
+                vjsPlayer.on('timeupdate', function () {
+                  var preloadBufferTimeMs = 2000;
+                  var mediaDuration = vjsPlayer.duration();
+                  var currentTime = vjsPlayer.currentTime();
+                  var regionHasMultipleMedia = media.region.totalMediaObjects > 1;
+                  var remainingTimeMs = 0;
+                  if (mediaDuration !== undefined && currentTime !== undefined) {
+                    remainingTimeMs = (mediaDuration - currentTime) * 1000;
+                  }
+                  if (regionHasMultipleMedia && remainingTimeMs === 0 && !triggerTimeUpdate) {
+                    // We don't have data yet and we must immediately prepare next media
+                    media.region.prepareNextMedia();
+                  } else if (regionHasMultipleMedia && remainingTimeMs <= preloadBufferTimeMs && !triggerTimeUpdate) {
+                    // Check if remaining time is less than preloadBufferTimeMs and the action hasn't been triggered yet
+                    console.log('Less than preloadBufferTimeMs remaining! Do something now.');
+                    // Prepare next media in region
+                    media.region.prepareNextMedia();
+                    triggerTimeUpdate = true; // Set the flag to prevent re-triggering
+                  }
+                  // Reset the flag if the user seeks back to a point where more than preloadBufferTimeMs remain
+                  if (remainingTimeMs > preloadBufferTimeMs) {
+                    triggerTimeUpdate = false;
+                  }
+                });
+              }
+            }
+          });
+          vjsPlayer.on('error', /*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(err) {
+              return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+                while (1) switch (_context3.prev = _context3.next) {
+                  case 0:
+                    console.debug("??? XLR.debug >> VideoMedia: Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
+                    if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                      playerReportFault('Video file source not supported', media).then(function () {
+                        _this.stop();
+                      });
+                    } else {
+                      // End media after 5 seconds
+                      setTimeout(function () {
+                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
+                        _this.stop();
+                      }, 5000);
+                    }
+                  case 2:
+                  case "end":
+                    return _context3.stop();
+                }
+              }, _callee3);
+            }));
+            return function (_x2) {
+              return _ref3.apply(this, arguments);
+            };
+          }());
+          if (media.duration === 0) {
+            vjsPlayer.on('ended', function () {
+              console.debug("??? XLR.debug >> VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+              _this.stop();
+            });
+          }
+        }
+      },
+      stop: function stop() {
+        var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        var vjsPlayer = media.player;
+        console.debug('??? XLR.debug >> VideoMedia::stop', {
+          vjsPlayer: vjsPlayer,
+          isDisposed: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.isDisposed_,
+          el: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.el_
+        });
+        // Expire the media and dispose the video
+        if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
+          if (!disposeOnly) {
+            media.emitter.emit('end', media);
+          }
+          vjsPlayer.dispose();
+          // Clear up media player
+          media.player = undefined;
+        } else {
+          media.player = undefined;
+          media.html = null;
+          media.emitter.emit('end', media);
+        }
+      },
+      play: function play() {
+        var _this2 = this;
+        var vjsPlayer = videojs(mediaId);
+        if (vjsPlayer !== undefined) {
+          var _vjsPlayer$play;
+          (_vjsPlayer$play = vjsPlayer.play()) === null || _vjsPlayer$play === void 0 || _vjsPlayer$play["catch"]( /*#__PURE__*/function () {
+            var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(error) {
+              return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
+                  case 0:
+                    if (error === 'Timeout') {
+                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                      _this2.stop();
+                    } else {
+                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                      if (reportToPlayerPlatform.includes(xlr.config.platform)) {
+                        playerReportFault('Media autoplay error', media).then(function () {
+                          _this2.stop();
+                        });
+                      }
+                    }
+                  case 1:
+                  case "end":
+                    return _context4.stop();
+                }
+              }, _callee4);
+            }));
+            return function (_x3) {
+              return _ref4.apply(this, arguments);
+            };
+          }());
+        }
+      }
+    };
+    return videoPlayer;
+  }
+
   /*
    * Copyright (C) 2024 Xibo Signage Ltd
    *
@@ -72750,65 +73013,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     return keyframes;
   };
 
-  function AudioMedia(media) {
-    var audioMediaObject = {
-      init: function init() {
-        var $audioMedia = document.getElementById(getMediaId(media));
-        var $playBtn = null;
-        if ($audioMedia) {
-          $audioMedia.onloadstart = function () {
-            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-          };
-          $audioMedia.onloadeddata = function () {
-            if ($audioMedia.readyState >= 2) {
-              console.debug("".concat(capitalizeStr(media.mediaType), " data for media > ").concat(media.id, " has been fully loaded . . ."));
-            }
-          };
-          $audioMedia.oncanplay = function () {
-            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-          };
-          $audioMedia.onplaying = function () {
-            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-            if ($playBtn !== null) {
-              $playBtn.remove();
-            }
-          };
-          var audioPlayPromise = $audioMedia.play();
-          if (audioPlayPromise !== undefined) {
-            audioPlayPromise.then(function () {
-              console.debug('autoplay started . . .');
-              // Autoplay restarted
-            })["catch"](function (error) {
-              if (error.name === 'NotAllowedError') {
-                var _$audioMedia$parentNo;
-                // Let's show a play audio button
-                $playBtn = document.createElement('button');
-                $playBtn.classList.add('play-audio-btn');
-                $playBtn.textContent = 'Play Audio';
-                $playBtn.addEventListener('click', function () {
-                  $audioMedia.muted = false;
-                  $audioMedia.play();
-                });
-                (_$audioMedia$parentNo = $audioMedia.parentNode) === null || _$audioMedia$parentNo === void 0 || _$audioMedia$parentNo.insertBefore($playBtn, $audioMedia.nextSibling);
-              }
-            });
-          }
-          if (media.duration === 0) {
-            $audioMedia.ondurationchange = function () {
-              console.debug('Showing Media ' + media.id + ' for ' + $audioMedia.duration + 's of Region ' + media.region.regionId);
-            };
-            $audioMedia.onended = function () {
-              var _media$emitter;
-              console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-              (_media$emitter = media.emitter) === null || _media$emitter === void 0 || _media$emitter.emit('end', media);
-            };
-          }
-        }
-      }
-    };
-    return audioMediaObject;
-  }
-
   var BlobLoader = /*#__PURE__*/function () {
     function BlobLoader() {
       _classCallCheck(this, BlobLoader);
@@ -72950,1102 +73154,253 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     PreviewTranslations["target"] = "Target";
   })(PreviewTranslations || (PreviewTranslations = {}));
 
-  function composeVideoSource($media, media) {
-    // const videoSrc = await preloadMediaBlob(media.url as string, media.mediaType as MediaTypes);
-    var vidType = videoFileType(getFileExt(media.uri));
-    // Only add one source per type
-    if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
-      var $videoSource = document.createElement('source');
-      $videoSource.src = media.url;
-      $videoSource.type = vidType;
-      $media.insertBefore($videoSource, $media.lastElementChild);
+  function nextId(options) {
+    if (options.idCounter > 500) {
+      options.idCounter = 0;
     }
-    return $media;
+    options.idCounter = options.idCounter + 1;
+    return options.idCounter;
   }
-  var defaultVjsOpts = {
-    autoplay: false,
-    muted: true,
-    // Start muted to allow autoplay policies
-    preload: 'auto',
-    controls: false
+  var getMediaId = function getMediaId(_ref) {
+    var mediaType = _ref.mediaType,
+      containerName = _ref.containerName;
+    var mediaId = containerName;
+    if (mediaType === 'video') {
+      mediaId = mediaId + '-vid';
+    } else if (mediaType === 'audio') {
+      mediaId = mediaId + '-aud';
+    }
+    return mediaId;
   };
-  var vjsDefaultOptions = function vjsDefaultOptions(opts) {
-    return _objectSpread2({
-      controls: false,
-      preload: 'auto',
-      autoplay: false,
-      muted: true
-    }, opts);
+  var capitalizeStr = function capitalizeStr(inputStr) {
+    if (inputStr === null) {
+      return '';
+    }
+    return String(inputStr).charAt(0).toUpperCase() + String(inputStr).substring(1);
   };
-  function videoMediaHandler(media, platform) {
-    var videoPlayer = {
-      player: undefined,
-      duration: 0,
-      stop: function stop(disposeOnly) {}
-    };
-    var playerReportFault = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(msg) {
-        var playerSW, hasSW;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              // Immediately expire media and report a fault
-              playerSW = PwaSW();
-              _context.next = 3;
-              return playerSW.getSW();
-            case 3:
-              hasSW = _context.sent;
-              media.region.layout.state = exports.ELayoutState.ERROR;
-              media.region.layout.errorCode = 405;
-              if (hasSW) {
-                playerSW.postMsg({
-                  type: 'MEDIA_FAULT',
-                  code: 5002,
-                  reason: msg,
-                  mediaId: media.id,
-                  regionId: media.region.id,
-                  layoutId: media.region.layout.id,
-                  date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-                  // Temporary setting
-                  expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
-                })["finally"](function () {
-                  videoPlayer.stop();
-                });
-              } else {
-                videoPlayer.stop();
+  function getDataBlob(_x, _x2) {
+    return _getDataBlob.apply(this, arguments);
+  }
+  function _getDataBlob() {
+    _getDataBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(src, jwtToken) {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            return _context3.abrupt("return", fetch(src, {
+              method: 'GET',
+              headers: {
+                'X-PREVIEW-JWT': jwtToken || ''
               }
-            case 7:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function playerReportFault(_x) {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    videoPlayer.duration = media.duration;
-    if (media.player) {
-      videoPlayer.player = media.player;
-    } else {
-      // Load on demand if it has not been cached
-      var vjsElem = media.html;
-      var vidType = videoFileType(getFileExt(media.uri));
-      if (vjsElem === null) {
-        // Use media containerName instead for VJS id
-        vjsElem = media.containerName;
-      }
-      videoPlayer.player = videojs(vjsElem, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-        sources: [{
-          src: media.url,
-          type: vidType
-        }]
-      }));
-      media.player = videoPlayer.player;
-    }
-    videoPlayer.stop = function () {
-      var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      // Expire the media and dispose the video
-      if (videoPlayer.player !== undefined) {
-        if (!disposeOnly) {
-          media.emitter.emit('end', media);
+            }).then(function (res) {
+              return res.blob();
+            }).then(function (blob) {
+              return new Promise(function (res, rej) {
+                var reader = new FileReader();
+                reader.onloadend = function () {
+                  return res(reader.result);
+                };
+                reader.onerror = rej;
+                reader.readAsDataURL(blob);
+              });
+            }));
+          case 1:
+          case "end":
+            return _context3.stop();
         }
-        // Dispose player
-        videoPlayer.player.dispose();
-        // Clear up media player
-        videoPlayer.player = undefined;
-        media.player = undefined;
-      }
-    };
-    videoPlayer.player.on('loadstart', function () {
-      console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-    });
-    videoPlayer.player.one('loadedmetadata', function () {
-      if (media.duration === 0 && videoPlayer.player !== undefined) {
-        videoPlayer.duration = videoPlayer.player.duration();
-      }
-      console.debug('??? XLR.debug >> VideoMedia - loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
-    });
-    videoPlayer.player.one('playing', function () {
-      console.debug('??? XLR.debug >> VideoMedia - playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
-      console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-      videoPlayer.player && videoPlayer.player.muted(media.muted);
-    });
-    videoPlayer.player.on('error', /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              console.debug("??? XLR.debug >> VideoMedia - Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-              if (!(platform === 'chromeOS')) {
-                _context2.next = 6;
-                break;
+      }, _callee3);
+    }));
+    return _getDataBlob.apply(this, arguments);
+  }
+  function preloadMediaBlob(_x3, _x4, _x5) {
+    return _preloadMediaBlob.apply(this, arguments);
+  }
+  function _preloadMediaBlob() {
+    _preloadMediaBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(src, type, jwtToken) {
+      var res, blob, data;
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.next = 2;
+            return fetch(src, {
+              method: 'GET',
+              headers: {
+                'X-PREVIEW-JWT': jwtToken || ''
               }
-              _context2.next = 4;
-              return playerReportFault('Video file source not supported');
-            case 4:
-              _context2.next = 7;
+            });
+          case 2:
+            res = _context4.sent;
+            blob = new Blob();
+            if (!(type === 'image')) {
+              _context4.next = 8;
               break;
-            case 6:
-              // End media after 5 seconds
-              setTimeout(function () {
-                console.debug("??? XLR.debug >> VideoMedia - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
-                videoPlayer.stop();
-              }, 5000);
-            case 7:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function (_x2) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
-    // Register on.("end") when media.duration is 0
-    if (media.duration === 0) {
-      videoPlayer.player.on('ended', function () {
-        console.debug("??? XLR.debug >> VideoMedia - onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-        videoPlayer.stop();
-      });
-    }
-    return videoPlayer;
-  }
-  function VideoMedia(media, xlr) {
-    var mediaId = getMediaId(media);
-    var videoPlayer = {
-      duration: 0,
-      init: function init() {
-        var _this = this;
-        var triggerTimeUpdate = false; // Used for media.duration === 0
-        videoPlayer.duration = media.duration;
-        var vjsPlayer = videojs(mediaId);
-        if (vjsPlayer) {
-          vjsPlayer.on('loadstart', function () {
-            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-          });
-          vjsPlayer.on('loadedmetadata', function () {
-            if (media.duration === 0) {
-              videoPlayer.duration = vjsPlayer.duration();
             }
-            console.debug('??? XLR.debug >> VideoMedia: loadedmetadata: Setting video duration to = ' + videoPlayer.duration);
-          });
-          vjsPlayer.on('canplay', function () {
-            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-          });
-          vjsPlayer.on('playing', function () {
-            // Update duration
-            if (videoPlayer.duration === 0) {
-              videoPlayer.duration = vjsPlayer.duration();
+            blob = new Blob();
+            _context4.next = 19;
+            break;
+          case 8:
+            if (!(type === 'video')) {
+              _context4.next = 14;
+              break;
             }
-            console.debug('??? XLR.debug >> VideoMedia: playing: Showing Media ' + media.id + ' for ' + videoPlayer.duration + 's of Region ' + media.region.regionId);
-            console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-          });
-          // @NOTE: When video is paused due to fail in unmuting the video
-          // and video has media.duration = 0, the video will stay paused and the video cycle won't end
-          // @TODO: Add timer when video is paused due to unmuting fail and duration that is equal to 0
-          // @NOTE: The pause issue when unmuting the video is mainly on a browser level.
-          // Please visit https://developer.chrome.com/blog/autoplay/ for more info.
-          vjsPlayer.ready(function () {
-            // Add guard making sure that video element is present
-            var videoElem = document.querySelector(".media--item.".concat(mediaId));
-            if (!document.body.contains(videoElem)) {
-              media.emitter.emit('cancelled', media);
-              return;
+            _context4.next = 11;
+            return res.blob();
+          case 11:
+            blob = _context4.sent;
+            _context4.next = 19;
+            break;
+          case 14:
+            if (!(type === 'audio')) {
+              _context4.next = 19;
+              break;
             }
-            if (vjsPlayer !== undefined) {
-              vjsPlayer.muted(true);
-              // Race promise between a 0.5s play and a 5s skip
-              Promise.race([new Promise(function (resolve, reject) {
-                return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-                  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-                    while (1) switch (_context3.prev = _context3.next) {
-                      case 0:
-                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Trying to force play after 0.1 seconds"));
-                        // Try to force play here
-                        _context3.prev = 1;
-                        if (!(vjsPlayer.currentTime() === 0)) {
-                          _context3.next = 6;
-                          break;
-                        }
-                        // Set video mute/unmute based on setting once playing
-                        vjsPlayer.muted(media.muted);
-                        _context3.next = 6;
-                        return vjsPlayer.play();
-                      case 6:
-                        // Resolve if play works
-                        resolve(true);
-                        _context3.next = 12;
-                        break;
-                      case 9:
-                        _context3.prev = 9;
-                        _context3.t0 = _context3["catch"](1);
-                        // Reject race if play fails
-                        reject('Play failed');
-                      case 12:
-                      case "end":
-                        return _context3.stop();
-                    }
-                  }, _callee3, null, [[1, 9]]);
-                })), 100);
-              }), new Promise(function (_, reject) {
-                return setTimeout(function () {
-                  return reject('Timeout');
-                }, 5000);
-              })]).then(function () {
-                console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay started"));
-              })["catch"]( /*#__PURE__*/function () {
-                var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(error) {
-                  return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-                    while (1) switch (_context4.prev = _context4.next) {
-                      case 0:
-                        if (error === 'Timeout') {
-                          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
-                          _this.stop();
-                        } else {
-                          console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
-                          if (xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                            playerReportFault('Media autoplay error', media).then(function () {
-                              _this.stop();
-                            });
-                          }
-                        }
-                      case 1:
-                      case "end":
-                        return _context4.stop();
-                    }
-                  }, _callee4);
-                }));
-                return function (_x3) {
-                  return _ref4.apply(this, arguments);
-                };
-              }());
-              // Optional: Reset the flag automatically when a new video loads or the source changes
-              vjsPlayer.on('loadstart', function () {
-                triggerTimeUpdate = false;
-              });
-              if (media.duration === 0) {
-                vjsPlayer.on('timeupdate', function () {
-                  var preloadBufferTimeMs = 2000;
-                  var mediaDuration = vjsPlayer.duration();
-                  var currentTime = vjsPlayer.currentTime();
-                  var regionHasMultipleMedia = media.region.totalMediaObjects > 1;
-                  var remainingTimeMs = 0;
-                  if (mediaDuration !== undefined && currentTime !== undefined) {
-                    remainingTimeMs = (mediaDuration - currentTime) * 1000;
-                  }
-                  if (regionHasMultipleMedia && remainingTimeMs === 0 && !triggerTimeUpdate) {
-                    // We don't have data yet and we must immediately prepare next media
-                    media.region.prepareNextMedia();
-                  } else if (regionHasMultipleMedia && remainingTimeMs <= preloadBufferTimeMs && !triggerTimeUpdate) {
-                    // Check if remaining time is less than preloadBufferTimeMs and the action hasn't been triggered yet
-                    console.log('Less than preloadBufferTimeMs remaining! Do something now.');
-                    // Prepare next media in region
-                    media.region.prepareNextMedia();
-                    triggerTimeUpdate = true; // Set the flag to prevent re-triggering
-                  }
-                  // Reset the flag if the user seeks back to a point where more than preloadBufferTimeMs remain
-                  if (remainingTimeMs > preloadBufferTimeMs) {
-                    triggerTimeUpdate = false;
-                  }
-                });
-              }
-            }
-          });
-          vjsPlayer.on('error', /*#__PURE__*/function () {
-            var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(err) {
-              return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-                while (1) switch (_context5.prev = _context5.next) {
-                  case 0:
-                    console.debug("??? XLR.debug >> VideoMedia: Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-                    if (xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                      playerReportFault('Video file source not supported', media).then(function () {
-                        _this.stop();
-                      });
-                    } else {
-                      // End media after 5 seconds
-                      setTimeout(function () {
-                        console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
-                        _this.stop();
-                      }, 5000);
-                    }
-                  case 2:
-                  case "end":
-                    return _context5.stop();
-                }
-              }, _callee5);
-            }));
-            return function (_x4) {
-              return _ref5.apply(this, arguments);
-            };
-          }());
-          if (media.duration === 0) {
-            vjsPlayer.on('ended', function () {
-              console.debug("??? XLR.debug >> VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-              _this.stop();
+            _context4.next = 17;
+            return res.arrayBuffer();
+          case 17:
+            data = _context4.sent;
+            blob = new Blob([data], {
+              type: audioFileType(getFileExt(src))
             });
-          }
+          case 19:
+            return _context4.abrupt("return", URL.createObjectURL(blob));
+          case 20:
+          case "end":
+            return _context4.stop();
         }
-      },
-      stop: function stop() {
-        var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-        var vjsPlayer = media.player;
-        console.debug('??? XLR.debug >> VideoMedia::stop', {
-          vjsPlayer: vjsPlayer,
-          isDisposed: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.isDisposed_,
-          el: vjsPlayer === null || vjsPlayer === void 0 ? void 0 : vjsPlayer.el_
-        });
-        // Expire the media and dispose the video
-        if (vjsPlayer !== undefined && !vjsPlayer.isDisposed_) {
-          if (!disposeOnly) {
-            media.emitter.emit('end', media);
-          }
-          vjsPlayer.dispose();
-          // Clear up media player
-          media.player = undefined;
-        } else {
-          media.player = undefined;
-          media.html = null;
-          media.emitter.emit('end', media);
+      }, _callee4);
+    }));
+    return _preloadMediaBlob.apply(this, arguments);
+  }
+  function fetchJSON(_x6, _x7) {
+    return _fetchJSON.apply(this, arguments);
+  }
+  function _fetchJSON() {
+    _fetchJSON = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(url, jwtToken) {
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            return _context5.abrupt("return", fetch(url, {
+              method: 'GET',
+              headers: {
+                'X-PREVIEW-JWT': jwtToken || ''
+              }
+            }).then(function (res) {
+              return res.json();
+            })["catch"](function (err) {
+              console.debug(err);
+            }));
+          case 1:
+          case "end":
+            return _context5.stop();
         }
-      },
-      play: function play() {
-        var _this2 = this;
-        var vjsPlayer = videojs(mediaId);
-        if (vjsPlayer !== undefined) {
-          var _vjsPlayer$play;
-          (_vjsPlayer$play = vjsPlayer.play()) === null || _vjsPlayer$play === void 0 || _vjsPlayer$play["catch"]( /*#__PURE__*/function () {
-            var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(error) {
-              return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-                while (1) switch (_context6.prev = _context6.next) {
-                  case 0:
-                    if (error === 'Timeout') {
-                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
-                      _this2.stop();
-                    } else {
-                      console.debug("??? XLR.debug >> VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
-                      if (xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                        playerReportFault('Media autoplay error', media).then(function () {
-                          _this2.stop();
-                        });
-                      }
-                    }
-                  case 1:
-                  case "end":
-                    return _context6.stop();
-                }
-              }, _callee6);
+      }, _callee5);
+    }));
+    return _fetchJSON.apply(this, arguments);
+  }
+  function fetchText(_x8, _x9) {
+    return _fetchText.apply(this, arguments);
+  }
+  function _fetchText() {
+    _fetchText = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(url, jwtToken) {
+      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            return _context6.abrupt("return", fetch(url, {
+              method: 'GET',
+              headers: {
+                'X-PREVIEW-JWT': jwtToken || ''
+              }
+            }).then(function (res) {
+              return res.text();
+            }).then(function (responseText) {
+              if (String(responseText).length > 0) {
+                return responseText;
+              } else {
+                return '';
+              }
+            })["catch"](function (err) {
+              console.debug(err);
+              return err === null || err === void 0 ? void 0 : err.message;
             }));
-            return function (_x5) {
-              return _ref6.apply(this, arguments);
-            };
-          }());
+          case 1:
+          case "end":
+            return _context6.stop();
         }
-      }
+      }, _callee6);
+    }));
+    return _fetchText.apply(this, arguments);
+  }
+  function getFileExt(filename) {
+    var filenameArr = String(filename).split('.');
+    return filenameArr[filenameArr.length - 1];
+  }
+  function audioFileType(str) {
+    var validAudioTypes = {
+      'mp3': 'audio/mp3',
+      'wav': 'audio/wav',
+      'ogg': 'audio/ogg'
     };
-    return videoPlayer;
+    if (Boolean(validAudioTypes[str])) {
+      return validAudioTypes[str];
+    }
+    return undefined;
   }
-
-  var Media = /*#__PURE__*/function () {
-    function Media(region, mediaId, xml, options, xlr) {
-      var _this$xml,
-        _this$xml2,
-        _this$xml3,
-        _this$xml4,
-        _this$xml5,
-        _this = this;
-      _classCallCheck(this, Media);
-      _defineProperty(this, "attachedAudio", false);
-      _defineProperty(this, "checkIframeStatus", false);
-      _defineProperty(this, "containerName", '');
-      _defineProperty(this, "divHeight", 0);
-      _defineProperty(this, "divWidth", 0);
-      _defineProperty(this, "duration", 0);
-      _defineProperty(this, "emitter", createNanoEvents());
-      _defineProperty(this, "enableStat", false);
-      _defineProperty(this, "fileId", '');
-      _defineProperty(this, "finished", false);
-      _defineProperty(this, "html", null);
-      _defineProperty(this, "id", '');
-      _defineProperty(this, "idCounter", 0);
-      _defineProperty(this, "iframe", null);
-      _defineProperty(this, "iframeName", '');
-      _defineProperty(this, "index", 0);
-      _defineProperty(this, "loadIframeOnRun", false);
-      _defineProperty(this, "loop", false);
-      _defineProperty(this, "mediaId", '');
-      _defineProperty(this, "mediaType", '');
-      _defineProperty(this, "muted", false);
-      _defineProperty(this, "options", {});
-      _defineProperty(this, "player", undefined);
-      _defineProperty(this, "ready", true);
-      _defineProperty(this, "region", {});
-      _defineProperty(this, "render", 'html');
-      _defineProperty(this, "schemaVersion", '1');
-      _defineProperty(this, "singlePlay", false);
-      _defineProperty(this, "state", MediaState.IDLE);
-      _defineProperty(this, "tempSrc", '');
-      _defineProperty(this, "timeoutId", setTimeout(function () {}, 0));
-      _defineProperty(this, "type", '');
-      _defineProperty(this, "uri", '');
-      _defineProperty(this, "url", null);
-      _defineProperty(this, "useDuration", false);
-      _defineProperty(this, "xml", null);
-      _defineProperty(this, "videoHandler", void 0);
-      _defineProperty(this, "mediaTimer", void 0);
-      _defineProperty(this, "mediaTimeCount", 0);
-      _defineProperty(this, "xlr", {});
-      _defineProperty(this, "statsBC", new BroadcastChannel('statsBC'));
-      _defineProperty(this, "hasCommandExecuted", void 0);
-      this.region = region;
-      this.id = mediaId;
-      this.mediaId = this.id;
-      this.xml = xml;
-      this.options = options;
-      this.xlr = xlr;
-      this.fileId = ((_this$xml = this.xml) === null || _this$xml === void 0 ? void 0 : _this$xml.getAttribute('fileId')) || '';
-      this.idCounter = nextId(this.options);
-      this.containerName = "M-".concat(this.id, "-").concat(this.idCounter);
-      this.iframeName = "".concat(this.containerName, "-iframe");
-      this.mediaType = ((_this$xml2 = this.xml) === null || _this$xml2 === void 0 ? void 0 : _this$xml2.getAttribute('type')) || '';
-      this.render = ((_this$xml3 = this.xml) === null || _this$xml3 === void 0 ? void 0 : _this$xml3.getAttribute('render')) || '';
-      this.duration = parseInt((_this$xml4 = this.xml) === null || _this$xml4 === void 0 ? void 0 : _this$xml4.getAttribute('duration')) || 0;
-      this.enableStat = Boolean(((_this$xml5 = this.xml) === null || _this$xml5 === void 0 ? void 0 : _this$xml5.getAttribute('enableStat')) || false);
-      this.hasCommandExecuted = false;
-      this.on('start', function (media) {
-        if (media.state === MediaState.PLAYING) return;
-        media.state = MediaState.PLAYING;
-        if (media.mediaType === 'video') {
-          var videoMedia = VideoMedia(media, _this.xlr);
-          videoMedia.init();
-          if (media.duration > 0) {
-            _this.startMediaTimer(media);
-          }
-        } else if (media.mediaType === 'audio') {
-          AudioMedia(media).init();
-          if (media.duration > 0) {
-            _this.startMediaTimer(media);
-          }
-        } else if (media.mediaType === 'shellcommand') {
-          if (_this.hasCommandExecuted && !_this.loop) {
-            return;
-          }
-          _this.hasCommandExecuted = true;
-          _this.emitCommand(media);
-          if (media.duration > 0) {
-            _this.startMediaTimer(media);
-          }
-        } else {
-          _this.startMediaTimer(media);
-        }
-        // Check if stats are enabled for the layout
-        if (media.enableStat) {
-          _this.statsBC.postMessage({
-            action: 'START_STAT',
-            mediaId: parseInt(media.id),
-            layoutId: media.region.layout.id,
-            scheduleId: media.region.layout.scheduleId,
-            type: 'media'
-          });
-        }
-        // Emit media/widget start event
-        console.debug('Media::Emitter > Start - Calling widgetStart event');
-        _this.xlr.emitter.emit('widgetStart', parseInt(media.id));
-      });
-      this.on('end', function (media) {
-        if (media.state === MediaState.ENDED) return;
-        media.state = MediaState.ENDED;
-        if (_this.mediaTimer) {
-          clearInterval(_this.mediaTimer);
-          _this.mediaTimeCount = 0;
-        }
-        // Check if stats are enabled for the layout
-        if (media.enableStat) {
-          _this.statsBC.postMessage({
-            action: 'END_STAT',
-            mediaId: parseInt(media.id),
-            layoutId: media.region.layout.id,
-            scheduleId: media.region.layout.scheduleId,
-            type: 'media'
-          });
-        }
-        // Emit media/widget end event
-        console.debug('Media::Emitter > End - Calling widgetEnd event', {
-          mediaId: media.id,
-          regionId: media.region.id,
-          layoutId: media.region.layout.id
-        });
-        _this.xlr.emitter.emit('widgetEnd', parseInt(media.id));
-        media.region.playNextMedia();
-      });
-      this.on('cancelled', function (media) {
-        if (media.state === MediaState.CANCELLED) return;
-        media.state = MediaState.CANCELLED;
-        if (_this.mediaTimer) {
-          clearInterval(_this.mediaTimer);
-          _this.mediaTimeCount = 0;
-        }
-        // Check if stats are enabled for the layout
-        if (media.enableStat) {
-          _this.statsBC.postMessage({
-            action: 'END_STAT',
-            mediaId: parseInt(media.id),
-            layoutId: media.region.layout.id,
-            scheduleId: media.region.layout.scheduleId,
-            type: 'media'
-          });
-        }
-        // Emit media/widget end event
-        console.debug('Media::Emitter > End - Calling widgetEnd event', {
-          mediaId: media.id,
-          regionId: media.region.id,
-          layoutId: media.region.layout.id
-        });
-        _this.xlr.emitter.emit('widgetEnd', parseInt(media.id));
-        media.region.playNextMedia();
-      });
-      // Initialize Media object
-      this.init();
+  function videoFileType(str) {
+    var validVideoTypes = {
+      'mp4': 'video/mp4',
+      'webm': 'video/webm',
+      'wmv': 'video/x-ms-wmv'
+    };
+    if (Boolean(validVideoTypes[str])) {
+      return validVideoTypes[str];
     }
-    return _createClass(Media, [{
-      key: "startMediaTimer",
-      value: function startMediaTimer(media) {
-        var _this2 = this;
-        var preloadTimeMs = 2000;
-        var preloadTimeBufferMs = media.duration * 1000 - preloadTimeMs;
-        var isPreparingNextMedia = false;
-        if (preloadTimeBufferMs < preloadTimeMs) {
-          // Use media duration when preloadTimeBufferMs is less than the preloadTimeMs
-          preloadTimeBufferMs = media.duration * 1000;
-        }
-        this.mediaTimer = setInterval(function () {
-          _this2.mediaTimeCount++;
-          var elapsedTimeMs = _this2.mediaTimeCount * 1000;
-          // prepare region's next media
-          if (_this2.region.totalMediaObjects > 1 && elapsedTimeMs >= preloadTimeBufferMs && !isPreparingNextMedia) {
-            isPreparingNextMedia = true;
-            _this2.region.prepareNextMedia();
-          }
-          if (_this2.mediaTimeCount > media.duration) {
-            console.debug('??? XLR.debug >> Media::startMediaTimer: emit>end: on media ' + media.id + ' of Region ' + media.region.regionId);
-            console.debug('??? XLR.debug >> Media::startMediaTimer - Media::Emitter > End', {
-              currentLayout: _this2.xlr.currentLayout,
-              media: media,
-              region: media.region,
-              layout: media.region.layout
-            });
-            media.emitter.emit('end', media);
-            if (media.mediaType === 'video') {
-              // Dispose the video media
-              console.debug("??? XLR.debug >> VideoMedia::stop - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-              if (media.player !== undefined) {
-                VideoMedia(media, _this2.xlr).stop(true);
-              }
-            }
-          }
-        }, 1000);
-        console.debug('startMediaTimer: Showing Media ' + media.id + ' for ' + media.duration + 's of Region ' + media.region.regionId);
-      }
-    }, {
-      key: "on",
-      value: function on(event, callback) {
-        return this.emitter.on(event, callback);
+    return undefined;
+  }
+  function composeResourceUrlByPlatform(options, params) {
+    var resourceUrl = '';
+    if (params.regionOptions && Boolean(params.regionOptions.getResourceUrl)) {
+      resourceUrl = params.regionOptions.getResourceUrl.replace(":regionId", params.regionId).replace(":id", params.mediaId) + '?preview=1&layoutPreview=1';
+    }
+    if (options.platform === exports.ConsumerPlatform.CMS && Boolean(params.regionOptions.previewJwt)) {
+      resourceUrl += '&jwt=' + params.regionOptions.previewJwt;
+    }
+    if (options.platform === exports.ConsumerPlatform.CHROMEOS) {
+      var resourceEndpoint = '/required-files/resource/';
+      if (!params.isGlobalContent && params.isImageOrVideo) {
+        resourceUrl = resourceEndpoint + params.fileId + '?saveAs=' + params.uri;
       }
-    }, {
-      key: "init",
-      value: function init() {
-        var _this$xml6;
-        var mediaOptions = (_this$xml6 = this.xml) === null || _this$xml6 === void 0 ? void 0 : _this$xml6.getElementsByTagName('options');
-        if (mediaOptions) {
-          for (var _i = 0, _Array$from = Array.from(mediaOptions); _i < _Array$from.length; _i++) {
-            var _options = _Array$from[_i];
-            // Get options
-            var _mediaOptions = _options.children;
-            for (var _i2 = 0, _Array$from2 = Array.from(_mediaOptions); _i2 < _Array$from2.length; _i2++) {
-              var mediaOption = _Array$from2[_i2];
-              this.options[mediaOption.nodeName.toLowerCase()] = mediaOption.textContent;
-            }
-          }
-        }
-        // Check for options.uri and add it to media
-        if (Boolean(this.options['uri'])) {
-          this.uri = this.options['uri'];
-        }
-        // Show in fullscreen?
-        if (this.options.showfullscreen === "1") {
-          // Set dimensions as the layout ones
-          this.divWidth = this.region.layout.sWidth;
-          this.divHeight = this.region.layout.sHeight;
-        } else {
-          // Set dimensions as the region ones
-          this.divWidth = this.region.sWidth;
-          this.divHeight = this.region.sHeight;
-        }
-        var resourceUrlParams = _objectSpread2(_objectSpread2({}, this.xlr.config.config), {}, {
-          regionOptions: this.region.options,
-          layoutId: this.region.layout.layoutId,
-          regionId: this.region.id,
-          mediaId: this.id,
-          fileId: this.fileId,
-          scaleFactor: this.region.layout.scaleFactor,
-          uri: this.uri,
-          isGlobalContent: this.mediaType === 'global',
-          isImageOrVideo: this.mediaType === 'image' || this.mediaType === 'video'
-        });
-        if (this.mediaType === 'image' || this.mediaType === 'video') {
-          resourceUrlParams.mediaType = this.mediaType;
-        }
-        var tmpUrl = '';
-        if (this.xlr.config.platform === exports.ConsumerPlatform.CMS) {
-          tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
-        } else if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-          tmpUrl = composeResourceUrl(this.xlr.config, resourceUrlParams);
-          if (this.mediaType === 'image' || this.mediaType === 'video' || this.mediaType === 'audio') {
-            tmpUrl = composeMediaUrl(resourceUrlParams);
-            // this is an SSP Layout
-            if (this.region.layout.layoutId === -1) {
-              tmpUrl = this.uri;
-            }
-          }
-        }
-        this.url = tmpUrl;
-        // Loop if media has loop, or if region has loop and a single media
-        this.loop = this.options['loop'] == '1' || this.region.options['loop'] == '1' && this.region.totalMediaObjects == 1;
-        this.html = createMediaElement(this);
+    } else if (options.platform === exports.ConsumerPlatform.ELECTRON) {
+      if (params.render === 'html' || params.mediaType === 'ticker' || params.mediaType === 'webpage') {
+        resourceUrl = options.appHost + 'layout_' + params.layoutId + '_region_' + params.regionId + '_media_' + params.mediaId + '.html';
+      } else if (params.render === 'native' && params.isImageOrVideo) {
+        resourceUrl = options.appHost + params.uri;
       }
-    }, {
-      key: "run",
-      value: function run() {
-        var _this3 = this;
-        var transInDuration = 1;
-        var transInDirection = 'E';
-        if (Boolean(this.options['transinduration'])) {
-          transInDuration = Number(this.options.transinduration);
-        }
-        if (Boolean(this.options['transindirection'])) {
-          transInDirection = this.options.transindirection;
-        }
-        var defaultTransInOptions = {
-          duration: transInDuration
-        };
-        var transIn = transitionElement('defaultIn', {
-          duration: defaultTransInOptions.duration
-        });
-        if (Boolean(this.options['transin'])) {
-          var transInName = this.options['transin'];
-          if (transInName === 'fly') {
-            transInName = "".concat(transInName, "In");
-            defaultTransInOptions.keyframes = flyTransitionKeyframes({
-              trans: 'in',
-              direction: transInDirection,
-              height: this.divHeight,
-              width: this.divWidth
-            });
-          }
-          transIn = transitionElement(transInName, defaultTransInOptions);
-        }
-        var showCurrentMedia = function showCurrentMedia() {
-          var mediaId = getMediaId({
-            mediaType: _this3.mediaType,
-            containerName: _this3.containerName
-          });
-          var $region = document.querySelector('#' + _this3.region.containerName);
-          var $media = $region !== null && $region.querySelector('.' + mediaId);
-          if (!$media) {
-            $media = getNewMedia();
-          }
-          console.debug('??? XLR.debug >> Media run - show current media:', {
-            inDOM: document.body.contains($media),
-            mediaId: mediaId,
-            $media: $media,
-            mediaObject: _this3
-          });
-          if ($media) {
-            if (_this3.mediaType === 'video') {
-              var _this3$player, _this3$player2, _this3$player3, _this3$player4;
-              console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::START', {
-                mediaPlayer: _this3.player,
-                isDisposed: (_this3$player = _this3.player) === null || _this3$player === void 0 ? void 0 : _this3$player.isDisposed(),
-                el: (_this3$player2 = _this3.player) === null || _this3$player2 === void 0 ? void 0 : _this3$player2.el_
-              });
-              // Make sure that vjs is available on the media
-              // Else, re-initialize
-              if (_this3.player !== undefined) {
-                var existingPlayer = videojs(mediaId);
-                if (existingPlayer) {
-                  _this3.player = existingPlayer;
-                } else {
-                  if (_this3.player.isDisposed_) {
-                    _this3.player = undefined;
-                    _this3.player = videojs(mediaId, _objectSpread2({}, vjsDefaultOptions({
-                      errorDisplay: _this3.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-                      loop: _this3.loop
-                    })));
-                  }
-                }
-              }
-              console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::END', {
-                mediaPlayer: _this3.player,
-                isDisposed: (_this3$player3 = _this3.player) === null || _this3$player3 === void 0 ? void 0 : _this3$player3.isDisposed(),
-                el: (_this3$player4 = _this3.player) === null || _this3$player4 === void 0 ? void 0 : _this3$player4.el_
-              });
-              if (_this3.player !== undefined && _this3.player.el_ !== null) {
-                _this3.player.el().style.setProperty('visibility', 'visible');
-                _this3.player.el().style.setProperty('z-index', '10');
-                _this3.player.el().style.setProperty('opacity', '1');
-              }
-            } else {
-              console.debug('??? XLR.debug >> Media::run() > showCurrentMedia', {
-                mediaType: _this3.mediaType,
-                render: _this3.render,
-                $media: $media,
-                state: _this3.state
-              });
-              $media.style.setProperty('visibility', 'visible');
-              $media.style.setProperty('z-index', '10');
-              $media.style.setProperty('opacity', '1');
-            }
-            if (Boolean(_this3.options['transin'])) {
-              $media.animate(transIn.keyframes, transIn.timing);
-            }
-            if (!_this3.region.layout.isOverlay || _this3.region.layout.isOverlay && _this3.region.totalMediaObjects > 1) {
-              _this3.emitter.emit('start', _this3);
-            }
-          }
-        };
-        var getNewMedia = function getNewMedia() {
-          var $region = document.getElementById("".concat(_this3.region.containerName));
-          // This function is for checking whether
-          // the region still has to show a media item
-          // when another region is not finished yet
-          if (_this3.region.complete && !_this3.region.layout.allEnded) {
-            // Add currentMedia to the region
-            $region && $region.insertBefore(_this3.html, $region.lastElementChild);
-            return _this3.html;
-          }
-          return null;
-        };
-        showCurrentMedia();
-      }
-    }, {
-      key: "stop",
-      value: function () {
-        var _stop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-          var $media;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                $media = document.getElementById(getMediaId({
-                  mediaType: this.mediaType,
-                  containerName: this.containerName
-                }));
-                if ($media) {
-                  $media.style.display = 'none';
-                  $media.remove();
-                }
-                // Release blob URLs for image media to prevent memory leaks on long-running signage
-                if (this.mediaType === 'image' && this.url) {
-                  BlobLoader.release(this.url);
-                }
-              case 3:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee, this);
-        }));
-        function stop() {
-          return _stop.apply(this, arguments);
-        }
-        return stop;
-      }()
-      /**
-       * Emits a command from the shell command widget.
-       *
-       * @param media
-       * @private
-       */
-    }, {
-      key: "emitCommand",
-      value: function emitCommand(media) {
-        if (media.mediaType !== 'shellcommand') {
-          return;
-        }
-        var options = media.options;
-        if (options.commandtype === 'storedCommand' && options.commandcode) {
-          console.debug('Media::Emitter > Shell Command - Calling commandCodeReceived event');
-          this.xlr.emitter.emit('commandCodeReceived', options.commandcode);
-          return;
-        }
-        var commandString = '';
-        if (options.useglobalcommand === '1') {
-          commandString = options.globalcommand || '';
-        } else {
-          // Use platform-specific command when available
-          if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-            commandString = options.chromeoscommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.ANDROID) {
-            commandString = options.androidcommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.LINUX) {
-            commandString = options.linuxcommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.TIZEN) {
-            commandString = options.tizencommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.WEBOS) {
-            commandString = options.weboscommand || '';
-          } else if (this.xlr.config.platform === exports.ConsumerPlatform.WINDOWS) {
-            commandString = options.windowscommand || '';
-          }
-          // Fall back to the global command if the platform-specific one
-          // is missing, not configured, or not supported yet
-          if (!commandString && options.globalcommand) {
-            commandString = options.globalcommand;
-          }
-        }
-        if (commandString) {
-          console.debug('Media::Emitter > Shell Command - Calling commandStringReceived event');
-          this.xlr.emitter.emit('commandStringReceived', commandString);
-          return;
-        }
-      }
-    }]);
-  }();
-
-  function nextId(options) {
-    if (options.idCounter > 500) {
-      options.idCounter = 0;
+    } else if (!Boolean(params['mediaType'])) {
+      resourceUrl += '&scale_override=' + params.scaleFactor;
     }
-    options.idCounter = options.idCounter + 1;
-    return options.idCounter;
+    return resourceUrl;
   }
-  var getMediaId = function getMediaId(_ref) {
-    var mediaType = _ref.mediaType,
-      containerName = _ref.containerName;
-    var mediaId = containerName;
-    if (mediaType === 'video') {
-      mediaId = mediaId + '-vid';
-    } else if (mediaType === 'audio') {
-      mediaId = mediaId + '-aud';
-    }
-    return mediaId;
-  };
-  var capitalizeStr = function capitalizeStr(inputStr) {
-    if (inputStr === null) {
-      return '';
-    }
-    return String(inputStr).charAt(0).toUpperCase() + String(inputStr).substring(1);
-  };
-  function getDataBlob(_x, _x2) {
-    return _getDataBlob.apply(this, arguments);
+  function composeResourceUrl(options, params) {
+    var _options$config, _options$config2, _options$config3;
+    var schemaVersion = options && ((_options$config = options.config) === null || _options$config === void 0 ? void 0 : _options$config.schemaVersion);
+    var hardwareKey = options && ((_options$config2 = options.config) === null || _options$config2 === void 0 ? void 0 : _options$config2.hardwareKey);
+    var serverKey = options && ((_options$config3 = options.config) === null || _options$config3 === void 0 ? void 0 : _options$config3.cmsKey);
+    return '/pwa/getResource' + '?v=' + schemaVersion + '&serverKey=' + serverKey + '&hardwareKey=' + hardwareKey + '&layoutId=' + params.layoutId + '&regionId=' + params.regionId + '&mediaId=' + params.mediaId;
   }
-  function _getDataBlob() {
-    _getDataBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(src, jwtToken) {
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            return _context3.abrupt("return", fetch(src, {
-              method: 'GET',
-              headers: {
-                'X-PREVIEW-JWT': jwtToken || ''
-              }
-            }).then(function (res) {
-              return res.blob();
-            }).then(function (blob) {
-              return new Promise(function (res, rej) {
-                var reader = new FileReader();
-                reader.onloadend = function () {
-                  return res(reader.result);
-                };
-                reader.onerror = rej;
-                reader.readAsDataURL(blob);
-              });
-            }));
-          case 1:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return _getDataBlob.apply(this, arguments);
+  function composeMediaUrl(params) {
+    return '/xmds.php?file=' + params.uri;
   }
-  function preloadMediaBlob(_x3, _x4, _x5) {
-    return _preloadMediaBlob.apply(this, arguments);
-  }
-  function _preloadMediaBlob() {
-    _preloadMediaBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(src, type, jwtToken) {
-      var res, blob, data;
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            _context4.next = 2;
-            return fetch(src, {
-              method: 'GET',
-              headers: {
-                'X-PREVIEW-JWT': jwtToken || ''
-              }
-            });
-          case 2:
-            res = _context4.sent;
-            blob = new Blob();
-            if (!(type === 'image')) {
-              _context4.next = 8;
-              break;
-            }
-            blob = new Blob();
-            _context4.next = 19;
-            break;
-          case 8:
-            if (!(type === 'video')) {
-              _context4.next = 14;
-              break;
-            }
-            _context4.next = 11;
-            return res.blob();
-          case 11:
-            blob = _context4.sent;
-            _context4.next = 19;
-            break;
-          case 14:
-            if (!(type === 'audio')) {
-              _context4.next = 19;
-              break;
-            }
-            _context4.next = 17;
-            return res.arrayBuffer();
-          case 17:
-            data = _context4.sent;
-            blob = new Blob([data], {
-              type: audioFileType(getFileExt(src))
-            });
-          case 19:
-            return _context4.abrupt("return", URL.createObjectURL(blob));
-          case 20:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4);
-    }));
-    return _preloadMediaBlob.apply(this, arguments);
-  }
-  function fetchJSON(_x6, _x7) {
-    return _fetchJSON.apply(this, arguments);
-  }
-  function _fetchJSON() {
-    _fetchJSON = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(url, jwtToken) {
-      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            return _context5.abrupt("return", fetch(url, {
-              method: 'GET',
-              headers: {
-                'X-PREVIEW-JWT': jwtToken || ''
-              }
-            }).then(function (res) {
-              return res.json();
-            })["catch"](function (err) {
-              console.debug(err);
-            }));
-          case 1:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5);
-    }));
-    return _fetchJSON.apply(this, arguments);
-  }
-  function fetchText(_x8, _x9) {
-    return _fetchText.apply(this, arguments);
-  }
-  function _fetchText() {
-    _fetchText = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(url, jwtToken) {
-      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
-          case 0:
-            return _context6.abrupt("return", fetch(url, {
-              method: 'GET',
-              headers: {
-                'X-PREVIEW-JWT': jwtToken || ''
-              }
-            }).then(function (res) {
-              return res.text();
-            }).then(function (responseText) {
-              if (String(responseText).length > 0) {
-                return responseText;
-              } else {
-                return '';
-              }
-            })["catch"](function (err) {
-              console.debug(err);
-              return err === null || err === void 0 ? void 0 : err.message;
-            }));
-          case 1:
-          case "end":
-            return _context6.stop();
-        }
-      }, _callee6);
-    }));
-    return _fetchText.apply(this, arguments);
-  }
-  function getFileExt(filename) {
-    var filenameArr = String(filename).split('.');
-    return filenameArr[filenameArr.length - 1];
-  }
-  function audioFileType(str) {
-    var validAudioTypes = {
-      'mp3': 'audio/mp3',
-      'wav': 'audio/wav',
-      'ogg': 'audio/ogg'
-    };
-    if (Boolean(validAudioTypes[str])) {
-      return validAudioTypes[str];
-    }
-    return undefined;
-  }
-  function videoFileType(str) {
-    var validVideoTypes = {
-      'mp4': 'video/mp4',
-      'webm': 'video/webm',
-      'wmv': 'video/x-ms-wmv'
-    };
-    if (Boolean(validVideoTypes[str])) {
-      return validVideoTypes[str];
-    }
-    return undefined;
-  }
-  function composeResourceUrlByPlatform(options, params) {
-    var resourceUrl = params.regionOptions.getResourceUrl.replace(":regionId", params.regionId).replace(":id", params.mediaId) + '?preview=1&layoutPreview=1';
-    if (options.platform === 'CMS') {
-      resourceUrl += '&jwt=' + params.regionOptions.previewJwt;
-    }
-    if (options.platform === 'chromeOS') {
-      var resourceEndpoint = '/required-files/resource/';
-      if (!params.isGlobalContent && params.isImageOrVideo) {
-        resourceUrl = resourceEndpoint + params.fileId + '?saveAs=' + params.uri;
-      }
-    } else if (!Boolean(params['mediaType'])) {
-      resourceUrl += '&scale_override=' + params.scaleFactor;
-    }
-    return resourceUrl;
-  }
-  function composeResourceUrl(options, params) {
-    var _options$config, _options$config2, _options$config3;
-    var schemaVersion = options && ((_options$config = options.config) === null || _options$config === void 0 ? void 0 : _options$config.schemaVersion);
-    var hardwareKey = options && ((_options$config2 = options.config) === null || _options$config2 === void 0 ? void 0 : _options$config2.hardwareKey);
-    var serverKey = options && ((_options$config3 = options.config) === null || _options$config3 === void 0 ? void 0 : _options$config3.cmsKey);
-    return '/pwa/getResource' + '?v=' + schemaVersion + '&serverKey=' + serverKey + '&hardwareKey=' + hardwareKey + '&layoutId=' + params.layoutId + '&regionId=' + params.regionId + '&mediaId=' + params.mediaId;
-  }
-  function composeMediaUrl(params) {
-    return '/xmds.php?file=' + params.uri;
-  }
-  function composeBgUrlByPlatform(platform, params) {
-    var bgImageUrl = '';
-    if (platform === 'CMS') {
-      bgImageUrl = params.layoutBackgroundDownloadUrl.replace(":id", params.layout.id) + '&preview=1&width=' + params.layout.sWidth + '&height=' + params.layout.sHeight + '&dynamic&proportional=0';
-    } else if (platform === 'chromeOS') {
-      bgImageUrl = composeMediaUrl({
-        uri: params.layout.bgImage
-      });
-    }
-    // @TODO: Add condition to handle electron platform
-    return bgImageUrl;
+  function composeBgUrlByPlatform(platform, params) {
+    var bgImageUrl = '';
+    if (platform === exports.ConsumerPlatform.CMS) {
+      bgImageUrl = params.options.layoutBackgroundDownloadUrl.replace(":id", params.id) + '&preview=1&width=' + params.sWidth + '&height=' + params.sHeight + '&dynamic&proportional=0';
+    } else if (platform === exports.ConsumerPlatform.CHROMEOS) {
+      bgImageUrl = composeMediaUrl({
+        uri: params.bgImage
+      });
+    } else if (platform === exports.ConsumerPlatform.ELECTRON) {
+      bgImageUrl = params.options.appHost + params.bgImage;
+    }
+    return bgImageUrl;
   }
   function getIndexByLayoutId(layoutsInput, layoutId) {
     var layoutIndexes = layoutsInput.reduce(function (a, b, indx) {
@@ -74246,218 +73601,755 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
               case "end":
                 return _context.stop();
             }
-          }, _callee);
-        }))();
+          }, _callee);
+        }))();
+      }
+    }
+    // Check if the media has fade-in/out transitions
+    if (Boolean(self.options['transin']) && Boolean(self.options['transinduration'])) {
+      var transInDuration = Number(self.options.transinduration);
+      var fadeInTrans = transitionElement('fadeIn', {
+        duration: transInDuration
+      });
+      $media.animate(fadeInTrans.keyframes, fadeInTrans.timing);
+    }
+    // Add media to the region
+    // Second media if exists, will be off-canvas
+    // All added media will be hidden by default
+    // It will start showing when region.nextMedia() function is called
+    // When there's only 1 item and loop = false, don't remove the item but leave it at its last state
+    // For image, and only 1 item, it should still have the transition for next state
+    // Add conditions for video duration being 0 or 1 and also the loop property
+    // For video url, we have to create a URL out of the XLF video URL
+    /**
+     * @DONE
+     * Case 1: Video duration = 0, this will play the video for its entire duration
+     * Case 2: Video duration is set > 0 and loop = false
+     * E.g. Set duration = 100s, video duration = 62s
+     * the video will play until 62s and will stop to its last frame until 100s
+     * After 100s, it will expire
+     * Case 3: Video duration is set > 0 and loop = true
+     * E.g. Set duration = 100s, video duration = 62s, loop = true
+     * the video will play until 62s and will loop through until the remaining 38s
+     * to complete the 100s set duration
+     */
+    // Add html node to media for
+    // self.html = $media;
+    return $media;
+  }
+  function prepareVideoMedia(media, region) {
+    var mediaId = getMediaId(media);
+    // Check if html is ready and is in the DOM
+    if (media.html !== null) {
+      // Clean up video.js instance
+      var existingPlayer = videojs.getPlayer(mediaId);
+      if (existingPlayer !== undefined) {
+        existingPlayer.dispose();
+        media.player = undefined;
+      }
+      var $layout = region.layout.html;
+      var layoutSelector = '#' + region.layout.containerName + '[data-sequence="' + region.layout.index + '"]';
+      var $layoutWithIndex = document.querySelector(layoutSelector);
+      var $region = document.querySelector('#' + region.containerName);
+      var mediaInRegion = $region === null || $region === void 0 ? void 0 : $region.querySelector('.' + mediaId);
+      console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
+        layoutSelector: layoutSelector,
+        $layoutWithIndex: $layoutWithIndex,
+        $region: $region,
+        mediaInRegion: mediaInRegion,
+        mediaHtml: media.html,
+        existingPlayer: existingPlayer,
+        mediaId: mediaId,
+        layoutInDOM: document.body.contains($layout)
+      });
+      if (!mediaInRegion) {
+        media.html = createMediaElement(media);
+      } else {
+        mediaInRegion.remove();
+        media.html = createMediaElement(media);
+      }
+      // Append fresh copy of the media into the region
+      $region !== null && $region.appendChild(media.html);
+      var isMediaInDOM = document.body.contains(media.html);
+      console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
+        isMediaInDOM: isMediaInDOM,
+        mediaHtml: media.html,
+        mediaId: mediaId
+      });
+      // Initialize video.js
+      media.player = videojs(mediaId, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
+        errorDisplay: region.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
+        loop: media.loop
+      }));
+      media.player.on('error', /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (media.region.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
+                  playerReportFault('Video file not supported', media).then(function () {
+                    media.emitter.emit('end', media);
+                  });
+                }
+              case 1:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function (_x10) {
+          return _ref3.apply(this, arguments);
+        };
+      }());
+      media.player.el().style.setProperty('visibility', 'hidden');
+      media.player.el().style.setProperty('opacity', '0');
+      media.player.el().style.setProperty('z-index', '-99');
+    }
+  }
+  function prepareImageMedia(media, region) {
+    var mediaId = getMediaId(media);
+    media.html.style.setProperty('background-image', "url(".concat(media.url));
+    // Check if media in region
+    // Remove old copy before inserting fresh copy
+    var mediaInRegion = region.html.querySelector('.' + mediaId);
+    if (mediaInRegion) {
+      mediaInRegion.remove();
+    }
+    // Append media to its region
+    var $region = document.querySelector('#' + region.containerName);
+    $region !== null && $region.appendChild(media.html);
+  }
+  function prepareAudioMedia(media, region) {
+    var mediaId = getMediaId(media);
+    if (media.url !== null) {
+      media.html.src = media.url;
+    }
+    // Check if media in region
+    // Remove old copy before inserting fresh copy of the media
+    var mediaInRegion = region.html.querySelector('.' + mediaId);
+    if (mediaInRegion) {
+      mediaInRegion.remove();
+    }
+    // Append media to its region
+    var $region = document.querySelector('#' + region.containerName);
+    $region !== null && $region.appendChild(media.html);
+  }
+  function prepareHtmlMedia(media, region) {
+    // Set state as false ( for now )
+    media.ready = false;
+    if (media.html) {
+      var mediaId = getMediaId(media);
+      // Clean up old copy of the media
+      // before inserting fresh copy
+      var $layout = document.querySelector("#".concat(region.layout.containerName, "[data-sequence=\"").concat(region.layout.index, "\"]"));
+      var $region = $layout.querySelector('#' + region.containerName);
+      var mediaInRegion = $region.querySelector('.' + mediaId);
+      console.debug('<><> XLR.debug >> [Media] - [Generators::prepareHtmlMedia]', {
+        mediaId: mediaId,
+        mediaInRegion: mediaInRegion
+      });
+      // Append iframe
+      media.html.innerHTML = '';
+      media.html.appendChild(media.iframe);
+      if (!mediaInRegion) {
+        // Add fresh copy of the media into the region
+        var _$region = document.querySelector('#' + region.containerName);
+        _$region !== null && _$region.appendChild(media.html);
+        media.ready = true;
+      }
+    }
+  }
+  function playerReportFault(_x11, _x12) {
+    return _playerReportFault.apply(this, arguments);
+  }
+  function _playerReportFault() {
+    _playerReportFault = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(msg, media) {
+      var playerSW, hasSW;
+      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            // Immediately expire media and report a fault
+            playerSW = PwaSW();
+            _context7.next = 3;
+            return playerSW.getSW();
+          case 3:
+            hasSW = _context7.sent;
+            if (hasSW) {
+              playerSW.postMsg({
+                type: 'MEDIA_FAULT',
+                code: 5002,
+                reason: msg,
+                mediaId: media.id,
+                regionId: media.region.id,
+                layoutId: media.region.layout.id,
+                date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+                // Temporary setting
+                expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
+              }).then(function () {
+                // We try to prepare next media if we have more than 1 media
+                if (media.region.totalMediaObjects > 1) {
+                  media.region.prepareNextMedia();
+                }
+              })["finally"](function () {
+                // Stopping media as we have reported the error as fault
+                console.debug('??? XLR.debug >> VideoMedia - Done reporting media fault', {
+                  mediaId: media.id,
+                  regionItems: media.region.totalMediaObjects
+                });
+              });
+            }
+          case 5:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
+    }));
+    return _playerReportFault.apply(this, arguments);
+  }
+
+  const urlAlphabet =
+    'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+  /* @ts-self-types="./index.d.ts" */
+  let nanoid = (size = 21) => {
+    let id = '';
+    let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
+    while (size--) {
+      id += urlAlphabet[bytes[size] & 63];
+    }
+    return id
+  };
+
+  function AudioMedia(media) {
+    var audioMediaObject = {
+      init: function init() {
+        var $audioMedia = document.getElementById(getMediaId(media));
+        var $playBtn = null;
+        if ($audioMedia) {
+          $audioMedia.onloadstart = function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
+          };
+          $audioMedia.onloadeddata = function () {
+            if ($audioMedia.readyState >= 2) {
+              console.debug("".concat(capitalizeStr(media.mediaType), " data for media > ").concat(media.id, " has been fully loaded . . ."));
+            }
+          };
+          $audioMedia.oncanplay = function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+          };
+          $audioMedia.onplaying = function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
+            if ($playBtn !== null) {
+              $playBtn.remove();
+            }
+          };
+          var audioPlayPromise = $audioMedia.play();
+          if (audioPlayPromise !== undefined) {
+            audioPlayPromise.then(function () {
+              console.debug('autoplay started . . .');
+              // Autoplay restarted
+            })["catch"](function (error) {
+              if (error.name === 'NotAllowedError') {
+                var _$audioMedia$parentNo;
+                // Let's show a play audio button
+                $playBtn = document.createElement('button');
+                $playBtn.classList.add('play-audio-btn');
+                $playBtn.textContent = 'Play Audio';
+                $playBtn.addEventListener('click', function () {
+                  $audioMedia.muted = false;
+                  $audioMedia.play();
+                });
+                (_$audioMedia$parentNo = $audioMedia.parentNode) === null || _$audioMedia$parentNo === void 0 || _$audioMedia$parentNo.insertBefore($playBtn, $audioMedia.nextSibling);
+              }
+            });
+          }
+          if (media.duration === 0) {
+            $audioMedia.ondurationchange = function () {
+              console.debug('Showing Media ' + media.id + ' for ' + $audioMedia.duration + 's of Region ' + media.region.regionId);
+            };
+            $audioMedia.onended = function () {
+              var _media$emitter;
+              console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+              (_media$emitter = media.emitter) === null || _media$emitter === void 0 || _media$emitter.emit('end', media);
+            };
+          }
+        }
+      }
+    };
+    return audioMediaObject;
+  }
+
+  var Media = /*#__PURE__*/function () {
+    function Media(region, mediaId, xml, options, xlr) {
+      var _this$xml,
+        _this$xml2,
+        _this$xml3,
+        _this$xml4,
+        _this$xml5,
+        _this = this;
+      _classCallCheck(this, Media);
+      _defineProperty(this, "attachedAudio", false);
+      _defineProperty(this, "checkIframeStatus", false);
+      _defineProperty(this, "containerName", '');
+      _defineProperty(this, "divHeight", 0);
+      _defineProperty(this, "divWidth", 0);
+      _defineProperty(this, "duration", 0);
+      _defineProperty(this, "emitter", createNanoEvents());
+      _defineProperty(this, "enableStat", false);
+      _defineProperty(this, "fileId", '');
+      _defineProperty(this, "finished", false);
+      _defineProperty(this, "html", null);
+      _defineProperty(this, "id", '');
+      _defineProperty(this, "idCounter", 0);
+      _defineProperty(this, "iframe", null);
+      _defineProperty(this, "iframeName", '');
+      _defineProperty(this, "index", 0);
+      _defineProperty(this, "loadIframeOnRun", false);
+      _defineProperty(this, "loop", false);
+      _defineProperty(this, "mediaId", '');
+      _defineProperty(this, "mediaType", '');
+      _defineProperty(this, "muted", false);
+      _defineProperty(this, "options", {});
+      _defineProperty(this, "player", undefined);
+      _defineProperty(this, "ready", true);
+      _defineProperty(this, "region", {});
+      _defineProperty(this, "render", 'html');
+      _defineProperty(this, "schemaVersion", '1');
+      _defineProperty(this, "singlePlay", false);
+      _defineProperty(this, "state", MediaState.IDLE);
+      _defineProperty(this, "tempSrc", '');
+      _defineProperty(this, "timeoutId", setTimeout(function () {}, 0));
+      _defineProperty(this, "type", '');
+      _defineProperty(this, "uri", '');
+      _defineProperty(this, "url", null);
+      _defineProperty(this, "useDuration", false);
+      _defineProperty(this, "xml", null);
+      _defineProperty(this, "videoHandler", void 0);
+      _defineProperty(this, "mediaTimer", void 0);
+      _defineProperty(this, "mediaTimeCount", 0);
+      _defineProperty(this, "xlr", {});
+      _defineProperty(this, "statsBC", new BroadcastChannel('statsBC'));
+      _defineProperty(this, "hasCommandExecuted", void 0);
+      this.region = region;
+      this.id = mediaId;
+      this.mediaId = this.id;
+      this.xml = xml;
+      this.options = options;
+      this.xlr = xlr;
+      this.fileId = ((_this$xml = this.xml) === null || _this$xml === void 0 ? void 0 : _this$xml.getAttribute('fileId')) || '';
+      this.idCounter = nextId(this.options);
+      this.containerName = "M-".concat(this.id, "-").concat(this.idCounter);
+      this.iframeName = "".concat(this.containerName, "-iframe");
+      this.mediaType = ((_this$xml2 = this.xml) === null || _this$xml2 === void 0 ? void 0 : _this$xml2.getAttribute('type')) || '';
+      this.render = ((_this$xml3 = this.xml) === null || _this$xml3 === void 0 ? void 0 : _this$xml3.getAttribute('render')) || '';
+      this.duration = parseInt((_this$xml4 = this.xml) === null || _this$xml4 === void 0 ? void 0 : _this$xml4.getAttribute('duration')) || 0;
+      this.enableStat = Boolean(((_this$xml5 = this.xml) === null || _this$xml5 === void 0 ? void 0 : _this$xml5.getAttribute('enableStat')) || false);
+      this.hasCommandExecuted = false;
+      this.on('start', function (media) {
+        if (media.state === MediaState.PLAYING) return;
+        media.state = MediaState.PLAYING;
+        if (media.mediaType === 'video') {
+          var videoMedia = VideoMedia(media, _this.xlr);
+          videoMedia.init();
+          if (media.duration > 0) {
+            _this.startMediaTimer(media);
+          }
+        } else if (media.mediaType === 'audio') {
+          AudioMedia(media).init();
+          if (media.duration > 0) {
+            _this.startMediaTimer(media);
+          }
+        } else if (media.mediaType === 'shellcommand') {
+          if (_this.hasCommandExecuted && !_this.loop) {
+            return;
+          }
+          _this.hasCommandExecuted = true;
+          _this.emitCommand(media);
+          if (media.duration > 0) {
+            _this.startMediaTimer(media);
+          }
+        } else {
+          _this.startMediaTimer(media);
+        }
+        // Check if stats are enabled for the layout
+        if (media.enableStat) {
+          _this.statsBC.postMessage({
+            action: 'START_STAT',
+            mediaId: parseInt(media.id),
+            layoutId: media.region.layout.id,
+            scheduleId: media.region.layout.scheduleId,
+            type: 'media'
+          });
+        }
+        // Emit media/widget start event
+        console.debug('Media::Emitter > Start - Calling widgetStart event');
+        _this.xlr.emitter.emit('widgetStart', parseInt(media.id));
+      });
+      this.on('end', function (media) {
+        if (media.state === MediaState.ENDED) return;
+        media.state = MediaState.ENDED;
+        if (_this.mediaTimer) {
+          clearInterval(_this.mediaTimer);
+          _this.mediaTimeCount = 0;
+        }
+        // Check if stats are enabled for the layout
+        if (media.enableStat) {
+          _this.statsBC.postMessage({
+            action: 'END_STAT',
+            mediaId: parseInt(media.id),
+            layoutId: media.region.layout.id,
+            scheduleId: media.region.layout.scheduleId,
+            type: 'media'
+          });
+        }
+        // Emit media/widget end event
+        console.debug('Media::Emitter > End - Calling widgetEnd event', {
+          mediaId: media.id,
+          regionId: media.region.id,
+          layoutId: media.region.layout.id
+        });
+        _this.xlr.emitter.emit('widgetEnd', parseInt(media.id));
+        media.region.playNextMedia();
+      });
+      this.on('cancelled', function (media) {
+        if (media.state === MediaState.CANCELLED) return;
+        media.state = MediaState.CANCELLED;
+        if (_this.mediaTimer) {
+          clearInterval(_this.mediaTimer);
+          _this.mediaTimeCount = 0;
+        }
+        // Check if stats are enabled for the layout
+        if (media.enableStat) {
+          _this.statsBC.postMessage({
+            action: 'END_STAT',
+            mediaId: parseInt(media.id),
+            layoutId: media.region.layout.id,
+            scheduleId: media.region.layout.scheduleId,
+            type: 'media'
+          });
+        }
+        // Emit media/widget end event
+        console.debug('Media::Emitter > End - Calling widgetEnd event', {
+          mediaId: media.id,
+          regionId: media.region.id,
+          layoutId: media.region.layout.id
+        });
+        _this.xlr.emitter.emit('widgetEnd', parseInt(media.id));
+        media.region.playNextMedia();
+      });
+      // Initialize Media object
+      this.init();
+    }
+    return _createClass(Media, [{
+      key: "startMediaTimer",
+      value: function startMediaTimer(media) {
+        var _this2 = this;
+        var preloadTimeMs = 2000;
+        var preloadTimeBufferMs = media.duration * 1000 / 2 - preloadTimeMs;
+        var isPreparingNextMedia = false;
+        if (preloadTimeBufferMs < preloadTimeMs) {
+          // Use media duration when preloadTimeBufferMs is less than the preloadTimeMs
+          preloadTimeBufferMs = media.duration / 2 * 1000;
+        }
+        console.debug('<><> XLR.debug >> [Media::startMediaTimer]', {
+          preloadTimeMs: preloadTimeMs,
+          preloadTimeBufferMs: preloadTimeBufferMs,
+          isPreparingNextMedia: isPreparingNextMedia,
+          mediaDuration: media.duration
+        });
+        this.mediaTimer = setInterval(function () {
+          _this2.mediaTimeCount++;
+          var elapsedTimeMs = _this2.mediaTimeCount * 1000;
+          // prepare region's next media
+          if (_this2.region.totalMediaObjects > 1 && elapsedTimeMs >= preloadTimeBufferMs && !isPreparingNextMedia) {
+            isPreparingNextMedia = true;
+            _this2.region.prepareNextMedia();
+          }
+          if (_this2.mediaTimeCount > media.duration) {
+            console.debug('??? XLR.debug >> Media::startMediaTimer: emit>end: on media ' + media.id + ' of Region ' + media.region.regionId);
+            console.debug('??? XLR.debug >> Media::startMediaTimer - Media::Emitter > End', {
+              currentLayout: _this2.xlr.currentLayout,
+              media: media,
+              region: media.region,
+              layout: media.region.layout
+            });
+            media.emitter.emit('end', media);
+            if (media.mediaType === 'video') {
+              // Dispose the video media
+              console.debug("??? XLR.debug >> VideoMedia::stop - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+              if (media.player !== undefined) {
+                VideoMedia(media, _this2.xlr).stop(true);
+              }
+            }
+          }
+        }, 1000);
+        console.debug('startMediaTimer: Showing Media ' + media.id + ' for ' + media.duration + 's of Region ' + media.region.regionId);
       }
-    }
-    // Check if the media has fade-in/out transitions
-    if (Boolean(self.options['transin']) && Boolean(self.options['transinduration'])) {
-      var transInDuration = Number(self.options.transinduration);
-      var fadeInTrans = transitionElement('fadeIn', {
-        duration: transInDuration
-      });
-      $media.animate(fadeInTrans.keyframes, fadeInTrans.timing);
-    }
-    // Add media to the region
-    // Second media if exists, will be off-canvas
-    // All added media will be hidden by default
-    // It will start showing when region.nextMedia() function is called
-    // When there's only 1 item and loop = false, don't remove the item but leave it at its last state
-    // For image, and only 1 item, it should still have the transition for next state
-    // Add conditions for video duration being 0 or 1 and also the loop property
-    // For video url, we have to create a URL out of the XLF video URL
-    /**
-     * @DONE
-     * Case 1: Video duration = 0, this will play the video for its entire duration
-     * Case 2: Video duration is set > 0 and loop = false
-     * E.g. Set duration = 100s, video duration = 62s
-     * the video will play until 62s and will stop to its last frame until 100s
-     * After 100s, it will expire
-     * Case 3: Video duration is set > 0 and loop = true
-     * E.g. Set duration = 100s, video duration = 62s, loop = true
-     * the video will play until 62s and will loop through until the remaining 38s
-     * to complete the 100s set duration
-     */
-    // Add html node to media for
-    // self.html = $media;
-    return $media;
-  }
-  function prepareVideoMedia(media, region) {
-    var mediaId = getMediaId(media);
-    // Check if html is ready and is in the DOM
-    if (media.html !== null) {
-      // Clean up video.js instance
-      var existingPlayer = videojs.getPlayer(mediaId);
-      if (existingPlayer !== undefined) {
-        existingPlayer.dispose();
-        media.player = undefined;
+    }, {
+      key: "on",
+      value: function on(event, callback) {
+        return this.emitter.on(event, callback);
       }
-      var $layout = region.layout.html;
-      var layoutSelector = '#' + region.layout.containerName + '[data-sequence="' + region.layout.index + '"]';
-      var $layoutWithIndex = document.querySelector(layoutSelector);
-      var $region = document.querySelector('#' + region.containerName);
-      var mediaInRegion = $region === null || $region === void 0 ? void 0 : $region.querySelector('.' + mediaId);
-      console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
-        layoutSelector: layoutSelector,
-        $layoutWithIndex: $layoutWithIndex,
-        $region: $region,
-        mediaInRegion: mediaInRegion,
-        mediaHtml: media.html,
-        existingPlayer: existingPlayer,
-        mediaId: mediaId,
-        layoutInDOM: document.body.contains($layout)
-      });
-      if (!mediaInRegion) {
-        media.html = createMediaElement(media);
-      } else {
-        mediaInRegion.remove();
-        media.html = createMediaElement(media);
+    }, {
+      key: "init",
+      value: function init() {
+        var _this$xml6;
+        var mediaOptions = (_this$xml6 = this.xml) === null || _this$xml6 === void 0 ? void 0 : _this$xml6.getElementsByTagName('options');
+        if (mediaOptions) {
+          for (var _i = 0, _Array$from = Array.from(mediaOptions); _i < _Array$from.length; _i++) {
+            var _options = _Array$from[_i];
+            // Get options
+            var _mediaOptions = _options.children;
+            for (var _i2 = 0, _Array$from2 = Array.from(_mediaOptions); _i2 < _Array$from2.length; _i2++) {
+              var mediaOption = _Array$from2[_i2];
+              this.options[mediaOption.nodeName.toLowerCase()] = mediaOption.textContent;
+            }
+          }
+        }
+        // Check for options.uri and add it to media
+        if (Boolean(this.options['uri'])) {
+          this.uri = this.options['uri'];
+        }
+        // Show in fullscreen?
+        if (this.options.showfullscreen === "1") {
+          // Set dimensions as the layout ones
+          this.divWidth = this.region.layout.sWidth;
+          this.divHeight = this.region.layout.sHeight;
+        } else {
+          // Set dimensions as the region ones
+          this.divWidth = this.region.sWidth;
+          this.divHeight = this.region.sHeight;
+        }
+        var resourceUrlParams = _objectSpread2(_objectSpread2({}, this.xlr.config.config), {}, {
+          regionOptions: this.region.options,
+          layoutId: this.region.layout.layoutId,
+          regionId: this.region.id,
+          mediaId: this.id,
+          fileId: this.fileId,
+          scaleFactor: this.region.layout.scaleFactor,
+          uri: this.uri,
+          isGlobalContent: this.mediaType === 'global',
+          isImageOrVideo: this.mediaType === 'image' || this.mediaType === 'video',
+          render: this.render
+        });
+        if (this.mediaType === 'image' || this.mediaType === 'video') {
+          resourceUrlParams.mediaType = this.mediaType;
+        }
+        var tmpUrl = '';
+        if (this.xlr.config.platform === exports.ConsumerPlatform.CMS) {
+          tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
+          tmpUrl = composeResourceUrl(this.xlr.config, resourceUrlParams);
+          if (this.mediaType === 'image' || this.mediaType === 'video' || this.mediaType === 'audio') {
+            tmpUrl = composeMediaUrl(resourceUrlParams);
+            // this is an SSP Layout
+            if (this.region.layout.layoutId === -1) {
+              tmpUrl = this.uri;
+            }
+          }
+        } else if (this.xlr.config.platform === exports.ConsumerPlatform.ELECTRON) {
+          tmpUrl = composeResourceUrlByPlatform(this.xlr.config, resourceUrlParams);
+        }
+        this.url = tmpUrl;
+        // Loop if media has loop, or if region has loop and a single media
+        this.loop = this.options['loop'] == '1' || this.region.options['loop'] == '1' && this.region.totalMediaObjects == 1;
+        this.html = createMediaElement(this);
       }
-      // Append fresh copy of the media into the region
-      $region !== null && $region.appendChild(media.html);
-      var isMediaInDOM = document.body.contains(media.html);
-      console.debug('??? XLR.debug >> [Generators::prepareVideoMedia]', {
-        isMediaInDOM: isMediaInDOM,
-        mediaHtml: media.html,
-        mediaId: mediaId
-      });
-      // Initialize video.js
-      media.player = videojs(mediaId, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-        errorDisplay: region.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-        loop: media.loop
-      }));
-      media.player.on('error', /*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(err) {
-          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
+    }, {
+      key: "run",
+      value: function run() {
+        var _this3 = this;
+        var transInDuration = 1;
+        var transInDirection = 'E';
+        if (Boolean(this.options['transinduration'])) {
+          transInDuration = Number(this.options.transinduration);
+        }
+        if (Boolean(this.options['transindirection'])) {
+          transInDirection = this.options.transindirection;
+        }
+        var defaultTransInOptions = {
+          duration: transInDuration
+        };
+        var transIn = transitionElement('defaultIn', {
+          duration: defaultTransInOptions.duration
+        });
+        if (Boolean(this.options['transin'])) {
+          var transInName = this.options['transin'];
+          if (transInName === 'fly') {
+            transInName = "".concat(transInName, "In");
+            defaultTransInOptions.keyframes = flyTransitionKeyframes({
+              trans: 'in',
+              direction: transInDirection,
+              height: this.divHeight,
+              width: this.divWidth
+            });
+          }
+          transIn = transitionElement(transInName, defaultTransInOptions);
+        }
+        var showCurrentMedia = function showCurrentMedia() {
+          var mediaId = getMediaId({
+            mediaType: _this3.mediaType,
+            containerName: _this3.containerName
+          });
+          var $region = document.querySelector('#' + _this3.region.containerName);
+          var $media = $region !== null && $region.querySelector('.' + mediaId);
+          if (!$media) {
+            $media = getNewMedia();
+          }
+          console.debug('??? XLR.debug >> Media run - show current media:', {
+            inDOM: document.body.contains($media),
+            mediaId: mediaId,
+            $media: $media,
+            mediaObject: _this3
+          });
+          if ($media) {
+            if (_this3.mediaType === 'video') {
+              var _this3$player, _this3$player2, _this3$player3, _this3$player4;
+              console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::START', {
+                mediaPlayer: _this3.player,
+                isDisposed: (_this3$player = _this3.player) === null || _this3$player === void 0 ? void 0 : _this3$player.isDisposed(),
+                el: (_this3$player2 = _this3.player) === null || _this3$player2 === void 0 ? void 0 : _this3$player2.el_
+              });
+              // Make sure that vjs is available on the media
+              // Else, re-initialize
+              if (_this3.player !== undefined) {
+                var existingPlayer = videojs(mediaId);
+                if (existingPlayer) {
+                  _this3.player = existingPlayer;
+                } else {
+                  if (_this3.player.isDisposed_) {
+                    _this3.player = undefined;
+                    _this3.player = videojs(mediaId, _objectSpread2({}, vjsDefaultOptions({
+                      errorDisplay: _this3.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
+                      loop: _this3.loop
+                    })));
+                  }
+                }
+              }
+              console.debug('??? XLR.debug >> Media.run() > showCurrentMedia() - Video media::END', {
+                mediaPlayer: _this3.player,
+                isDisposed: (_this3$player3 = _this3.player) === null || _this3$player3 === void 0 ? void 0 : _this3$player3.isDisposed(),
+                el: (_this3$player4 = _this3.player) === null || _this3$player4 === void 0 ? void 0 : _this3$player4.el_
+              });
+              if (_this3.player !== undefined && _this3.player.el_ !== null) {
+                _this3.player.el().style.setProperty('visibility', 'visible');
+                _this3.player.el().style.setProperty('z-index', '10');
+                _this3.player.el().style.setProperty('opacity', '1');
+              }
+            } else {
+              console.debug('??? XLR.debug >> Media::run() > showCurrentMedia', {
+                mediaType: _this3.mediaType,
+                render: _this3.render,
+                $media: $media,
+                state: _this3.state
+              });
+              $media.style.setProperty('visibility', 'visible');
+              $media.style.setProperty('z-index', '10');
+              $media.style.setProperty('opacity', '1');
+            }
+            if (Boolean(_this3.options['transin'])) {
+              $media.animate(transIn.keyframes, transIn.timing);
+            }
+            if (!_this3.region.layout.isOverlay || _this3.region.layout.isOverlay && _this3.region.totalMediaObjects > 1) {
+              _this3.emitter.emit('start', _this3);
+            }
+          }
+        };
+        var getNewMedia = function getNewMedia() {
+          var $region = document.getElementById("".concat(_this3.region.containerName));
+          // This function is for checking whether
+          // the region still has to show a media item
+          // when another region is not finished yet
+          if (_this3.region.complete && !_this3.region.layout.allEnded) {
+            // Add currentMedia to the region
+            $region && $region.insertBefore(_this3.html, $region.lastElementChild);
+            return _this3.html;
+          }
+          return null;
+        };
+        showCurrentMedia();
+      }
+    }, {
+      key: "stop",
+      value: function () {
+        var _stop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var $media;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
               case 0:
-                if (media.region.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
-                  playerReportFault('Video file not supported', media).then(function () {
-                    media.emitter.emit('end', media);
-                  });
+                $media = document.getElementById(getMediaId({
+                  mediaType: this.mediaType,
+                  containerName: this.containerName
+                }));
+                if ($media) {
+                  $media.style.display = 'none';
+                  $media.remove();
                 }
-              case 1:
+                // Release blob URLs for image media to prevent memory leaks on long-running signage
+                if (this.mediaType === 'image' && this.url) {
+                  BlobLoader.release(this.url);
+                }
+              case 3:
               case "end":
-                return _context2.stop();
+                return _context.stop();
             }
-          }, _callee2);
+          }, _callee, this);
         }));
-        return function (_x10) {
-          return _ref3.apply(this, arguments);
-        };
-      }());
-      media.player.el().style.setProperty('visibility', 'hidden');
-      media.player.el().style.setProperty('opacity', '0');
-      media.player.el().style.setProperty('z-index', '-99');
-    }
-  }
-  function prepareImageMedia(media, region) {
-    var mediaId = getMediaId(media);
-    media.html.style.setProperty('background-image', "url(".concat(media.url));
-    // Check if media in region
-    // Remove old copy before inserting fresh copy
-    var mediaInRegion = region.html.querySelector('.' + mediaId);
-    if (mediaInRegion) {
-      mediaInRegion.remove();
-    }
-    // Append media to its region
-    var $region = document.querySelector('#' + region.containerName);
-    $region !== null && $region.appendChild(media.html);
-  }
-  function prepareAudioMedia(media, region) {
-    var mediaId = getMediaId(media);
-    if (media.url !== null) {
-      media.html.src = media.url;
-    }
-    // Check if media in region
-    // Remove old copy before inserting fresh copy of the media
-    var mediaInRegion = region.html.querySelector('.' + mediaId);
-    if (mediaInRegion) {
-      mediaInRegion.remove();
-    }
-    // Append media to its region
-    var $region = document.querySelector('#' + region.containerName);
-    $region !== null && $region.appendChild(media.html);
-  }
-  function prepareHtmlMedia(media, region) {
-    // Set state as false ( for now )
-    media.ready = false;
-    if (media.html) {
-      var mediaId = getMediaId(media);
-      // Clean up old copy of the media
-      // before inserting fresh copy
-      var mediaInRegion = region.html.querySelector('.' + mediaId);
-      // Append iframe
-      media.html.innerHTML = '';
-      media.html.appendChild(media.iframe);
-      if (!mediaInRegion) {
-        // Add fresh copy of the media into the region
-        var $region = document.querySelector('#' + region.containerName);
-        $region !== null && $region.appendChild(media.html);
-        media.ready = true;
-      }
-    }
-  }
-  function playerReportFault(_x11, _x12) {
-    return _playerReportFault.apply(this, arguments);
-  }
-  function _playerReportFault() {
-    _playerReportFault = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(msg, media) {
-      var playerSW, hasSW;
-      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
-          case 0:
-            // Immediately expire media and report a fault
-            playerSW = PwaSW();
-            _context7.next = 3;
-            return playerSW.getSW();
-          case 3:
-            hasSW = _context7.sent;
-            if (hasSW) {
-              playerSW.postMsg({
-                type: 'MEDIA_FAULT',
-                code: 5002,
-                reason: msg,
-                mediaId: media.id,
-                regionId: media.region.id,
-                layoutId: media.region.layout.id,
-                date: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-                // Temporary setting
-                expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
-              }).then(function () {
-                // We try to prepare next media if we have more than 1 media
-                if (media.region.totalMediaObjects > 1) {
-                  media.region.prepareNextMedia();
-                }
-              })["finally"](function () {
-                // Stopping media as we have reported the error as fault
-                console.debug('??? XLR.debug >> VideoMedia - Done reporting media fault', {
-                  mediaId: media.id,
-                  regionItems: media.region.totalMediaObjects
-                });
-              });
-            }
-          case 5:
-          case "end":
-            return _context7.stop();
+        function stop() {
+          return _stop.apply(this, arguments);
         }
-      }, _callee7);
-    }));
-    return _playerReportFault.apply(this, arguments);
-  }
-
-  const urlAlphabet =
-    'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
-  /* @ts-self-types="./index.d.ts" */
-  let nanoid = (size = 21) => {
-    let id = '';
-    let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
-    while (size--) {
-      id += urlAlphabet[bytes[size] & 63];
-    }
-    return id
-  };
+        return stop;
+      }()
+      /**
+       * Emits a command from the shell command widget.
+       *
+       * @param media
+       * @private
+       */
+    }, {
+      key: "emitCommand",
+      value: function emitCommand(media) {
+        if (media.mediaType !== 'shellcommand') {
+          return;
+        }
+        var options = media.options;
+        if (options.commandtype === 'storedCommand' && options.commandcode) {
+          console.debug('Media::Emitter > Shell Command - Calling commandCodeReceived event');
+          this.xlr.emitter.emit('commandCodeReceived', options.commandcode);
+          return;
+        }
+        var commandString = '';
+        if (options.useglobalcommand === '1') {
+          commandString = options.globalcommand || '';
+        } else {
+          // Use platform-specific command when available
+          if (this.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
+            commandString = options.chromeoscommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.ANDROID) {
+            commandString = options.androidcommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.LINUX) {
+            commandString = options.linuxcommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.TIZEN) {
+            commandString = options.tizencommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.WEBOS) {
+            commandString = options.weboscommand || '';
+          } else if (this.xlr.config.platform === exports.ConsumerPlatform.WINDOWS) {
+            commandString = options.windowscommand || '';
+          }
+          // Fall back to the global command if the platform-specific one
+          // is missing, not configured, or not supported yet
+          if (!commandString && options.globalcommand) {
+            commandString = options.globalcommand;
+          }
+        }
+        if (commandString) {
+          console.debug('Media::Emitter > Shell Command - Calling commandStringReceived event');
+          this.xlr.emitter.emit('commandStringReceived', commandString);
+          return;
+        }
+      }
+    }]);
+  }();
 
   var Region = /*#__PURE__*/function () {
     // ===== Constructor =====
@@ -74615,10 +74507,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         });
         // Prepare first media
         if (this.mediaObjects.length > 0) {
-          // Clean up region first
-          // if (this.html?.children.length > 0) {
-          //     this.html.innerHTML = '';
-          // }
           this.prepareFirstMedia();
         }
       }
@@ -74651,6 +74539,11 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       value: function prepareNextMedia() {
         var nextMediaIndex = (this.currentMediaIndex + 1) % this.totalMediaObjects;
         var nextMedia = this.mediaObjects[nextMediaIndex];
+        console.debug('<><> XLR.debug >> [Media] - [Region::prepareNextMedia()] - Preparing next media', {
+          currentMediaIndex: this.currentMediaIndex,
+          nextMediaIndex: nextMediaIndex,
+          nextMediaId: nextMedia.mediaId
+        });
         this.prepareMedia(nextMedia);
       }
     }, {
@@ -74669,36 +74562,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
             regionId: this.id,
             oldMedia: (_this$oldMedia = this.oldMedia) === null || _this$oldMedia === void 0 ? void 0 : _this$oldMedia.containerName
           });
-          // const $region = document.getElementById(`${this.containerName}`);
-          // Preload first item
-          // if (this.currentMediaIndex > 0 && this.nxtMedia) {
-          //     // Prepare next items
-          //     this.prepareMedia(this.nxtMedia);
-          // } else {
-          //     this.prepareMedia(this.currMedia);
-          // }
-          // Append available media to region DOM
-          // if (this.currMedia) {
-          //
-          //     this.currEl = createMediaElement(this.currMedia);
-          //     this.currMedia.html = this.currEl;
-          //
-          //     console.debug('<> XLR.debug prepareMediaObjects::currMedia', {
-          //         currentMedia: this.currMedia.containerName,
-          //         regionId: this.id,
-          //     });
-          //     ($region) && $region.insertBefore(this.currEl as Node, $region.lastElementChild);
-          // }
-          // if (this.totalMediaObjects > 1 && this.nxtMedia) {
-          //     this.nxtEl = createMediaElement(this.nxtMedia);
-          //     this.nxtMedia.html = this.nxtEl;
-          //
-          //     console.debug('<> XLR.debug prepareMediaObjects::nxtMedia', {
-          //         nextMedia: this.nxtMedia.containerName,
-          //         regionId: this.id,
-          //     });
-          //     ($region) && $region.insertBefore(this.nxtEl as Node, $region.lastElementChild);
-          // }
         }
       }
     }, {
@@ -74712,116 +74575,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         this.layout.regions[this.index] = this;
         this.layout.regionExpired();
       }
-    }, {
-      key: "prepareVideo",
-      value: function () {
-        var _prepareVideo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(media, container) {
-          var _this2 = this;
-          var video;
-          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
-              case 0:
-                video = media.html;
-                if (media.url !== null) {
-                  video.src = media.url;
-                }
-                container !== null && container.appendChild(media.html);
-                return _context2.abrupt("return", new Promise(function (resolve) {
-                  var _media$videoHandler$p;
-                  var vidType = videoFileType(getFileExt(media.uri));
-                  // Initialize Video.js
-                  media.player = videojs(video, _objectSpread2(_objectSpread2({}, defaultVjsOpts), {}, {
-                    errorDisplay: _this2.xlr.config.platform !== exports.ConsumerPlatform.CHROMEOS,
-                    loop: media.loop,
-                    sources: [{
-                      src: media.url,
-                      type: vidType
-                    }] // Adjust MIME type if dynamic
-                  }));
-                  media.player.el().style.setProperty('visibility', 'hidden');
-                  media.player.el().style.setProperty('z-index', '0');
-                  media.player.el().style.setProperty('opacity', '0');
-                  // Register video handler
-                  media.videoHandler = videoMediaHandler(media, _this2.xlr.config.platform);
-                  (_media$videoHandler$p = media.videoHandler.player) === null || _media$videoHandler$p === void 0 || _media$videoHandler$p.one('canplaythrough', function () {
-                    resolve();
-                  });
-                }));
-              case 4:
-              case "end":
-                return _context2.stop();
-            }
-          }, _callee2);
-        }));
-        function prepareVideo(_x3, _x4) {
-          return _prepareVideo.apply(this, arguments);
-        }
-        return prepareVideo;
-      }()
-    }, {
-      key: "prepareImage",
-      value: function () {
-        var _prepareImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(media, container) {
-          var blobUrl, img;
-          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-            while (1) switch (_context3.prev = _context3.next) {
-              case 0:
-                _context3.next = 2;
-                return BlobLoader.load(media.url);
-              case 2:
-                blobUrl = _context3.sent;
-                img = new Image(); // Wait for decoding to finish so there is no visual glitch
-                return _context3.abrupt("return", new Promise(function (resolve, reject) {
-                  img.onload = function () {
-                    return resolve();
-                  };
-                  img.onerror = function (e) {
-                    return reject(e);
-                  };
-                  img.src = blobUrl;
-                  if (media.html) {
-                    media.html.style.setProperty('background-image', "url(".concat(blobUrl, ")"));
-                  }
-                  container !== null && container.appendChild(media.html);
-                }));
-              case 5:
-              case "end":
-                return _context3.stop();
-            }
-          }, _callee3);
-        }));
-        function prepareImage(_x5, _x6) {
-          return _prepareImage.apply(this, arguments);
-        }
-        return prepareImage;
-      }()
-    }, {
-      key: "prepareIframe",
-      value: function prepareIframe(media, container) {
-        console.debug('??? XLR.debug >> Region prepareIframe - start');
-        return new Promise(function (resolve, reject) {
-          var iframe = media.iframe;
-          console.debug('??? XLR.debug >> Region prepareIframe - promise', {
-            iframe: iframe,
-            mediaType: media.mediaType,
-            container: container
-          });
-          if (iframe !== null) {
-            iframe.onload = function () {
-              return resolve();
-            };
-            iframe.onerror = function (e) {
-              return reject(e);
-            };
-            // Append iframe to html
-            if (media.html) {
-              media.html.innerHTML = '';
-              media.html.appendChild(iframe);
-            }
-            container !== null && container.appendChild(media.html);
-          }
-        });
-      }
     }, {
       key: "run",
       value: function run() {
@@ -74835,7 +74588,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     }, {
       key: "transitionNodes",
       value: function transitionNodes(oldMedia, newMedia) {
-        var _this3 = this;
+        var _this2 = this;
         var transOutDuration = 1;
         var transOutDirection = 'E';
         if (newMedia) {
@@ -74851,7 +74604,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           var transOut = transitionElement('defaultOut', {
             duration: defaultTransOutOptions.duration
           });
-          var transOutName;
+          var transOutName = '';
           if (oldMedia && Boolean(oldMedia.options['transout'])) {
             transOutName = oldMedia.options['transout'];
             if (transOutName === 'fly') {
@@ -74865,11 +74618,18 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
             }
             transOut = transitionElement(transOutName, defaultTransOutOptions);
           }
+          console.debug('??? XLR.debug >> Region > transitionNodes - transOut options', {
+            transOutName: transOutName,
+            transOut: transOut,
+            transOutDuration: transOutDuration,
+            transOutDirection: transOutDirection,
+            totalMediaObjects: this.totalMediaObjects
+          });
           var hideOldMedia = function hideOldMedia() {
             // Hide oldMedia
             if (oldMedia) {
-              var _this3$layout$html;
-              var $region = (_this3$layout$html = _this3.layout.html) === null || _this3$layout$html === void 0 ? void 0 : _this3$layout$html.querySelector('#' + _this3.containerName);
+              var $layout = document.querySelector("#".concat(_this2.layout.containerName, "[data-sequence=\"").concat(_this2.layout.index, "\"]"));
+              var $region = $layout.querySelector('#' + _this2.containerName);
               var $oldMedia = $region ? $region.querySelector('.' + getMediaId(oldMedia)) : null;
               if ($oldMedia) {
                 var removeOldMedia = function removeOldMedia() {
@@ -74908,7 +74668,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 if (Boolean(oldMedia.options['transout'])) {
                   oldMediaAnimate = $oldMedia.animate(transOut.keyframes, transOut.timing);
                 }
-                if (Boolean(oldMedia.options['transout']) && _this3.totalMediaObjects > 1) {
+                if (Boolean(oldMedia.options['transout']) && _this2.totalMediaObjects > 1) {
                   if (transOutName === 'flyOut') {
                     // Reset last item to original position and state
                     oldMediaAnimate ? oldMediaAnimate.finished.then(function () {
@@ -74934,9 +74694,6 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 } else {
                   console.debug('??? XLR.debug >> Region transitionNode - hideOldMedia' + 'no transout and only 1 media');
                   removeOldMedia();
-                  // Resolve this right away
-                  // As a result, the transition between two media object
-                  // seems like a cross-over
                 }
               }
             }
@@ -75202,7 +74959,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
             };
           }
           // Only render webhook controller in CMS
-          if (this.parent.xlr.config.platform !== 'CMS') {
+          if (this.parent.xlr.config.platform !== exports.ConsumerPlatform.CMS) {
             this.$actionController.style.display = 'none';
             return;
           }
@@ -75300,10 +75057,10 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       key: "runAction",
       value: function runAction(actionData, options) {
         if (actionData.actiontype == 'navLayout') {
-          if (this.parent.xlr.config.platform === 'CMS') {
+          if (this.parent.xlr.config.platform === exports.ConsumerPlatform.CMS) {
             // Open layout preview in a new tab
             this.openLayoutInNewTab(actionData.layoutcode, options);
-          } else if (this.parent.xlr.config.platform === 'chromeOS') {
+          } else if (this.parent.xlr.config.platform === exports.ConsumerPlatform.CHROMEOS) {
             // Set target layout as active layout
             this.openLayoutInPlayer(actionData.layoutcode, options);
           }
@@ -75465,6 +75222,12 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
               fetchOptions.headers = {
                 'Content-Type': 'text/xml'
               };
+            } else if (layoutOptions.platform === exports.ConsumerPlatform.ELECTRON) {
+              xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
+              fetchOptions.mode = 'no-cors';
+              fetchOptions.headers = {
+                'Content-Type': 'text/xml'
+              };
             } else if (layoutOptions.appHost !== null) {
               xlfUrl = layoutOptions.appHost + layoutOptions.xlfUrl;
             }
@@ -75794,9 +75557,10 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         if (!(this.bgImage === "" || typeof this.bgImage === 'undefined')) {
           /* Extract the image ID from the filename */
           this.bgId = this.bgImage.substring(0, this.bgImage.indexOf('.'));
-          var bgImageUrl = composeBgUrlByPlatform(this.xlr.config.platform, _objectSpread2(_objectSpread2({}, this.options), {}, {
-            layout: this
-          }));
+          var bgImageUrl = composeBgUrlByPlatform(this.xlr.config.platform, this);
+          console.debug('>>> XLR.debug Layout::parseXlf - Composed background image URL > ', {
+            bgImageUrl: bgImageUrl
+          });
           if ($layout) {
             if (!this.isOverlay) {
               $layout.style.setProperty('background-image', "url(\"".concat(bgImageUrl, "\")"));
@@ -76061,7 +75825,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
               case 0:
                 $previewSplash.classList.add('preview-splash');
                 // Don't show Xibo logo on CMS Preview
-                if (config && config.platform !== 'CMS') {
+                if (config && config.platform !== exports.ConsumerPlatform.CMS) {
                   splashScreenImg = img$1;
                   if ((_config$icons = config.icons) !== null && _config$icons !== void 0 && _config$icons.splashScreen && config.icons.splashScreen.length > 0) {
                     splashScreenImg = config.icons.splashScreen;
@@ -76079,7 +75843,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 $previewLoader.classList.add('preview-loader');
                 $previewLoaderCaption.classList.add('preview-loaderCaption');
                 // Show loader bar and text on CMS Preview
-                if (config && config.platform === 'CMS') {
+                if (config && config.platform === exports.ConsumerPlatform.CMS) {
                   $previewLoader.style.setProperty('background-image', "url(".concat(img, ")"));
                   $previewLoaderCaption.innerHTML = '<p>Loading Layout...</p>';
                 }
@@ -76796,7 +76560,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       };
     };
     xlrObject.getLayout = function (inputLayout) {
-      var isCMS = this.config.platform === 'CMS';
+      var isCMS = this.config.platform === exports.ConsumerPlatform.CMS;
       if (!isCMS && Object.keys(this.uniqueLayouts).length === 0) {
         return;
       }
@@ -76941,9 +76705,9 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
               self = this; // Compose layout props first
               // Clone options to avoid mutating the shared xlfUrl template
               newOptions = _objectSpread2({}, props.options);
-              if (self.config.platform === 'CMS' && inputLayout && Boolean(inputLayout.layoutId)) {
+              if (self.config.platform === exports.ConsumerPlatform.CMS && inputLayout && Boolean(inputLayout.layoutId)) {
                 newOptions.xlfUrl = newOptions.xlfUrl.replace(':layoutId', String(inputLayout.layoutId));
-              } else if (self.config.platform === 'chromeOS' && inputLayout !== undefined) {
+              } else if ((self.config.platform === exports.ConsumerPlatform.CHROMEOS || self.config.platform === exports.ConsumerPlatform.ELECTRON) && inputLayout !== undefined) {
                 newOptions.xlfUrl = inputLayout.path;
               }
               if (!(inputLayout && inputLayout.layoutNode === undefined)) {
@@ -77171,13 +76935,16 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
   exports.flyInElem = flyInElem;
   exports.flyOutElem = flyOutElem;
   exports.flyTransitionKeyframes = flyTransitionKeyframes;
+  exports.getAllAttributes = getAllAttributes;
   exports.getDataBlob = getDataBlob;
   exports.getFileExt = getFileExt;
   exports.getIndexByLayoutId = getIndexByLayoutId;
   exports.getLayout = getLayout;
+  exports.getLayoutIndexByLayoutId = getLayoutIndexByLayoutId;
   exports.getMediaId = getMediaId;
   exports.getXlf = getXlf;
   exports.hasDefaultOnly = hasDefaultOnly;
+  exports.hasSspLayout = hasSspLayout;
   exports.initRenderingDOM = initRenderingDOM;
   exports.initialLayout = initialLayout;
   exports.initialMedia = initialMedia;
@@ -77186,11 +76953,15 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
   exports.isEmpty = isEmpty;
   exports.isLayoutValid = isLayoutValid;
   exports.nextId = nextId;
+  exports.playerReportFault = playerReportFault;
   exports.preloadMediaBlob = preloadMediaBlob;
+  exports.prepareAudioMedia = prepareAudioMedia;
+  exports.prepareHtmlMedia = prepareHtmlMedia;
+  exports.prepareImageMedia = prepareImageMedia;
+  exports.prepareVideoMedia = prepareVideoMedia;
   exports.setExpiry = setExpiry;
   exports.transitionElement = transitionElement;
   exports.videoFileType = videoFileType;
-  exports.videoMediaHandler = videoMediaHandler;
   exports.vjsDefaultOptions = vjsDefaultOptions;
 
   Object.defineProperty(exports, '__esModule', { value: true });