From 239b4ce1cf3f05a23c846dcf7ba0b686902e022c Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Mon, 31 Dec 2018 12:33:08 +0200 Subject: [PATCH] subtitleSize prop implemented and binded to the ui --- src/routes/Player/ControlBar/ControlBar.js | 7 ++++ .../SubtitlesPicker/SubtitlesPicker.js | 32 +++++++++++++------ src/routes/Player/Player.js | 12 +++++-- .../Player/Video/stremio-video/HTMLVideo.js | 19 +++++++++-- 4 files changed, 57 insertions(+), 13 deletions(-) diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index 646be59a5..3bf4d4017 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -33,6 +33,7 @@ class ControlBar extends Component { nextProps.volume !== this.props.volume || nextProps.subtitleTracks !== this.props.subtitleTracks || nextProps.selectedSubtitleTrackId !== this.props.selectedSubtitleTrackId || + nextProps.subtitleSize !== this.props.subtitleSize || nextState.sharePopupOpen !== this.state.sharePopupOpen || nextState.subtitlesPopupOpen !== this.state.subtitlesPopupOpen; } @@ -49,6 +50,10 @@ class ControlBar extends Component { this.props.setSelectedSubtitleTrackId(selectedSubtitleTrackId); } + setSubtitleSize = (size) => { + this.props.setSubtitleSize(size); + } + mute = () => { this.props.mute(); } @@ -142,8 +147,10 @@ class ControlBar extends Component { diff --git a/src/routes/Player/ControlBar/SubtitlesPicker/SubtitlesPicker.js b/src/routes/Player/ControlBar/SubtitlesPicker/SubtitlesPicker.js index e4ceb2861..d4cb4346e 100644 --- a/src/routes/Player/ControlBar/SubtitlesPicker/SubtitlesPicker.js +++ b/src/routes/Player/ControlBar/SubtitlesPicker/SubtitlesPicker.js @@ -39,6 +39,10 @@ class SubtitlesPicker extends PureComponent { this.props.setSelectedSubtitleTrackId(event.currentTarget.dataset.trackId); } + setSubtitleSize = (event) => { + this.props.setSubtitleSize(event.currentTarget.dataset.value); + } + renderToggleButton({ selectedTrack }) { return (
@@ -81,6 +85,24 @@ class SubtitlesPicker extends PureComponent { ); } + renderNumberInput({ value, unit, onChange }) { + if (value === null) { + return null; + } + + return ( +
+
+ +
+
{value}{unit}
+
+ +
+
+ ); + } + renderPreferences({ groupedTracks, selectedTrack }) { if (!selectedTrack) { return ( @@ -120,15 +142,7 @@ class SubtitlesPicker extends PureComponent {
-
-
- -
-
17pt
-
- -
-
+ {this.renderNumberInput({ value: this.props.subtitleSize, unit: 'pt', onChange: this.setSubtitleSize })} ); } diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index b230fc86b..9a6521768 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -16,7 +16,8 @@ class Player extends Component { duration: null, volume: null, subtitleTracks: [], - selectedSubtitleTrackId: null + selectedSubtitleTrackId: null, + subtitleSize: null }; } @@ -26,7 +27,8 @@ class Player extends Component { nextState.duration !== this.state.duration || nextState.volume !== this.state.volume || nextState.subtitleTracks !== this.state.subtitleTracks || - nextState.selectedSubtitleTrackId !== this.state.selectedSubtitleTrackId; + nextState.selectedSubtitleTrackId !== this.state.selectedSubtitleTrackId || + nextState.subtitleSize !== this.state.subtitleSize; } componentDidMount() { @@ -74,6 +76,10 @@ class Player extends Component { this.videoRef.current && this.videoRef.current.dispatch('setProp', 'selectedSubtitleTrackId', selectedSubtitleTrackId); } + setSubtitleSize = (size) => { + this.videoRef.current && this.videoRef.current.dispatch('setProp', 'subtitleSize', size); + } + mute = () => { this.videoRef.current && this.videoRef.current.dispatch('command', 'mute'); } @@ -117,11 +123,13 @@ class Player extends Component { volume={this.state.volume} subtitleTracks={this.state.subtitleTracks} selectedSubtitleTrackId={this.state.selectedSubtitleTrackId} + subtitleSize={this.state.subtitleSize} play={this.play} pause={this.pause} setTime={this.setTime} setVolume={this.setVolume} setSelectedSubtitleTrackId={this.setSelectedSubtitleTrackId} + setSubtitleSize={this.setSubtitleSize} mute={this.mute} unmute={this.unmute} /> diff --git a/src/routes/Player/Video/stremio-video/HTMLVideo.js b/src/routes/Player/Video/stremio-video/HTMLVideo.js index 541b33c88..29ee189a3 100644 --- a/src/routes/Player/Video/stremio-video/HTMLVideo.js +++ b/src/routes/Player/Video/stremio-video/HTMLVideo.js @@ -20,7 +20,7 @@ var HTMLVideo = function(container) { container.appendChild(styles); styles.sheet.insertRule('#' + container.id + ' video { width: 100%; height: 100%; position: relative; z-index: 0; }', styles.sheet.cssRules.length); - styles.sheet.insertRule('#' + container.id + ' .subtitles { position: absolute; right: 0; bottom: 120px; left: 0; font-size: 22px; color: white; text-align: center; }', styles.sheet.cssRules.length); + var subtitleStylesIndex = styles.sheet.insertRule('#' + container.id + ' .subtitles { position: absolute; right: 0; bottom: 120px; left: 0; font-size: 22px; color: white; text-align: center; }', styles.sheet.cssRules.length); container.appendChild(video); video.crossOrigin = 'anonymous'; video.controls = false; @@ -65,6 +65,9 @@ var HTMLVideo = function(container) { return selectedSubtitleTrackId; } + function getSubtitleSize() { + return parseInt(styles.sheet.cssRules[subtitleStylesIndex].style.fontSize); + } function onEnded() { events.emit('ended'); } @@ -121,6 +124,9 @@ var HTMLVideo = function(container) { function onSelectedSubtitleTrackIdChanged() { events.emit('propChanged', 'selectedSubtitleTrackId', getSelectedSubtitleTrackId()); } + function onSubtitleSizeChanged() { + events.emit('propChanged', 'subtitleSize', getSubtitleSize()); + } function updateSubtitlesText() { while (subtitles.hasChildNodes()) { subtitles.removeChild(subtitles.lastChild); @@ -189,6 +195,9 @@ var HTMLVideo = function(container) { case 'selectedSubtitleTrackId': events.emit('propValue', 'selectedSubtitleTrackId', getSelectedSubtitleTrackId()); return; + case 'subtitleSize': + events.emit('propValue', 'subtitleSize', getSubtitleSize()); + return; default: throw new Error('observeProp not supported: ' + arguments[1]); } @@ -237,6 +246,12 @@ var HTMLVideo = function(container) { onSelectedSubtitleTrackIdChanged(); } break; + case 'subtitleSize': + if (!isNaN(arguments[2])) { + styles.sheet.cssRules[subtitleStylesIndex].style.fontSize = parseInt(arguments[2]) + 'px'; + onSubtitleSizeChanged(); + } + return; case 'volume': if (!isNaN(arguments[2])) { video.muted = false; @@ -353,7 +368,7 @@ var HTMLVideo = function(container) { HTMLVideo.manifest = { name: 'HTMLVideo', embedded: true, - props: ['paused', 'time', 'duration', 'volume', 'subtitleTracks', 'selectedSubtitleTrackId'] + props: ['paused', 'time', 'duration', 'volume', 'subtitleTracks', 'selectedSubtitleTrackId', 'subtitleSize'] }; module.exports = HTMLVideo;