use async / await.

client/src/components/about.vue

@@ -143,23 +143,27 @@
       return this.$accessor.client.about_page
     }
 
+    async Load() {
+      this.loading = true
+
+      try {
+        const res = await this.$http.get<string>('https://raw.githubusercontent.com/m1k1o/neko/dev/README.md')
+        const res2 = await this.$http.post('https://api.github.com/markdown', {
+          text: res.data,
+          mode: 'gfm',
+          context: 'github/gollum',
+        })
+        this.$accessor.client.setAbout(res2.data)
+      } catch (err) {
+        console.error(err)
+      } finally {
+        this.loading = false
+      }
+    }
+
     mounted() {
       if (this.about === '') {
-        this.loading = true
+        this.Load()
-        this.$http
-          .get<string>('https://raw.githubusercontent.com/m1k1o/neko/dev/README.md')
-          .then((res) => {
-            return this.$http.post('https://api.github.com/markdown', {
-              text: res.data,
-              mode: 'gfm',
-              context: 'github/gollum',
-            })
-          })
-          .then((res) => {
-            this.$accessor.client.setAbout(res.data)
-            this.loading = false
-          })
-          .catch((err) => console.error(err))
       }
     }
 

client/src/components/connect.vue

@@ -204,23 +204,23 @@
       }
     }
 
