@@ -65,6 +65,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
6565 seekbarPlay ,
6666 seekbarBuffer ,
6767 muteBtn ,
68+ nativeTextTracks ,
6869 volumebar ,
6970 fullscreenBtn ,
7071 timeDisplay ,
@@ -607,6 +608,34 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
607608 }
608609 } ;
609610
611+ // Match up the current dashjs text tracks against native video element tracks by ensuring they have matching properties
612+ var _matchTrackWithNativeTrack = function ( track , nativeTrack ) {
613+ let label = track . id !== undefined ? track . id . toString ( ) : track . lang ;
614+
615+ return ! ! (
616+ ( track . kind === nativeTrack . kind ) &&
617+ ( track . lang === nativeTrack . language ) &&
618+ ( track . isTTML === nativeTrack . isTTML ) &&
619+ ( track . isEmbedded === nativeTrack . isEmbedded ) &&
620+ ( label === nativeTrack . label )
621+ ) ;
622+ }
623+
624+ // Compare track information against native video element tracks to get the current track mode
625+ var _getNativeVideoTrackMode = function ( track ) {
626+ const nativeTracks = video . textTracks ;
627+ let trackMode ;
628+ for ( let i = 0 ; i < nativeTracks . length ; i ++ ) {
629+ const nativeTrack = nativeTracks [ i ] ;
630+ if ( _matchTrackWithNativeTrack ( track , nativeTrack ) ) {
631+ trackMode = nativeTrack . mode ;
632+ break ;
633+ }
634+ } ;
635+
636+ return ( trackMode === undefined ) ? 'showing' : trackMode ;
637+ } ;
638+
610639 var createCaptionSwitchMenu = function ( streamId ) {
611640 // Subtitles/Captions Menu //XXX we need to add two layers for captions & subtitles if present.
612641 var activeStreamInfo = player . getActiveStream ( ) . getStreamInfo ( ) ;
@@ -619,15 +648,24 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
619648 var tracks = textTrackList [ streamId ] || [ ] ;
620649 var contentFunc = function ( element , index ) {
621650 if ( isNaN ( index ) ) {
622- return 'OFF' ;
651+ return {
652+ mode : 'showing' ,
653+ text : 'OFF'
654+ } ;
623655 }
624656
625657 var label = getLabelForLocale ( element . labels ) ;
658+ var trackText ;
626659 if ( label ) {
627- return label + ' : ' + element . type ;
660+ trackText = label + ' : ' + element . type ;
661+ } else {
662+ trackText = element . lang + ' : ' + element . kind ;
628663 }
629664
630- return element . lang + ' : ' + element . kind ;
665+ return {
666+ mode : _getNativeVideoTrackMode ( element ) ,
667+ text : trackText
668+ }
631669 } ;
632670 captionMenu = createMenu ( { menuType : 'caption' , arr : tracks } , contentFunc ) ;
633671
@@ -642,13 +680,22 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
642680
643681 } ;
644682
683+ var _onTracksChanged = function ( ) {
684+ var activeStreamInfo = player . getActiveStream ( ) . getStreamInfo ( ) ;
685+ createCaptionSwitchMenu ( activeStreamInfo . id ) ;
686+ }
687+
645688 var _onTracksAdded = function ( e ) {
646689 // Subtitles/Captions Menu //XXX we need to add two layers for captions & subtitles if present.
647690 if ( ! textTrackList [ e . streamId ] ) {
648691 textTrackList [ e . streamId ] = [ ] ;
649692 }
650693
651694 textTrackList [ e . streamId ] = textTrackList [ e . streamId ] . concat ( e . tracks ) ;
695+
696+ nativeTextTracks = video . textTracks ;
697+ nativeTextTracks . addEventListener ( 'change' , _onTracksChanged ) ;
698+
652699 createCaptionSwitchMenu ( e . streamId ) ;
653700 } ;
654701
@@ -795,8 +842,15 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
795842 item . mediaType = mediaType ;
796843 item . name = name ;
797844 item . selected = false ;
798- item . textContent = arr [ i ] ;
799-
845+ if ( isObject ( arr [ i ] ) ) {
846+ // text tracks need extra properties
847+ item . mode = arr [ i ] . mode ;
848+ item . textContent = arr [ i ] . text ;
849+ } else {
850+ // Other tracks will just have their text
851+ item . textContent = arr [ i ] ;
852+ }
853+
800854 item . onmouseover = function ( /*e*/ ) {
801855 if ( this . selected !== true ) {
802856 this . classList . add ( 'menu-item-over' ) ;
@@ -814,7 +868,13 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
814868 el = menu . querySelector ( '.' + mediaType + '-menu-content' ) ;
815869 }
816870
817- el . appendChild ( item ) ;
871+ if ( mediaType === 'caption' ) {
872+ if ( item . mode !== 'disabled' ) {
873+ el . appendChild ( item ) ;
874+ }
875+ } else {
876+ el . appendChild ( item ) ;
877+ }
818878 }
819879
820880 return menu ;
@@ -964,6 +1024,14 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
9641024 return ! ! navigator . userAgent . match ( / T r i d e n t .* r v [ : ] * 1 1 \. / ) ;
9651025 } ;
9661026
1027+ //************************************************************************************
1028+ //Utilities
1029+ //************************************************************************************
1030+
1031+ var isObject = function ( obj ) {
1032+ return typeof obj === 'object' && ! Array . isArray ( obj ) && obj !== null ;
1033+ }
1034+
9671035 //************************************************************************************
9681036 // PUBLIC API
9691037 //************************************************************************************
@@ -1047,6 +1115,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
10471115 }
10481116 if ( menuHandlersList . caption ) {
10491117 captionBtn . removeEventListener ( 'click' , menuHandlersList . caption ) ;
1118+ nativeTextTracks . removeEventListener ( 'change' , _onTracksChanged ) ;
10501119 }
10511120 if ( captionMenu ) {
10521121 this . removeMenu ( captionMenu , captionBtn ) ;
0 commit comments