@xibosignage/xibo-layout-renderer 1.0.15 → 1.0.17

package/dist/src/Modules/Generators/index.d.ts

@@ -1 +1 @@
-export { getFileExt, nextId, preloadMediaBlob, getMediaId, fetchJSON, capitalizeStr, audioFileType, MediaTypes, videoFileType, setExpiry, } from './Generators';
+export { getFileExt, nextId, preloadMediaBlob, getMediaId, fetchJSON, capitalizeStr, audioFileType, MediaTypes, videoFileType, setExpiry, composeMediaUrl, fetchText, getDataBlob, composeResourceUrl, composeResourceUrlByPlatform, getIndexByLayoutId, isEmpty, composeBgUrlByPlatform, } from './Generators';

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

@@ -3,5 +3,7 @@ import { IXlr } from '../../types';
 import './media.css';
 export declare function composeVideoSource($media: HTMLVideoElement, media: IMedia): HTMLVideoElement;
 export default function VideoMedia(media: IMedia, xlr: IXlr): {
+    duration: number;
     init: () => void;
+    stop: (disposeOnly?: boolean) => void;
 };

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

@@ -799,6 +799,34 @@ function _fetchJSON() {
   }));
   return _fetchJSON.apply(this, arguments);
 }
+function fetchText(_x5) {
+  return _fetchText.apply(this, arguments);
+}
+function _fetchText() {
+  _fetchText = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(url) {
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          return _context4.abrupt("return", fetch(url).then(function (res) {
+            return res.text();
+          }).then(function (responseText) {
+            if (String(responseText).length > 0) {
+              return responseText;
+            } else {
+              return '';
+            }
+          })["catch"](function (err) {
+            console.debug(err);
+            return err === null || err === void 0 ? void 0 : err.message;
+          }));
+        case 1:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return _fetchText.apply(this, arguments);
+}
 function getFileExt(filename) {
   var filenameArr = String(filename).split('.');
   return filenameArr[filenameArr.length - 1];
@@ -874,6 +902,9 @@ function getIndexByLayoutId(layoutsInput, layoutId) {
     index: 0
   };
 }
+function isEmpty$1(input) {
+  return !Boolean(input) || String(input).length === 0;
+}
 function getAllAttributes(elem) {
   if (!elem || elem === null) {
     return {};
@@ -72640,12 +72671,15 @@ function composeVideoSource($media, media) {
 }
 function VideoMedia(media, xlr) {
   return {
+    duration: 0,
     init: function init() {
+      var _this = this;
       var vjsPlayer = media.player;
+      this.duration = media.duration;
       if (vjsPlayer !== undefined) {
         var playerReportFault = /*#__PURE__*/function () {
           var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(msg) {
-            var playerSW, hasSW, endVideo;
+            var playerSW, hasSW;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
@@ -72655,11 +72689,6 @@ 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',
@@ -72672,12 +72701,12 @@ function VideoMedia(media, xlr) {
                       // Temporary setting
                       expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
                     })["finally"](function () {
-                      endVideo();
+                      _this.stop();
                     });
                   } else {
-                    endVideo();
+                    _this.stop();
                   }
-                case 6:
+                case 5:
                 case "end":
                   return _context.stop();
               }
@@ -72688,11 +72717,26 @@ function VideoMedia(media, xlr) {
           };
         }();
         vjsPlayer.on('loadstart', function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
+          console.debug("VideoMedia: ".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.one('loadedmetadata', function () {
+          if (media.duration === 0) {
+            _this.duration = vjsPlayer.duration();
+          }
+          console.debug('VideoMedia: loadedmetadata: Setting video duration to = ' + _this.duration);
+        });
+        vjsPlayer.one('canplay', function () {
+          console.debug("VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
+        });
+        vjsPlayer.one('playing', function () {
+          console.debug('VideoMedia: playing: Showing Media ' + media.id + ' for ' + _this.duration + 's of Region ' + media.region.regionId);
+          console.debug("VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
         });
+        // @NOTE: When video is paused due to fail in unmuting the video
+        // and video has media.duration = 0, the video will stay paused and the video cycle won't end
+        // @TODO: Add timer when video is paused due to unmuting fail and duration that is equal to 0
+        // @NOTE: The pause issue when unmuting the video is mainly on a browser level.
+        // Please visit https://developer.chrome.com/blog/autoplay/ for more info.
         vjsPlayer.on('ready', function () {
           vjsPlayer.muted(true);
           // Race promise between a 0.5s play and a 5s skip
@@ -72701,57 +72745,57 @@ function VideoMedia(media, xlr) {
               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"));
+                    console.debug("VideoMedia: ".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;
+                    // Set video mute/unmute based on setting once playing
+                    vjsPlayer.muted(media.muted);
+                    _context2.next = 5;
                     return vjsPlayer.play();
-                  case 4:
+                  case 5:
                     // Resolve if play works
                     resolve(true);
-                    _context2.next = 10;
+                    _context2.next = 11;
                     break;
-                  case 7:
-                    _context2.prev = 7;
+                  case 8:
+                    _context2.prev = 8;
                     _context2.t0 = _context2["catch"](1);
                     // Reject race if play fails
                     reject('Play failed');
-                  case 10:
+                  case 11:
                   case "end":
                     return _context2.stop();
                 }
-              }, _callee2, null, [[1, 7]]);
+              }, _callee2, null, [[1, 8]]);
             })), 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"));
+            console.debug("VideoMedia: ".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;
+                      _context3.next = 5;
                       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;
+                    console.debug("VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Promise not resolved within 5 seconds. Move to next media"));
+                    _this.stop();
+                    _context3.next = 9;
                     break;
-                  case 6:
-                    console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                  case 5:
+                    console.debug("VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
                     if (!(xlr.config.platform === 'chromeOS')) {
-                      _context3.next = 10;
+                      _context3.next = 9;
                       break;
                     }
-                    _context3.next = 10;
+                    _context3.next = 9;
                     return playerReportFault('Media autoplay error');
-                  case 10:
+                  case 9:
                   case "end":
                     return _context3.stop();
                 }
@@ -72762,16 +72806,12 @@ function VideoMedia(media, xlr) {
             };
           }());
         });
-        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 _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));
+                  console.debug("VideoMedia: Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
                   if (!(xlr.config.platform === 'chromeOS')) {
                     _context4.next = 6;
                     break;
@@ -72784,9 +72824,8 @@ function VideoMedia(media, xlr) {
                 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();
+                    console.debug("VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
+                    _this.stop();
                   }, 5000);
                 case 7:
                 case "end":
@@ -72798,20 +72837,25 @@ function VideoMedia(media, xlr) {
             return _ref4.apply(this, arguments);
           };
         }());
