remember menu and volume state

appinfo/routes.php

@@ -37,6 +37,8 @@ return [
      // Settings
      ['name' => 'settings#set_menu_state', 'url' => '/settings/menuState', 'verb' => 'POST'],
      ['name' => 'settings#get_menu_state', 'url' => '/settings/menuState', 'verb' => 'GET'],
+     ['name' => 'settings#set_volume_state', 'url' => '/settings/volumeState', 'verb' => 'POST'],
+     ['name' => 'settings#get_volume_state', 'url' => '/settings/volumeState', 'verb' => 'GET'],
      // Api
      ['name' => 'radio_api#preflighted_cors', 'url' => '/api/0.1/{path}',
         'verb' => 'OPTIONS', 'requirements' => ['path' => '.+']]

lib/Controller/SettingsController.php

@@ -99,4 +99,30 @@ class SettingsController extends ApiController {
 		return $this->getSetting('menuState', 'menuState', 'TOP');
 	}
 
+	/**
+	 * set player volume
+	 *
+	 * @param string $playerVolume
+	 * @return JSONResponse
+	 *
+	 * @NoAdminRequired
+	 */
+	public function setVolumeState($volumeState = "0.5"): JSONResponse {
+		return $this->setSetting(
+				'volumeState',
+				$volumeState
+			);
+	}
+
+	/**
+	 * get player volume
+	 *
+	 * @return JSONResponse
+	 *
+	 * @NoAdminRequired
+	 */
+	public function getVolumeState(): JSONResponse {
+		return $this->getSetting('volumeState', 'volumeState', 0.5);
+	}
+
 }

src/components/Main.vue

@@ -73,10 +73,12 @@ export default {
 			}
 		},
 	},
+	created() {
+		this.loadSettings()
+	},
 	mounted() {
 		this.loadStations()
 		this.scroll()
-		this.$store.dispatch('getMenuState')
 	},
 	methods: {
 		async onRoute() {
@@ -204,6 +206,9 @@ export default {
 		    }
 			}
 		},
+		loadSettings() {
+			this.$store.dispatch('getVolumeState')
+		},
 	},
 }
 </script>

src/components/Player.vue

@@ -20,7 +20,8 @@
 			max="1"
 			step=".05"
 			:value="player.volume"
-			@input="changeVolume($event)">
+			@input="changeVolume($event)"
+			@change="saveVolume($event)">
 		<span class="playerMetadata">
 			{{ player.title }}
 		</span>
@@ -38,6 +39,9 @@ export default {
 		changeVolume() {
 			this.$store.dispatch('changeVolume', event.target.value)
 		},
+		saveVolume() {
+			this.$store.dispatch('setVolumeState', event.target.value)
+		},
 		toggleMute() {
 			this.$store.dispatch('toggleMute')
 		},

src/router.js

@@ -1,20 +1,17 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
 
 import Main from './components/Main'
 
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
 	mode: 'history',
 	base: generateUrl('/apps/radio'),
 	linkActiveClass: 'active',
 	routes: [
-		{
-			path: '/',
-			redirect: '/top',
-		},
 		{
 			path: '/top',
 			component: Main,
@@ -42,3 +39,20 @@ export default new Router({
 		},
 	],
 })
+
+router.beforeEach((to, from, next) => {
+	if (to.name) {
+		next()
+	} else {
+		axios
+			.get(generateUrl('/apps/radio/settings/menuState'))
+			.then(async response => {
+				const {
+					data: { menuState: value },
+				} = response
+				next({ name: value })
+			})
+	}
+})
+
+export default router

src/store.js

@@ -13,10 +13,11 @@ export default new Vuex.Store({
 			isBuffering: false,
 			isMute: false,
 			isPaused: false,
-			volume: 0,
+			volume: 0.5,
 			oldVolume: 0,
 			title: 'test',
 		},
+		menu: 'top',
 	},
 	mutations: {
 		isPlaying(state, playerState) {
@@ -55,14 +56,29 @@ export default new Vuex.Store({
 				menuState,
 			})
 		},
-		getMenuState(state, menuState) {
+		getMenuState(state) {
 			axios
 				.get(generateUrl('/apps/radio/settings/menuState'))
 				.then(async response => {
 					const {
 						data: { menuState: value },
 					} = response
-					console.log(value)
+					state.menu = value
+				})
+		},
+		setVolumeState(state, volumeState) {
+			axios.post(generateUrl('/apps/radio/settings/volumeState'), {
+				volumeState,
+			})
+		},
+		getVolumeState(state) {
+			axios
+				.get(generateUrl('/apps/radio/settings/volumeState'))
+				.then(async response => {
+					const {
+						data: { volumeState: value },
+					} = response
+					state.player.volume = value
 				})
 		},
 	},
@@ -91,5 +107,11 @@ export default new Vuex.Store({
 		getMenuState(context) {
 			context.commit('getMenuState')
 		},
+		setVolumeState(context, volumeState) {
+			context.commit('setVolumeState', volumeState)
+		},
+		getVolumeState(context) {
+			context.commit('getVolumeState')
+		},
 	},
 })