@xibosignage/xibo-layout-renderer 1.0.11 → 1.0.13

package/dist/xibo-layout-renderer.js

@@ -69560,7 +69560,9 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       return {};
     },
     emitter: {},
-    enableStat: false
+    enableStat: false,
+    muted: false,
+    player: undefined
   };
 
   /*
@@ -72623,123 +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 _callee2($media, media) {
-      var videoSrc, vidType, $videoSource;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return preloadMediaBlob(media.url, media.mediaType);
-          case 2:
-            videoSrc = _context2.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 _context2.abrupt("return", $media);
-          case 6:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    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);
-          vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('loadstart', function () {
-            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-          });
-          vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('loadstart', function () {
-            if ($videoMedia.readyState >= 2) {
-              console.debug("".concat(capitalizeStr(media.mediaType), " data for media > ").concat(media.id, " has been fully loaded . . ."));
-            }
-          });
-          vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('canplay', function () {
-            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-            // Autoplay restarted
-            console.debug('autoplay started . . .');
-            vjsPlayer.muted(true);
-            vjsPlayer.play();
-          });
-          vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('playing', function () {
-            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-          });
-          vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('error', /*#__PURE__*/function () {
-            var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(err) {
+        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:
-                    console.debug("Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-                    if (!(xlr.config.platform === 'chromeOS')) {
-                      _context.next = 9;
-                      break;
-                    }
                     // Immediately expire media and report a fault
                     playerSW = PwaSW();
-                    _context.next = 5;
+                    _context.next = 3;
                     return playerSW.getSW();
-                  case 5:
+                  case 3:
                     hasSW = _context.sent;
                     if (hasSW) {
                       playerSW.postMsg({
                         type: 'MEDIA_FAULT',
                         code: 5002,
-                        reason: 'Video file source not supported',
+                        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(7)), 'yyyy-MM-dd HH:mm:ss')
+                        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);
                       });
                     }
-                    _context.next = 10;
+                  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;
+                          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;
+                    }
+                    _context3.next = 4;
+                    return playerReportFault('Video file source not supported');
+                  case 4:
+                    _context3.next = 7;
                     break;
-                  case 9:
+                  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 10:
+                  case 7:
                   case "end":
-                    return _context.stop();
+                    return _context3.stop();
                 }
-              }, _callee);
+              }, _callee3);
             }));
             return function (_x3) {
-              return _ref.apply(this, arguments);
+              return _ref3.apply(this, arguments);
             };
           }());
-          if (media.duration === 0) {
-            vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('durationchange', function () {
-              console.debug('Showing Media ' + media.id + ' for ' + vjsPlayer.duration() + 's of Region ' + media.region.regionId);
-            });
-            vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('ended', 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);
-              vjsPlayer.dispose();
-            });
-          }
+          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);
+          });
         }
       }
     };
@@ -72820,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') {
@@ -72951,7 +72980,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
         tmpUrl = composeResourceUrlByPlatform(xlr.config, resourceUrlParams);
       } else if (xlr.config.platform === 'chromeOS') {
         tmpUrl = composeResourceUrl(xlr.config, resourceUrlParams);
-        if (self.mediaType === 'image' || self.mediaType === 'video') {
+        if (self.mediaType === 'image' || self.mediaType === 'video' || self.mediaType === 'audio') {
           tmpUrl = composeMediaUrl(resourceUrlParams);
         }
       }
@@ -72978,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';
@@ -72987,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;
@@ -73091,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:
@@ -73102,7 +73136,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                   $media = getNewMedia();
                 }
                 if (!$media) {
-                  _context2.next = 44;
+                  _context2.next = 40;
                   break;
                 }
                 $media.style.setProperty('display', 'block');
@@ -73131,52 +73165,48 @@ ${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 = 43;
+                _context2.next = 39;
                 break;
               case 22:
                 if (!(self.mediaType === 'video' && self.url !== null)) {
-                  _context2.next = 31;
+                  _context2.next = 27;
                   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';
-                }
+                // Initialize video.js
                 videojs($media, {
                   controls: false,
                   preload: 'auto',
                   autoplay: false,
-                  muted: isMuted,
-                  errorDisplay: xlr.config.platform !== 'chromeOS'
+                  muted: self.muted,
+                  errorDisplay: xlr.config.platform !== 'chromeOS',
+                  restoreEl: $media,
+                  loop: self.loop
                 });
-                _context2.next = 43;
+                self.player = videojs($media);
+                _context2.next = 39;
                 break;
-              case 31:
+              case 27:
                 if (!(self.mediaType === 'audio' && self.url !== null)) {
-                  _context2.next = 42;
+                  _context2.next = 38;
                   break;
                 }
                 if (!isCMS) {
-                  _context2.next = 38;
+                  _context2.next = 34;
                   break;
                 }
-                _context2.next = 35;
+                _context2.next = 31;
                 return preloadMediaBlob(self.url, self.mediaType);
-              case 35:
+              case 31:
                 _context2.t5 = _context2.sent;
-                _context2.next = 39;
+                _context2.next = 35;
                 break;
-              case 38:
+              case 34:
                 _context2.t5 = self.url;
-              case 39:
+              case 35:
                 $media.src = _context2.t5;
-                _context2.next = 43;
+                _context2.next = 39;
                 break;
-              case 42:
+              case 38:
                 if ((self.render === 'html' || self.mediaType === 'webpage') && self.iframe && self.checkIframeStatus) {
                   // Set state as false ( for now )
                   self.ready = false;
@@ -73192,9 +73222,9 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
                   //     }
                   // });
                 }
-              case 43:
+              case 39:
                 self.emitter.emit('start', self);
-              case 44:
+              case 40:
               case "end":
                 return _context2.stop();
             }
@@ -73319,7 +73349,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 () {
@@ -73441,7 +73471,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) {
@@ -73461,7 +73491,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;