@xibosignage/xibo-layout-renderer 1.0.13 → 1.0.15

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

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

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

@@ -72645,7 +72645,7 @@ function VideoMedia(media, xlr) {
       if (vjsPlayer !== undefined) {
         var playerReportFault = /*#__PURE__*/function () {
           var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(msg) {
-            var playerSW, hasSW;
+            var playerSW, hasSW, endVideo;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
@@ -72655,6 +72655,11 @@ function VideoMedia(media, xlr) {
                   return playerSW.getSW();
                 case 3:
                   hasSW = _context.sent;
+                  endVideo = function endVideo() {
+                    // Expire the media and dispose the video
+                    vjsPlayer.dispose();
+                    media.emitter.emit('end', media);
+                  };
                   if (hasSW) {
                     playerSW.postMsg({
                       type: 'MEDIA_FAULT',
@@ -72667,12 +72672,12 @@ function VideoMedia(media, xlr) {
                       // 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);
+                      endVideo();
                     });
+                  } else {
+                    endVideo();
                   }
-                case 5:
+                case 6:
                 case "end":
                   return _context.stop();
               }
@@ -72690,53 +72695,91 @@ function VideoMedia(media, xlr) {
         });
         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);
-              };
-            }());
-          }
+          // 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 _callee2() {
+              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, " : Trying to force play after 0.1 seconds"));
+                    // Try to force play here
+                    _context2.prev = 1;
+                    _context2.next = 4;
+                    return vjsPlayer.play();
+                  case 4:
+                    // Resolve if play works
+                    resolve(true);
+                    _context2.next = 10;
+                    break;
+                  case 7:
+                    _context2.prev = 7;
+                    _context2.t0 = _context2["catch"](1);
+                    // Reject race if play fails
+                    reject('Play failed');
+                  case 10:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _callee2, null, [[1, 7]]);
+            })), 100);
+          }), new Promise(function (_, reject) {
+            return setTimeout(function () {
+              return reject('Timeout');
+            }, 5000);
+          })]).then(function () {
+            console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay started"));
+          })["catch"]( /*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(error) {
+              var _media$emitter;
+              return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+                while (1) switch (_context3.prev = _context3.next) {
+                  case 0:
+                    if (!(error === 'Timeout')) {
+                      _context3.next = 6;
+                      break;
+                    }
+                    console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                    vjsPlayer.dispose();
+                    (_media$emitter = media.emitter) === null || _media$emitter === void 0 || _media$emitter.emit('end', media);
+                    _context3.next = 10;
+                    break;
+                  case 6:
+                    console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                    if (!(xlr.config.platform === 'chromeOS')) {
+                      _context3.next = 10;
+                      break;
+                    }
+                    _context3.next = 10;
+                    return playerReportFault('Media autoplay error');
+                  case 10:
+                  case "end":
+                    return _context3.stop();
+                }
+              }, _callee3);
+            }));
+            return function (_x2) {
+              return _ref3.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) {
+          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(err) {
+            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+              while (1) switch (_context4.prev = _context4.next) {
                 case 0:
                   console.debug("Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
                   if (!(xlr.config.platform === 'chromeOS')) {
-                    _context3.next = 6;
+                    _context4.next = 6;
                     break;
                   }
-                  _context3.next = 4;
+                  _context4.next = 4;
                   return playerReportFault('Video file source not supported');
                 case 4:
-                  _context3.next = 7;
+                  _context4.next = 7;
                   break;
                 case 6:
                   // End media after 5 seconds
@@ -72747,18 +72790,18 @@ function VideoMedia(media, xlr) {
                   }, 5000);
                 case 7:
                 case "end":
-                  return _context3.stop();
+                  return _context4.stop();
               }
-            }, _callee3);
+            }, _callee4);
           }));
           return function (_x3) {
-            return _ref3.apply(this, arguments);
+            return _ref4.apply(this, arguments);
           };
         }());
         vjsPlayer.on('ended', function () {
-          var _media$emitter;
+          var _media$emitter2;
           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);
+          (_media$emitter2 = media.emitter) === null || _media$emitter2 === void 0 || _media$emitter2.emit('end', media);
           vjsPlayer.dispose();
         });
         vjsPlayer.on('durationchange', function () {
@@ -73137,7 +73180,7 @@ function Media(region, mediaId, xml, options, xlr) {
                 $media = getNewMedia();
               }
               if (!$media) {
-                _context2.next = 40;
+                _context2.next = 39;
                 break;
               }
               $media.style.setProperty('display', 'block');
@@ -73166,48 +73209,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 = 39;
+              _context2.next = 38;
               break;
             case 22:
               if (!(self.mediaType === 'video' && self.url !== null)) {
-                _context2.next = 27;
+                _context2.next = 26;
                 break;
               }
               // Initialize video.js
-              videojs($media, {
+              self.player = videojs($media, {
                 controls: false,
                 preload: 'auto',
                 autoplay: false,
                 muted: self.muted,
                 errorDisplay: xlr.config.platform !== 'chromeOS',
-                restoreEl: $media,
                 loop: self.loop
               });
-              self.player = videojs($media);
-              _context2.next = 39;
+              _context2.next = 38;
               break;
-            case 27:
+            case 26:
               if (!(self.mediaType === 'audio' && self.url !== null)) {
-                _context2.next = 38;
+                _context2.next = 37;
                 break;
               }
               if (!isCMS) {
-                _context2.next = 34;
+                _context2.next = 33;
                 break;
               }
-              _context2.next = 31;
+              _context2.next = 30;
               return preloadMediaBlob(self.url, self.mediaType);
-            case 31:
+            case 30:
               _context2.t5 = _context2.sent;
-              _context2.next = 35;
+              _context2.next = 34;
               break;
-            case 34:
+            case 33:
               _context2.t5 = self.url;
-            case 35:
+            case 34:
               $media.src = _context2.t5;
-              _context2.next = 39;
+              _context2.next = 38;
               break;
-            case 38:
+            case 37:
               if ((self.render === 'html' || self.mediaType === 'webpage') && self.iframe && self.checkIframeStatus) {
                 // Set state as false ( for now )
                 self.ready = false;
@@ -73223,9 +73264,9 @@ function Media(region, mediaId, xml, options, xlr) {
                 //     }
                 // });
               }
-            case 39:
+            case 38:
               self.emitter.emit('start', self);
-            case 40:
+            case 39:
             case "end":
               return _context2.stop();
           }
@@ -73287,6 +73328,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);
@@ -74574,9 +74618,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];