@xibosignage/xibo-layout-renderer 1.0.10 → 1.0.12

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

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

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

@@ -42,5 +42,6 @@ export interface IMedia {
     fileId: string;
     emitter: Emitter<IMediaEvents>;
     enableStat: boolean;
+    muted?: boolean;
 }
 export declare const initialMedia: IMedia;

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

@@ -850,7 +850,9 @@ function composeMediaUrl(params) {
 function composeBgUrlByPlatform(platform, params) {
   var bgImageUrl = params.layoutBackgroundDownloadUrl.replace(":id", params.layout.id) + '?preview=1&width=' + params.layout.sWidth + '&height=' + params.layout.sHeight + '&dynamic&proportional=0';
   if (platform === 'chromeOS') {
-    bgImageUrl = '/required-files/resource/' + params.layout.id + '?saveAs=' + params.layout.bgImage;
+    bgImageUrl = composeMediaUrl({
+      uri: params.layout.bgImage
+    });
   }
   return bgImageUrl;
 }
@@ -69559,7 +69561,8 @@ var initialMedia = {
     return {};
   },
   emitter: {},
-  enableStat: false
+  enableStat: false,
+  muted: false
 };
 
 /*
@@ -72626,15 +72629,15 @@ function composeVideoSource(_x, _x2) {
   return _composeVideoSource.apply(this, arguments);
 }
 function _composeVideoSource() {
-  _composeVideoSource = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2($media, media) {
+  _composeVideoSource = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4($media, media) {
     var videoSrc, vidType, $videoSource;
-    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
         case 0:
-          _context2.next = 2;
+          _context4.next = 2;
           return preloadMediaBlob(media.url, media.mediaType);
         case 2:
-          videoSrc = _context2.sent;
+          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');
@@ -72642,12 +72645,12 @@ function _composeVideoSource() {
             $videoSource.type = vidType;
             $media.insertBefore($videoSource, $media.lastElementChild);
           }
-          return _context2.abrupt("return", $media);
+          return _context4.abrupt("return", $media);
         case 6:
         case "end":
-          return _context2.stop();
+          return _context4.stop();
       }
-    }, _callee2);
+    }, _callee4);
   }));
   return _composeVideoSource.apply(this, arguments);
 }
@@ -72657,87 +72660,130 @@ function VideoMedia(media, xlr) {
       var $videoMedia = document.getElementById(getMediaId(media));
       if ($videoMedia) {
         var vjsPlayer = videojs.getPlayer($videoMedia);
-        vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('loadstart', function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " has started loading data . . ."));
-        });
-        vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('loadstart', function () {
-          if ($videoMedia.readyState >= 2) {
-            console.debug("".concat(capitalizeStr(media.mediaType), " data for media > ").concat(media.id, " has been fully loaded . . ."));
-          }
-        });
-        vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('canplay', function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " can be played . . ."));
-          // Autoplay restarted
-          console.debug('autoplay started . . .');
-          vjsPlayer.muted(true);
-          vjsPlayer.play();
-        });
-        vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('playing', function () {
-          console.debug("".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id, " is now playing . . ."));
-        });
-        vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('error', /*#__PURE__*/function () {
-          var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(err) {
-            var playerSW, hasSW;
-            return _regeneratorRuntime().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  console.debug("Media Error: ".concat(capitalizeStr(media.mediaType), " for media > ").concat(media.id));
-                  if (!(xlr.config.platform === 'chromeOS')) {
-                    _context.next = 9;
-                    break;
-                  }
-                  // Immediately expire media and report a fault
-                  playerSW = PwaSW();
-                  _context.next = 5;
-                  return playerSW.getSW();
-                case 5:
-                  hasSW = _context.sent;
-                  if (hasSW) {
-                    playerSW.postMsg({
-                      type: 'MEDIA_FAULT',
-                      code: 5002,
-                      reason: 'Video file source not supported',
-                      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(7)), 'yyyy-MM-dd HH:mm:ss')
-                    })["finally"](function () {
-                      // Expire the media and dispose the video
-                      vjsPlayer.dispose();
-                      media.emitter.emit('end', media);
-                    });
-                  }
-                  _context.next = 10;
-                  break;
-                case 9:
-                  // 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 10:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          }));
-          return function (_x3) {
-            return _ref.apply(this, arguments);
-          };
-        }());
-        if (media.duration === 0) {
-          vjsPlayer === null || vjsPlayer === void 0 || vjsPlayer.on('durationchange', function () {
-            console.debug('Showing Media ' + media.id + ' for ' + vjsPlayer.duration() + 's of Region ' + media.region.regionId);
+        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 === null || vjsPlayer === void 0 || vjsPlayer.on('ended', function () {
-            var _media$emitter;
-            console.debug("".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('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;
+                        }
+                        _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;
+                  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);
+            });
+          }
         }
       }
     }
