From 84b81e440ddcac969dbdabe14ab523a10d03a577 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edgardo=20Ram=C3=ADrez?= Date: Tue, 6 Oct 2020 14:53:08 -0500 Subject: [PATCH 1/5] ADD: Save volume settings in localstorage --- webroot/js/components/player.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/webroot/js/components/player.js b/webroot/js/components/player.js index ca33bffb5..309c154db 100644 --- a/webroot/js/components/player.js +++ b/webroot/js/components/player.js @@ -47,6 +47,7 @@ class OwncastPlayer { this.startPlayer = this.startPlayer.bind(this); this.handleReady = this.handleReady.bind(this); this.handlePlaying = this.handlePlaying.bind(this); + this.handleVolume = this.handleVolume.bind(this); this.handleEnded = this.handleEnded.bind(this); this.handleError = this.handleError.bind(this); } @@ -76,6 +77,7 @@ class OwncastPlayer { startPlayer() { this.log('Start playing'); const source = { ...VIDEO_SRC } + this.vjsPlayer.volume(localStorage.getItem('owncastVolume')); this.vjsPlayer.src(source); // this.vjsPlayer.play(); }; @@ -84,6 +86,7 @@ class OwncastPlayer { this.log('on Ready'); this.vjsPlayer.on('error', this.handleError); this.vjsPlayer.on('playing', this.handlePlaying); + this.vjsPlayer.on('volumechange', this.handleVolume); this.vjsPlayer.on('ended', this.handleEnded); if (this.appPlayerReadyCallback) { @@ -92,6 +95,10 @@ class OwncastPlayer { } } + handleVolume(e) { + localStorage.setItem('owncastVolume', this.vjsPlayer.volume()); + } + handlePlaying() { this.log('on Playing'); if (this.appPlayerPlayingCallback) { From 66db7107616ee68dce826daf0915bcfc6501e064 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edgardo=20Ram=C3=ADrez?= Date: Tue, 6 Oct 2020 15:03:15 -0500 Subject: [PATCH 2/5] FIX: Set volume only if it exists in localstorage --- webroot/js/components/player.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/webroot/js/components/player.js b/webroot/js/components/player.js index 4d651d7e2..8e6191131 100644 --- a/webroot/js/components/player.js +++ b/webroot/js/components/player.js @@ -80,7 +80,9 @@ class OwncastPlayer { startPlayer() { this.log('Start playing'); const source = { ...VIDEO_SRC }; - this.vjsPlayer.volume(localStorage.getItem('owncastVolume')); + + if (localStorage.getItem('owncastVolume') !== null) + this.vjsPlayer.volume(localStorage.getItem('owncastVolume')); this.vjsPlayer.src(source); // this.vjsPlayer.play(); } From ac1860d325a1e5832dc95641c058390e04a6b77b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edgardo=20Ram=C3=ADrez?= Date: Tue, 6 Oct 2020 15:46:07 -0500 Subject: [PATCH 3/5] UPDATE: Use helpers functions for saving the volume settings --- webroot/js/components/player.js | 8 +++++--- webroot/js/utils/constants.js | 1 + 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/webroot/js/components/player.js b/webroot/js/components/player.js index 8e6191131..a7255f68e 100644 --- a/webroot/js/components/player.js +++ b/webroot/js/components/player.js @@ -1,6 +1,8 @@ // https://docs.videojs.com/player import videojs from '/js/web_modules/videojs/dist/video.min.js'; +import { getLocalStorage, setLocalStorage } from '../utils/helpers.js'; +import { PLAYER_VOLUME } from '../utils/constants.js'; const VIDEO_ID = 'video'; // TODO: This directory is customizable in the config. So we should expose this via the config API. @@ -81,8 +83,8 @@ class OwncastPlayer { this.log('Start playing'); const source = { ...VIDEO_SRC }; - if (localStorage.getItem('owncastVolume') !== null) - this.vjsPlayer.volume(localStorage.getItem('owncastVolume')); + if (getLocalStorage(PLAYER_VOLUME) !== null) + this.vjsPlayer.volume(getLocalStorage(PLAYER_VOLUME)); this.vjsPlayer.src(source); // this.vjsPlayer.play(); } @@ -101,7 +103,7 @@ class OwncastPlayer { } handleVolume(e) { - localStorage.setItem('owncastVolume', this.vjsPlayer.volume()); + setLocalStorage(PLAYER_VOLUME, this.vjsPlayer.volume()); } handlePlaying() { diff --git a/webroot/js/utils/constants.js b/webroot/js/utils/constants.js index 980bb9ce4..273a41dd6 100644 --- a/webroot/js/utils/constants.js +++ b/webroot/js/utils/constants.js @@ -18,6 +18,7 @@ export const MESSAGE_OFFLINE = 'Stream is offline.'; export const MESSAGE_ONLINE = 'Stream is online.'; export const URL_OWNCAST = 'https://owncast.online'; // used in footer +export const PLAYER_VOLUME = 'owncast_volume'; export const KEY_USERNAME = 'owncast_username'; From f0df543def3af927bb4fb013aa68892a1728f466 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edgardo=20Ram=C3=ADrez?= Date: Tue, 6 Oct 2020 15:51:30 -0500 Subject: [PATCH 4/5] ADD: Handle muted state to update the volume settings --- webroot/js/components/player.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webroot/js/components/player.js b/webroot/js/components/player.js index a7255f68e..aba0bfd6f 100644 --- a/webroot/js/components/player.js +++ b/webroot/js/components/player.js @@ -102,8 +102,8 @@ class OwncastPlayer { } } - handleVolume(e) { - setLocalStorage(PLAYER_VOLUME, this.vjsPlayer.volume()); + handleVolume() { + setLocalStorage(PLAYER_VOLUME, this.vjsPlayer.muted() ? 0 : this.vjsPlayer.volume()); } handlePlaying() { From 38743a96083b4fb8561d66241bfe6d97eeb93568 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edgardo=20Ram=C3=ADrez?= Date: Tue, 6 Oct 2020 19:01:59 -0500 Subject: [PATCH 5/5] UPDATE: Set volume on load --- webroot/js/components/player.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/webroot/js/components/player.js b/webroot/js/components/player.js index aba0bfd6f..22c4d2c77 100644 --- a/webroot/js/components/player.js +++ b/webroot/js/components/player.js @@ -83,8 +83,7 @@ class OwncastPlayer { this.log('Start playing'); const source = { ...VIDEO_SRC }; - if (getLocalStorage(PLAYER_VOLUME) !== null) - this.vjsPlayer.volume(getLocalStorage(PLAYER_VOLUME)); + this.vjsPlayer.volume(getLocalStorage(PLAYER_VOLUME) || 1); this.vjsPlayer.src(source); // this.vjsPlayer.play(); }