nextcloud-app-radio/src/store.js

import Vue from 'vue'
import Vuex from 'vuex'

import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'

Vue.use(Vuex)
const requesttoken = axios.defaults.headers.requesttoken

export default new Vuex.Store({
	state: {
		player: {
			isPlaying: false,
			isBuffering: false,
			isMute: false,
			isPaused: false,
			volume: 0.5,
			oldVolume: 0,
			title: '',
		},
		menu: 'top',
	},
	mutations: {
		isPlaying(state, playerState) {
			state.player.isPlaying = playerState
		},
		isBuffering(state, bufferingState) {
			state.player.isBuffering = bufferingState
		},
		changeVolume(state, volume) {
			state.player.volume = volume
		},
		toggleMute(state) {
			if (state.player.isMute) {
				state.player.volume = state.player.oldVolume
				state.player.isMute = false
			} else {
				state.player.oldVolume = state.player.volume
				state.player.volume = 0
				state.player.isMute = true
			}
		},
		togglePlay(state) {
			if (state.player.isPlaying) {
				state.player.isPlaying = false
				state.player.isPaused = true
			} else {
				state.player.isPlaying = true
				state.player.isPaused = false
			}
		},
		setTitle(state, title) {
			state.player.title = title
		},
		setMenuState(state, menuState) {
			axios.defaults.headers.requesttoken = requesttoken
			axios.post(generateUrl('/apps/radio/settings/menuState'), {
				menuState,
			})
		},
		getMenuState(state) {
			axios.defaults.headers.requesttoken = requesttoken
			axios
				.get(generateUrl('/apps/radio/settings/menuState'))
				.then(async response => {
					const {
						data: { menuState: value },
					} = response
					state.menu = value
				})
		},
		setVolumeState(state, volumeState) {
			axios.defaults.headers.requesttoken = requesttoken
			axios.post(generateUrl('/apps/radio/settings/volumeState'), {
				volumeState,
			})
		},
		getVolumeState(state) {
			axios.defaults.headers.requesttoken = requesttoken
			axios
				.get(generateUrl('/apps/radio/settings/volumeState'))
				.then(async response => {
					const {
						data: { volumeState: value },
					} = response
					state.player.volume = value
				})
		},
	},
	actions: {
		isPlaying(context, playerState) {
			context.commit('isPlaying', playerState)
		},
		isBuffering(context, bufferingState) {
			context.commit('isBuffering', bufferingState)
		},
		changeVolume(context, volume) {
			context.commit('changeVolume', volume)
		},
		toggleMute(context) {
			context.commit('toggleMute')
		},
		togglePlay(context) {
			context.commit('togglePlay')
		},
		setTitle(context, title) {
			context.commit('setTitle', title)
		},
		setMenuState(context, menuState) {
			context.commit('setMenuState', menuState)
		},
		getMenuState(context) {
			context.commit('getMenuState')
		},
		setVolumeState(context, volumeState) {
			context.commit('setVolumeState', volumeState)
		},
		getVolumeState(context) {
			context.commit('getVolumeState')
		},
	},
})