@@ -72950,7 +72996,7 @@ function Media(region, mediaId, xml, options, xlr) {
       tmpUrl = composeResourceUrlByPlatform(xlr.config, resourceUrlParams);
     } else if (xlr.config.platform === 'chromeOS') {
       tmpUrl = composeResourceUrl(xlr.config, resourceUrlParams);
-      if (self.mediaType === 'image' || self.mediaType === 'video') {
+      if (self.mediaType === 'image' || self.mediaType === 'video' || self.mediaType === 'audio') {
         tmpUrl = composeMediaUrl(resourceUrlParams);
       }
     }
@@ -73101,7 +73147,7 @@ function Media(region, mediaId, xml, options, xlr) {
                 $media = getNewMedia();
               }
               if (!$media) {
-                _context2.next = 44;
+                _context2.next = 45;
                 break;
               }
               $media.style.setProperty('display', 'block');
@@ -73130,11 +73176,11 @@ 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 = 43;
+              _context2.next = 44;
               break;
             case 22:
               if (!(self.mediaType === 'video' && self.url !== null)) {
-                _context2.next = 31;
+                _context2.next = 32;
                 break;
               }
               _context2.next = 25;
@@ -73145,37 +73191,39 @@ function Media(region, mediaId, xml, options, xlr) {
               if (Boolean(self.options['mute'])) {
                 isMuted = self.options.mute === '1';
               }
+              self.muted = isMuted;
               videojs($media, {
                 controls: false,
                 preload: 'auto',
                 autoplay: false,
                 muted: isMuted,
-                errorDisplay: xlr.config.platform !== 'chromeOS'
+                errorDisplay: xlr.config.platform !== 'chromeOS',
+                restoreEl: $media
               });
-              _context2.next = 43;
+              _context2.next = 44;
               break;
-            case 31:
+            case 32:
               if (!(self.mediaType === 'audio' && self.url !== null)) {
-                _context2.next = 42;
+                _context2.next = 43;
                 break;
               }
               if (!isCMS) {
-                _context2.next = 38;
+                _context2.next = 39;
                 break;
               }
-              _context2.next = 35;
+              _context2.next = 36;
               return preloadMediaBlob(self.url, self.mediaType);
-            case 35:
+            case 36:
               _context2.t5 = _context2.sent;
-              _context2.next = 39;
+              _context2.next = 40;
               break;
-            case 38:
-              _context2.t5 = self.url;
             case 39:
+              _context2.t5 = self.url;
+            case 40:
               $media.src = _context2.t5;
-              _context2.next = 43;
+              _context2.next = 44;
               break;
-            case 42:
+            case 43:
               if ((self.render === 'html' || self.mediaType === 'webpage') && self.iframe && self.checkIframeStatus) {
                 // Set state as false ( for now )
                 self.ready = false;
@@ -73191,9 +73239,9 @@ function Media(region, mediaId, xml, options, xlr) {
                 //     }
                 // });
               }
-            case 43:
-              self.emitter.emit('start', self);
             case 44:
+              self.emitter.emit('start', self);
+            case 45:
             case "end":
               return _context2.stop();
           }