From 7010b6e847f6200d07760c62def6973213801175 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Fri, 7 Dec 2018 16:01:06 +0200 Subject: [PATCH 1/3] control bar horizontal padding fixed --- src/routes/Player/ControlBar/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less index fa0014519..b8e66b372 100644 --- a/src/routes/Player/ControlBar/styles.less +++ b/src/routes/Player/ControlBar/styles.less @@ -4,7 +4,7 @@ .control-bar-container { top: initial !important; - padding: 0 2%; + padding: 0 calc(var(--control-bar-button-height) * 0.4); .time-slider { --time-slider-thumb-size: calc(var(--control-bar-button-height) * 0.4); From 4eb7e1c685c24077b227812ccf95d343f1beae1c Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Mon, 10 Dec 2018 09:55:08 +0200 Subject: [PATCH 2/3] mute/unmute command implemented --- src/routes/Player/ControlBar/ControlBar.js | 10 ++++++++-- src/routes/Player/Player.js | 10 ++++++++++ .../Player/Video/stremio-video/HTMLVideo.js | 15 +++++++++++++-- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index 3b36aa4c7..4941801f2 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -33,6 +33,10 @@ class ControlBar extends Component { this.props.setVolume(volume); } + toogleVolumeMute = () => { + this.props.volume === 0 ? this.props.unmute() : this.props.mute(); + } + onPlayPauseButtonClick = () => { this.props.paused ? this.props.play() : this.props.pause(); } @@ -70,7 +74,7 @@ class ControlBar extends Component { this.props.volume < 100 ? 'ic_volume2' : 'ic_volume3'; return ( -
+
); @@ -132,7 +136,9 @@ ControlBar.propTypes = { play: PropTypes.func.isRequired, pause: PropTypes.func.isRequired, setTime: PropTypes.func.isRequired, - setVolume: PropTypes.func.isRequired + setVolume: PropTypes.func.isRequired, + mute: PropTypes.func.isRequired, + unmute: PropTypes.func.isRequired }; export default ControlBar; diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 64596ce91..bfc336325 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -80,6 +80,14 @@ class Player extends Component { this.videoRef.current && this.videoRef.current.dispatch('setProp', 'volume', volume); } + mute = () => { + this.videoRef.current && this.videoRef.current.dispatch('command', 'mute'); + } + + unmute = () => { + this.videoRef.current && this.videoRef.current.dispatch('command', 'unmute'); + } + addExtraSubtitles = (subtitles) => { this.videoRef.current && this.videoRef.current.dispatch('command', 'addExtraSubtitles', subtitles); } @@ -118,6 +126,8 @@ class Player extends Component { pause={this.pause} setTime={this.setTime} setVolume={this.setVolume} + 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 77b0697e8..e95fa2dfb 100644 --- a/src/routes/Player/Video/stremio-video/HTMLVideo.js +++ b/src/routes/Player/Video/stremio-video/HTMLVideo.js @@ -56,7 +56,7 @@ var HTMLVideo = function(containerElement) { events.emit('propChanged', 'duration', isNaN(videoElement.duration) ? null : videoElement.duration * 1000); }; var onVolumeChanged = function() { - events.emit('propChanged', 'volume', videoElement.volume * 100); + events.emit('propChanged', 'volume', !videoElement.muted ? videoElement.volume * 100 : 0); }; var onSubtitlesChanged = function() { var subtitles = []; @@ -108,7 +108,7 @@ var HTMLVideo = function(containerElement) { videoElement.addEventListener('durationchange', onDurationChanged); return; case 'volume': - events.emit('propValue', 'volume', videoElement.volume * 100); + events.emit('propValue', 'volume', !videoElement.muted ? videoElement.volume * 100 : 0); videoElement.removeEventListener('volumechange', onVolumeChanged); videoElement.addEventListener('volumechange', onVolumeChanged); return; @@ -142,6 +142,7 @@ var HTMLVideo = function(containerElement) { videoElement.currentTime = arguments[2] / 1000; return; case 'volume': + videoElement.muted = false; videoElement.volume = arguments[2] / 100; return; default: @@ -158,6 +159,16 @@ var HTMLVideo = function(containerElement) { videoElement.load(); onReady(); return; + case 'mute': + videoElement.muted = true; + break; + case 'unmute': + if (videoElement.volume === 0) { + videoElement.volume = 0.5; + } + + videoElement.muted = false; + break; case 'addExtraSubtitles': if (ready) { for (var i = 0; i < arguments[2].length; i++) { From 32a7c72ad3828404f82e19cf4034b6b41664e9fd Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Mon, 10 Dec 2018 09:55:33 +0200 Subject: [PATCH 3/3] YouTube video wait for yt/ready event --- .../Video/stremio-video/YouTubeVideo.js | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/src/routes/Player/Video/stremio-video/YouTubeVideo.js b/src/routes/Player/Video/stremio-video/YouTubeVideo.js index 0994eea6e..35e66e775 100644 --- a/src/routes/Player/Video/stremio-video/YouTubeVideo.js +++ b/src/routes/Player/Video/stremio-video/YouTubeVideo.js @@ -89,27 +89,30 @@ var YouTubeVideo = function(containerElement) { break; } }; - var video = new YT.Player(videoElement, { - height: '100%', - width: '100%', - playerVars: { - autoplay: 1, - cc_load_policy: 3, - controls: 0, - disablekb: 1, - enablejsapi: 1, - fs: 0, - iv_load_policy: 3, - loop: 0, - modestbranding: 1, - playsinline: 1, - rel: 0 - }, - events: { - onError: onError.bind(this), - onReady: onReady.bind(this), - onStateChange: onStateChange.bind(this) - } + var video; + YT.ready(() => { + video = new YT.Player(videoElement, { + height: '100%', + width: '100%', + playerVars: { + autoplay: 1, + cc_load_policy: 3, + controls: 0, + disablekb: 1, + enablejsapi: 1, + fs: 0, + iv_load_policy: 3, + loop: 0, + modestbranding: 1, + playsinline: 1, + rel: 0 + }, + events: { + onError: onError.bind(this), + onReady: onReady.bind(this), + onStateChange: onStateChange.bind(this) + } + }); }); this.on = function(eventName, listener) {