From b5e87a46b04fe29de903499bb3a03f4f4e2565c1 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sat, 2 May 2020 10:00:43 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=83=83=E3=83=97=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E3=83=97=E3=83=AD=E3=82=B0=E3=83=AC=E3=82=B9=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=81=8C=E5=8B=95=E3=81=8B=E3=81=AA=E3=81=84=E3=81=AE?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3=20Fix=20#6306=20(#6307)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/uploader.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/client/components/uploader.vue b/src/client/components/uploader.vue
index 14a4f845c..4ceb5e287 100644
--- a/src/client/components/uploader.vue
+++ b/src/client/components/uploader.vue
@@ -4,16 +4,16 @@
 		<li v-for="ctx in uploads" :key="ctx.id">
 			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
 			<div class="top">
-				<p class="name"><fa icon="spinner" pulse/>{{ ctx.name }}</p>
+				<p class="name"><fa :icon="faSpinner" pulse/>{{ ctx.name }}</p>
 				<p class="status">
-					<span class="initing" v-if="ctx.progress == undefined">{{ $t('waiting') }}<mk-ellipsis/></span>
-					<span class="kb" v-if="ctx.progress != undefined">{{ String(Math.floor(ctx.progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
-					<span class="percentage" v-if="ctx.progress != undefined">{{ Math.floor((ctx.progress.value / ctx.progress.max) * 100) }}</span>
+					<span class="initing" v-if="ctx.progressValue === undefined">{{ $t('waiting') }}<mk-ellipsis/></span>
+					<span class="kb" v-if="ctx.progressValue !== undefined">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
+					<span class="percentage" v-if="ctx.progressValue !== undefined">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
 				</p>
 			</div>
-			<progress v-if="ctx.progress != undefined && ctx.progress.value != ctx.progress.max" :value="ctx.progress.value" :max="ctx.progress.max"></progress>
-			<div class="progress initing" v-if="ctx.progress == undefined"></div>
-			<div class="progress waiting" v-if="ctx.progress != undefined && ctx.progress.value == ctx.progress.max"></div>
+			<progress v-if="ctx.progressValue !== undefined && ctx.progressValue !== ctx.progressMax" :value="ctx.progressValue" :max="ctx.progressMax"></progress>
+			<div class="progress initing" v-if="ctx.progressValue === undefined"></div>
+			<div class="progress waiting" v-if="ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax"></div>
 		</li>
 	</ol>
 </div>
@@ -24,12 +24,14 @@ import Vue from 'vue';
 import i18n from '../i18n';
 import { apiUrl } from '../config';
 //import getMD5 from '../../scripts/get-md5';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n,
 	data() {
 		return {
-			uploads: []
+			uploads: [],
+			faSpinner
 		};
 	},
 	methods: {
@@ -56,7 +58,8 @@ export default Vue.extend({
 				const ctx = {
 					id: id,
 					name: name || file.name || 'untitled',
-					progress: undefined,
+					progressMax: undefined,
+					progressValue: undefined,
 					img: window.URL.createObjectURL(file)
 				};
 
@@ -84,9 +87,8 @@ export default Vue.extend({
 
 				xhr.upload.onprogress = e => {
 					if (e.lengthComputable) {
-						if (ctx.progress == undefined) ctx.progress = {};
-						ctx.progress.max = e.total;
-						ctx.progress.value = e.loaded;
+						ctx.progressMax = e.total;
+						ctx.progressValue = e.loaded;
 					}
 				};