@desynova-digital/player 4.2.0 → 4.2.2

package/components/Video.js

@@ -99,7 +99,8 @@ var propTypes = {
   userEmail: _propTypes.PropTypes.string,
   playerSelectedMarker: _propTypes.PropTypes.instanceOf(Object),
   theme: _propTypes.PropTypes.string,
-  dubbedTracks: _propTypes.PropTypes.string
+  dubbedTracks: _propTypes.PropTypes.string,
+  additionalTracks: _propTypes.PropTypes.string
 };
 var defaultProps = {
   startTime: 0,
@@ -111,7 +112,8 @@ var defaultProps = {
   aspectRatio: 'auto',
   crossOrigin: 'anonymous',
   theme: 'dark',
-  dubbedTracks: null
+  dubbedTracks: null,
+  additionalTracks: null
 };
 var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  font-family: SFUIText-Regular;\n  font-size: 16px;\n  bottom: 20px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  color: #ffffff;\n  height: 90%;\n  align-items: center;\n\n  .subtitleContainer {\n    border-radius: 4px;\n    width: fit-content;\n    background: #000000;\n    opacity: 0.9;\n    padding: ", ";\n    line-height: 20px;\n    position: absolute;\n\n    i,\n    em {\n      font-style: italic; /* Override the font style for <em> tags inside elements with the class .someClass */\n    }\n\n    strong {\n      font-weight: bold;\n    }\n  }\n  .longSubtitleStyles {\n    overflow-y: auto;\n    height: fit-content;\n    max-height: 70px;\n    max-width: 75%;\n    width: fit-content;\n  }\n"])), function (props) {
   return props.currentSubtitleObj && props.currentSubtitleObj.line1 ? '8px 10px' : '0px';
@@ -252,7 +254,8 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
     };
     _this.video = null; // the html5 video
     _this.manager = new _Manager["default"](props.store);
-    _this.dubbedTrackNames = null;
+    _this.dubbedTrackInfo = [];
+    _this.additionalTrackInfo = [];
     _this.getStyle = _this.getStyle.bind(_this);
     _this.getChildren = _this.getChildren.bind(_this);
     _this.play = _this.play.bind(_this);
@@ -299,8 +302,8 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   return _createClass(Video, [{
     key: "combineM3U8Manifests",
     value: function () {
-      var _combineM3U8Manifests = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(originalUrl, dubbedUrl) {
-        var fetchManifest, _yield$Promise$all, _yield$Promise$all2, originalContent, dubbedContent, extractAudioTracks, extractVideoStream, originalBase, dubbedBase, videoStreamUri, originalAudioTracks, dubbedAudioTracks, dubbedTrackNames, allTracksMap, allAudioTracks, combinedManifest, _i, _allAudioTracks, track;
+      var _combineM3U8Manifests = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(originalUrl, dubbedUrl, additionalTrackUrl) {
+        var fetchManifest, fetchPromises, hasDubbed, hasAdditional, contents, originalContent, dubbedContent, additionalContent, extractAudioTracks, extractVideoStream, originalBase, dubbedBase, additionalBase, videoStreamUri, originalAudioTracks, dubbedAudioTracks, additionalAudioTracks, allTracksMap, allAudioTracks, combinedManifest, _i, _allAudioTracks, track;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -327,17 +330,28 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
                     }
                   }, _callee);
                 }));
-                return function fetchManifest(_x3) {
+                return function fetchManifest(_x4) {
                   return _ref.apply(this, arguments);
                 };
-              }();
-              _context2.next = 3;
-              return Promise.all([fetchManifest(originalUrl), fetchManifest(dubbedUrl)]);
-            case 3:
-              _yield$Promise$all = _context2.sent;
-              _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
-              originalContent = _yield$Promise$all2[0];
-              dubbedContent = _yield$Promise$all2[1];
+              }(); // Fetch all manifests
+              fetchPromises = [fetchManifest(originalUrl)];
+              hasDubbed = dubbedUrl && dubbedUrl.trim() !== '';
+              hasAdditional = additionalTrackUrl && additionalTrackUrl.trim() !== '';
+              if (hasDubbed) fetchPromises.push(fetchManifest(dubbedUrl));
+              if (hasAdditional) fetchPromises.push(fetchManifest(additionalTrackUrl));
+              _context2.next = 8;
+              return Promise.all(fetchPromises);
+            case 8:
+              contents = _context2.sent;
+              originalContent = contents[0];
+              dubbedContent = undefined;
+              additionalContent = undefined;
+              if (hasDubbed) {
+                dubbedContent = contents[1];
+                if (hasAdditional) additionalContent = contents[2];
+              } else if (hasAdditional) {
+                additionalContent = contents[1];
+              }
               extractAudioTracks = function extractAudioTracks(content, baseUrl) {
                 var lines = content.split(/\r?\n/);
                 var audioTracks = [];
@@ -387,15 +401,28 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
               };
               originalBase = originalUrl;
               dubbedBase = dubbedUrl;
