feat(controls): Add Subtitles menu for Dash

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

@@ -7,11 +7,13 @@ import MediaSettingsMenuQuality, {
     Props as QualityProps,
 } from './MediaSettingsMenuQuality';
 import MediaSettingsMenuRate, { Props as RateProps } from './MediaSettingsMenuRate';
+import MediaSettingsMenuSubtitles, { Props as SubtitlesProps } from './MediaSettingsMenuSubtitles';
 import Settings, { Menu, Props as SettingsProps } from '../settings';
 
 export type Props = Partial<AudioTracksProps> &
     Partial<QualityProps> &
     Partial<SettingsProps> &
+    Partial<SubtitlesProps> &
     AutoplayProps &
     RateProps & { className?: string };
 
@@ -25,16 +27,23 @@ export default function MediaSettings({
     onAutoplayChange,
     onQualityChange,
     onRateChange,
+    onSubtitleChange,
     quality,
     rate,
+    subtitle,
+    subtitles = [],
     toggle,
 }: Props): JSX.Element {
+    const { displayLanguage: subtitleDisplayLanguage } = subtitles.find(({ id }) => subtitle === id) || {
+        displayLanguage: __('off'),
+    };
     const autoValue = autoplay ? __('media_autoplay_enabled') : __('media_autoplay_disabled');
     const rateValue = rate === '1.0' || !rate ? __('media_speed_normal') : rate;
     const labelledAudioTracks = React.useMemo(() => addLabels(audioTracks), [audioTracks]);
     const hydratedSelectedAudioTrack = labelledAudioTracks.find(({ id }) => audioTrack === id);
     const audioTrackLabel = hydratedSelectedAudioTrack ? hydratedSelectedAudioTrack.label : '';
     const showAudioTrackItems = audioTracks.length > 1;
+    const showSubtitles = subtitles.length > 0;
 
     return (
         <Settings badge={badge} className={className} toggle={toggle}>
@@ -59,6 +68,14 @@ export default function MediaSettings({
                         value={getQualityLabel(quality)}
                     />
                 )}
+                {showSubtitles && (
+                    <Settings.MenuItem
+                        data-testid="bp-media-settings-subtitles"
+                        label={`${__('subtitles')}/CC`}
+                        target={Menu.SUBTITLES}
+                        value={subtitleDisplayLanguage}
+                    />
+                )}
                 {showAudioTrackItems && (
                     <Settings.MenuItem
                         data-testid="bp-media-settings-audiotracks"
@@ -74,6 +91,13 @@ export default function MediaSettings({
             {quality && onQualityChange && (
                 <MediaSettingsMenuQuality onQualityChange={onQualityChange} quality={quality} />
             )}
+            {showSubtitles && onSubtitleChange && (
+                <MediaSettingsMenuSubtitles
+                    onSubtitleChange={onSubtitleChange}
+                    subtitle={subtitle}
+                    subtitles={subtitles}
+                />
+            )}
             {showAudioTrackItems && (
                 <MediaSettingsMenuAudioTracks
                     audioTrack={audioTrack}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import Settings, { Menu } from '../settings';
+
+export const SUBTITLES_OFF = -1;
+
+export type Subtitle = {
+    displayLanguage: string;
+    id: number;
+};
+
+export type Props = {
+    subtitle?: number;
+    subtitles: Array<Subtitle>;
+    onSubtitleChange: (id: number) => void;
+};
+
+export default function MediaSettingsMenuSubtitles({ subtitle, subtitles, onSubtitleChange }: Props): JSX.Element {
+    const { setActiveMenu } = React.useContext(Settings.Context);
+
+    const handleChange = (value: number): void => {
+        setActiveMenu(Menu.MAIN);
+        onSubtitleChange(value);
+    };
+
+    return (
+        <Settings.Menu name={Menu.SUBTITLES}>
+            <Settings.MenuBack label={`${__('subtitles')}/CC`} />
+            <Settings.RadioItem
+                isSelected={subtitle === SUBTITLES_OFF}
+                label={__('off')}
+                onChange={handleChange}
+                value={SUBTITLES_OFF}
+            />
+            {subtitles.map(({ displayLanguage, id }) => (
+                <Settings.RadioItem
+                    key={id}
+                    isSelected={subtitle === id}
+                    label={displayLanguage}
+                    onChange={handleChange}
+                    value={id}
+                />
+            ))}
+        </Settings.Menu>
+    );
+}

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

@@ -0,0 +1,26 @@
+@import './styles';
+
+.bp-SubtitlesToggle {
+    @include bp-MediaButton;
+
+    &[aria-pressed='true'] {
+        .bp-SubtitlesToggle-text {
+            color: $white;
+            background-color: $box-blue;
+        }
+    }
+}
+
+.bp-SubtitlesToggle-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: $white;
+    font-weight: bold;
+    font-size: 12px;
+    letter-spacing: .1em;
+    background-color: rgba($black, .3); // Anything less than .3 looks too transparent on IE/Edge
+    border-radius: 4px;
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import MediaToggle from './MediaToggle';
+import './SubtitlesToggle.scss';
+
+export type Props = {
+    isShowingSubtitles?: boolean;
+    onSubtitlesToggle: (isShowingSubtitles: boolean) => void;
+};
+
+export default function SubtitlesToggle({ isShowingSubtitles, onSubtitlesToggle = noop }: Props): JSX.Element {
+    return (
+        <MediaToggle
+            aria-pressed={isShowingSubtitles}
+            className="bp-SubtitlesToggle"
+            data-testid="bp-media-controls-cc-button"
+            onClick={(): void => onSubtitlesToggle(!isShowingSubtitles)}
+            title={__('media_subtitles_cc')}
+        >
+            <div className="bp-SubtitlesToggle-text">CC</div>
+        </MediaToggle>
+    );
+}

src/lib/viewers/media/DashControls.tsx

@@ -4,14 +4,17 @@ import HDBadge from '../controls/media/HDBadge';
 import MediaFullscreenToggle, { Props as MediaFullscreenToggleProps } from '../controls/media/MediaFullscreenToggle';
 import MediaSettings, { Props as MediaSettingsProps } from '../controls/media/MediaSettings';
 import PlayPauseToggle, { Props as PlayControlsProps } from '../controls/media/PlayPauseToggle';
+import SubtitlesToggle, { Props as SubtitlesToggleProps } from '../controls/media/SubtitlesToggle';
 import TimeControls, { Props as TimeControlsProps } from '../controls/media/TimeControls';
 import VolumeControls, { Props as VolumeControlsProps } from '../controls/media/VolumeControls';
+import { SUBTITLES_OFF } from '../controls/media/MediaSettingsMenuSubtitles';
 import './DashControls.scss';
 
 export type Props = DurationLabelsProps &
     MediaFullscreenToggleProps &
     MediaSettingsProps &
     PlayControlsProps &
+    SubtitlesToggleProps &
     TimeControlsProps &
     VolumeControlsProps & { isPlayingHD?: boolean };
 
@@ -31,12 +34,18 @@ export default function DashControls({
     onPlayPause,
     onQualityChange,
     onRateChange,
+    onSubtitleChange,
+    onSubtitlesToggle,
     onTimeChange,
     onVolumeChange,
     quality,
     rate,
+    subtitle,
+    subtitles = [],
     volume,
 }: Props): JSX.Element {
+    const showSubtitlesToggle = subtitles.length > 0;
+
     return (
         <div className="bp-DashControls" data-testid="media-controls-wrapper">
             <TimeControls
@@ -54,7 +63,12 @@ export default function DashControls({
                 </div>
 
                 <div className="bp-DashControls-group">
-                    {/* CC Toggle */}
+                    {showSubtitlesToggle && (
+                        <SubtitlesToggle
+                            isShowingSubtitles={subtitle !== SUBTITLES_OFF}
+                            onSubtitlesToggle={onSubtitlesToggle}
+                        />
+                    )}
                     <MediaSettings
                         audioTrack={audioTrack}
                         audioTracks={audioTracks}
@@ -65,8 +79,11 @@ export default function DashControls({
                         onAutoplayChange={onAutoplayChange}
                         onQualityChange={onQualityChange}
                         onRateChange={onRateChange}
+                        onSubtitleChange={onSubtitleChange}
                         quality={quality}
                         rate={rate}
+                        subtitle={subtitle}
+                        subtitles={subtitles}
                     />
                     <MediaFullscreenToggle onFullscreenToggle={onFullscreenToggle} />
                 </div>