listing of files on connect

client/src/components/files.vue

@@ -8,7 +8,8 @@
       <div v-for="item in files" :key="item.name" class="files-list-item">
         <i :class="fileIcon(item)" />
         <p>{{ item.name }}</p>
-        <i class="fas fa-download download" @click="() => download(item)" />
+        <i v-if="item.type !== 'dir'" class="fas fa-download download"
+        @click="() => download(item)" />
       </div>
     </div>
     <div class="files-transfer" @dragover.prevent @drop.prevent="onFileDrop">
@@ -111,7 +112,6 @@
 <script lang="ts">
 
   import { Component, Vue } from 'vue-property-decorator'
-  import { onMounted, onUnmounted } from 'vue'
 
   import Markdown from './markdown'
   import Content from './context.vue'
@@ -125,28 +125,12 @@
   })
   export default class extends Vue {
 
-    data() {
-      return {
-        cwd: '~/Downloads',
-        files: [
-          {
-            name: 'a.txt',
-            type: 'file'
-          },
-          {
-            name: 'b',
-            type: 'dir'
-          },
-          {
-            name: 'c.mkv',
-            type: 'file'
-          },
-          {
-            name: 'd.mp3',
-            type: 'file'
-          }
-        ]
-      }
+    get cwd() {
+      return this.$accessor.files.cwd
+    }
+
+    get files() {
+      return this.$accessor.files.files
     }
     
     refresh() {

client/src/neko/events.ts

@@ -38,6 +38,13 @@ export const EVENT = {
     MESSAGE: 'chat/message',
     EMOTE: 'chat/emote',
   },
+  FILETRANSFER: {
+    ENABLE: 'filetransfer/enable',
+    DISABLE: 'filetransfer/disable',
+    UNPRIVENABLE: 'filetransfer/unprivenable',
+    UNPRIVDISABLE: 'filetransfer/unprivdisable',
+    LIST: 'filetransfer/list'
+  },
   SCREEN: {
     CONFIGURATIONS: 'screen/configurations',
     RESOLUTION: 'screen/resolution',
@@ -69,6 +76,7 @@ export type WebSocketEvents =
   | MemberEvents
   | SignalEvents
   | ChatEvents
+  | FileTransferEvents
   | ScreenEvents
   | BroadcastEvents
   | AdminEvents
@@ -91,6 +99,14 @@ export type SignalEvents =
   | typeof EVENT.SIGNAL.CANDIDATE
 
 export type ChatEvents = typeof EVENT.CHAT.MESSAGE | typeof EVENT.CHAT.EMOTE
+
+export type FileTransferEvents =
+  | typeof EVENT.FILETRANSFER.ENABLE
+  | typeof EVENT.FILETRANSFER.DISABLE
+  | typeof EVENT.FILETRANSFER.UNPRIVENABLE
+  | typeof EVENT.FILETRANSFER.UNPRIVDISABLE
+  | typeof EVENT.FILETRANSFER.LIST
+
 export type ScreenEvents = typeof EVENT.SCREEN.CONFIGURATIONS | typeof EVENT.SCREEN.RESOLUTION | typeof EVENT.SCREEN.SET
 
 export type BroadcastEvents =

client/src/neko/index.ts

@@ -24,6 +24,7 @@ import {
   AdminLockMessage,
   SystemInitPayload,
   AdminLockResource,
+  FileTransferListPayload,
 } from './messages'
 
 interface NekoEvents extends BaseEvents {}
@@ -351,6 +352,14 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$accessor.chat.newEmote({ type: emote })
   }
 
+  /////////////////////////////
+  // Chat Events
+  /////////////////////////////
+  protected [EVENT.FILETRANSFER.LIST]({ cwd, files }: FileTransferListPayload) {
+    this.$accessor.files.setCwd(cwd)
+    this.$accessor.files.setFileList(files)
+  }
+
   /////////////////////////////
   // Screen Events
   /////////////////////////////

client/src/neko/messages.ts

@@ -8,8 +8,14 @@ import {
   ChatEvents,
   ScreenEvents,
   AdminEvents,
+  FileTransferEvents,
 } from './events'
-import { Member, ScreenConfigurations, ScreenResolution } from './types'
+import {
+  FileListItem,
+  Member,
+  ScreenConfigurations,
+  ScreenResolution
+} from './types'
 
 export type WebSocketMessages =
   | WebSocketMessage
@@ -192,6 +198,15 @@ export interface EmojiSendPayload {
   emote: string
 }
 
+// file transfer
+export interface FileTransferMessage extends WebSocketMessage, FileTransferListPayload {
+  event: FileTransferEvents
+}
+export interface FileTransferListPayload {
+  cwd: string,
+  files: FileListItem[]
+}
+
 /*
   SCREEN PAYLOADS
 */

client/src/neko/types.ts

@@ -22,3 +22,8 @@ export interface ScreenResolution {
   height: number
   rate: number
 }
+
+export interface FileListItem {
+  name: string,
+  type: 'file' | 'dir'
+}

client/src/store/files.ts

@@ -0,0 +1,35 @@
+import { actionTree, getterTree, mutationTree } from 'typed-vuex'
+import { FileListItem } from '~/neko/types'
+import { accessor } from '~/store'
+
+export const state = () => ({
+  cwd: '',
+  files: [] as FileListItem[]
+})
+
+export const getters = getterTree(state, {
+  //
+})
+
+export const mutations = mutationTree(state, {
+  _setCwd(state, cwd: string) {
+    state.cwd = cwd
+  },
+
+  _setFileList(state, files: FileListItem[]) {
+    state.files = files
+  }
+})
+
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    setCwd(store, cwd: string) {
+      accessor.files._setCwd(cwd)
+    },
+
+    setFileList(store, files: FileListItem[]) {
+      accessor.files._setFileList(files)
+    }
+  }
+)

client/src/store/index.ts

@@ -7,6 +7,7 @@ import { get, set } from '~/utils/localstorage'
 
 import * as video from './video'
 import * as chat from './chat'
+import * as files from './files'
 import * as remote from './remote'
 import * as user from './user'
 import * as settings from './settings'
@@ -97,7 +98,7 @@ export const storePattern = {
   state,
   mutations,
   actions,
-  modules: { video, chat, user, remote, settings, client, emoji },
+  modules: { video, chat, files, user, remote, settings, client, emoji },
 }
 
 Vue.use(Vuex)