refactor progress

client/src/store/chat.ts

@@ -1,4 +1,6 @@
 import { getterTree, mutationTree, actionTree } from 'typed-vuex'
+import { EVENT } from '~/client/events'
+import { accessor } from '~/store'
 
 export const namespaced = true
 
@@ -6,10 +8,11 @@ interface Message {
   id: string
   content: string
   created: Date
+  type: 'text' | 'event'
 }
 
 export const state = () => ({
-  messages: [] as Message[],
+  history: [] as Message[],
 })
 
 export const getters = getterTree(state, {
@@ -18,13 +21,30 @@ export const getters = getterTree(state, {
 
 export const mutations = mutationTree(state, {
   addMessage(state, message: Message) {
-    state.messages = state.messages.concat([message])
+    state.history = state.history.concat([message])
+  },
+  clear(state) {
+    state.history = []
   },
 })
 
 export const actions = actionTree(
   { state, getters, mutations },
   {
-    //
+    sendMessage(store, content: string) {
+      if (!accessor.connected || accessor.user.muted) {
+        return
+      }
+
+      $client.sendMessage(EVENT.CHAT.MESSAGE, { content })
+    },
+
+    sendEmoji(store, emoji: string) {
+      if (!accessor.connected || !accessor.user.muted) {
+        return
+      }
+
+      $client.sendMessage(EVENT.CHAT.EMOJI, { emoji })
+    },
   },
 )

client/src/store/client.ts

@@ -0,0 +1,46 @@
+import { getterTree, mutationTree, actionTree } from 'typed-vuex'
+import { accessor } from '~/store'
+
+export const namespaced = true
+
+export const state = () => {
+  let side = false
+  let _side = localStorage.getItem('side')
+  if (_side) {
+    side = _side === '1'
+  }
+
+  let tab = 'chat'
+  let _tab = localStorage.getItem('tab')
+  if (_tab) {
+    tab = _tab
+  }
+
+  return {
+    side,
+    about: false,
+    about_page: '',
+    tab,
+  }
+}
+
+export const getters = getterTree(state, {})
+
+export const mutations = mutationTree(state, {
+  setTab(state, tab: string) {
+    state.tab = tab
+    localStorage.setItem('tab', tab)
+  },
+  setAbout(state, page: string) {
+    state.about_page = page
+  },
+  toggleAbout(state) {
+    state.about = !state.about
+  },
+  toggleSide(state) {
+    state.side = !state.side
+    localStorage.setItem('side', state.side ? '1' : '0')
+  },
+})
+
+export const actions = actionTree({ state, getters, mutations }, {})

client/src/store/index.ts

@@ -3,8 +3,11 @@ import Vuex from 'vuex'
 import { useAccessor, mutationTree, actionTree } from 'typed-vuex'
 
 import * as video from './video'
+import * as chat from './chat'
 import * as remote from './remote'
 import * as user from './user'
+import * as settings from './settings'
+import * as client from './client'
 
 export const state = () => ({
   connecting: false,
@@ -18,14 +21,18 @@ export const getters = {
 }
 
 export const mutations = mutationTree(state, {
-  initialiseStore() {
-    // TODO: init with localstorage to retrieve save settings
+  initialiseStore(state) {
+    console.log('test')
   },
-  setConnnecting(state, connecting: boolean) {
-    state.connecting = connecting
+
+  setConnnecting(state) {
+    state.connected = false
+    state.connecting = true
   },
+
   setConnected(state, connected: boolean) {
     state.connected = connected
+    state.connecting = false
   },
 })
 
@@ -33,6 +40,9 @@ export const actions = actionTree(
   { state, getters, mutations },
   {
     //
+    connect(store, { username, password }: { username: string; password: string }) {
+      $client.connect(password, username)
+    },
   },
 )
 
@@ -40,7 +50,7 @@ export const storePattern = {
   state,
   mutations,
   actions,
-  modules: { video, user, remote },
+  modules: { video, chat, user, remote, settings, client },
 }
 
 Vue.use(Vuex)
@@ -50,4 +60,10 @@ export const accessor = useAccessor(store, storePattern)
 
 Vue.prototype.$accessor = accessor
 
+declare module 'vue/types/vue' {
+  interface Vue {
+    $accessor: typeof accessor
+  }
+}
+
 export default store

client/src/store/remote.ts

@@ -1,5 +1,7 @@
 import { getterTree, mutationTree, actionTree } from 'typed-vuex'
 import { Member } from '~/client/types'
+import { EVENT } from '~/client/events'
+import { accessor } from '~/store'
 
 export const namespaced = true
 
@@ -11,6 +13,9 @@ export const getters = getterTree(state, {
   hosting: (state, getters, root) => {
     return root.user.id === state.id
   },
+  hosted: (state, getters, root) => {
+    return state.id !== ''
+  },
   host: (state, getters, root) => {
     return root.user.member[state.id] || null
   },
@@ -32,6 +37,67 @@ export const mutations = mutationTree(state, {
 export const actions = actionTree(
   { state, getters, mutations },
   {
-    //
+    initialise({ commit }) {
+      //
+    },
+    toggle({ getters }) {
+      if (!accessor.connected) {
+        return
+      }
+
+      if (!getters.hosting) {
+        $client.sendMessage(EVENT.CONTROL.REQUEST)
+      } else {
+        $client.sendMessage(EVENT.CONTROL.RELEASE)
+      }
+    },
+
+    request({ getters }) {
+      if (!accessor.connected || !getters.hosting) {
+        return
+      }
+
+      $client.sendMessage(EVENT.CONTROL.REQUEST)
+    },
+
+    release({ getters }) {
+      if (!accessor.connected || getters.hosting) {
+        return
+      }
+
+      $client.sendMessage(EVENT.CONTROL.RELEASE)
+    },
+
+    adminControl() {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.CONTROL)
+    },
+
+    adminRelease() {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.RELEASE)
+    },
+
+    lock() {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.LOCK)
+    },
+
+    unlock() {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.UNLOCK)
+    },
   },
 )

client/src/store/settings.ts

@@ -0,0 +1,30 @@
+import { getterTree, mutationTree, actionTree } from 'typed-vuex'
+import { accessor } from '~/store'
+
+export const namespaced = true
+
+export const state = () => ({
+  scroll: 10,
+  scroll_invert: true,
+})
+
+export const getters = getterTree(state, {})
+
+export const mutations = mutationTree(state, {
+  setScroll(state, scroll: number) {
+    state.scroll = scroll
+    localStorage.setItem('scroll', `${scroll}`)
+  },
+})
+
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    initialise() {
+      const scroll = localStorage.getItem('scroll')
+      if (scroll) {
+        accessor.settings.setScroll(parseInt(scroll))
+      }
+    },
+  },
+)

client/src/store/user.ts

@@ -1,5 +1,8 @@
 import { getterTree, mutationTree, actionTree } from 'typed-vuex'
 import { Member } from '~/client/types'
+import { EVENT } from '~/client/events'
+
+import { accessor } from '~/store'
 
 export const namespaced = true
 
@@ -15,13 +18,23 @@ export const state = () => ({
 export const getters = getterTree(state, {
   member: state => state.members[state.id] || null,
   admin: state => (state.members[state.id] ? state.members[state.id].admin : false),
+  muted: state => (state.members[state.id] ? state.members[state.id].muted : false),
 })
 
 export const mutations = mutationTree(state, {
+  setMuted(state, { id, muted }: { id: string; muted: boolean }) {
+    state.members[id] = {
+      ...state.members[id],
+      muted,
+    }
+  },
   setMembers(state, members: Member[]) {
     const data: Members = {}
     for (const member of members) {
-      data[member.id] = member
+      data[member.id] = {
+        connected: true,
+        ...member,
+      }
     }
     state.members = data
   },
@@ -31,13 +44,17 @@ export const mutations = mutationTree(state, {
   addMember(state, member: Member) {
     state.members = {
       ...state.members,
-      [member.id]: member,
+      [member.id]: {
+        connected: true,
+        ...member,
+      },
     }
   },
   delMember(state, id: string) {
-    const data = { ...state.members }
-    delete data[id]
-    state.members = data
+    state.members[id] = {
+      ...state.members[id],
+      connected: false,
+    }
   },
   clearMembers(state) {
     state.members = {}
@@ -47,6 +64,68 @@ export const mutations = mutationTree(state, {
 export const actions = actionTree(
   { state, getters, mutations },
   {
-    //
+    ban({ state }, member: string | Member) {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      if (typeof member === 'string') {
+        member = state.members[member]
+      }
+
+      if (!member) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.BAN, { id: member.id })
+    },
+
+    kick({ state }, member: string | Member) {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      if (typeof member === 'string') {
+        member = state.members[member]
+      }
+
+      if (!member) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.KICK, { id: member.id })
+    },
+
+    mute({ state }, member: string | Member) {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      if (typeof member === 'string') {
+        member = state.members[member]
+      }
+
+      if (!member) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.MUTE, { id: member.id })
+    },
+
+    unmute({ state }, member: string | Member) {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      if (typeof member === 'string') {
+        member = state.members[member]
+      }
+
+      if (!member) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.UNMUTE, { id: member.id })
+    },
   },
 )

client/src/store/video.ts

@@ -1,24 +1,78 @@
 import { getterTree, mutationTree, actionTree } from 'typed-vuex'
+import { accessor } from '~/store'
 
 export const namespaced = true
 
-export const state = () => ({
-  index: -1,
-  streams: [] as MediaStream[],
-  width: 1280,
-  height: 720,
-  volume: 0,
-  playing: false,
-})
+export const state = () => {
+  let volume = 100
+  let _volume = localStorage.getItem('volume')
+  if (_volume) {
+    volume = parseInt(_volume)
+  }
+
+  let muted = false
+  let _muted = localStorage.getItem('muted')
+  if (_muted) {
+    muted = _muted === '1'
+  }
+
+  return {
+    index: -1,
+    tracks: [] as MediaStreamTrack[],
+    streams: [] as MediaStream[],
+    width: 1280,
+    height: 720,
+    horizontal: 16,
+    vertical: 9,
+    volume,
+    muted,
+    playing: false,
+    playable: false,
+  }
+}
 
 export const getters = getterTree(state, {
   stream: state => state.streams[state.index],
+  track: state => state.tracks[state.index],
   resolution: state => ({ w: state.width, h: state.height }),
-  aspect: state => {
-    const { width, height } = state
+})
+
+export const mutations = mutationTree(state, {
+  play(state) {
+    if (state.playable) {
+      state.playing = true
+    }
+  },
+
+  pause(state) {
+    if (state.playable) {
+      state.playing = false
+    }
+  },
+
+  togglePlay(state) {
+    if (state.playable) {
+      state.playing = !state.playing
+    }
+  },
+
+  toggleMute(state) {
+    state.muted = !state.muted
+  },
+
+  setPlayable(state, playable: boolean) {
+    if (!playable && state.playing) {
+      state.playing = false
+    }
+    state.playable = playable
+  },
+
+  setResolution(state, { width, height }: { width: number; height: number }) {
+    state.width = width
+    state.height = height
 
     if ((height == 0 && width == 0) || (height == 0 && width != 0) || (height != 0 && width == 0)) {
-      return null
+      return
     }
 
     if (height == width) {
@@ -47,36 +101,32 @@ export const getters = getterTree(state, {
       }
     }
 
-    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
+    state.horizontal = width / gcd
+    state.vertical = height / gcd
   },
 
   setVolume(state, volume: number) {
     state.volume = volume
+    localStorage.setItem('volume', `${volume}`)
   },
 
   setStream(state, index: number) {
     state.index = index
   },
 
-  addStream(state, stream: MediaStream) {
+  addTrack(state, [track, stream]: [MediaStreamTrack, MediaStream]) {
+    state.tracks = state.tracks.concat([track])
     state.streams = state.streams.concat([stream])
   },
 
-  delStream(state, index: number) {
+  delTrack(state, index: number) {
     state.streams = state.streams.filter((_, i) => i !== index)
+    state.tracks = state.tracks.filter((_, i) => i !== index)
   },
 
-  clearStream(state) {
+  clear(state) {
+    state.index = -1
+    state.tracks = []
     state.streams = []
   },
 })
@@ -84,6 +134,11 @@ export const mutations = mutationTree(state, {
 export const actions = actionTree(
   { state, getters, mutations },
   {
-    //
+    initialise({ commit }) {
+      const volume = localStorage.getItem('volume')
+      if (volume) {
+        accessor.video.setVolume(parseInt(volume))
+      }
+    },
   },
 )