-        vjsPlayer.on('ended', function () {
-          var _media$emitter2;
-          console.debug("VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-          (_media$emitter2 = media.emitter) === null || _media$emitter2 === void 0 || _media$emitter2.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);
-        });
+        if (media.duration === 0) {
+          vjsPlayer.on('ended', function () {
+            console.debug("VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+            _this.stop();
+          });
+        }
+      }
+    },
+    stop: function stop() {
+      var disposeOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var vjsPlayer = media.player;
+      // Expire the media and dispose the video
+      if (vjsPlayer !== undefined) {
+        if (!disposeOnly) {
+          media.emitter.emit('end', media);
+        }
+        vjsPlayer.dispose();
+        // Clear up media player
+        media.player = undefined;
       }
     }
   };
@@ -72894,13 +72938,19 @@ function Media(region, mediaId, xml, options, xlr) {
       if (mediaTimeCount > media.duration) {
         console.debug('startMediaTimer: emit>end: on media ' + media.id + ' of Region ' + media.region.regionId);
         media.emitter.emit('end', media);
+        if (media.mediaType === 'video') {
+          // Dispose the video media
+          console.debug("VideoMedia::stop - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
+          VideoMedia(media, xlr).stop(true);
+        }
       }
     }, 1000);
     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') {
-      VideoMedia(media, xlr).init();
+      var videoMedia = VideoMedia(media, xlr);
+      videoMedia.init();
       if (media.duration > 0) {
         startMediaTimer(media);
       }
@@ -73221,7 +73271,7 @@ function Media(region, mediaId, xml, options, xlr) {
                 controls: false,
                 preload: 'auto',
                 autoplay: false,
-                muted: self.muted,
+                muted: true,
                 errorDisplay: xlr.config.platform !== 'chromeOS',
                 loop: self.loop
               });
@@ -74698,15 +74748,22 @@ exports.Region = Region;
 exports.VideoMedia = VideoMedia;
 exports.audioFileType = audioFileType;
 exports.capitalizeStr = capitalizeStr;
+exports.composeBgUrlByPlatform = composeBgUrlByPlatform;
+exports.composeMediaUrl = composeMediaUrl;
+exports.composeResourceUrl = composeResourceUrl;
+exports.composeResourceUrlByPlatform = composeResourceUrlByPlatform;
 exports.default = XiboLayoutRenderer;
 exports.defaultTrans = defaultTrans;
 exports.fadeInElem = fadeInElem;
 exports.fadeOutElem = fadeOutElem;
 exports.fetchJSON = fetchJSON;
+exports.fetchText = fetchText;
 exports.flyInElem = flyInElem;
 exports.flyOutElem = flyOutElem;
 exports.flyTransitionKeyframes = flyTransitionKeyframes;
+exports.getDataBlob = getDataBlob;
 exports.getFileExt = getFileExt;
+exports.getIndexByLayoutId = getIndexByLayoutId;
 exports.getLayout = getLayout;
 exports.getMediaId = getMediaId;
 exports.getXlf = getXlf;
@@ -74715,6 +74772,7 @@ exports.initialLayout = initialLayout;
 exports.initialMedia = initialMedia;
 exports.initialRegion = initialRegion;
 exports.initialXlr = initialXlr;
+exports.isEmpty = isEmpty$1;
 exports.nextId = nextId;
 exports.platform = platform;
 exports.preloadMediaBlob = preloadMediaBlob;