Upgrade to node 18 and dependencies (#46)

* upgrade to nodejs 18.

* npm update.

* upgrade linter.

* upgrade axios.

* upgrade saas loader.

* upgrade typescript.

src/component/internal/messages.ts

@@ -3,6 +3,7 @@ import * as EVENT from '../types/events'
 import * as message from '../types/messages'
 
 import EventEmitter from 'eventemitter3'
+import { AxiosProgressEvent } from 'axios'
 import { Logger } from '../utils/logger'
 import { NekoConnection } from './connection'
 import NekoState from '../types/state'
@@ -17,7 +18,7 @@ export interface NekoEvents {
 
   // drag and drop events
   ['upload.drop.started']: () => void
-  ['upload.drop.progress']: (progressEvent: ProgressEvent) => void
+  ['upload.drop.progress']: (progressEvent: AxiosProgressEvent) => void
   ['upload.drop.finished']: (error?: Error) => void
 
   // upload dialog events
@@ -340,7 +341,7 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
     }
   }
 
-  protected [EVENT.FILE_CHOOSER_DIALOG_CLOSED]({ id }: message.SessionID) {
+  protected [EVENT.FILE_CHOOSER_DIALOG_CLOSED]({}: message.SessionID) {
     this._localLog.debug(`EVENT.FILE_CHOOSER_DIALOG_CLOSED`)
     this.emit('upload.dialog.closed')
   }

src/component/internal/video.ts

@@ -19,7 +19,7 @@ export function register(el: HTMLVideoElement, state: Video) {
     Vue.set(state, 'playable', false)
     Vue.set(state, 'playing', false)
   })
-  el.addEventListener('volumechange', (value) => {
+  el.addEventListener('volumechange', () => {
     Vue.set(state, 'muted', el.muted)
     Vue.set(state, 'volume', el.volume)
   })

src/component/internal/webrtc.ts

@@ -569,7 +569,7 @@ export class NekoWebRTC extends EventEmitter<NekoWebRTCEvents> {
         stats = await this._peer.getStats()
       } else {
         // callback browsers support
-        await new Promise((res, rej) => {
+        await new Promise((res) => {
           //@ts-ignore
           this._peer.getStats((stats) => res(stats))
         })

src/component/main.vue

@@ -77,7 +77,7 @@
   export * as webrtcTypes from './types/webrtc'
 
   import { Configuration } from './api/configuration'
-  import { AxiosInstance } from 'axios'
+  import { AxiosInstance, AxiosProgressEvent } from 'axios'
 
   import { Vue, Component, Ref, Watch, Prop } from 'vue-property-decorator'
   import ResizeObserver from 'resize-observer-polyfill'
@@ -576,7 +576,7 @@
         this.events.emit('upload.drop.started')
 
         await this.api.room.uploadDrop(x, y, files, {
-          onUploadProgress: (progressEvent: ProgressEvent) => {
+          onUploadProgress: (progressEvent: AxiosProgressEvent) => {
             this.events.emit('upload.drop.progress', progressEvent)
           },
         })

src/component/screencast.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component, Ref, Watch, Prop } from 'vue-property-decorator'
+  import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
   import { RoomApi } from './api'
 
   const REFRESH_RATE = 1e3

src/page/components/events.vue

@@ -20,8 +20,8 @@
             neko.state.connection.status == 'disconnected'
               ? 'background: red;'
               : neko.state.connection.status == 'connecting'
-              ? 'background: #17448a;'
-              : ''
+                ? 'background: #17448a;'
+                : ''
           "
         >
           {{ neko.state.connection.status }}

src/page/components/header.vue

@@ -85,7 +85,7 @@
 </style>
 
 <script lang="ts">
-  import { Component, Prop, Ref, Watch, Vue } from 'vue-property-decorator'
+  import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
   import Neko from '~/component/main.vue'
 
   @Component({

src/page/components/members.vue

@@ -498,7 +498,7 @@
 
     async updateProfile(memberId: string, memberProfile: ApiModels.MemberProfile) {
       try {
-        const res = await this.neko.members.membersUpdateProfile(memberId, memberProfile)
+        await this.neko.members.membersUpdateProfile(memberId, memberProfile)
         const members = this.members.map((member) => {
           if (member.id == memberId) {
             return {

src/page/main.vue

@@ -335,7 +335,8 @@
     })
   })(require.context('./plugins/', true, /(main-tabs|main-components)\.vue$/))
 
-  import { Vue, Component, Ref, Watch } from 'vue-property-decorator'
+  import { Vue, Component, Ref } from 'vue-property-decorator'
+  import { AxiosProgressEvent } from 'axios'
   import NekoCanvas from '~/component/main.vue'
   import NekoHeader from './components/header.vue'
   import NekoConnect from './components/connect.vue'
@@ -398,7 +399,11 @@
       this.uploadProgress = 0
       try {
         await this.neko.room.uploadDialog([...files], {
-          onUploadProgress: (progressEvent: ProgressEvent) => {
+          onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+            if (!progressEvent.total) {
+              this.uploadProgress = 0
+              return
+            }
             this.uploadProgress = (progressEvent.loaded / progressEvent.total) * 100
           },
         })
@@ -455,7 +460,11 @@
         this.uploadActive = true
         this.uploadProgress = 0
       })
-      this.neko.events.on('upload.drop.progress', (progressEvent: ProgressEvent) => {
+      this.neko.events.on('upload.drop.progress', (progressEvent: AxiosProgressEvent) => {
+        if (!progressEvent.total) {
+          this.uploadProgress = 0
+          return
+        }
         this.uploadProgress = (progressEvent.loaded / progressEvent.total) * 100
       })
       this.neko.events.on('upload.drop.finished', (e?: any) => {
@@ -473,6 +482,7 @@
       })
       this.neko.events.on('upload.dialog.overlay', (id: string) => {
         this.dialogOverlayActive = true
+        console.log('upload.dialog.overlay', id)
       })
       this.neko.events.on('upload.dialog.closed', () => {
         this.dialogOverlayActive = false