fix save state toggle mute

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

src/App.vue

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

src/components/Sidebar.vue

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

src/components/Table.vue

@@ -178,24 +178,24 @@ table {
 			border-bottom: 1px solid var(--color-border);
 			padding: 15px;
 			height: 50px;
-		}
 
-		th, th a {
+			a {
 				color: var(--color-text-maxcontrast);
 			}
 
-		th.iconColumn {
+			&.iconColumn {
 				padding: 0px;
 				width: 72px;
 			}
 
-		th.nameColumn {
+			&.nameColumn {
 				width: 100%;
 			}
 
-		th.actionColumn {
+			&.actionColumn {
 				width: 72px;
 			}
+		}
 
 	}
 
@@ -222,34 +222,30 @@ table {
 			background-color: var(--color-background-light);
 			transition: opacity 500ms ease 0s;
 
-			tr:hover, tr:focus, tr.mouseOver td {
+			&.selected {
-				background-color: var(--color-background-hover);
-			}
-
-		}
-
-		tr td * {
-			cursor: pointer;
-		}
-
-		tr.selected {
 				background-color: var(--color-primary-light);
 			}
 
-		tr td:first-child {
+			&:hover, &:focus, &.mouseOver td {
+				background-color: var(--color-background-hover);
+			}
+
+			td {
+
+				&:first-child {
 					padding-left: 40px;
 					width: 32px;
 					padding-right: 0px;
 				}
 
-		td.nameColumn {
+				&.nameColumn {
 					white-space: nowrap;
 					overflow: hidden;
 					text-overflow: ellipsis;
 					padding-right: 0px;
 				}
 
-		td.nameColumn .innernametext {
+				&.nameColumn .innernametext {
 					color: var(--color-main-text);
 					position: relative;
 					vertical-align: top;
@@ -257,6 +253,14 @@ table {
 					cursor: pointer;
 				}
 
+			}
+
+		}
+
+		tr td * {
+			cursor: pointer;
+		}
+
 		.icon-starred {
 			background-image: var(--icon-star-dark-fc0);
 			background-size: 16px 16px;

src/services/Player.js

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

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,
+		volume: 0.5,
-		oldVolume: localStorage.getItem('radio.volume') || 0.5,
+		oldVolume: null,
 		title: '',
 	},
 	getters: {
@@ -63,14 +62,18 @@ export default ({
 			player.setVolume(state.volume)
 		},
 		toggleMute(state) {
-			if (state.isMute) {
+			if (parseFloat(state.volume)) {
-				state.volume = state.oldVolume
-				state.isMute = false
-			} else {
 				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')
 		},