@xibosignage/xibo-layout-renderer 1.0.16 → 1.0.17

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

@@ -3,6 +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

@@ -72670,9 +72670,12 @@ function composeVideoSource($media, media) {
   return $media;
 }
 function VideoMedia(media, xlr) {
-  var videoMediaInstance = {
+  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) {
@@ -72698,10 +72701,10 @@ function VideoMedia(media, xlr) {
                       // Temporary setting
                       expires: format(new Date(setExpiry(1)), 'yyyy-MM-dd HH:mm:ss')
                     })["finally"](function () {
-                      videoMediaInstance.stop();
+                      _this.stop();
                     });
                   } else {
-                    videoMediaInstance.stop();
+                    _this.stop();
                   }
                 case 5:
                 case "end":
@@ -72714,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
@@ -72727,33 +72745,35 @@ 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) {
               return _regeneratorRuntime().wrap(function _callee3$(_context3) {
@@ -72763,12 +72783,12 @@ function VideoMedia(media, xlr) {
                       _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"));
-                    videoMediaInstance.stop();
+                    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 5:
-                    console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
+                    console.debug("VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " : Autoplay error: ").concat(error));
                     if (!(xlr.config.platform === 'chromeOS')) {
                       _context3.next = 9;
                       break;
@@ -72786,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;
@@ -72808,8 +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 . . ."));
-                    videoMediaInstance.stop();
+                    console.debug("VideoMedia: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended . . ."));
+                    _this.stop();
                   }, 5000);
                 case 7:
                 case "end":
@@ -72824,10 +72840,7 @@ function VideoMedia(media, xlr) {
         if (media.duration === 0) {
           vjsPlayer.on('ended', function () {
             console.debug("VideoMedia: onended: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
-            videoMediaInstance.stop();
-          });
-          vjsPlayer.on('durationchange', function () {
-            console.debug('VIDEOJS: ondurationchange: Showing Media ' + media.id + ' for ' + vjsPlayer.duration() + 's of Region ' + media.region.regionId);
+            _this.stop();
           });
         }
       }
@@ -72841,10 +72854,11 @@ function VideoMedia(media, xlr) {
           media.emitter.emit('end', media);
         }
         vjsPlayer.dispose();
+        // Clear up media player
+        media.player = undefined;
       }
     }
   };
-  return videoMediaInstance;
 }
 
 function AudioMedia(media) {
@@ -72926,7 +72940,7 @@ function Media(region, mediaId, xml, options, xlr) {
         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 been stopped."));
+          console.debug("VideoMedia::stop - ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has ended playing . . ."));
           VideoMedia(media, xlr).stop(true);
         }
       }
@@ -72935,7 +72949,8 @@ function Media(region, mediaId, xml, options, xlr) {
   };
   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);
       }
@@ -73256,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
               });