feat(controls): Add support for autogenerated captions

src/lib/viewers/controls/media/SubtitlesToggle.tsx

@@ -5,12 +5,14 @@ import { Subtitle } from './MediaSettingsMenuSubtitles';
 import './SubtitlesToggle.scss';
 
 export type Props = {
+    isAutoGeneratedSubtitles?: boolean;
     isShowingSubtitles?: boolean;
     onSubtitlesToggle?: (isShowingSubtitles: boolean) => void;
     subtitles?: Array<Subtitle>;
 };
 
 export default function SubtitlesToggle({
+    isAutoGeneratedSubtitles,
     isShowingSubtitles,
     onSubtitlesToggle = noop,
     subtitles = [],
@@ -19,13 +21,15 @@ export default function SubtitlesToggle({
         return null;
     }
 
+    const title = isAutoGeneratedSubtitles ? __('media_auto_generated_captions') : __('media_subtitles_cc');
+
     return (
         <MediaToggle
             aria-pressed={isShowingSubtitles}
             className="bp-SubtitlesToggle"
             data-testid="bp-media-cc-button"
             onClick={(): void => onSubtitlesToggle(!isShowingSubtitles)}
-            title={__('media_subtitles_cc')}
+            title={title}
         >
             <div className="bp-SubtitlesToggle-text">CC</div>
         </MediaToggle>

src/lib/viewers/controls/media/__tests__/SubtitlesToggle-test.tsx

@@ -40,5 +40,18 @@ describe('SubtitlesToggle', () => {
                 expect(wrapper.prop('aria-pressed')).toBe(isShowingSubtitles);
             },
         );
+
+        test.each`
+            isAutoGeneratedSubtitles | title
+            ${true}                  | ${__('media_auto_generated_captions')}
+            ${false}                 | ${__('media_subtitles_cc')}
+        `(
+            'should set the title accordingly when isAutoGeneratedSubtitles is $isAutoGeneratedSubtitles',
+            ({ isAutoGeneratedSubtitles, title }) => {
+                const wrapper = getWrapper({ isAutoGeneratedSubtitles, title });
+
+                expect(wrapper.prop('title')).toBe(title);
+            },
+        );
     });
 });

src/lib/viewers/media/DashControls.tsx

@@ -25,6 +25,7 @@ export default function DashControls({
     bufferedRange,
     currentTime,
     durationTime,
+    isAutoGeneratedSubtitles,
     isPlaying,
     isPlayingHD,
     onAudioTrackChange,
@@ -62,6 +63,7 @@ export default function DashControls({
 
                 <div className="bp-DashControls-group">
                     <SubtitlesToggle
+                        isAutoGeneratedSubtitles={isAutoGeneratedSubtitles}
                         isShowingSubtitles={subtitle !== SUBTITLES_OFF}
                         onSubtitlesToggle={onSubtitlesToggle}
                         subtitles={subtitles}

src/lib/viewers/media/DashViewer.js

@@ -683,12 +683,18 @@ class DashViewer extends VideoBaseViewer {
             this.autoCaptionDisplayer.setTextVisibility(areAutoCaptionsVisible);
         } else {
             this.setupAutoCaptionDisplayer(textCues);
-            // Update the subtitles/caption button to reflect auto-translation
-            this.mediaControls.setLabel(this.mediaControls.subtitlesButtonEl, __('media_auto_generated_captions'));
-            this.mediaControls.initSubtitles(
-                [__('auto_generated')],
-                getLanguageName(this.options.location.locale.substring(0, 2)),
-            );
+
+            if (this.getViewerOption('useReactControls')) {
+                this.textTracks = [{ id: 0, language: __('auto_generated') }];
+                this.initSubtitles();
+            } else {
+                // Update the subtitles/caption button to reflect auto-translation
+                this.mediaControls.setLabel(this.mediaControls.subtitlesButtonEl, __('media_auto_generated_captions'));
+                this.mediaControls.initSubtitles(
+                    [__('auto_generated')],
+                    getLanguageName(this.options.location.locale.substring(0, 2)),
+                );
+            }
         }
     }
 
@@ -1134,6 +1140,7 @@ class DashViewer extends VideoBaseViewer {
                 bufferedRange={this.mediaEl.buffered}
                 currentTime={this.mediaEl.currentTime}
                 durationTime={this.mediaEl.duration}
+                isAutoGeneratedSubtitles={!!this.autoCaptionDisplayer}
                 isPlaying={!this.mediaEl.paused}
                 isPlayingHD={this.isPlayingHD()}
                 onAudioTrackChange={this.setAudioTrack}

src/lib/viewers/media/__tests__/DashControls-test.tsx

@@ -91,8 +91,9 @@ describe('DashControls', () => {
 
         test('should render SubtitlesToggle if subtitles exist', () => {
             const onSubtitlesToggle = jest.fn();
-            const wrapper = getWrapper({ onSubtitlesToggle, subtitles });
+            const wrapper = getWrapper({ isAutoGeneratedSubtitles: true, onSubtitlesToggle, subtitles });
             expect(wrapper.find(SubtitlesToggle).props()).toMatchObject({
+                isAutoGeneratedSubtitles: true,
                 isShowingSubtitles: true,
                 onSubtitlesToggle,
             });

src/lib/viewers/media/__tests__/DashViewer-test.js

@@ -966,6 +966,26 @@ describe('lib/viewers/media/DashViewer', () => {
             dash.loadAutoGeneratedCaptions(transcript);
             expect(dash.setupAutoCaptionDisplayer).toBeCalledWith(cues);
         });
+
+        describe('With React controls', () => {
+            beforeEach(() => {
+                jest.spyOn(dash, 'getViewerOption').mockImplementation(() => true);
+                jest.spyOn(dash, 'initSubtitles').mockImplementation();
+                jest.spyOn(dash.mediaControls, 'setLabel').mockImplementation();
+                jest.spyOn(dash.mediaControls, 'initSubtitles').mockImplementation();
+            });
+
+            test('should update textTracks and call initSubtitles', () => {
+                dash.autoCaptionDisplayer = null;
+                dash.createTextCues.mockReturnValue(cues);
+                dash.loadAutoGeneratedCaptions(transcript);
+
+                expect(dash.initSubtitles).toBeCalled();
+                expect(dash.textTracks).toEqual([{ id: 0, language: __('auto_generated') }]);
+                expect(dash.mediaControls.setLabel).not.toBeCalled();
+                expect(dash.mediaControls.initSubtitles).not.toBeCalled();
+            });
+        });
     });
 
     describe('createTextCues()', () => {