From 8b7876c601861f9b780c1f8ce8ff676553b815e9 Mon Sep 17 00:00:00 2001 From: Jonas Heinrich Date: Sun, 7 Mar 2021 11:45:35 +0100 Subject: [PATCH] fix save state toggle mute --- CHANGELOG.md | 27 +++++++++---- src/App.vue | 1 + src/components/Sidebar.vue | 39 +++++++++--------- src/components/Table.vue | 82 ++++++++++++++++++++------------------ src/services/Player.js | 12 ++++-- src/store/player.js | 25 ++++++++---- 6 files changed, 109 insertions(+), 77 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fe061b..c617e6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,26 +1,37 @@ ## 1.0.3 - 2021-03 + +### Added +- Nextcloud 21 & PHP 8 support + [#251](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/251) @onny + +### Fixed +- Cleanup SCSS + [#255](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/255) @onny +- Save state toggle volume + [#250](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/250) @onny + ### Changed - Update npm modules - [254](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/254) @onny + [#254](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/254) @onny ## 1.0.2 - 2021-01 ### Fixed - Set user agent http header for remote API - [221](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/221) @onny + [#221](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/221) @onny - Update favorite and recent categories without page reload - [242](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/242) @onny + [#242](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/242) @onny ### Changed - Update npm modules - [235](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/235) @onny + [#235](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/235) @onny - Update license year to 2021 - [234](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/234) @onny + [#234](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/234) @onny - Move menuState and volumeState into localStorage - [236](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/236) @onny + [#236](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/236) @onny - Create seperate store modules for player, favorites and recent - [239](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/239) @onny + [#239](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/239) @onny - Put player and api logic into seperate classes - [233](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/233) @onny + [#233](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/233) @onny ## 1.0.1 - 2020-12 ### Added diff --git a/src/App.vue b/src/App.vue index 06b500e..69b6ae8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -35,6 +35,7 @@ export default { } this.$store.dispatch('loadFavorites') this.$store.dispatch('loadRecent') + this.$store.dispatch('loadVolume') }, } diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 44c4854..bca22ac 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -154,30 +154,31 @@ export default { .configBox { padding: 0 15px; margin-bottom: 20px; -} -.configBox .title { - font-size: 1.2em; - display: block; - margin-bottom: 15px; -} + &.title { + font-size: 1.2em; + display: block; + margin-bottom: 15px; + } -.configBox .icon { - float: left; - margin: 4px 7px 0px 0px; -} + &.icon { + float: left; + margin: 4px 7px 0px 0px; + } -.configBox .content { - display: flex; - margin-left: 25px; -} + &.content { + display: flex; + margin-left: 25px; -.configBox .content input { - flex-grow: 1; -} + input { + flex-grow: 1; + } + + button { + margin-top: -3px; + } + } -.configBox .content button { - margin-top: -3px; } diff --git a/src/components/Table.vue b/src/components/Table.vue index 891c385..c885e80 100644 --- a/src/components/Table.vue +++ b/src/components/Table.vue @@ -178,23 +178,23 @@ table { border-bottom: 1px solid var(--color-border); padding: 15px; height: 50px; - } - th, th a { - color: var(--color-text-maxcontrast); - } + a { + color: var(--color-text-maxcontrast); + } - th.iconColumn { - padding: 0px; - width: 72px; - } + &.iconColumn { + padding: 0px; + width: 72px; + } - th.nameColumn { - width: 100%; - } + &.nameColumn { + width: 100%; + } - th.actionColumn { - width: 72px; + &.actionColumn { + width: 72px; + } } } @@ -222,41 +222,45 @@ table { background-color: var(--color-background-light); transition: opacity 500ms ease 0s; - tr:hover, tr:focus, tr.mouseOver td { + &.selected { + background-color: var(--color-primary-light); + } + + &:hover, &:focus, &.mouseOver td { background-color: var(--color-background-hover); } + td { + + &:first-child { + padding-left: 40px; + width: 32px; + padding-right: 0px; + } + + &.nameColumn { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 0px; + } + + &.nameColumn .innernametext { + color: var(--color-main-text); + position: relative; + vertical-align: top; + user-select: none; + cursor: pointer; + } + + } + } tr td * { cursor: pointer; } - tr.selected { - background-color: var(--color-primary-light); - } - - tr td:first-child { - padding-left: 40px; - width: 32px; - padding-right: 0px; - } - - td.nameColumn { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 0px; - } - - td.nameColumn .innernametext { - color: var(--color-main-text); - position: relative; - vertical-align: top; - user-select: none; - cursor: pointer; - } - .icon-starred { background-image: var(--icon-star-dark-fc0); background-size: 16px 16px; diff --git a/src/services/Player.js b/src/services/Player.js index c37c6ac..99c747e 100644 --- a/src/services/Player.js +++ b/src/services/Player.js @@ -60,15 +60,21 @@ export class Player { } doPause() { - audioPlayer.pause() + if (audioPlayer !== null) { + audioPlayer.pause() + } } doResume() { - audioPlayer.play() + if (audioPlayer !== null) { + audioPlayer.play() + } } setVolume(volume) { - audioPlayer.volume(volume) + if (audioPlayer !== null) { + audioPlayer.volume(volume) + } } } diff --git a/src/store/player.js b/src/store/player.js index 418c95f..f2c4f8d 100644 --- a/src/store/player.js +++ b/src/store/player.js @@ -27,10 +27,9 @@ export default ({ state: { isPlaying: false, isBuffering: false, - isMute: false, isPausing: false, - volume: localStorage.getItem('radio.volume') || 0.5, - oldVolume: localStorage.getItem('radio.volume') || 0.5, + volume: 0.5, + oldVolume: null, title: '', }, getters: { @@ -63,14 +62,18 @@ export default ({ player.setVolume(state.volume) }, toggleMute(state) { - if (state.isMute) { - state.volume = state.oldVolume - state.isMute = false - } else { + if (parseFloat(state.volume)) { state.oldVolume = state.volume state.volume = 0 - state.isMute = true + } else { + if (parseFloat(state.oldVolume)) { + state.volume = state.oldVolume + } else { + state.oldVolume = 0 + state.volume = 1 + } } + localStorage.setItem('radio.volume', state.volume) player.setVolume(state.volume) }, togglePlay(state) { @@ -98,6 +101,12 @@ export default ({ setVolume(context, volume) { context.commit('setVolume', volume) }, + loadVolume(context) { + const volume = localStorage.getItem('radio.volume') + if (typeof volume === 'string') { + context.commit('setVolume', volume) + } + }, toggleMute(context) { context.commit('toggleMute') },