@@ -27,6 +27,8 @@ var componentName = "wb-mltmd",
2727 templateLoadedEvent = "templateloaded" + selector ,
2828 cuepointEvent = "cuepoint" + selector ,
2929 captionClass = "cc_on" ,
30+ firstPlayClass = "played" ,
31+ defaultCaptions = false ,
3032 multimediaEvents = [
3133 "durationchange" ,
3234 "playing" ,
@@ -581,7 +583,9 @@ var componentName = "wb-mltmd",
581583 } ,
582584 $mltmPlayerElm ,
583585 mltmPlayerElm ,
584- isMuted ;
586+ isMuted ,
587+ settings ,
588+ $ccButton ;
585589
586590 switch ( event . data ) {
587591 case null : // init
@@ -591,12 +595,30 @@ var componentName = "wb-mltmd",
591595
592596 // Put video on mute if the video is muted on init, run once
593597 $mltmPlayerElm = $media . parentsUntil ( selector ) . parent ( ) ;
598+ mltmPlayerElm = $mltmPlayerElm . get ( 0 ) ;
599+
594600
595601 // Mute the player, GUI
596602 if ( $mltmPlayerElm . data ( "putMutedOnInit" ) ) {
597603 youTubeApi . call ( $mltmPlayerElm . get ( 0 ) , "setMuted" , true ) ;
598604 $mltmPlayerElm . data ( "putMutedOnInit" , false ) ;
599605 }
606+
607+ // Check if closed captions should be enabled by default
608+ settings = wb . getData ( mltmPlayerElm , componentName ) ;
609+
610+ if ( settings !== undef ) {
611+ if ( settings . closedCaptions !== null && settings . closedCaptions === true ) {
612+ youTubeApi . call ( mltmPlayerElm , "setCaptionsVisible" , true ) ;
613+
614+ $ccButton = $ ( mltmPlayerElm ) . find ( ".cc" ) ;
615+
616+ $ccButton . attr ( {
617+ "title" : i18nText . cc_off ,
618+ "aria-pressed" : true
619+ } ) ;
620+ }
621+ }
600622 break ;
601623 case - 1 :
602624 event . target . unMute ( ) ;
@@ -706,6 +728,10 @@ $document.on( initializedEvent, selector, function( event ) {
706728 if ( settings !== undef ) {
707729 data . shareUrl = settings . shareUrl ;
708730 data . fullscreen = settings . fullscreenBtn || false ;
731+ data . closedCaptions = settings . closedCaptions || false ;
732+ if ( data . closedCaptions !== undef ) {
733+ defaultCaptions = data . closedCaptions ;
734+ }
709735 }
710736
711737 $this . addClass ( type ) ;
@@ -868,7 +894,9 @@ $document.on( renderUIEvent, selector, function( event, type, data ) {
868894 captionsUrl = wb . getUrlParts ( data . captions ) ,
869895 currentUrl = wb . getUrlParts ( window . location . href ) ,
870896 $media = data . media ,
871- $eventReceiver ;
897+ $eventReceiver ,
898+ $button ,
899+ $buttonSpan ;
872900
873901 $media
874902 . after ( tmpl ( template , data ) )
@@ -926,6 +954,31 @@ $document.on( renderUIEvent, selector, function( event, type, data ) {
926954 if ( data . fullscreen ) {
927955 $this . attr ( "data-fullscreen-btn" , true ) ;
928956 }
957+
958+ // Show captions by default if configured to do so
959+ let captionStatus ;
960+
961+ if ( $this . data ( "wbMltmd" ) !== undef ) {
962+ captionStatus = $this . data ( "wbMltmd" ) . closedCaptions ;
963+ }
964+
965+ if ( captionStatus !== undef && defaultCaptions !== undef && defaultCaptions === true ) {
966+
967+ $this . addClass ( captionClass ) ;
968+
969+ // Trigger caption visibility change event only on the first time the video plays
970+ defaultCaptions = true ;
971+
972+ $button = $this . find ( ".cc" ) ;
973+ $button
974+ . attr ( {
975+ "title" : i18nText . cc_off ,
976+ "aria-pressed" : true
977+ } ) ;
978+
979+ $buttonSpan = $button . find ( ".wb-inv" ) ;
980+ $buttonSpan . text ( i18nText . cc_off ) ;
981+ }
929982 }
930983} ) ;
931984
@@ -1053,7 +1106,8 @@ $document.on( multimediaEvents, selector, function( event, simulated ) {
10531106 $this = $ ( eventTarget ) ,
10541107 invStart = "<span class='wb-inv'>" ,
10551108 invEnd = "</span>" ,
1056- currentTime , $button , $slider , buttonData , isPlay , isMuted , isCCVisible , skipTo , volume ;
1109+ currentTime , $button , $slider , buttonData , isPlay , isMuted , isCCVisible , skipTo , volume ,
1110+ firstPlay = false ;
10571111 switch ( eventType ) {
10581112 case "playing" :
10591113 case "pause" :
@@ -1064,6 +1118,12 @@ $document.on( multimediaEvents, selector, function( event, simulated ) {
10641118 if ( isPlay ) {
10651119 $this . addClass ( "playing" ) ;
10661120 $this . find ( ".progress" ) . addClass ( "active" ) ;
1121+
1122+ if ( firstPlay === false ) {
1123+ $this . addClass ( firstPlayClass ) ;
1124+ firstPlay = true ;
1125+ }
1126+
10671127 } else {
10681128 if ( eventType === "ended" ) {
10691129 this . loading = clearTimeout ( this . loading ) ;
0 commit comments