-    async login() {
+    login() {
       let password = this.password
       if (this.autoPassword !== null) {
         password = this.autoPassword
       }
 
-      try {
+      if (this.displayname == '') {
-        await this.$accessor.login({ displayname: this.displayname, password })
-
-        this.autoPassword = null
-      } catch (err) {
         this.$swal({
           title: this.$t('connect.error') as string,
-          text: err.message,
+          text: 'Display Name cannot be empty.' as string, // TODO: Add to i18n.
           icon: 'error',
         })
+        return
       }
+
+      this.$accessor.login({ displayname: this.displayname, password })
+      this.autoPassword = null
     }
 
     about() {

client/src/components/context.vue

@@ -165,64 +165,64 @@
       this.context.open(event, data)
     }
 
-    kick(member: Member) {
+    async kick(member: Member) {
-      this.$swal({
+      const value = await this.$swal({
         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') as string,
         cancelButtonText: this.$t('context.confirm.button_cancel') as string,
-      }).then(({ value }) => {
-        if (value) {
-          this.$accessor.user.kick(member)
-        }
       })
+
+      if (value) {
+        this.$accessor.user.kick(member)
+      }
     }
 
-    ban(member: Member) {
+    async ban(member: Member) {
-      this.$swal({
+      const value = await this.$swal({
         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') as string,
         cancelButtonText: this.$t('context.confirm.button_cancel') as string,
-      }).then(({ value }) => {
-        if (value) {
-          this.$accessor.user.ban(member)
-        }
       })
+
+      if (value) {
+        this.$accessor.user.ban(member)
+      }
     }
 
-    mute(member: Member) {
+    async mute(member: Member) {
-      this.$swal({
+      const value = await this.$swal({
         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') as string,
         cancelButtonText: this.$t('context.confirm.button_cancel') as string,
-      }).then(({ value }) => {
-        if (value) {
-          this.$accessor.user.mute(member)
-        }
       })
+
+      if (value) {
+        this.$accessor.user.mute(member)
+      }
     }
 
-    unmute(member: Member) {
+    async unmute(member: Member) {
-      this.$swal({
+      const value = await this.$swal({
         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') as string,
         cancelButtonText: this.$t('context.confirm.button_cancel') as string,
-      }).then(({ value }) => {
-        if (value) {
-          this.$accessor.user.unmute(member)
-        }
       })
+
+      if (value) {
+        this.$accessor.user.unmute(member)
+      }
     }
 
     adminRelease(member: Member) {

client/src/components/video.vue

@@ -482,18 +482,14 @@
       return key
     }
 
-    play() {
+    async play() {
       if (!this._video.paused || !this.playable) {
         return
       }
 
       try {
-        this._video
+        await this._video.play()
-          .play()
+        this.onResise()
-          .then(() => {
-            this.onResise()
-          })
-          .catch((err) => this.$log.error)
       } catch (err) {
         this.$log.error(err)
       }
@@ -569,21 +565,21 @@
       this.onResise()
     }
 
-    onFocus() {
+    async onFocus() {
       if (!document.hasFocus() || !this.$accessor.active) {
         return
       }
 
       if (this.hosting && this.clipboard_read_available) {
-        navigator.clipboard
+        try {
-          .readText()
+          const text = await navigator.clipboard.readText()
-          .then((text) => {
+          if (this.clipboard !== text) {
-            if (this.clipboard !== text) {
+            this.$accessor.remote.setClipboard(text)
-              this.$accessor.remote.setClipboard(text)
+            this.$accessor.remote.sendClipboard(text)
-              this.$accessor.remote.sendClipboard(text)
+          }
-            }
+        } catch (err) {
-          })
+          this.$log.error(err)
-          .catch(this.$log.error)
+        }
       }
     }
 

client/src/neko/base.ts

@@ -52,10 +52,6 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
       return
     }
 
-    if (displayname === '') {
-      throw new Error('Display Name cannot be empty.')
-    }
-
     this._displayname = displayname
     this[EVENT.CONNECTING]()
 
@@ -184,7 +180,7 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
     this._ws!.send(JSON.stringify({ event, ...payload }))
   }
 
-  public createPeer(sdp: string, lite: boolean, servers: RTCIceServer[]) {
+  public async createPeer(sdp: string, lite: boolean, servers: RTCIceServer[]) {
     this.emit('debug', `creating peer`)
     if (!this.socketOpen) {
       this.emit(
@@ -262,19 +258,20 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
     }
     this._candidates = []
 
-    this._peer
+    try {
-      .createAnswer()
+      const d = await this._peer.createAnswer()
-      .then((d) => {
+      this._peer!.setLocalDescription(d)
-        this._peer!.setLocalDescription(d)
+
-        this._ws!.send(
+      this._ws!.send(
-          JSON.stringify({
+        JSON.stringify({
-            event: EVENT.SIGNAL.ANSWER,
+          event: EVENT.SIGNAL.ANSWER,
-            sdp: d.sdp,
+          sdp: d.sdp,
-            displayname: this._displayname,
+          displayname: this._displayname,
-          }),
+        }),
-        )
+      )
-      })
+    } catch (err) {
-      .catch((err) => this.emit('error', err))
+      this.emit('error', err)
+    }
   }
 
   private onMessage(e: MessageEvent) {

client/src/store/emoji.ts

@@ -58,17 +58,17 @@ export const mutations = mutationTree(state, {
 export const actions = actionTree(
   { state, getters, mutations },
   {
-    initialise() {
+    async initialise() {
-      $http
+      try {
-        .get<Emojis>('emoji.json')
+        const req = await $http.get<Emojis>('emoji.json')
-        .then((req) => {
+        for (const group of req.data.groups) {
-          for (const group of req.data.groups) {
+          accessor.emoji.addGroup(group)
-            accessor.emoji.addGroup(group)
+        }
-          }
+        accessor.emoji.setList(req.data.list)
-          accessor.emoji.setList(req.data.list)
+        accessor.emoji.setKeywords(req.data.keywords)
-          accessor.emoji.setKeywords(req.data.keywords)
+      } catch (err) {
-        })
+        console.error(err)
-        .catch(console.error)
+      }
     },
   },
 )

client/src/store/settings.ts

@@ -70,13 +70,13 @@ export const mutations = mutationTree(state, {
 export const actions = actionTree(
   { state, getters, mutations },
   {
-    initialise() {
+    async initialise() {
-      $http
+      try {
-        .get<KeyboardLayouts>('keyboard_layouts.json')
+        const req = await $http.get<KeyboardLayouts>('keyboard_layouts.json')
-        .then((req) => {
+        accessor.settings.setKeyboardLayoutsList(req.data)
-          accessor.settings.setKeyboardLayoutsList(req.data)
+      } catch (err) {
-        })
+        console.error(err)
-        .catch(console.error)
+      }
     },
 
     broadcastStatus({ getters }, { url, isActive }) {