@xibosignage/xibo-layout-renderer 1.0.12 → 1.0.14

package/dist/xibo-layout-renderer.js

@@ -69561,7 +69561,8 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     },
     emitter: {},
     enableStat: false,
-    muted: false
+    muted: false,
+    player: undefined
   };
 
   /*
@@ -72624,166 +72625,149 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
     };
   }
 
-  function composeVideoSource(_x, _x2) {
-    return _composeVideoSource.apply(this, arguments);
-  }
-  function _composeVideoSource() {
-    _composeVideoSource = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4($media, media) {
-      var videoSrc, vidType, $videoSource;
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            _context4.next = 2;
-            return preloadMediaBlob(media.url, media.mediaType);
-          case 2:
-            videoSrc = _context4.sent;
-            vidType = videoFileType(getFileExt(media.uri)); // Only add one source per type
-            if ($media.querySelectorAll("source[type=\"".concat(vidType, "\"]")).length === 0) {
-              $videoSource = document.createElement('source');
-              $videoSource.src = videoSrc;
-              $videoSource.type = vidType;
-              $media.insertBefore($videoSource, $media.lastElementChild);
-            }
-            return _context4.abrupt("return", $media);
-          case 6:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4);
-    }));
-    return _composeVideoSource.apply(this, arguments);
+  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;
   }
   function VideoMedia(media, xlr) {
     return {
       init: function init() {
-        var $videoMedia = document.getElementById(getMediaId(media));
-        if ($videoMedia) {
-          var vjsPlayer = videojs.getPlayer($videoMedia);
-          if (vjsPlayer !== undefined) {
-            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;
-                      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 () {
-                          // Expire the media and dispose the video
-                          vjsPlayer.dispose();
-                          media.emitter.emit('end', media);
-                        });
-                      }
-                    case 5:
-                    case "end":
-                      return _context.stop();
-                  }
-                }, _callee);
-              }));
-              return function playerReportFault(_x3) {
-                return _ref.apply(this, arguments);
-              };
-            }();
-            vjsPlayer.on('loadstart', function () {
-              console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-            });
-            vjsPlayer.on('canplay', function () {
-              console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-            });
-            vjsPlayer.ready(function () {
-              var promise = vjsPlayer.play();
-              if (promise !== undefined) {
-                promise.then(function () {
-                  // Autoplay restarted
-                  console.debug('autoplay started . . .');
-                  vjsPlayer.muted(true);
-                })["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:
-                          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " autoplay error"));
-                          if (!(xlr.config.platform === 'chromeOS')) {
-                            _context2.next = 4;
-                            break;
-                          }
+        var vjsPlayer = media.player;
+        if (vjsPlayer !== undefined) {
+          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;
+                    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 () {
+                        // Expire the media and dispose the video
+                        vjsPlayer.dispose();
+                        media.emitter.emit('end', media);
+                      });
+                    }
+                  case 5:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            return function playerReportFault(_x) {
+              return _ref.apply(this, arguments);
+            };
+          }();
+          vjsPlayer.on('loadstart', function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
+          });
+          vjsPlayer.on('canplay', function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+          });
+          vjsPlayer.on('ready', function () {
+            vjsPlayer.muted(true);
+            var promise = vjsPlayer.play();
+            if (promise !== undefined) {
+              promise.then(function () {
+                // Autoplay restarted
+                console.debug('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:
+                        console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " autoplay error"));
+                        if (!(xlr.config.platform === 'chromeOS')) {
                           _context2.next = 4;
-                          return playerReportFault('Media autoplay error');
-                        case 4:
-                        case "end":
-                          return _context2.stop();
-                      }
-                    }, _callee2);
-                  }));
-                  return function (_x4) {
-                    return _ref2.apply(this, arguments);
-                  };
-                }());
-              }
-            });
-            vjsPlayer.on('playing', function () {
-              console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-              vjsPlayer.muted(media.muted);
-            });
-            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("Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-                      if (!(xlr.config.platform === 'chromeOS')) {
-                        _context3.next = 6;
-                        break;
-                      }
-                      _context3.next = 4;
-                      return playerReportFault('Video file source not supported');
-                    case 4:
-                      _context3.next = 7;
+                          break;
+                        }
+                        _context2.next = 4;
+                        return playerReportFault('Media autoplay error');
+                      case 4:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2);
+                }));
+                return function (_x2) {
+                  return _ref2.apply(this, arguments);
+                };
+              }());
+            }
+          });
+          vjsPlayer.on('playing', function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
+            vjsPlayer.muted(media.muted);
+          });
+          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("Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
+                    if (!(xlr.config.platform === 'chromeOS')) {
+                      _context3.next = 6;
                       break;
-                    case 6:
-                      // End media after 5 seconds
-                      setTimeout(function () {
-                        console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
-                        media.emitter.emit('end', media);
-                        vjsPlayer.dispose();
-                      }, 5000);
-                    case 7:
-                    case "end":
-                      return _context3.stop();
-                  }
-                }, _callee3);
-              }));
-              return function (_x5) {
-                return _ref3.apply(this, arguments);
-              };
-            }());
-            if (media.duration === 0) {
-              vjsPlayer.on('durationchange', function () {
-                console.debug('Showing Media ' + media.id + ' for ' + vjsPlayer.duration() + 's of Region ' + media.region.regionId);
-              });
-              vjsPlayer.on('ended', function () {
-                var _media$emitter;
-                console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-                vjsPlayer.dispose();
-                (_media$emitter = media.emitter) === null || _media$emitter === void 0 || _media$emitter.emit('end', media);
-              });
+                    }
+                    _context3.next = 4;
+                    return playerReportFault('Video file source not supported');
+                  case 4:
+                    _context3.next = 7;
+                    break;
+                  case 6:
+                    // End media after 5 seconds
+                    setTimeout(function () {
+                      console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
+                      media.emitter.emit('end', media);
+                      vjsPlayer.dispose();
+                    }, 5000);
+                  case 7:
+                  case "end":
+                    return _context3.stop();
+                }
+              }, _callee3);
+            }));
+            return function (_x3) {
+              return _ref3.apply(this, arguments);
+            };
+          }());
+          vjsPlayer.on('ended', function () {
+            var _media$emitter;
+            console.debug("VideoMedia: onended: ".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);
+            vjsPlayer.dispose();
+          });
+          vjsPlayer.on('durationchange', function () {
+            if (media.duration === 0 && vjsPlayer.duration() !== undefined) {
+              media.duration = vjsPlayer.duration();
+            } else if (media.duration > 0) {
+              vjsPlayer.duration(media.duration);
             }
-          }
+            console.debug('VIDEOJS: ondurationchange: Showing Media ' + media.id + ' for ' + vjsPlayer.duration() + 's of Region ' + media.region.regionId);
+          });
         }
       }
     };
@@ -72864,10 +72848,11 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       mediaTimer = setInterval(function () {
         mediaTimeCount++;
         if (mediaTimeCount > media.duration) {
+          console.debug('startMediaTimer: emit>end: on media ' + media.id + ' of Region ' + media.region.regionId);
           media.emitter.emit('end', media);
         }
       }, 1000);
-      console.debug('Showing Media ' + media.id + ' for ' + media.duration + 's of Region ' + media.region.regionId);
+      console.debug('startMediaTimer: Showing Media ' + media.id + ' for ' + media.duration + 's of Region ' + media.region.regionId);
     };
     emitter.on('start', function (media) {
       if (media.mediaType === 'video') {
@@ -73022,8 +73007,11 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
           $media.style.cssText = $media.style.cssText.concat("background-position: ".concat(align, " ").concat(valign));
         }
       } else if (self.mediaType === 'video') {
-        var $videoMedia = $media;
-        $videoMedia.textContent = 'Unsupported Video';
+        var $videoMedia = composeVideoSource($media, self);
+        var isMuted = false;
+        if (Boolean(self.options['mute'])) {
+          isMuted = self.options.mute === '1';
+        }
         if (Boolean(self.options['scaletype'])) {
           if (self.options.scaletype === 'stretch') {
             $videoMedia.style.objectFit = 'fill';
@@ -73031,8 +73019,10 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         }
         $videoMedia.classList.add('video-js', 'vjs-default-skin');
         if (self.loop) {
+          self.loop = true;
           $videoMedia.loop = true;
         }
+        self.muted = isMuted;
         $media = $videoMedia;
       } else if (self.mediaType === 'audio') {
         var $audioMedia = $media;
@@ -73135,7 +73125,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       }
       var showCurrentMedia = /*#__PURE__*/function () {
         var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-          var $mediaId, $media, isCMS, isMuted;
+          var $mediaId, $media, isCMS;
           return _regeneratorRuntime().wrap(function _callee2$(_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
@@ -73146,7 +73136,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                   $media = getNewMedia();
                 }
                 if (!$media) {
-                  _context2.next = 45;
+                  _context2.next = 39;
                   break;
                 }
                 $media.style.setProperty('display', 'block');
@@ -73175,54 +73165,46 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                 _context2.t3 = _context2.t2;
                 _context2.t4 = _context2.t1.concat.call(_context2.t1, _context2.t3);
                 _context2.t0.setProperty.call(_context2.t0, 'background-image', _context2.t4);
-                _context2.next = 44;
+                _context2.next = 38;
                 break;
               case 22:
                 if (!(self.mediaType === 'video' && self.url !== null)) {
-                  _context2.next = 32;
+                  _context2.next = 26;
                   break;
                 }
-                _context2.next = 25;
-                return composeVideoSource($media, self);
-              case 25:
-                $media = _context2.sent;
-                isMuted = false;
-                if (Boolean(self.options['mute'])) {
-                  isMuted = self.options.mute === '1';
-                }
-                self.muted = isMuted;
-                videojs($media, {
+                // Initialize video.js
+                self.player = videojs($media, {
                   controls: false,
                   preload: 'auto',
                   autoplay: false,
-                  muted: isMuted,
+                  muted: self.muted,
                   errorDisplay: xlr.config.platform !== 'chromeOS',
-                  restoreEl: $media
+                  loop: self.loop
                 });
-                _context2.next = 44;
+                _context2.next = 38;
                 break;
-              case 32:
+              case 26:
                 if (!(self.mediaType === 'audio' && self.url !== null)) {
-                  _context2.next = 43;
+                  _context2.next = 37;
                   break;
                 }
                 if (!isCMS) {
-                  _context2.next = 39;
+                  _context2.next = 33;
                   break;
                 }
-                _context2.next = 36;
+                _context2.next = 30;
                 return preloadMediaBlob(self.url, self.mediaType);
-              case 36:
+              case 30:
                 _context2.t5 = _context2.sent;
-                _context2.next = 40;
+                _context2.next = 34;
                 break;
-              case 39:
+              case 33:
                 _context2.t5 = self.url;
-              case 40:
+              case 34:
                 $media.src = _context2.t5;
-                _context2.next = 44;
+                _context2.next = 38;
                 break;
-              case 43:
+              case 37:
                 if ((self.render === 'html' || self.mediaType === 'webpage') && self.iframe && self.checkIframeStatus) {
                   // Set state as false ( for now )
                   self.ready = false;
@@ -73238,9 +73220,9 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                   //     }
                   // });
                 }
-              case 44:
+              case 38:
                 self.emitter.emit('start', self);
-              case 45:
+              case 39:
               case "end":
                 return _context2.stop();
             }
@@ -73302,6 +73284,9 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       self.complete = false;
       self.ending = false;
       self.ended = false;
+      self.curMedia = undefined;
+      self.nxtMedia = undefined;
+      self.currentMediaIndex = 0;
       self.id = props.regionId;
       self.uniqueId = "".concat(nextId(self.options));
       self.options = _objectSpread2(_objectSpread2({}, platform), props.options);
@@ -73365,7 +73350,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       console.debug('Region::finished called . . . ', self.id);
       // Mark as complete
       self.complete = true;
-      self.layout.regions[regionObject.index] = regionObject;
+      self.layout.regions[regionObject.index] = self;
       self.layout.regionExpired();
     };
     regionObject.prepareMediaObjects = function () {
@@ -73487,7 +73472,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       }
     };
     regionObject.playNextMedia = function () {
-      var _self$curMedia, _self$curMedia2, _self$curMedia3, _self$curMedia4;
+      var _self$curMedia, _self$curMedia2, _self$curMedia3, _self$curMedia4, _self$curMedia5;
       var self = regionObject;
       /* The current media has finished running */
       if (self.ended) {
@@ -73507,7 +73492,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       // When the region has completed and mediaObjects.length = 1
       // and curMedia.loop = false, then put the media on
       // its current state
-      if (self.complete && self.mediaObjects.length === 1 && ((_self$curMedia2 = self.curMedia) === null || _self$curMedia2 === void 0 ? void 0 : _self$curMedia2.render) !== 'html' && ((_self$curMedia3 = self.curMedia) === null || _self$curMedia3 === void 0 ? void 0 : _self$curMedia3.mediaType) === 'image' && !((_self$curMedia4 = self.curMedia) !== null && _self$curMedia4 !== void 0 && _self$curMedia4.loop)) {
+      if (self.complete && self.mediaObjects.length === 1 && ((_self$curMedia2 = self.curMedia) === null || _self$curMedia2 === void 0 ? void 0 : _self$curMedia2.render) !== 'html' && (((_self$curMedia3 = self.curMedia) === null || _self$curMedia3 === void 0 ? void 0 : _self$curMedia3.mediaType) === 'image' || ((_self$curMedia4 = self.curMedia) === null || _self$curMedia4 === void 0 ? void 0 : _self$curMedia4.mediaType) === 'video') && !((_self$curMedia5 = self.curMedia) !== null && _self$curMedia5 !== void 0 && _self$curMedia5.loop)) {
         return;
       }
       self.currentMediaIndex = self.currentMediaIndex + 1;
@@ -74589,9 +74574,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
             console.debug('prepareLayouts::xlr>layouts', self.layouts);
             return _context3.abrupt("return", new Promise(function (resolve) {
               layouts.map(function (layoutItem) {
-                if (!Boolean(self.layouts[layoutItem.index])) {
-                  self.layouts[layoutItem.index] = layoutItem;
-                }
+                self.layouts[layoutItem.index] = layoutItem;
               });
               self.currentLayoutIndex = xlrLayouts.currentLayoutIndex;
               self.currentLayout = self.layouts[self.currentLayoutIndex];