@xibosignage/xibo-layout-renderer 1.0.12 → 1.0.14

package/dist/src/Modules/Media/VideoMedia.d.ts

@@ -1,6 +1,7 @@
 import { IMedia } from '../../Types/Media';
 import { IXlr } from '../../types';
-export declare function composeVideoSource($media: HTMLVideoElement, media: IMedia): Promise<HTMLVideoElement>;
+import './media.css';
+export declare function composeVideoSource($media: HTMLVideoElement, media: IMedia): HTMLVideoElement;
 export default function VideoMedia(media: IMedia, xlr: IXlr): {
     init: () => void;
 };

package/dist/src/Types/Media/Media.types.d.ts

@@ -1,4 +1,5 @@
 import { Emitter, Unsubscribe } from 'nanoevents';
+import Player from "video.js/dist/types/player";
 import { IMediaEvents } from '../../Modules/Media/Media';
 import { IRegion } from '../Region';
 import { OptionsType } from '../Layout';
@@ -43,5 +44,6 @@ export interface IMedia {
     emitter: Emitter<IMediaEvents>;
     enableStat: boolean;
     muted?: boolean;
+    player?: Player;
 }
 export declare const initialMedia: IMedia;

package/dist/styles.css

@@ -251,6 +251,11 @@ iframe {
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     cursor: pointer;
 }
+
+.vjs-control-bar, .vjs-big-play-button {
+    display: none !important;
+}
+
 /* Style the Splash Screen */
 div.preview-splash {
     height: 100%;

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

@@ -69562,7 +69562,8 @@ var initialMedia = {
   },
   emitter: {},
   enableStat: false,
-  muted: false
+  muted: false,
+  player: undefined
 };
 
 /*
@@ -72625,166 +72626,149 @@ function PwaSW() {
   };
 }
 
-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);
+        });
       }
     }
   };
@@ -72865,10 +72849,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') {
@@ -73023,8 +73008,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';
@@ -73032,8 +73020,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;
@@ -73136,7 +73126,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:
@@ -73147,7 +73137,7 @@ function Media(region, mediaId, xml, options, xlr) {
                 $media = getNewMedia();
               }
               if (!$media) {
-                _context2.next = 45;
+                _context2.next = 39;
                 break;
               }
               $media.style.setProperty('display', 'block');
@@ -73176,54 +73166,46 @@ 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 = 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;
@@ -73239,9 +73221,9 @@ function Media(region, mediaId, xml, options, xlr) {
                 //     }
                 // });
               }
-            case 44:
+            case 38:
               self.emitter.emit('start', self);
-            case 45:
+            case 39:
             case "end":
               return _context2.stop();
           }
@@ -73303,6 +73285,9 @@ function Region(layout, xml, regionId, options, xlr) {
     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);
@@ -73366,7 +73351,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 () {
@@ -73488,7 +73473,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) {
@@ -73508,7 +73493,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;
@@ -74590,9 +74575,7 @@ function XiboLayoutRenderer(inputLayouts, options) {
           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];