@xibosignage/xibo-layout-renderer 1.0.11 → 1.0.13

package/dist/xibo-layout-renderer.d.ts

@@ -1,4 +1,5 @@
 import { Emitter, Unsubscribe, DefaultEvents } from 'nanoevents';
+import Player from 'video.js/dist/types/player';
 
 declare enum ELayoutType {
     CURRENT = 0,
@@ -72,6 +73,8 @@ interface IMedia {
     fileId: string;
     emitter: Emitter<IMediaEvents>;
     enableStat: boolean;
+    muted?: boolean;
+    player?: Player;
 }
 declare const initialMedia: IMedia;
 
@@ -265,7 +268,7 @@ declare function videoFileType(str: string): string | undefined;
 declare function setExpiry(numDays: number): string;
 
 declare function VideoMedia(media: IMedia, xlr: IXlr): {
-    init(): void;
+    init: () => void;
 };
 
 declare function AudioMedia(media: IMedia): {

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

@@ -69557,7 +69557,9 @@ var initialMedia = {
     return {};
   },
   emitter: {},
-  enableStat: false
+  enableStat: false,
+  muted: false,
+  player: undefined
 };
 
 /*
@@ -72620,123 +72622,149 @@ function PwaSW() {
   };
 }
 
-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);
+        });
       }
     }
   };
@@ -72817,10 +72845,11 @@ function Media(region, mediaId, xml, options, xlr) {
     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') {
@@ -72948,7 +72977,7 @@ function Media(region, mediaId, xml, options, xlr) {
       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);
       }
     }
@@ -72975,8 +73004,11 @@ function Media(region, mediaId, xml, options, xlr) {
         $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';
@@ -72984,8 +73016,10 @@ function Media(region, mediaId, xml, options, xlr) {
       }
       $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;
@@ -73088,7 +73122,7 @@ function Media(region, mediaId, xml, options, xlr) {
     }
     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:
@@ -73099,7 +73133,7 @@ function Media(region, mediaId, xml, options, xlr) {
                 $media = getNewMedia();
               }
               if (!$media) {
-                _context2.next = 44;
+                _context2.next = 40;
                 break;
               }
               $media.style.setProperty('display', 'block');
@@ -73128,52 +73162,48 @@ function Media(region, mediaId, xml, options, xlr) {
               _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;
@@ -73189,9 +73219,9 @@ function Media(region, mediaId, xml, options, xlr) {
                 //     }
                 // });
               }
-            case 43:
+            case 39:
               self.emitter.emit('start', self);
-            case 44:
+            case 40:
             case "end":
               return _context2.stop();
           }
@@ -73316,7 +73346,7 @@ function Region(layout, xml, regionId, options, xlr) {
     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 () {
@@ -73438,7 +73468,7 @@ function Region(layout, xml, regionId, options, xlr) {
     }
   };
   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) {
@@ -73458,7 +73488,7 @@ function Region(layout, xml, regionId, options, xlr) {
     // 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;