fixed video not showing after reconnect

client/src/main.ts

@@ -4,6 +4,7 @@ import Vue from 'vue'
 
 import Notifications from 'vue-notification'
 import ToolTip from 'v-tooltip'
+import Logger from './plugins/log'
 import Client from './plugins/neko'
 import Axios from './plugins/axios'
 import Swal from './plugins/swal'
@@ -14,6 +15,7 @@ import app from './app.vue'
 
 Vue.config.productionTip = false
 
+Vue.use(Logger)
 Vue.use(Notifications)
 Vue.use(ToolTip)
 Vue.use(Axios)

client/src/neko/index.ts

@@ -67,10 +67,10 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   protected [EVENT.DISCONNECTED](reason?: Error) {
     this.$accessor.setConnected(false)
 
-    this.$accessor.remote.clear()
+    this.$accessor.remote.reset()
-    this.$accessor.user.clear()
+    this.$accessor.user.reset()
-    this.$accessor.video.clear()
+    this.$accessor.video.reset()
-    this.$accessor.chat.clear()
+    this.$accessor.chat.reset()
 
     this.$vue.$notify({
       group: 'neko',
@@ -185,7 +185,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   }
 
   protected [EVENT.CONTROL.RELEASE]({ id }: ControlPayload) {
-    this.$accessor.remote.clear()
+    this.$accessor.remote.reset()
     const member = this.member(id)
     if (!member) {
       return
@@ -411,7 +411,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   }
 
   protected [EVENT.ADMIN.RELEASE]({ id, target }: AdminTargetPayload) {
-    this.$accessor.remote.clear()
+    this.$accessor.remote.reset()
     if (!target) {
       this.$accessor.chat.newMessage({
         id,

client/src/plugins/log.ts

@@ -0,0 +1,37 @@
+import { PluginObject } from 'vue'
+
+interface Logger {
+  error(error: Error): void
+  warn(...log: any[]): void
+  info(...log: any[]): void
+  debug(...log: any[]): void
+}
+
+declare global {
+  const $log: Logger
+
+  interface Window {
+    $log: Logger
+  }
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $log: Logger
+  }
+}
+
+const plugin: PluginObject<undefined> = {
+  install(Vue) {
+    window.$log = {
+      error: (error: Error) => console.error('[%cNEKO%c] %cERR', 'color: #498ad8;', '', 'color: #d84949;', error),
+      warn: (...log: any[]) => console.warn('[%cNEKO%c] %cWRN', 'color: #498ad8;', '', 'color: #eae364;', ...log),
+      info: (...log: any[]) => console.info('[%cNEKO%c] %cINF', 'color: #498ad8;', '', 'color: #4ac94c;', ...log),
+      debug: (...log: any[]) => console.log('[%cNEKO%c] %cDBG', 'color: #498ad8;', '', 'color: #eae364;', ...log),
+    }
+
+    Vue.prototype.$log = window.$log
+  },
+}
+
+export default plugin

client/src/plugins/neko.ts

@@ -18,10 +18,10 @@ declare module 'vue/types/vue' {
 const plugin: PluginObject<undefined> = {
   install(Vue) {
     window.$client = new NekoClient()
-      .on('error', error => console.error('[%cNEKO%c] %cERR', 'color: #498ad8;', '', 'color: #d84949;', error))
+      .on('error', window.$log.error)
-      .on('warn', (...log) => console.warn('[%cNEKO%c] %cWRN', 'color: #498ad8;', '', 'color: #eae364;', ...log))
+      .on('warn', window.$log.warn)
-      .on('info', (...log) => console.info('[%cNEKO%c] %cINF', 'color: #498ad8;', '', 'color: #4ac94c;', ...log))
+      .on('info', window.$log.info)
-      .on('debug', (...log) => console.log('[%cNEKO%c] %cDBG', 'color: #498ad8;', '', 'color: #eae364;', ...log))
+      .on('debug', window.$log.debug)
 
     Vue.prototype.$client = window.$client
   },

client/src/store/chat.ts

@@ -49,7 +49,7 @@ export const mutations = mutationTree(state, {
     state.emotes = emotes
   },
 
-  clear(state) {
+  reset(state) {
     state.emotes = {}
     state.history = []
   },

client/src/store/client.ts

@@ -1,6 +1,5 @@
 import { getterTree, mutationTree, actionTree } from 'typed-vuex'
 import { get, set } from '~/utils/localstorage'
-import { accessor } from '~/store'
 
 export const namespaced = true
 

client/src/store/remote.ts

@@ -35,7 +35,7 @@ export const mutations = mutationTree(state, {
     state.clipboard = clipboard
   },
 
-  clear(state) {
+  reset(state) {
     state.id = ''
     state.clipboard = ''
   },

client/src/store/user.ts

@@ -62,7 +62,7 @@ export const mutations = mutationTree(state, {
       connected: false,
     }
   },
-  clear(state) {
+  reset(state) {
     state.members = {}
   },
 })

client/src/store/video.ts

@@ -111,9 +111,15 @@ export const mutations = mutationTree(state, {
     state.tracks = state.tracks.filter((_, i) => i !== index)
   },
 
-  clear(state) {
+  reset(state) {
     state.index = -1
     state.tracks = []
     state.streams = []
+    state.width = 1280
+    state.height = 720
+    state.horizontal = 16
+    state.vertical = 9
+    state.playing = false
+    state.playable = false
   },
 })