+              additionalBase = additionalTrackUrl;
               videoStreamUri = extractVideoStream(originalContent, originalBase);
               originalAudioTracks = extractAudioTracks(originalContent, originalBase);
-              dubbedAudioTracks = extractAudioTracks(dubbedContent, dubbedBase);
-              dubbedTrackNames = dubbedAudioTracks.map(function (track) {
-                return track.name;
+              dubbedAudioTracks = dubbedUrl ? extractAudioTracks(dubbedContent, dubbedBase) : [];
+              additionalAudioTracks = additionalTrackUrl ? extractAudioTracks(additionalContent, additionalBase) : [];
+              this.dubbedTrackInfo = dubbedAudioTracks.map(function (track) {
+                return {
+                  name: track.name,
+                  uri: track.uri,
+                  language: track.language
+                };
+              });
+              this.additionalTrackInfo = additionalAudioTracks.map(function (track) {
+                return {
+                  name: track.name,
+                  uri: track.uri,
+                  language: track.language
+                };
               });
               allTracksMap = new Map();
-              [].concat(_toConsumableArray(originalAudioTracks), _toConsumableArray(dubbedAudioTracks)).forEach(function (track) {
-                var key = track.name || track.language;
+              [].concat(_toConsumableArray(originalAudioTracks), _toConsumableArray(dubbedAudioTracks), _toConsumableArray(additionalAudioTracks)).forEach(function (track) {
+                var key = "".concat(track.name || track.language, "_").concat(track.uri || '');
                 if (!allTracksMap.has(key)) {
                   allTracksMap.set(key, track);
                 }
@@ -411,15 +438,16 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
               }
               return _context2.abrupt("return", {
                 combinedManifest: combinedManifest,
-                dubbedTrackNames: dubbedTrackNames
+                dubbedTrackInfo: this.dubbedTrackInfo,
+                additionalTrackInfo: this.additionalTrackInfo
               });
-            case 24:
+            case 33:
             case "end":
               return _context2.stop();
           }
-        }, _callee2);
+        }, _callee2, this);
       }));
-      function combineM3U8Manifests(_x, _x2) {
+      function combineM3U8Manifests(_x, _x2, _x3) {
         return _combineM3U8Manifests.apply(this, arguments);
       }
       return combineM3U8Manifests;
@@ -564,11 +592,13 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
     value: function setupHLS(originalSrc) {
       var _this4 = this;
       var dubbedTracksOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var additionalTracksOverride = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       var _this$props6 = this.props,
         actions = _this$props6.actions,
         activeTrackIndex = _this$props6.activeTrackIndex;
       var self = this;
       var effectiveDubbedTracks = dubbedTracksOverride !== undefined ? dubbedTracksOverride : this.props.dubbedTracks;
+      var effectiveAdditionalTracks = additionalTracksOverride !== undefined ? additionalTracksOverride : this.props.additionalTracks;
       var attachAndLoad = function attachAndLoad(sourceUrl) {
         if (!self.hls) return;
         self.hls.attachMedia(self.video);
@@ -576,11 +606,15 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           self.hls.loadSource(sourceUrl);
         });
       };
