90 lines
1.7 KiB
TypeScript
90 lines
1.7 KiB
TypeScript
|
import { getterTree, mutationTree, actionTree } from 'typed-vuex'
|
||
|
|
||
|
export const namespaced = true
|
||
|
|
||
|
export const state = () => ({
|
||
|
index: -1,
|
||
|
streams: [] as MediaStream[],
|
||
|
width: 1280,
|
||
|
height: 720,
|
||
|
volume: 0,
|
||
|
playing: false,
|
||
|
})
|
||
|
|
||
|
export const getters = getterTree(state, {
|
||
|
stream: state => state.streams[state.index],
|
||
|
resolution: state => ({ w: state.width, h: state.height }),
|
||
|
aspect: state => {
|
||
|
const { width, height } = state
|
||
|
|
||
|
if ((height == 0 && width == 0) || (height == 0 && width != 0) || (height != 0 && width == 0)) {
|
||
|
return null
|
||
|
}
|
||
|
|
||
|
if (height == width) {
|
||
|
return {
|
||
|
horizontal: 1,
|
||
|
vertical: 1,
|
||
|
}
|
||
|
}
|
||
|
|
||
|
let dividend = width
|
||
|
let divisor = height
|
||
|
let gcd = -1
|
||
|
|
||
|
if (height > width) {
|
||
|
dividend = height
|
||
|
divisor = width
|
||
|
}
|
||
|
|
||
|
while (gcd == -1) {
|
||
|
const remainder = dividend % divisor
|
||
|
if (remainder == 0) {
|
||
|
gcd = divisor
|
||
|
} else {
|
||
|
dividend = divisor
|
||
|
divisor = remainder
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return {
|
||
|
horizontal: width / gcd,
|
||
|
vertical: height / gcd,
|
||
|
}
|
||
|
},
|
||
|
})
|
||
|
|
||
|
export const mutations = mutationTree(state, {
|
||
|
setResolution(state, { width, height }: { width: number; height: number }) {
|
||
|
state.width = width
|
||
|
state.height = height
|
||
|
},
|
||
|
|
||
|
setVolume(state, volume: number) {
|
||
|
state.volume = volume
|
||
|
},
|
||
|
|
||
|
setStream(state, index: number) {
|
||
|
state.index = index
|
||
|
},
|
||
|
|
||
|
addStream(state, stream: MediaStream) {
|
||
|
state.streams = state.streams.concat([stream])
|
||
|
},
|
||
|
|
||
|
delStream(state, index: number) {
|
||
|
state.streams = state.streams.filter((_, i) => i !== index)
|
||
|
},
|
||
|
|
||
|
clearStream(state) {
|
||
|
state.streams = []
|
||
|
},
|
||
|
})
|
||
|
|
||
|
export const actions = actionTree(
|
||
|
{ state, getters, mutations },
|
||
|
{
|
||
|
//
|
||
|
},
|
||
|
)
|