@desynova-digital/player 4.2.2 → 4.2.3

package/components/Video.js

@@ -456,7 +456,10 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      var src = this.props.src;
+      var _this$props4 = this.props,
+        src = _this$props4.src,
+        dubbedTracks = _this$props4.dubbedTracks,
+        additionalTracks = _this$props4.additionalTracks;
       var isM3U8 = src.split('.').pop() === 'm3u8';
       this.setState({
         isM3U8: isM3U8
@@ -465,7 +468,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         var _this$manager$getStat = this.manager.getState(),
           HLSConfig = _this$manager$getStat.player.HLSConfig;
         this.hls = new _hls["default"](HLSConfig);
-        this.setupHLS(src);
+        this.setupHLS(src, dubbedTracks, additionalTracks);
       } else {
         this.video.src = src;
       }
@@ -494,12 +497,12 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate(prevProps) {
       var _this3 = this,
         _prevProps$player;
-      var _this$props4 = this.props,
-        parentAnnotations = _this$props4.parentAnnotations,
-        inTime = _this$props4.inTime,
-        outTime = _this$props4.outTime,
-        isRightMenuVisible = _this$props4.isRightMenuVisible,
-        player = _this$props4.player;
+      var _this$props5 = this.props,
+        parentAnnotations = _this$props5.parentAnnotations,
+        inTime = _this$props5.inTime,
+        outTime = _this$props5.outTime,
+        isRightMenuVisible = _this$props5.isRightMenuVisible,
+        player = _this$props5.player;
       var hasNewAnnotations = JSON.stringify(parentAnnotations) !== JSON.stringify(prevProps.parentAnnotations);
       if (hasNewAnnotations) {
         Promise.resolve().then(function () {
@@ -556,9 +559,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
      */
     function checkWatermark() {
       var watermark = this.state.watermark;
-      var _this$props5 = this.props,
-        onPlayerClose = _this$props5.onPlayerClose,
-        userEmail = _this$props5.userEmail;
+      var _this$props6 = this.props,
+        onPlayerClose = _this$props6.onPlayerClose,
+        userEmail = _this$props6.userEmail;
       var watermark_text = document.querySelector('#watermark-text');
       var video_player = null;
       var watermark_dimension = null;
@@ -593,9 +596,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       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 _this$props7 = this.props,
+        actions = _this$props7.actions,
+        activeTrackIndex = _this$props7.activeTrackIndex;
       var self = this;
       var effectiveDubbedTracks = dubbedTracksOverride !== undefined ? dubbedTracksOverride : this.props.dubbedTracks;
       var effectiveAdditionalTracks = additionalTracksOverride !== undefined ? additionalTracksOverride : this.props.additionalTracks;
@@ -608,6 +611,14 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       };
       var hasDubbed = effectiveDubbedTracks && effectiveDubbedTracks.trim() !== '';
       var hasAdditionalTracks = effectiveAdditionalTracks && effectiveAdditionalTracks.trim() !== '';
+      if (this.combinedManifestUrl) {
+        try {
+          URL.revokeObjectURL(this.combinedManifestUrl);
+        } catch (e) {
+          console.warn('Error revoking blob URL in setupHLS:', e);
+        }
+        this.combinedManifestUrl = null;
+      }
       if (hasDubbed || hasAdditionalTracks) {
         this.combineM3U8Manifests(originalSrc, hasDubbed ? effectiveDubbedTracks : null, hasAdditionalTracks ? effectiveAdditionalTracks : null).then(function (_ref2) {
           var combinedManifest = _ref2.combinedManifest,
@@ -692,7 +703,12 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           self.hls.off(_hls["default"].Events.AUDIO_TRACK_SWITCHED, _onTrackSwitched);
         };
         self.hls.on(_hls["default"].Events.AUDIO_TRACK_SWITCHED, _onTrackSwitched);
-        self.hls.audioTrack = defaultIndex;
+        var maxTrackIndex = audioTracksWithFlags.length - 1;
+        var safeTrackIndex = Math.min(defaultIndex, maxTrackIndex);
+        if (safeTrackIndex !== defaultIndex) {
+          console.warn("[Video] Clamping audio track from ".concat(defaultIndex, " to ").concat(safeTrackIndex, " (max: ").concat(maxTrackIndex, ")"));
+        }
+        self.hls.audioTrack = safeTrackIndex;
       });
       this.hls.on(_hls["default"].Events.ERROR, function (event, data) {
         console.log('HLS.Events.ERROR: ', event, data);
@@ -799,16 +815,16 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "getStyle",
     value: function getStyle() {
-      var _this$props7 = this.props,
-        fluid = _this$props7.fluid,
-        noRightComponent = _this$props7.noRightComponent;
+      var _this$props8 = this.props,
+        fluid = _this$props8.fluid,
+        noRightComponent = _this$props8.noRightComponent;
       var _this$manager$getStat2 = this.manager.getState(),
         player = _this$manager$getStat2.player;
       var style = {};
-      var _this$props8 = this.props,
-        aspectRatio = _this$props8.aspectRatio,
-        width = _this$props8.width,
-        height = _this$props8.height;
+      var _this$props9 = this.props,
+        aspectRatio = _this$props9.aspectRatio,
+        width = _this$props9.width,
+        height = _this$props9.height;
       /*
        * The aspect ratio is either used directly
        * or to calculate width and height.
@@ -912,33 +928,39 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(newProps) {
-      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,
-        playerType = _this$props9.playerType;
+      var _this$props10 = this.props,
+        src = _this$props10.src,
+        dubbedTracks = _this$props10.dubbedTracks,
+        additionalTracks = _this$props10.additionalTracks,
+        activeAudio = _this$props10.player.activeAudio,
+        currentSubtitleObj = _this$props10.currentSubtitleObj,
+        markers = _this$props10.markers,
+        playerType = _this$props10.playerType;
       if (markers && markers !== newProps.markers && newProps.markers) {
         this.displaySubtitle(newProps.markers);
       }
       if (newProps.src !== src || newProps.dubbedTracks !== dubbedTracks || newProps.additionalTracks !== additionalTracks) {
         var isM3U8 = this.state.isM3U8;
+        var oldCombinedUrl = this.combinedManifestUrl;
         if (_hls["default"].isSupported() && isM3U8) {
           if (this.hls) {
             this.hls.detachMedia();
             this.hls.destroy();
+            this.hls = null;
           }
         } else if (this.video) {
           this.video.src = '';
         }
-        if (this.combinedManifestUrl) {
-          URL.revokeObjectURL(this.combinedManifestUrl);
-          this.combinedManifestUrl = null;
-        }
         this.dubbedTrackInfo = [];
         this.additionalTrackInfo = [];
+        if (oldCombinedUrl) {
+          try {
+            URL.revokeObjectURL(oldCombinedUrl);
+          } catch (e) {
+            console.warn('Error revoking blob URL:', e);
+          }
+          this.combinedManifestUrl = null;
+        }
         var m3u8 = newProps.src.split('.').pop() === 'm3u8';
         this.setState({
           isM3U8: m3u8
@@ -1089,9 +1111,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "toggleFullscreen",
     value: function toggleFullscreen() {
-      var _this$props10 = this.props,
-        player = _this$props10.player,
-        actions = _this$props10.actions;
+      var _this$props11 = this.props,
+        player = _this$props11.player,
+        actions = _this$props11.actions;
       actions.toggleFullscreen(player);
     }
 
@@ -1102,10 +1124,10 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleLoadStart",
     value: function handleLoadStart() {
-      var _this$props11 = this.props,
-        actions = _this$props11.actions,
-        onLoadStart = _this$props11.onLoadStart,
-        fileType = _this$props11.fileType;
+      var _this$props12 = this.props,
+        actions = _this$props12.actions,
+        onLoadStart = _this$props12.onLoadStart,
+        fileType = _this$props12.fileType;
       if (fileType === 'audio') {
         this.audioVisualizer();
       }
@@ -1122,9 +1144,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleCanPlay",
     value: function handleCanPlay() {
-      var _this$props12 = this.props,
-        actions = _this$props12.actions,
-        onCanPlay = _this$props12.onCanPlay;
+      var _this$props13 = this.props,
+        actions = _this$props13.actions,
+        onCanPlay = _this$props13.onCanPlay;
       actions.handleCanPlay(this.getProperties());
       if (onCanPlay) {
         onCanPlay.apply(void 0, arguments);
@@ -1138,9 +1160,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleCanPlayThrough",
     value: function handleCanPlayThrough() {
-      var _this$props13 = this.props,
-        actions = _this$props13.actions,
-        onCanPlayThrough = _this$props13.onCanPlayThrough;
+      var _this$props14 = this.props,
+        actions = _this$props14.actions,
+        onCanPlayThrough = _this$props14.onCanPlayThrough;
       actions.handleCanPlayThrough(this.getProperties());
       if (onCanPlayThrough) {
         onCanPlayThrough.apply(void 0, arguments);
@@ -1154,9 +1176,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handlePlaying",
     value: function handlePlaying() {
-      var _this$props14 = this.props,
-        actions = _this$props14.actions,
-        onPlaying = _this$props14.onPlaying;
+      var _this$props15 = this.props,
+        actions = _this$props15.actions,
+        onPlaying = _this$props15.onPlaying;
       actions.handlePlaying(this.getProperties());
       if (onPlaying) {
         onPlaying.apply(void 0, arguments);
@@ -1167,9 +1189,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handlePlay",
     value: function handlePlay() {
-      var _this$props15 = this.props,
-        actions = _this$props15.actions,
-        onPlay = _this$props15.onPlay;
+      var _this$props16 = this.props,
+        actions = _this$props16.actions,
+        onPlay = _this$props16.onPlay;
       actions.handlePlay(this.getProperties());
       if (onPlay) {
         onPlay.apply(void 0, arguments);
@@ -1180,9 +1202,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handlePause",
     value: function handlePause() {
-      var _this$props16 = this.props,
-        actions = _this$props16.actions,
-        onPause = _this$props16.onPause;
+      var _this$props17 = this.props,
+        actions = _this$props17.actions,
+        onPause = _this$props17.onPause;
       actions.handlePause(this.getProperties());
       if (onPause) {
         onPause.apply(void 0, arguments);
@@ -1196,9 +1218,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleDurationChange",
     value: function handleDurationChange() {
-      var _this$props17 = this.props,
-        actions = _this$props17.actions,
-        onDurationChange = _this$props17.onDurationChange;
+      var _this$props18 = this.props,
+        actions = _this$props18.actions,
+        onDurationChange = _this$props18.onDurationChange;
       actions.handleDurationChange(this.getProperties());
       if (onDurationChange) {
         onDurationChange.apply(void 0, arguments);
@@ -1212,9 +1234,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleProgress",
     value: function handleProgress() {
-      var _this$props18 = this.props,
-        actions = _this$props18.actions,
-        onProgress = _this$props18.onProgress;
+      var _this$props19 = this.props,
+        actions = _this$props19.actions,
+        onProgress = _this$props19.onProgress;
       if (this.video) {
         actions.handleProgressChange(this.getProperties());
       }
@@ -1235,11 +1257,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "displaySubtitle",
     value: function displaySubtitle(marker) {
-      var _this$props19 = this.props,
-        markers = _this$props19.markers,
-        resetSubtitleData = _this$props19.resetSubtitleData,
-        subtitleReadOnly = _this$props19.subtitleReadOnly,
-        subtitleDataList = _this$props19.subtitleDataList;
+      var _this$props20 = this.props,
+        markers = _this$props20.markers,
+        resetSubtitleData = _this$props20.resetSubtitleData,
+        subtitleReadOnly = _this$props20.subtitleReadOnly,
+        subtitleDataList = _this$props20.subtitleDataList;
       var currentSubtitleObj = this.state.currentSubtitleObj;
       if (resetSubtitleData) {
         resetSubtitleData();
@@ -1281,11 +1303,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleEnded",
     value: function handleEnded() {
-      var _this$props20 = this.props,
-        loop = _this$props20.loop,
-        player = _this$props20.player,
-        actions = _this$props20.actions,
-        onEnded = _this$props20.onEnded;
+      var _this$props21 = this.props,
+        loop = _this$props21.loop,
+        player = _this$props21.player,
+        actions = _this$props21.actions,
+        onEnded = _this$props21.onEnded;
       if (loop) {
         this.seek(0);
         this.play();
@@ -1302,9 +1324,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleWaiting",
     value: function handleWaiting() {
-      var _this$props21 = this.props,
-        actions = _this$props21.actions,
-        onWaiting = _this$props21.onWaiting;
+      var _this$props22 = this.props,
+        actions = _this$props22.actions,
+        onWaiting = _this$props22.onWaiting;
       actions.handleWaiting(this.getProperties());
       if (onWaiting) {
         onWaiting.apply(void 0, arguments);
@@ -1318,9 +1340,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSeeking",
     value: function handleSeeking() {
-      var _this$props22 = this.props,
-        actions = _this$props22.actions,
-        onSeeking = _this$props22.onSeeking;
+      var _this$props23 = this.props,
+        actions = _this$props23.actions,
+        onSeeking = _this$props23.onSeeking;
       actions.handleSeeking(this.getProperties());
       if (onSeeking) {
         onSeeking.apply(void 0, arguments);
@@ -1334,9 +1356,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSeeked",
     value: function handleSeeked() {
-      var _this$props23 = this.props,
-        actions = _this$props23.actions,
-        onSeeked = _this$props23.onSeeked;
+      var _this$props24 = this.props,
+        actions = _this$props24.actions,
+        onSeeked = _this$props24.onSeeked;
       actions.handleSeeked(this.getProperties());
       if (onSeeked) {
         onSeeked.apply(void 0, arguments);
@@ -1355,9 +1377,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSuspend",
     value: function handleSuspend() {
-      var _this$props24 = this.props,
-        actions = _this$props24.actions,
-        onSuspend = _this$props24.onSuspend;
+      var _this$props25 = this.props,
+        actions = _this$props25.actions,
+        onSuspend = _this$props25.onSuspend;
       actions.handleSuspend(this.getProperties());
       if (onSuspend) {
         onSuspend.apply(void 0, arguments);
@@ -1368,9 +1390,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleAbort",
     value: function handleAbort() {
-      var _this$props25 = this.props,
-        actions = _this$props25.actions,
-        onAbort = _this$props25.onAbort;
+      var _this$props26 = this.props,
+        actions = _this$props26.actions,
+        onAbort = _this$props26.onAbort;
       actions.handleAbort(this.getProperties());
       if (onAbort) {
         onAbort.apply(void 0, arguments);
@@ -1381,9 +1403,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleEmptied",
     value: function handleEmptied() {
-      var _this$props26 = this.props,
-        actions = _this$props26.actions,
-        onEmptied = _this$props26.onEmptied;
+      var _this$props27 = this.props,
+        actions = _this$props27.actions,
+        onEmptied = _this$props27.onEmptied;
       actions.handleEmptied(this.getProperties());
       if (onEmptied) {
         onEmptied.apply(void 0, arguments);
@@ -1397,9 +1419,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleStalled",
     value: function handleStalled() {
-      var _this$props27 = this.props,
-        actions = _this$props27.actions,
-        onStalled = _this$props27.onStalled;
+      var _this$props28 = this.props,
+        actions = _this$props28.actions,
+        onStalled = _this$props28.onStalled;
       actions.handleStalled(this.getProperties());
       if (onStalled) {
         onStalled.apply(void 0, arguments);
@@ -1413,10 +1435,10 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleLoadedMetaData",
     value: function handleLoadedMetaData() {
-      var _this$props28 = this.props,
-        actions = _this$props28.actions,
-        onLoadedMetadata = _this$props28.onLoadedMetadata,
-        startTime = _this$props28.startTime;
+      var _this$props29 = this.props,
+        actions = _this$props29.actions,
+        onLoadedMetadata = _this$props29.onLoadedMetadata,
+        startTime = _this$props29.startTime;
       if (startTime && startTime > 0) {
         this.video.currentTime = startTime;
       }
@@ -1433,9 +1455,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleLoadedData",
     value: function handleLoadedData() {
-      var _this$props29 = this.props,
-        actions = _this$props29.actions,
-        onLoadedData = _this$props29.onLoadedData;
+      var _this$props30 = this.props,
+        actions = _this$props30.actions,
+        onLoadedData = _this$props30.onLoadedData;
       actions.handleLoadedData(this.getProperties());
       if (onLoadedData) {
         onLoadedData.apply(void 0, arguments);
@@ -1449,11 +1471,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleTimeUpdate",
     value: function handleTimeUpdate() {
-      var _this$props30 = this.props,
-        previewActive = _this$props30.player.previewActive,
-        actions = _this$props30.actions,
-        onTimeUpdate = _this$props30.onTimeUpdate,
-        rightMarker = _this$props30.playerSelectedMarker.rightMarker;
+      var _this$props31 = this.props,
+        previewActive = _this$props31.player.previewActive,
+        actions = _this$props31.actions,
+        onTimeUpdate = _this$props31.onTimeUpdate,
+        rightMarker = _this$props31.playerSelectedMarker.rightMarker;
 
       //for annotation time updataton for svg
       var _this$getTimeData3 = this.getTimeData(this.video.currentTime),
@@ -1481,9 +1503,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleRateChange",
     value: function handleRateChange() {
-      var _this$props31 = this.props,
-        actions = _this$props31.actions,
-        onRateChange = _this$props31.onRateChange;
+      var _this$props32 = this.props,
+        actions = _this$props32.actions,
+        onRateChange = _this$props32.onRateChange;
       actions.handleRateChange(this.getProperties());
       if (onRateChange) {
         onRateChange.apply(void 0, arguments);
@@ -1494,9 +1516,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleVolumeChange",
     value: function handleVolumeChange() {
-      var _this$props32 = this.props,
-        actions = _this$props32.actions,
-        onVolumeChange = _this$props32.onVolumeChange;
+      var _this$props33 = this.props,
+        actions = _this$props33.actions,
+        onVolumeChange = _this$props33.onVolumeChange;
       actions.handleVolumeChange(this.getProperties());
       if (onVolumeChange) {
         onVolumeChange.apply(void 0, arguments);
@@ -1510,9 +1532,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleError",
     value: function handleError() {
-      var _this$props33 = this.props,
-        actions = _this$props33.actions,
-        onError = _this$props33.onError;
+      var _this$props34 = this.props,
+        actions = _this$props34.actions,
+        onError = _this$props34.onError;
       actions.handleError(this.getProperties());
       if (onError) {
         onError.apply(void 0, arguments);
@@ -1541,10 +1563,10 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "calculateHeightBasedOnResolution",
     value: function calculateHeightBasedOnResolution() {
-      var _this$props34 = this.props,
-        player = _this$props34.player,
-        isRightMenuVisible = _this$props34.isRightMenuVisible,
-        heightRatio = _this$props34.heightRatio;
+      var _this$props35 = this.props,
+        player = _this$props35.player,
+        isRightMenuVisible = _this$props35.isRightMenuVisible,
+        heightRatio = _this$props35.heightRatio;
       var ratio = typeof heightRatio === 'number' ? heightRatio : 1;
       if (!(player !== null && player !== void 0 && player.isFullscreen) || !isRightMenuVisible) {
         if (this.state.calculatedHeight !== null) {
@@ -1674,9 +1696,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSubtitleContainerClick",
     value: function handleSubtitleContainerClick() {
-      var _this$props35 = this.props,
-        actions = _this$props35.actions,
-        player = _this$props35.player;
+      var _this$props36 = this.props,
+        actions = _this$props36.actions,
+        player = _this$props36.player;
       if (player.paused) {
         actions.play();
       } else {
@@ -1686,11 +1708,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSubtitleClick",
     value: function handleSubtitleClick(e) {
-      var _this$props36 = this.props,
-        actions = _this$props36.actions,
-        player = _this$props36.player,
-        onScreenSubtitleClick = _this$props36.onScreenSubtitleClick,
-        controlType = _this$props36.controlType;
+      var _this$props37 = this.props,
+        actions = _this$props37.actions,
+        player = _this$props37.player,
+        onScreenSubtitleClick = _this$props37.onScreenSubtitleClick,
+        controlType = _this$props37.controlType;
       var currentSubtitleObj = this.state.currentSubtitleObj;
       if (controlType === 'advanced') {
         if (onScreenSubtitleClick) {
@@ -1715,22 +1737,22 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         _this$props$parentAnn2,
         _this$props$parentAnn3,
         _this$props$parentAnn4;
-      var _this$props37 = this.props,
-        loop = _this$props37.loop,
-        poster = _this$props37.poster,
-        preload = _this$props37.preload,
-        autoPlay = _this$props37.autoPlay,
-        playsInline = _this$props37.playsInline,
-        muted = _this$props37.muted,
-        crossOrigin = _this$props37.crossOrigin,
-        videoId = _this$props37.videoId,
-        fileType = _this$props37.fileType,
-        userEmail = _this$props37.userEmail,
-        theme = _this$props37.theme,
-        player = _this$props37.player,
-        playerType = _this$props37.playerType,
-        markers = _this$props37.markers,
-        isRightMenuVisible = _this$props37.isRightMenuVisible;
+      var _this$props38 = this.props,
+        loop = _this$props38.loop,
+        poster = _this$props38.poster,
+        preload = _this$props38.preload,
+        autoPlay = _this$props38.autoPlay,
+        playsInline = _this$props38.playsInline,
+        muted = _this$props38.muted,
+        crossOrigin = _this$props38.crossOrigin,
+        videoId = _this$props38.videoId,
+        fileType = _this$props38.fileType,
+        userEmail = _this$props38.userEmail,
+        theme = _this$props38.theme,
+        player = _this$props38.player,
+        playerType = _this$props38.playerType,
+        markers = _this$props38.markers,
+        isRightMenuVisible = _this$props38.isRightMenuVisible;
       var _this$state2 = this.state,
         isBuffering = _this$state2.isBuffering,
         watermark = _this$state2.watermark,

package/components/control-bar/AudioTracksMenuButton.js

@@ -109,9 +109,67 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
   }, {
     key: "ensureValidAudioTrack",
     value: function ensureValidAudioTrack() {
-      var player = this.props.player;
+      var _this$props = this.props,
+        player = _this$props.player,
+        additionalTrackQuality = _this$props.additionalTrackQuality;
       var allTracks = player.audioTracksArr || [];
-      if (allTracks.length === 0) return;
+      var activeAudio = player.activeAudio;
+      if (allTracks.length === 0 || !activeAudio) {
+        var dubbedTracks = allTracks.filter(function (track) {
+          return track.isDubbedTrack === true;
+        });
+        if (dubbedTracks.length) {
+          this.setState({
+            openAccordion: 'dubbed'
+          });
+        } else {
+          this.setState({
+            openAccordion: 'original'
+          });
+        }
+        return;
+      }
+      var hasDubbed = allTracks.some(function (track) {
+        return track.isDubbedTrack === true;
+      });
+      var hasOriginal = allTracks.some(function (track) {
+        return !track.isDubbedTrack && !track.isAdditionalTrack;
+      });
+      var hasAdditional = allTracks.some(function (track) {
+        return track.isAdditionalTrack === true;
+      });
+      var categoriesPresent = [hasDubbed, hasOriginal, hasAdditional].filter(Boolean).length;
+      if (categoriesPresent === 1) {
+        if (hasDubbed) {
+          this.setState({
+            openAccordion: 'dubbed'
+          });
+        } else if (hasAdditional) {
+          this.setState({
+            openAccordion: additionalTrackQuality || 'additional'
+          });
+        } else if (hasOriginal) {
+          this.setState({
+            openAccordion: 'original'
+          });
+        }
+        return;
+      }
+      var isDubbed = activeAudio.isDubbedTrack === true;
+      var isAdditional = activeAudio.isAdditionalTrack === true;
+      if (isDubbed) {
+        this.setState({
+          openAccordion: 'dubbed'
+        });
+      } else if (isAdditional) {
+        this.setState({
+          openAccordion: additionalTrackQuality || 'additional'
+        });
+      } else {
+        this.setState({
+          openAccordion: 'original'
+        });
+      }
     }
   }, {
     key: "changeTrack",
@@ -124,12 +182,12 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _player$activeAudio,
         _this2 = this;
-      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 _this$props2 = this.props,
+        player = _this$props2.player,
+        actions = _this$props2.actions,
+        theme = _this$props2.theme,
+        activeVersion = _this$props2.activeVersion,
+        additionalTrackQuality = _this$props2.additionalTrackQuality;
       var openAccordion = this.state.openAccordion;
       var allTracks = player.audioTracksArr || [];
       var originalTracks = allTracks.filter(function (track) {
@@ -159,19 +217,19 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
         position: "left"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "menu-container"
-      }, (hasDubbedTracks || hasAdditionalTracks) && /*#__PURE__*/_react["default"].createElement(NowPlayingContainer, null, /*#__PURE__*/_react["default"].createElement(NowPlayingLabel, null, "Now playing"), /*#__PURE__*/_react["default"].createElement(NowPlayingTrackName, {
+      }, (hasDubbedTracks || hasAdditionalTracks || hasOriginalTracks) && /*#__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, {
+      }, currentTrackName)), hasAdditionalTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
         theme: theme,
-        onClick: this.toggleDubbedAccordion
-      }, /*#__PURE__*/_react["default"].createElement(HeaderTitle, null, "Dubbed tracks"), /*#__PURE__*/_react["default"].createElement(HeaderIcon, {
-        isOpen: openAccordion === 'dubbed'
+        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 === 'dubbed'
-      }, dubbedTracks.map(function (track, index) {
+        isOpen: openAccordion === additionalTrackQuality
+      }, additionalTrack.map(function (track, index) {
         return /*#__PURE__*/_react["default"].createElement(AudioTrackBlock, {
           theme: theme,
           onClick: function onClick() {
@@ -189,18 +247,18 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
           } : {
             color: '#333333'
           }
-        }, track.name || "Dubbed Track ".concat(index + 1)));
-      }))), hasAdditionalTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
+        }, track.name || "Track ".concat(index + 1)));
+      }))), hasDubbedTracks && /*#__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
+        onClick: this.toggleDubbedAccordion
+      }, /*#__PURE__*/_react["default"].createElement(HeaderTitle, null, "Dubbed tracks"), /*#__PURE__*/_react["default"].createElement(HeaderIcon, {
+        isOpen: openAccordion === 'dubbed'
       }, /*#__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) {
+        isOpen: openAccordion === 'dubbed'
+      }, dubbedTracks.map(function (track, index) {
         return /*#__PURE__*/_react["default"].createElement(AudioTrackBlock, {
           theme: theme,
           onClick: function onClick() {
@@ -218,7 +276,7 @@ var AudioTracksMenuButton = /*#__PURE__*/function (_Component) {
           } : {
             color: '#333333'
           }
-        }, track.name || "Track ".concat(index + 1)));
+        }, track.name || "Dubbed Track ".concat(index + 1)));
       }))), hasOriginalTracks && /*#__PURE__*/_react["default"].createElement(AccordionContainer, null, (hasDubbedTracks || hasAdditionalTracks) && /*#__PURE__*/_react["default"].createElement(AccordionHeader, {
         theme: theme,
         onClick: this.toggleOriginalAccordion

package/package.json

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