-      if (effectiveDubbedTracks && effectiveDubbedTracks.length && effectiveDubbedTracks.trim() !== '') {
-        this.combineM3U8Manifests(originalSrc, effectiveDubbedTracks).then(function (_ref2) {
+      var hasDubbed = effectiveDubbedTracks && effectiveDubbedTracks.trim() !== '';
+      var hasAdditionalTracks = effectiveAdditionalTracks && effectiveAdditionalTracks.trim() !== '';
+      if (hasDubbed || hasAdditionalTracks) {
+        this.combineM3U8Manifests(originalSrc, hasDubbed ? effectiveDubbedTracks : null, hasAdditionalTracks ? effectiveAdditionalTracks : null).then(function (_ref2) {
           var combinedManifest = _ref2.combinedManifest,
-            dubbedTrackNames = _ref2.dubbedTrackNames;
-          self.dubbedTrackNames = dubbedTrackNames;
+            dubbedTrackInfo = _ref2.dubbedTrackInfo,
+            additionalTrackInfo = _ref2.additionalTrackInfo;
+          self.dubbedTrackInfo = dubbedTrackInfo || [];
+          self.additionalTrackInfo = additionalTrackInfo || [];
           var blob = new Blob([combinedManifest], {
             type: 'application/vnd.apple.mpegurl'
           });
@@ -589,31 +623,52 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           attachAndLoad(combinedUrl);
         })["catch"](function (err) {
           console.error('Failed to combine manifests, falling back to original', err);
-          self.dubbedTrackNames = [];
+          self.dubbedTrackInfo = [];
+          self.additionalTrackInfo = [];
           attachAndLoad(originalSrc);
         });
       } else {
-        self.dubbedTrackNames = [];
+        self.dubbedTrackInfo = [];
+        self.additionalTrackInfo = [];
         attachAndLoad(originalSrc);
       }
       this.hls.on(_hls["default"].Events.MANIFEST_PARSED, function (event, data) {
-        var audioTracksWithFlag = (data.audioTracks || []).map(function (track) {
-          if (self.dubbedTrackNames && self.dubbedTrackNames.includes(track.name)) {
-            return _objectSpread(_objectSpread({}, track), {}, {
-              isDubbedTrack: true
+        var audioTracksWithFlags = (data.audioTracks || []).map(function (track) {
+          var flaggedTrack = _objectSpread({}, track);
+          // Match by NAME and URI
+          if (self.dubbedTrackInfo && self.dubbedTrackInfo.length > 0 && hasDubbed) {
+            var matched = self.dubbedTrackInfo.some(function (dubbedTrack) {
+              return dubbedTrack.name === track.name && dubbedTrack.uri === track.url;
             });
+            if (matched) {
+              flaggedTrack.isDubbedTrack = true;
+            }
+          }
+          if (self.additionalTrackInfo && self.additionalTrackInfo.length > 0 && hasAdditionalTracks) {
+            var _matched = self.additionalTrackInfo.some(function (additionalTrack) {
+              return additionalTrack.name === track.name && additionalTrack.uri === track.url;
+            });
+            if (_matched) {
+              flaggedTrack.isAdditionalTrack = true;
+            }
           }
-          return track;
+          return flaggedTrack;
         });
-        actions.handleAudioTracks(audioTracksWithFlag);
+        actions.handleAudioTracks(audioTracksWithFlags);
         var defaultIndex;
-        var firstDubbedIndex = audioTracksWithFlag.findIndex(function (t) {
-          return t.isDubbedTrack;
+        var firstAdditionalIndex = audioTracksWithFlags.findIndex(function (t) {
+          return t.isAdditionalTrack;
         });
-        if (firstDubbedIndex !== -1) {
+        var firstDubbedIndex = audioTracksWithFlags.findIndex(function (t) {
+          return t.isDubbedTrack && !t.isAdditionalTrack;
+        } // Don't override HD if already selected
+        );
+        if (firstAdditionalIndex !== -1) {
+          defaultIndex = firstAdditionalIndex;
+        } else if (firstDubbedIndex !== -1) {
           defaultIndex = firstDubbedIndex;
         } else {
-          if (activeTrackIndex !== undefined && activeTrackIndex < audioTracksWithFlag.length) {
+          if (activeTrackIndex !== undefined && activeTrackIndex < audioTracksWithFlags.length) {
             defaultIndex = activeTrackIndex;
           } else {
             var autoselectIndex = data.audioTracks.findIndex(function (t) {
@@ -624,12 +679,12 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         }
         self._desiredAudioTrackIndex = defaultIndex;
         var _onTrackSwitched = function onTrackSwitched(event, switchData) {
-          var _audioTracksWithFlag$;
-          var switchedTrack = audioTracksWithFlag.find(function (t) {
+          var _audioTracksWithFlags;
+          var switchedTrack = audioTracksWithFlags.find(function (t) {
             return t.id === switchData.id;
           });
           if (!switchedTrack) return;
-          if (switchData.id !== ((_audioTracksWithFlag$ = audioTracksWithFlag[defaultIndex]) === null || _audioTracksWithFlag$ === void 0 ? void 0 : _audioTracksWithFlag$.id)) {
+          if (switchData.id !== ((_audioTracksWithFlags = audioTracksWithFlags[defaultIndex]) === null || _audioTracksWithFlags === void 0 ? void 0 : _audioTracksWithFlags.id)) {
             self.hls.audioTrack = defaultIndex;
             return;
           }
@@ -860,6 +915,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       var _this$props9 = this.props,
         src = _this$props9.src,
         dubbedTracks = _this$props9.dubbedTracks,
+        additionalTracks = _this$props9.additionalTracks,
         activeAudio = _this$props9.player.activeAudio,
         currentSubtitleObj = _this$props9.currentSubtitleObj,
         markers = _this$props9.markers,
@@ -867,7 +923,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       if (markers && markers !== newProps.markers && newProps.markers) {
         this.displaySubtitle(newProps.markers);
       }
-      if (newProps.src !== src || newProps.dubbedTracks !== dubbedTracks) {
+      if (newProps.src !== src || newProps.dubbedTracks !== dubbedTracks || newProps.additionalTracks !== additionalTracks) {
         var isM3U8 = this.state.isM3U8;
         if (_hls["default"].isSupported() && isM3U8) {
           if (this.hls) {
@@ -881,6 +937,8 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           URL.revokeObjectURL(this.combinedManifestUrl);
           this.combinedManifestUrl = null;
         }
+        this.dubbedTrackInfo = [];
+        this.additionalTrackInfo = [];
         var m3u8 = newProps.src.split('.').pop() === 'm3u8';
         this.setState({
           isM3U8: m3u8
@@ -889,7 +947,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           var _this$manager$getStat3 = this.manager.getState(),
             HLSConfig = _this$manager$getStat3.player.HLSConfig;
           this.hls = new _hls["default"](HLSConfig);
-          this.setupHLS(newProps.src, newProps.dubbedTracks);
+          this.setupHLS(newProps.src, newProps.dubbedTracks, newProps.additionalTracks);
         } else if (this.video) {
           this.video.src = newProps.src;
         }

package/components/control-bar/AudioTracksMenuButton.js

@@ -32,7 +32,8 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
 var propTypes = {
   actions: _propTypes.PropTypes.instanceOf(Object),
   player: _propTypes.PropTypes.instanceOf(Object),
-  theme: _propTypes.PropTypes.string
+  theme: _propTypes.PropTypes.string,
+  additionalTrackQuality: _propTypes.PropTypes.string
 };
 var AudioTrackBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: left;\n  background: transparent;\n  cursor: pointer;\n  border-bottom: 1px solid #eeeeee;\n  &:last-child {\n    border: none;\n  }\n  &:hover,\n  &:focus {\n    background: ", ";\n  }\n  p {\n    padding: 15px;\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    white-space: nowrap;\n  }\n"])), function (props) {
   return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
@@ -74,8 +75,16 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
         };
       });
     });
+    _defineProperty(_this, "toggleAdditionalAccordion", function () {
+      var additionalTrackQuality = _this.props.additionalTrackQuality;
+      _this.setState(function (prevState) {
+        return {
+          openAccordion: prevState.openAccordion === additionalTrackQuality ? null : additionalTrackQuality
+        };
+      });
+    });
     _this.state = {
-      openAccordion: 'dubbed'
+      openAccordion: 'original'
     };
     return _this;
   }
@@ -100,23 +109,9 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
   }, {
     key: "ensureValidAudioTrack",
     value: function ensureValidAudioTrack() {
-      var _this$props = this.props,
-        player = _this$props.player,
-        actions = _this$props.actions;
+      var player = this.props.player;
       var allTracks = player.audioTracksArr || [];
-      var dubbedTracks = allTracks.filter(function (track) {
-        return track.isDubbedTrack === true;
-      });
       if (allTracks.length === 0) return;
-      if (dubbedTracks.length) {
-        this.setState({
-          openAccordion: 'dubbed'
-        });
-      } else {
-        this.setState({
-          openAccordion: 'original'
-        });
-      }
     }
   }, {
     key: "changeTrack",
@@ -129,22 +124,28 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _player$activeAudio,
         _this2 = this;
-      var _this$props2 = this.props,
-        player = _this$props2.player,
-        actions = _this$props2.actions,
-        theme = _this$props2.theme;
+      var _this$props = this.props,
+        player = _this$props.player,
+        actions = _this$props.actions,
+        theme = _this$props.theme,
+        activeVersion = _this$props.activeVersion,
+        additionalTrackQuality = _this$props.additionalTrackQuality;
       var openAccordion = this.state.openAccordion;
       var allTracks = player.audioTracksArr || [];
       var originalTracks = allTracks.filter(function (track) {
-        return !track.isDubbedTrack;
+        return !track.isDubbedTrack && !track.isAdditionalTrack;
       });
       var dubbedTracks = allTracks.filter(function (track) {
         return track.isDubbedTrack === true;
       });
+      var additionalTrack = allTracks.filter(function (track) {
+        return track.isAdditionalTrack === true;
+      });
       var currentTrackName = ((_player$activeAudio = player.activeAudio) === null || _player$activeAudio === void 0 ? void 0 : _player$activeAudio.name) || 'No track playing';
       var hasOriginalTracks = originalTracks.length > 0;
       var hasDubbedTracks = dubbedTracks.length > 0;
-      if (!hasOriginalTracks && !hasDubbedTracks) {
+      var hasAdditionalTracks = additionalTrack.length > 0;
+      if (!hasOriginalTracks && !hasDubbedTracks && !hasAdditionalTracks) {
         return null;
       }
       return /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
@@ -158,7 +159,7 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
         position: "left"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "menu-container"
-      }, hasDubbedTracks && /*#__PURE__*/_react["default"].createElement(NowPlayingContainer, null, /*#__PURE__*/_react["default"].createElement(NowPlayingLabel, null, "Now playing"), /*#__PURE__*/_react["default"].createElement(NowPlayingTrackName, {
+      }, (hasDubbedTracks || hasAdditionalTracks) && /*#__PURE__*/_react["default"].createElement(NowPlayingContainer, null, /*#__PURE__*/_react["default"].createElement(NowPlayingLabel, null, "Now playing"), /*#__PURE__*/_react["default"].createElement(NowPlayingTrackName, {
         theme: theme
       }, currentTrackName)), hasDubbedTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
         theme: theme,
@@ -189,7 +190,36 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
             color: '#333333'
           }
         }, track.name || "Dubbed Track ".concat(index + 1)));
-      }))), hasOriginalTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, hasDubbedTracks && /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
+      }))), hasAdditionalTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
+        theme: theme,
+        onClick: this.toggleAdditionalAccordion
+      }, /*#__PURE__*/_react["default"].createElement(HeaderTitle, null, activeVersion.category, " ", additionalTrackQuality), /*#__PURE__*/_react["default"].createElement(HeaderIcon, {
+        isOpen: openAccordion === additionalTrackQuality
+      }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        color: "#999999",
+        name: "dropdown_more_icon"
+      }))), /*#__PURE__*/_react["default"].createElement(AccordionContent, {
+        isOpen: openAccordion === additionalTrackQuality
+      }, additionalTrack.map(function (track, index) {
+        return /*#__PURE__*/_react["default"].createElement(AudioTrackBlock, {
+          theme: theme,
+          onClick: function onClick() {
+            return _this2.changeTrack(track);
+          },
+          role: "presentation",
+          key: track.id || index,
+          style: player.activeAudio && player.activeAudio.id === track.id ? {
+            pointerEvents: 'none'
+          } : null
+        }, /*#__PURE__*/_react["default"].createElement("p", {
+          style: player.activeAudio && player.activeAudio.id === track.id ? {
+            color: theme ? "".concat(_tokens.colors[theme].videoPlayer.themeColor) : '#00cec6',
+            pointerEvents: 'none'
+          } : {
+            color: '#333333'
+          }
+        }, track.name || "Track ".concat(index + 1)));
+      }))), hasOriginalTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, (hasDubbedTracks || hasAdditionalTracks) && /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
         theme: theme,
         onClick: this.toggleOriginalAccordion
       }, /*#__PURE__*/_react["default"].createElement(HeaderTitle, null, "Original tracks"), /*#__PURE__*/_react["default"].createElement(HeaderIcon, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {