Merge branch 'master' of github.com:m1k1o/neko into sk_lang

client/src/components/context.vue

@@ -36,7 +36,7 @@
         </li>
       </template>
 
-      <template v-if="admin">
+      <template v-if="admin && !child.data.member.admin">
         <li class="seperator" />
         <li>
           <span @click="kick(child.data.member)" style="color: #f04747;">{{ $t('context.kick') }}</span>
@@ -165,12 +165,12 @@
 
     kick(member: Member) {
       this.$swal({
-        title: this.$t('context.confirm.kick_title', { name: member.displayname }),
-        text: this.$t('context.confirm.kick_text', { name: member.displayname }),
+        title: this.$t('context.confirm.kick_title', { name: member.displayname }) as string,
+        text: this.$t('context.confirm.kick_text', { name: member.displayname }) as string,
         icon: 'warning',
         showCancelButton: true,
-        confirmButtonText: this.$t('context.confirm.button_yes'),
-        cancelButtonText: this.$t('context.confirm.button_cancel'),
+        confirmButtonText: this.$t('context.confirm.button_yes') as string,
+        cancelButtonText: this.$t('context.confirm.button_cancel') as string,
       }).then(({ value }) => {
         if (value) {
           this.$accessor.user.kick(member)
@@ -180,12 +180,12 @@
 
     ban(member: Member) {
       this.$swal({
-        title: this.$t('context.confirm.ban_title', { name: member.displayname }),
-        text: this.$t('context.confirm.ban_text', { name: member.displayname }),
+        title: this.$t('context.confirm.ban_title', { name: member.displayname }) as string,
+        text: this.$t('context.confirm.ban_text', { name: member.displayname }) as string,
         icon: 'warning',
         showCancelButton: true,
-        confirmButtonText: this.$t('context.confirm.button_yes'),
-        cancelButtonText: this.$t('context.confirm.button_cancel'),
+        confirmButtonText: this.$t('context.confirm.button_yes') as string,
+        cancelButtonText: this.$t('context.confirm.button_cancel') as string,
       }).then(({ value }) => {
         if (value) {
           this.$accessor.user.ban(member)
@@ -195,12 +195,12 @@
 
     mute(member: Member) {
       this.$swal({
-        title: this.$t('context.confirm.mute_title', { name: member.displayname }),
-        text: this.$t('context.confirm.mute_text', { name: member.displayname }),
+        title: this.$t('context.confirm.mute_title', { name: member.displayname }) as string,
+        text: this.$t('context.confirm.mute_text', { name: member.displayname }) as string,
         icon: 'warning',
         showCancelButton: true,
-        confirmButtonText: this.$t('context.confirm.button_yes'),
-        cancelButtonText: this.$t('context.confirm.button_cancel'),
+        confirmButtonText: this.$t('context.confirm.button_yes') as string,
+        cancelButtonText: this.$t('context.confirm.button_cancel') as string,
       }).then(({ value }) => {
         if (value) {
           this.$accessor.user.mute(member)
@@ -210,12 +210,12 @@
 
     unmute(member: Member) {
       this.$swal({
-        title: this.$t('context.confirm.unmute_title', { name: member.displayname }),
-        text: this.$t('context.confirm.unmute_text', { name: member.displayname }),
+        title: this.$t('context.confirm.unmute_title', { name: member.displayname }) as string,
+        text: this.$t('context.confirm.unmute_text', { name: member.displayname }) as string,
         icon: 'warning',
         showCancelButton: true,
-        confirmButtonText: this.$t('context.confirm.button_yes'),
-        cancelButtonText: this.$t('context.confirm.button_cancel'),
+        confirmButtonText: this.$t('context.confirm.button_yes') as string,
+        cancelButtonText: this.$t('context.confirm.button_cancel') as string,
       }).then(({ value }) => {
         if (value) {
           this.$accessor.user.unmute(member)

client/src/components/side.vue

@@ -4,11 +4,11 @@
       <ul>
         <li :class="{ active: tab === 'chat' }" @click.stop.prevent="change('chat')">
           <i class="fas fa-comment-alt" />
-          <span>{{ $t('chat') }}</span>
+          <span>{{ $t('side.chat') }}</span>
         </li>
         <li :class="{ active: tab === 'settings' }" @click.stop.prevent="change('settings')">
           <i class="fas fa-sliders-h" />
-          <span>{{ $t('settings') }}</span>
+          <span>{{ $t('side.settings') }}</span>
         </li>
       </ul>
     </div>

client/src/components/video.vue

@@ -161,6 +161,7 @@
     private observer = new ResizeObserver(this.onResise.bind(this))
     private focused = false
     private fullscreen = false
+    private activeKeys: Set<number> = new Set()
 
     get admin() {
       return this.$accessor.user.admin
@@ -333,12 +334,14 @@
       })
 
       document.addEventListener('focusin', this.onFocus.bind(this))
+      document.addEventListener('focusout', this.onBlur.bind(this))
     }
 
     beforeDestroy() {
       this.observer.disconnect()
       this.$accessor.video.setPlayable(false)
       document.removeEventListener('focusin', this.onFocus.bind(this))
+      document.removeEventListener('focusout', this.onBlur.bind(this))
     }
 
     play() {
@@ -401,6 +404,17 @@
       }
     }
 
+    onBlur() {
+      if (!this.focused || !this.hosting || this.locked) {
+        return
+      }
+
+      for (let key of this.activeKeys) {
+        this.$client.sendData('keyup', { key })
+        this.activeKeys.delete(key)
+      }
+    }
+
     onMousePos(e: MouseEvent) {
       const { w, h } = this.$accessor.video.resolution
       const rect = this._overlay.getBoundingClientRect()
@@ -466,15 +480,15 @@
     // frick you firefox
     getCode(e: KeyboardEvent): number {
       let key = e.keyCode
-      if (key === 59 && e.key === ';') {
+      if (key === 59 && (e.key === ';' || e.key === ':')) {
         key = 186
       }
 
-      if (key === 61 && e.key === '=') {
+      if (key === 61 && (e.key === '=' || e.key === '+')) {
         key = 187
       }
 
-      if (key === 173 && e.key === '-') {
+      if (key === 173 && (e.key === '-' || e.key === '_')) {
         key = 189
       }
 
@@ -486,7 +500,9 @@
         return
       }
 
-      this.$client.sendData('keydown', { key: this.getCode(e) })
+      let key = this.getCode(e)
+      this.$client.sendData('keydown', { key })
+      this.activeKeys.add(key)
     }
 
     onKeyUp(e: KeyboardEvent) {
@@ -494,7 +510,9 @@
         return
       }
 
-      this.$client.sendData('keyup', { key: this.getCode(e) })
+      let key = this.getCode(e)
+      this.$client.sendData('keyup', { key })
+      this.activeKeys.delete(key)
     }
 
     onResise() {

client/src/locale/en-us.ts

@@ -1,13 +1,13 @@
-export const chat = 'Chat'
-export const settings = 'Settings'
 export const logout = 'logout'
 export const unsupported = 'this browser does not support webrtc'
 export const admin_loggedin = 'You are logged in as an admin'
 export const you = 'You'
-export const ok = 'ok'
 export const send_a_message = 'Send a message'
-export const connected = 'connected'
-export const disconnected = 'disconnected'
+
+export const side = {
+  chat: 'Chat',
+  settings: 'Settings',
+}
 
 export const connect = {
   title: 'Please Login',
@@ -37,7 +37,7 @@ export const context = {
     unmute_text: 'Are you sure you want to unmute {name}?',
     button_yes: 'Yes',
     button_cancel: 'Cancel',
-  }
+  },
 }
 
 export const controls = {
@@ -63,11 +63,15 @@ export const setting = {
 }
 
 export const connection = {
-  success: 'Successfully connected',
+  logged_out: 'You have been logged out!',
+  connected: 'Successfully connected',
+  disconnected: 'You have been disconnected',
+  button_confirm: 'Ok',
 }
 
 export const notifications = {
-  logged_out: '{name} logged out!',
+  connected: '{name} connected',
+  disconnected: '{name} disconnected',
   controls_taken: '{name} took the controls',
   controls_taken_force: 'force took the controls',
   controls_taken_steal: 'took the controls from {name}',

client/src/neko/index.ts

@@ -54,9 +54,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.disconnect()
     this.cleanup()
     this.$vue.$swal({
-      title: this.$vue.$t('notifications.logged_out', { name: this.$vue.$t('you') }),
+      title: this.$vue.$t('connection.logged_out'),
       icon: 'info',
-      confirmButtonText: this.$vue.$t('ok') as string,
+      confirmButtonText: this.$vue.$t('connection.button_confirm') as string,
     })
   }
 
@@ -75,7 +75,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$vue.$notify({
       group: 'neko',
       type: 'success',
-      title: this.$vue.$t('connection.success') as string,
+      title: this.$vue.$t('connection.connected') as string,
       duration: 5000,
       speed: 1000,
     })
@@ -86,7 +86,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$vue.$notify({
       group: 'neko',
       type: 'error',
-      title: this.$vue.$t('disconnected') as string,
+      title: this.$vue.$t('connection.disconnected') as string,
       text: reason ? reason.message : undefined,
       duration: 5000,
       speed: 1000,
@@ -111,10 +111,10 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   protected [EVENT.SYSTEM.DISCONNECT]({ message }: DisconnectPayload) {
     this.onDisconnected(new Error(message))
     this.$vue.$swal({
-      title: this.$vue.$t('disconnected'),
+      title: this.$vue.$t('connection.disconnected'),
       text: message,
       icon: 'error',
-      confirmButtonText: this.$vue.$t('ok') as string,
+      confirmButtonText: this.$vue.$t('connection.button_confirm') as string,
     })
   }
 
@@ -125,7 +125,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$accessor.user.setMembers(members)
     this.$accessor.chat.newMessage({
       id: this.id,
-      content: this.$vue.$t('connected') as string,
+      content: this.$vue.$t('notifications.connected', { name: '' }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -137,7 +137,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     if (member.id !== this.id) {
       this.$accessor.chat.newMessage({
         id: member.id,
-        content: this.$vue.$t('connected') as string,
+        content: this.$vue.$t('notifications.connected', { name: '' }) as string,
         type: 'event',
         created: new Date(),
       })
@@ -152,7 +152,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id: member.id,
-      content: this.$vue.$t('disconnected') as string,
+      content: this.$vue.$t('notifications.disconnected', { name: '' }) as string,
       type: 'event',
       created: new Date(),
     })