client refactor progress

client/src/store/video.ts

@@ -0,0 +1,89 @@
+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 },
+  {
+    //
+  },
+)