client refactor progress

client/src/store/chat.ts

@@ -0,0 +1,30 @@
+import { getterTree, mutationTree, actionTree } from 'typed-vuex'
+
+export const namespaced = true
+
+interface Message {
+  id: string
+  content: string
+  created: Date
+}
+
+export const state = () => ({
+  messages: [] as Message[],
+})
+
+export const getters = getterTree(state, {
+  //
+})
+
+export const mutations = mutationTree(state, {
+  addMessage(state, message: Message) {
+    state.messages = state.messages.concat([message])
+  },
+})
+
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    //
+  },
+)

client/src/store/index.ts

@@ -0,0 +1,53 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { useAccessor, mutationTree, actionTree } from 'typed-vuex'
+
+import * as video from './video'
+import * as remote from './remote'
+import * as user from './user'
+
+export const state = () => ({
+  connecting: false,
+  connected: false,
+})
+
+// type RootState = ReturnType<typeof state>
+
+export const getters = {
+  // connected: (state: RootState) => state.connected
+}
+
+export const mutations = mutationTree(state, {
+  initialiseStore() {
+    // TODO: init with localstorage to retrieve save settings
+  },
+  setConnnecting(state, connecting: boolean) {
+    state.connecting = connecting
+  },
+  setConnected(state, connected: boolean) {
+    state.connected = connected
+  },
+})
+
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    //
+  },
+)
+
+export const storePattern = {
+  state,
+  mutations,
+  actions,
+  modules: { video, user, remote },
+}
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store(storePattern)
+export const accessor = useAccessor(store, storePattern)
+
+Vue.prototype.$accessor = accessor
+
+export default store

client/src/store/remote.ts

@@ -0,0 +1,37 @@
+import { getterTree, mutationTree, actionTree } from 'typed-vuex'
+import { Member } from '~/client/types'
+
+export const namespaced = true
+
+export const state = () => ({
+  id: '',
+})
+
+export const getters = getterTree(state, {
+  hosting: (state, getters, root) => {
+    return root.user.id === state.id
+  },
+  host: (state, getters, root) => {
+    return root.user.member[state.id] || null
+  },
+})
+
+export const mutations = mutationTree(state, {
+  clearHost(state) {
+    state.id = ''
+  },
+  setHost(state, host: string | Member) {
+    if (typeof host === 'string') {
+      state.id = host
+    } else {
+      state.id = host.id
+    }
+  },
+})
+
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    //
+  },
+)

client/src/store/user.ts

@@ -0,0 +1,52 @@
+import { getterTree, mutationTree, actionTree } from 'typed-vuex'
+import { Member } from '~/client/types'
+
+export const namespaced = true
+
+interface Members {
+  [id: string]: Member
+}
+
+export const state = () => ({
+  id: '',
+  members: {} as Members,
+})
+
+export const getters = getterTree(state, {
+  member: state => state.members[state.id] || null,
+  admin: state => (state.members[state.id] ? state.members[state.id].admin : false),
+})
+
+export const mutations = mutationTree(state, {
+  setMembers(state, members: Member[]) {
+    const data: Members = {}
+    for (const member of members) {
+      data[member.id] = member
+    }
+    state.members = data
+  },
+  setMember(state, id: string) {
+    state.id = id
+  },
+  addMember(state, member: Member) {
+    state.members = {
+      ...state.members,
+      [member.id]: member,
+    }
+  },
+  delMember(state, id: string) {
+    const data = { ...state.members }
+    delete data[id]
+    state.members = data
+  },
+  clearMembers(state) {
+    state.members = {}
+  },
+})
+
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    //
+  },
+)

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 },
+  {
+    //
+  },
+)