@xibosignage/xibo-layout-renderer 1.0.15 → 1.0.17

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

@@ -254,12 +254,29 @@ declare function nextId(options: {
 }): number;
 declare const getMediaId: ({ mediaType, containerName }: IMedia) => string;
 declare const capitalizeStr: (inputStr: string) => string;
+declare function getDataBlob(src: string): Promise<unknown>;
 type MediaTypes = 'video' | 'audio' | 'image';
 declare function preloadMediaBlob(src: string, type: MediaTypes): Promise<string>;
 declare function fetchJSON(url: string): Promise<any>;
+declare function fetchText(url: string): Promise<string>;
 declare function getFileExt(filename: string): string;
 declare function audioFileType(str: string): string | undefined;
 declare function videoFileType(str: string): string | undefined;
+declare function composeResourceUrlByPlatform(options: OptionsType, params: any): string;
+declare function composeResourceUrl(options: OptionsType, params: any): string;
+declare function composeMediaUrl(params: any): string;
+declare function composeBgUrlByPlatform(platform: OptionsType['platform'], params: any): string;
+type LayoutIndexType = {
+    [k: string]: InputLayoutType & {
+        index: number;
+    };
+};
+declare function getIndexByLayoutId(layoutsInput: InputLayoutType[], layoutId?: number | null): (InputLayoutType & {
+    index: number;
+}) | LayoutIndexType | {
+    index: number;
+};
+declare function isEmpty(input: any): boolean;
 /**
  * Create expiration day based on current date
  * @param numDays Number of days as expiry
@@ -268,7 +285,9 @@ declare function videoFileType(str: string): string | undefined;
 declare function setExpiry(numDays: number): string;
 
 declare function VideoMedia(media: IMedia, xlr: IXlr): {
+    duration: number;
     init: () => void;
+    stop: (disposeOnly?: boolean) => void;
 };
 
 declare function AudioMedia(media: IMedia): {
@@ -379,4 +398,4 @@ type flyTransitionParams = {
 };
 declare const flyTransitionKeyframes: (params: flyTransitionParams) => KeyframeOptionsType;
 
-export { Action, ActionsWrapper, AudioMedia, ELayoutType, type GetLayoutParamType, type GetLayoutType, type ILayout, type ILayoutEvents, type IMedia, type IRegion, type IRegionEvents, type ISplashScreen, type IXlr, type InactOptions, type InputLayoutType, type KeyframeOptionsType, Media, type MediaTypes, type OptionsType, type PreviewSplashElement, Region, type TransitionElementOptions, type TransitionNameType, VideoMedia, audioFileType, capitalizeStr, type compassPoints, XiboLayoutRenderer as default, defaultTrans, fadeInElem, fadeOutElem, fetchJSON, flyInElem, flyOutElem, flyTransitionKeyframes, type flyTransitionParams, getFileExt, getLayout, getMediaId, getXlf, initRenderingDOM, initialLayout, initialMedia, initialRegion, initialXlr, nextId, platform, preloadMediaBlob, setExpiry, transitionElement, videoFileType };
+export { Action, ActionsWrapper, AudioMedia, ELayoutType, type GetLayoutParamType, type GetLayoutType, type ILayout, type ILayoutEvents, type IMedia, type IRegion, type IRegionEvents, type ISplashScreen, type IXlr, type InactOptions, type InputLayoutType, type KeyframeOptionsType, Media, type MediaTypes, type OptionsType, type PreviewSplashElement, Region, type TransitionElementOptions, type TransitionNameType, VideoMedia, audioFileType, capitalizeStr, type compassPoints, composeBgUrlByPlatform, composeMediaUrl, composeResourceUrl, composeResourceUrlByPlatform, XiboLayoutRenderer as default, defaultTrans, fadeInElem, fadeOutElem, fetchJSON, fetchText, flyInElem, flyOutElem, flyTransitionKeyframes, type flyTransitionParams, getDataBlob, getFileExt, getIndexByLayoutId, getLayout, getMediaId, getXlf, initRenderingDOM, initialLayout, initialMedia, initialRegion, initialXlr, isEmpty, nextId, platform, preloadMediaBlob, setExpiry, transitionElement, videoFileType };

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

@@ -795,6 +795,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];
@@ -870,6 +898,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 {};
@@ -72636,12 +72667,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:
@@ -72651,11 +72685,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',
@@ -72668,12 +72697,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();
               }
@@ -72684,11 +72713,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
@@ -72697,57 +72741,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();
                 }
@@ -72758,16 +72802,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;
@@ -72780,9 +72820,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":
@@ -72794,20 +72833,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;
       }
     }
   };
@@ -72890,13 +72934,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);
       }
@@ -73217,7 +73267,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
               });
@@ -74686,5 +74736,5 @@ function XiboLayoutRenderer(inputLayouts, options) {
   return xlrObject;
 }
 
-export { Action, ActionsWrapper, AudioMedia, ELayoutType, Media, Region, VideoMedia, audioFileType, capitalizeStr, XiboLayoutRenderer as default, defaultTrans, fadeInElem, fadeOutElem, fetchJSON, flyInElem, flyOutElem, flyTransitionKeyframes, getFileExt, getLayout, getMediaId, getXlf, initRenderingDOM, initialLayout, initialMedia, initialRegion, initialXlr, nextId, platform, preloadMediaBlob, setExpiry, transitionElement, videoFileType };
+export { Action, ActionsWrapper, AudioMedia, ELayoutType, Media, Region, VideoMedia, audioFileType, capitalizeStr, composeBgUrlByPlatform, composeMediaUrl, composeResourceUrl, composeResourceUrlByPlatform, XiboLayoutRenderer as default, defaultTrans, fadeInElem, fadeOutElem, fetchJSON, fetchText, flyInElem, flyOutElem, flyTransitionKeyframes, getDataBlob, getFileExt, getIndexByLayoutId, getLayout, getMediaId, getXlf, initRenderingDOM, initialLayout, initialMedia, initialRegion, initialXlr, isEmpty$1 as isEmpty, nextId, platform, preloadMediaBlob, setExpiry, transitionElement, videoFileType };
 //# sourceMappingURL=xibo-layout-renderer.esm.js.map