From a0de1f0c5a9ee85c95f45db2ef4afcf78f755a1a Mon Sep 17 00:00:00 2001 From: Ammon Sarver <3289501+a0js@users.noreply.github.com> Date: Fri, 29 Jan 2021 17:21:24 -0700 Subject: [PATCH 1/8] Adds volume control --- src/player/Player.vue | 26 ++++++++++++++++++++++++++ src/player/store.ts | 12 ++++++++++++ src/shared/components/Icon.vue | 2 ++ src/style/main.scss | 8 ++++++++ 4 files changed, 48 insertions(+) diff --git a/src/player/Player.vue b/src/player/Player.vue index 04d1634..dcb8b31 100644 --- a/src/player/Player.vue +++ b/src/player/Player.vue @@ -47,6 +47,16 @@
+
+ + +
+ +
+ Volume + +
+
Repeat @@ -109,6 +131,7 @@ repeatActive: (state: any) => state.repeat, shuffleActive: (state: any) => state.shuffle, visible: (state: any) => state.queue.length > 0, + volume: (state: any) => state.volume, }), ...mapGetters('player', [ 'track', @@ -130,6 +153,9 @@ return this.$store.dispatch('player/seek', value) } }, + setVolume(volume: any) { + return this.$store.dispatch('player/setVolume', parseFloat(volume)) + }, } }) diff --git a/src/player/store.ts b/src/player/store.ts index f862310..ed2a86c 100644 --- a/src/player/store.ts +++ b/src/player/store.ts @@ -5,6 +5,7 @@ import { API } from '@/shared/api' const audio = new Audio() const storedQueue = JSON.parse(localStorage.getItem('queue') || '[]') const storedQueueIndex = parseInt(localStorage.getItem('queueIndex') || '-1') +const storedVolume = parseFloat(localStorage.getItem('player.volume') || '0.8') if (storedQueueIndex > -1 && storedQueueIndex < storedQueue.length) { audio.src = storedQueue[storedQueueIndex].url } @@ -19,6 +20,7 @@ interface State { currentTime: number; // position of current track in seconds repeat: boolean; shuffle: boolean; + volume: number; // integer between 0 and 1 representing the volume of the player } export const playerModule: Module = { @@ -32,6 +34,7 @@ export const playerModule: Module = { currentTime: 0, repeat: localStorage.getItem('player.repeat') !== 'false', shuffle: localStorage.getItem('player.shuffle') === 'true', + volume: storedVolume, }, mutations: { @@ -102,6 +105,10 @@ export const playerModule: Module = { setScrobbled(state) { state.scrobbled = true }, + setVolume(state, value: any) { + state.volume = value + localStorage.setItem('player.volume', String(value)) + } }, actions: { @@ -176,6 +183,10 @@ export const playerModule: Module = { setNextInQueue({ commit }, track) { commit('setNextInQueue', track) }, + setVolume({ commit }, value) { + audio.volume = value + commit('setVolume', value) + }, }, getters: { @@ -207,6 +218,7 @@ export const playerModule: Module = { } export function setupAudio(store: Store, api: API) { + audio.volume = store.state.player.volume audio.ontimeupdate = () => { store.commit('player/setCurrentTime', audio.currentTime) diff --git a/src/shared/components/Icon.vue b/src/shared/components/Icon.vue index cd0277b..69d3f6f 100644 --- a/src/shared/components/Icon.vue +++ b/src/shared/components/Icon.vue @@ -28,6 +28,7 @@ BIconPersonCircle, BIconRss, BIconX, + BIconVolumeUpFill, } from 'bootstrap-vue' export default Vue.extend({ @@ -56,6 +57,7 @@ BIconPersonCircle, BIconRss, BIconX, + BIconVolumeUpFill, }, props: { icon: { type: String, required: true } diff --git a/src/style/main.scss b/src/style/main.scss index 9cec8f1..6711506 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -34,6 +34,9 @@ $dropdown-divider-bg: $theme-elevation-2; $input-bg: $theme-elevation-2; $input-border-color: $theme-elevation-2; $input-color: $theme-text; +$custom-range-track-height: 0.1rem; +$custom-range-thumb-bg: $theme-text; +$custom-range-track-bg: $theme-text-muted; // Other $progress-bg: rgb(35, 35, 35); @@ -63,6 +66,11 @@ h1, h2, h3, h4, h5 { box-shadow: none !important; } +.volume-icon { + font-size: 2.25rem; + padding: 0.375rem; +} + @import './nav'; @import './table'; From bf03d8907b96c23da142a6edaa770edb4cf188bd Mon Sep 17 00:00:00 2001 From: Thomas Amland Date: Sat, 30 Jan 2021 12:50:54 +0100 Subject: [PATCH 2/8] default volume should be 1 --- src/player/store.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/player/store.ts b/src/player/store.ts index ed2a86c..4abd690 100644 --- a/src/player/store.ts +++ b/src/player/store.ts @@ -5,10 +5,11 @@ import { API } from '@/shared/api' const audio = new Audio() const storedQueue = JSON.parse(localStorage.getItem('queue') || '[]') const storedQueueIndex = parseInt(localStorage.getItem('queueIndex') || '-1') -const storedVolume = parseFloat(localStorage.getItem('player.volume') || '0.8') +const storedVolume = parseFloat(localStorage.getItem('player.volume') || '1.0') if (storedQueueIndex > -1 && storedQueueIndex < storedQueue.length) { audio.src = storedQueue[storedQueueIndex].url } +audio.volume = storedVolume const mediaSession: MediaSession | undefined = navigator.mediaSession interface State { @@ -218,7 +219,6 @@ export const playerModule: Module = { } export function setupAudio(store: Store, api: API) { - audio.volume = store.state.player.volume audio.ontimeupdate = () => { store.commit('player/setCurrentTime', audio.currentTime) From c7c89a306ae9ba6e5c3873b5e21f45c89ccbfe81 Mon Sep 17 00:00:00 2001 From: Thomas Amland Date: Sat, 30 Jan 2021 12:55:22 +0100 Subject: [PATCH 3/8] increase volume slider size in dropdown --- src/player/Player.vue | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/player/Player.vue b/src/player/Player.vue index dcb8b31..8766c2f 100644 --- a/src/player/Player.vue +++ b/src/player/Player.vue @@ -72,14 +72,12 @@
- Volume + Volume + class="px-2" style="width: 175px" + type="range" min="0" max="1" step="0.05" + :value="volume" @input="setVolume" + />
From da2a5333fe9a75a3822979a345b7526473b225dc Mon Sep 17 00:00:00 2001 From: Thomas Amland Date: Sat, 30 Jan 2021 13:18:04 +0100 Subject: [PATCH 4/8] fix volume icon size --- src/player/Player.vue | 19 ++++++++++--------- src/style/main.scss | 5 ----- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/player/Player.vue b/src/player/Player.vue index 8766c2f..a920620 100644 --- a/src/player/Player.vue +++ b/src/player/Player.vue @@ -48,17 +48,14 @@
- - + + + +
@@ -116,6 +113,10 @@ height: auto; max-height: 100px; } + .b-icon { + display: flex; + align-items: center; + }