diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index 4941801f2..888957192 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/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 ( @@ -64,6 +80,27 @@ class ControlBar extends Component { ); } + renderSubtitlesButton() { + if (this.props.subtitleTracks.length === 0) { + return null; + } + + return ( + + +
+ +
+
+ +
+ +
+
+
+ ); + } + renderVolumeButton() { if (this.props.volume === null) { return null; @@ -115,6 +152,7 @@ class ControlBar extends Component { setVolume={this.setVolume} />
+ {this.renderSubtitlesButton()} {this.renderShareButton()}
@@ -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 }; diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less index 3d3881d2f..e213052a6 100644 --- a/src/routes/Player/ControlBar/styles.less +++ b/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); + } } } \ No newline at end of file diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 7342b9d0e..859d9c929 100644 --- a/src/routes/Player/Player.js +++ b/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)', - language: 'en' + label: 'English' } ]); } @@ -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) => { - this.videoRef.current && this.videoRef.current.dispatch('command', 'addExtraSubtitles', subtitles); + addSubtitleTracks = (subtitleTracks) => { + 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} />