(feat) add file progress bar

Author: antoine92190

src/components/ProgressBar/ProgressBar.scss

@@ -0,0 +1,38 @@
+.vac-progress-wrapper {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 9;
+
+	circle {
+		transition: stroke-dashoffset 0.35s;
+		transform: rotate(-90deg);
+		transform-origin: 50% 50%;
+	}
+
+	.vac-progress-content {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		z-index: -1;
+		margin-top: -2px;
+		background-color: rgba(0, 0, 0, 0.7);
+		border-radius: 50%;
+
+		.vac-progress-text {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			font-weight: bold;
+			color: white;
+
+			.vac-progress-pourcent {
+				font-size: 9px;
+				font-weight: normal;
+			}
+		}
+	}
+}

src/components/ProgressBar/ProgressBar.vue

@@ -0,0 +1,62 @@
+<template>
+	<transition name="vac-fade-spinner" appear>
+		<div v-if="!show" ref="progress" class="vac-progress-wrapper">
+			<svg :height="radius * 2" :width="radius * 2">
+				<circle
+					stroke="rgba(255, 255, 255, 0.7)"
+					:stroke-dasharray="circumference + ' ' + circumference"
+					:style="{
+						strokeDashoffset: strokeDashoffset,
+						strokeLinecap: 'round'
+					}"
+					:stroke-width="stroke"
+					fill="transparent"
+					:r="normalizedRadius"
+					:cx="radius"
+					:cy="radius"
+				/>
+			</svg>
+			<div
+				class="vac-progress-content"
+				:style="{
+					height: radius * 2 - 19 + 'px',
+					width: radius * 2 - 19 + 'px'
+				}"
+			>
+				<div class="vac-progress-text">
+					{{ progress }}<span class="vac-progress-pourcent">%</span>
+				</div>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+export default {
+	name: 'ProgressBar',
+
+	props: {
+		show: { type: Boolean, default: false },
+		progress: { type: Number, default: 0 }
+	},
+
+	data() {
+		const radius = 35
+		const stroke = 4
+		const normalizedRadius = radius - stroke * 2
+		const circumference = normalizedRadius * 2 * Math.PI
+
+		return {
+			radius,
+			stroke,
+			normalizedRadius,
+			circumference
+		}
+	},
+	computed: {
+		strokeDashoffset() {
+			return this.circumference - (this.progress / 100) * this.circumference
+		}
+	}
+}
+</script>

src/lib/Message/MessageFiles/MessageFile/MessageFile.vue

@@ -8,7 +8,14 @@
 			@mouseleave="imageHover = false"
 			@click.stop="openFile('preview')"
 		>
+			<progress-bar
+				v-if="file.progress >= 0"
+				:style="{ top: `${imageResponsive.loaderTop}px` }"
+				:show="isImageLoading"
+				:progress="file.progress"
+			/>
 			<loader
+				v-else
 				:style="{ top: `${imageResponsive.loaderTop}px` }"
 				:show="isImageLoading"
 			>
@@ -62,13 +69,14 @@
 
 <script>
 import Loader from '../../../../components/Loader/Loader'
+import ProgressBar from '../../../../components/ProgressBar/ProgressBar.vue'
 import SvgIcon from '../../../../components/SvgIcon/SvgIcon'
 
 const { isImageFile, isVideoFile } = require('../../../../utils/media-file')
 
 export default {
 	name: 'MessageFile',
-	components: { SvgIcon, Loader },
+	components: { SvgIcon, Loader, ProgressBar },
 
 	props: {
 		currentUserId: { type: [String, Number], required: true },

src/styles/index.scss

@@ -30,3 +30,4 @@
 @import '../components/FormatMessage/FormatMessage';
 @import '../components/Loader/Loader';
 @import '../components/SvgIcon/SvgIcon';
+@import '../components/ProgressBar/ProgressBar';