comunication bridge for subtitles implemented

src/routes/Player/ControlBar/ControlBar.js

@@ -12,7 +12,8 @@ class ControlBar extends Component {
         super(props);
 
         this.state = {
-            sharePopupOpen: false
+            sharePopupOpen: false,
+            subtitlesPopupOpen: false
         };
     }
 
@@ -22,7 +23,10 @@ class ControlBar extends Component {
             nextProps.time !== this.props.time ||
             nextProps.duration !== this.props.duration ||
             nextProps.volume !== this.props.volume ||
-            nextState.sharePopupOpen !== this.state.sharePopupOpen;
+            nextProps.subtitleTracks !== this.props.subtitleTracks ||
+            nextProps.selectedSubtitleTrack !== this.props.selectedSubtitleTrack ||
+            nextState.sharePopupOpen !== this.state.sharePopupOpen ||
+            nextState.subtitlesPopupOpen !== this.state.subtitlesPopupOpen;
     }
 
     setTime = (time) => {
@@ -33,6 +37,10 @@ class ControlBar extends Component {
         this.props.setVolume(volume);
     }
 
+    setSelectedSubtitleTrack = (selectedSubtitleTrack) => {
+        this.props.setSelectedSubtitleTrack(selectedSubtitleTrack);
+    }
+
     toogleVolumeMute = () => {
         this.props.volume === 0 ? this.props.unmute() : this.props.mute();
     }
@@ -49,6 +57,14 @@ class ControlBar extends Component {
         this.setState({ sharePopupOpen: false });
     }
 
+    onSubtitlesPopupOpen = () => {
+        this.setState({ subtitlesPopupOpen: true });
+    }
+
+    onSubtitlesPopupClose = () => {
+        this.setState({ subtitlesPopupOpen: false });
+    }
+
     renderShareButton() {
         return (
             <Popup className={styles['popup-container']} border={true} onOpen={this.onSharePopupOpen} onClose={this.onSharePopupClose}>
@@ -64,6 +80,27 @@ class ControlBar extends Component {
         );
     }
 
+    renderSubtitlesButton() {
+        if (this.props.subtitleTracks.length === 0) {
+            return null;
+        }
+
+        return (
+            <Popup className={styles['popup-container']} border={true} onOpen={this.onSubtitlesPopupOpen} onClose={this.onSubtitlesPopupClose}>
+                <Popup.Label>
+                    <div className={classnames(styles['control-bar-button'], { [styles['active']]: this.state.subtitlesPopupOpen })}>
+                        <Icon className={styles['icon']} icon={'ic_sub'} />
+                    </div>
+                </Popup.Label>
+                <Popup.Menu>
+                    <div className={classnames(styles['popup-content'], styles['subtitles-popup-content'])}>
+
+                    </div>
+                </Popup.Menu>
+            </Popup >
+        );
+    }
+
     renderVolumeButton() {
         if (this.props.volume === null) {
             return null;
@@ -115,6 +152,7 @@ class ControlBar extends Component {
                         setVolume={this.setVolume}
                     />
                     <div className={styles['flex-spacing']} />
+                    {this.renderSubtitlesButton()}
                     {this.renderShareButton()}
                 </div>
             </div>
@@ -128,15 +166,16 @@ ControlBar.propTypes = {
     time: PropTypes.number,
     duration: PropTypes.number,
     volume: PropTypes.number,
-    subtitles: PropTypes.arrayOf(PropTypes.shape({
+    subtitleTracks: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.string.isRequired,
         label: PropTypes.string.isRequired,
-        language: PropTypes.string.isRequired
+    })).isRequired,
-    })),
+    selectedSubtitleTrack: PropTypes.string,
     play: PropTypes.func.isRequired,
     pause: PropTypes.func.isRequired,
     setTime: PropTypes.func.isRequired,
     setVolume: PropTypes.func.isRequired,
+    setSelectedSubtitleTrack: PropTypes.func.isRequired,
     mute: PropTypes.func.isRequired,
     unmute: PropTypes.func.isRequired
 };

src/routes/Player/ControlBar/styles.less

@@ -84,5 +84,10 @@
             width: calc(var(--control-bar-button-height) * 5);
             height: calc(var(--control-bar-button-height) * 3);
         }
+
+        &.subtitles-popup-content {
+            width: calc(var(--control-bar-button-height) * 7);
+            height: calc(var(--control-bar-button-height) * 5);
+        }
     }
 }

src/routes/Player/Player.js

@@ -15,7 +15,8 @@ class Player extends Component {
             time: null,
             duration: null,
             volume: null,
-            subtitles: null
+            subtitleTracks: [],
+            selectedSubtitleTrack: null
         };
     }
 
@@ -24,16 +25,15 @@ class Player extends Component {
             nextState.time !== this.state.time ||
             nextState.duration !== this.state.duration ||
             nextState.volume !== this.state.volume ||
-            nextState.subtitles !== this.state.subtitles;
+            nextState.subtitleTracks !== this.state.subtitleTracks ||
+            nextState.selectedSubtitleTrack !== this.state.selectedSubtitleTrack;
     }
 
     componentDidMount() {
-        this.addExtraSubtitles([
+        this.addSubtitleTracks([
             {
-                id: 'id1',
                 url: 'https://raw.githubusercontent.com/amzn/web-app-starter-kit-for-fire-tv/master/out/mrss/assets/sample_video-en.vtt',
-                label: 'English (Github)',
+                label: 'English'
-                language: 'en'
             }
         ]);
     }
@@ -43,10 +43,6 @@ class Player extends Component {
     }
 
     onError = (error) => {
-        if (error.critical) {
-            this.stop();
-        }
-
         alert(error.message);
     }
 
@@ -74,6 +70,10 @@ class Player extends Component {
         this.videoRef.current && this.videoRef.current.dispatch('setProp', 'volume', volume);
     }
 
+    setSelectedSubtitleTrack = (selectedSubtitleTrack) => {
+        this.videoRef.current && this.videoRef.current.dispatch('setProp', 'selectedSubtitleTrack', selectedSubtitleTrack);
+    }
+
     mute = () => {
         this.videoRef.current && this.videoRef.current.dispatch('command', 'mute');
     }
@@ -82,8 +82,8 @@ class Player extends Component {
         this.videoRef.current && this.videoRef.current.dispatch('command', 'unmute');
     }
 
-    addExtraSubtitles = (subtitles) => {
+    addSubtitleTracks = (subtitleTracks) => {
-        this.videoRef.current && this.videoRef.current.dispatch('command', 'addExtraSubtitles', subtitles);
+        this.videoRef.current && this.videoRef.current.dispatch('command', 'addSubtitleTracks', subtitleTracks);
     }
 
     stop = () => {
@@ -115,11 +115,13 @@ class Player extends Component {
                 time={this.state.time}
                 duration={this.state.duration}
                 volume={this.state.volume}
-                subtitles={this.state.subtitles}
+                subtitleTracks={this.state.subtitleTracks}
+                selectedSubtitleTrack={this.state.selectedSubtitleTrack}
                 play={this.play}
                 pause={this.pause}
                 setTime={this.setTime}
                 setVolume={this.setVolume}
+                setSelectedSubtitleTrack={this.setSelectedSubtitleTrack}
                 mute={this.mute}
                 unmute={this.unmute}
             />