fix save state toggle mute

This commit is contained in:
Jonas Heinrich 2021-03-07 11:45:35 +01:00
parent 499e64fee2
commit 8b7876c601
6 changed files with 109 additions and 77 deletions

View File

@ -1,26 +1,37 @@
## 1.0.3 - 2021-03 ## 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 ### Changed
- Update npm modules - 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 ## 1.0.2 - 2021-01
### Fixed ### Fixed
- Set user agent http header for remote API - 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 - 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 ### Changed
- Update npm modules - 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 - 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 - 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 - 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 - 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 ## 1.0.1 - 2020-12
### Added ### Added

View File

@ -35,6 +35,7 @@ export default {
} }
this.$store.dispatch('loadFavorites') this.$store.dispatch('loadFavorites')
this.$store.dispatch('loadRecent') this.$store.dispatch('loadRecent')
this.$store.dispatch('loadVolume')
}, },
} }
</script> </script>

View File

@ -154,30 +154,31 @@ export default {
.configBox { .configBox {
padding: 0 15px; padding: 0 15px;
margin-bottom: 20px; margin-bottom: 20px;
}
.configBox .title { &.title {
font-size: 1.2em; font-size: 1.2em;
display: block; display: block;
margin-bottom: 15px; margin-bottom: 15px;
} }
.configBox .icon { &.icon {
float: left; float: left;
margin: 4px 7px 0px 0px; margin: 4px 7px 0px 0px;
} }
.configBox .content { &.content {
display: flex; display: flex;
margin-left: 25px; margin-left: 25px;
}
.configBox .content input { input {
flex-grow: 1; flex-grow: 1;
} }
button {
margin-top: -3px;
}
}
.configBox .content button {
margin-top: -3px;
} }
</style> </style>

View File

@ -178,23 +178,23 @@ table {
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
padding: 15px; padding: 15px;
height: 50px; height: 50px;
}
th, th a { a {
color: var(--color-text-maxcontrast); color: var(--color-text-maxcontrast);
} }
th.iconColumn { &.iconColumn {
padding: 0px; padding: 0px;
width: 72px; width: 72px;
} }
th.nameColumn { &.nameColumn {
width: 100%; width: 100%;
} }
th.actionColumn { &.actionColumn {
width: 72px; width: 72px;
}
} }
} }
@ -222,41 +222,45 @@ table {
background-color: var(--color-background-light); background-color: var(--color-background-light);
transition: opacity 500ms ease 0s; 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); 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 * { tr td * {
cursor: pointer; 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 { .icon-starred {
background-image: var(--icon-star-dark-fc0); background-image: var(--icon-star-dark-fc0);
background-size: 16px 16px; background-size: 16px 16px;

View File

@ -60,15 +60,21 @@ export class Player {
} }
doPause() { doPause() {
audioPlayer.pause() if (audioPlayer !== null) {
audioPlayer.pause()
}
} }
doResume() { doResume() {
audioPlayer.play() if (audioPlayer !== null) {
audioPlayer.play()
}
} }
setVolume(volume) { setVolume(volume) {
audioPlayer.volume(volume) if (audioPlayer !== null) {
audioPlayer.volume(volume)
}
} }
} }

View File

@ -27,10 +27,9 @@ export default ({
state: { state: {
isPlaying: false, isPlaying: false,
isBuffering: false, isBuffering: false,
isMute: false,
isPausing: false, isPausing: false,
volume: localStorage.getItem('radio.volume') || 0.5, volume: 0.5,
oldVolume: localStorage.getItem('radio.volume') || 0.5, oldVolume: null,
title: '', title: '',
}, },
getters: { getters: {
@ -63,14 +62,18 @@ export default ({
player.setVolume(state.volume) player.setVolume(state.volume)
}, },
toggleMute(state) { toggleMute(state) {
if (state.isMute) { if (parseFloat(state.volume)) {
state.volume = state.oldVolume
state.isMute = false
} else {
state.oldVolume = state.volume state.oldVolume = state.volume
state.volume = 0 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) player.setVolume(state.volume)
}, },
togglePlay(state) { togglePlay(state) {
@ -98,6 +101,12 @@ export default ({
setVolume(context, volume) { setVolume(context, volume) {
context.commit('setVolume', volume) context.commit('setVolume', volume)
}, },
loadVolume(context) {
const volume = localStorage.getItem('radio.volume')
if (typeof volume === 'string') {
context.commit('setVolume', volume)
}
},
toggleMute(context) { toggleMute(context) {
context.commit('toggleMute') context.commit('toggleMute')
}, },