From 4885c2d69eb54117e5c9431ffdeabaf325724606 Mon Sep 17 00:00:00 2001
From: William Harrell <wharrell1@protonmail.com>
Date: Wed, 16 Nov 2022 20:58:39 -0500
Subject: [PATCH] frontend improvements

---
 client/src/components/files.vue | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/client/src/components/files.vue b/client/src/components/files.vue
index cc4c7b9..4261afb 100644
--- a/client/src/components/files.vue
+++ b/client/src/components/files.vue
@@ -18,6 +18,7 @@
         <p v-if="downloads.length > 0">Downloads</p>
         <div v-for="download in downloads" :key="download.id" class="transfers-list-item">
           <div class="transfer-info">
+            <i class="fas transfer-status" :class="{ 'fa-arrows-rotate': download.status !== 'completed', 'fa-check': download.status === 'completed' }"></i>
             <p>{{ download.name }}</p>
             <p class="file-size">{{ Math.min(100, Math.round(download.progress / download.size * 100))}}%</p>
             <i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(download)"></i>
@@ -28,6 +29,7 @@
         <p v-if="uploads.length > 0">Uploads</p>
         <div v-for="upload in uploads" :key="upload.id" class="transfers-list-item">
           <div class="transfer-info">
+            <i class="fas transfer-status" :class="{ 'fa-arrows-rotate': upload.status !== 'completed', 'fa-check': upload.status === 'completed' }"></i>
             <p>{{ upload.name }}</p>
             <p class="file-size">{{ Math.min(100, Math.round(upload.progress / upload.size * 100))}}%</p>
             <i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(upload)"></i>
@@ -97,7 +99,7 @@
       flex-direction: row;
     }
 
-    .file-icon {
+    .file-icon, .transfer-status {
       width: 14px;
       margin-right: 0.5em;
     }
@@ -286,6 +288,9 @@
         document.body.appendChild(link)
         link.click()
         document.body.removeChild(link)
+
+        transfer.progress = transfer.size
+        transfer.status = 'completed'
       }).catch((err) => {
         this.$log.error(err)
       })
@@ -370,15 +375,31 @@
       }
       const ext = parts[parts.length - 1]
       switch (ext) {
-        case 'mp3':
+        case 'aac':
         case 'flac':
+        case 'midi':
+        case 'mp3':
+        case 'ogg':
+        case 'wav':
           className += 'fa-music'
           break
-        case 'webm':
-        case 'mp4':
         case 'mkv':
+        case 'mov':
+        case 'mpeg':
+        case 'mp4':
+        case 'webm':
           className += 'fa-film'
           break
+        case 'bmp':
+        case 'gif':
+        case 'jpeg':
+        case 'jpg':
+        case 'png':
+        case 'svg':
+        case 'tiff':
+        case 'webp':
+          className += 'fa-image'
+          break;
         default:
           className += 'fa-file'
       }