(fix) add files and videos progress bar

Author: antoine92190

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

@@ -10,13 +10,13 @@
 		>
 			<progress-bar
 				v-if="file.progress >= 0"
-				:style="{ top: `${imageResponsive.loaderTop}px` }"
 				:progress="file.progress"
+				:style="{ top: `${imageResponsive.loaderTop}px` }"
 			/>
 			<loader
 				v-else
-				:style="{ top: `${imageResponsive.loaderTop}px` }"
 				:show="isImageLoading"
+				:style="{ top: `${imageResponsive.loaderTop}px` }"
 			>
 				<template v-for="(idx, name) in $scopedSlots" #[name]="data">
 					<slot :name="name" v-bind="data" />
@@ -63,6 +63,7 @@
 			class="vac-video-container"
 			@click.stop.prevent="openFile('preview')"
 		>
+			<progress-bar v-if="file.progress >= 0" :progress="file.progress" />
 			<video width="100%" height="100%" controls>
 				<source :src="file.url" />
 			</video>
@@ -72,7 +73,7 @@
 
 <script>
 import Loader from '../../../../components/Loader/Loader'
-import ProgressBar from '../../../../components/ProgressBar/ProgressBar.vue'
+import ProgressBar from '../../../../components/ProgressBar/ProgressBar'
 import SvgIcon from '../../../../components/SvgIcon/SvgIcon'
 
 const { isImageFile, isVideoFile } = require('../../../../utils/media-file')

src/lib/Message/MessageFiles/MessageFiles.scss

@@ -14,5 +14,9 @@
 			height: 30px;
 			width: 30px;
 		}
+
+		&.vac-file-container-progress {
+			background-color: rgba(0, 0, 0, 0.3);
+		}
 	}
 }

src/lib/Message/MessageFiles/MessageFiles.vue

@@ -15,7 +15,16 @@
 		</div>
 
 		<div v-for="(file, idx) in otherFiles" :key="idx + 'a'">
-			<div class="vac-file-container" @click.stop="openFile(file, 'download')">
+			<progress-bar
+				v-if="file.progress >= 0"
+				:progress="file.progress"
+				:style="{ top: '54px' }"
+			/>
+			<div
+				class="vac-file-container"
+				:class="{ 'vac-file-container-progress': file.progress >= 0 }"
+				@click.stop="openFile(file, 'download')"
+			>
 				<div class="vac-svg-button">
 					<slot name="document-icon">
 						<svg-icon name="document" />
@@ -47,14 +56,15 @@
 <script>
 import SvgIcon from '../../../components/SvgIcon/SvgIcon'
 import FormatMessage from '../../../components/FormatMessage/FormatMessage'
+import ProgressBar from '../../../components/ProgressBar/ProgressBar'
 
 import MessageFile from './MessageFile/MessageFile'
 
 const { isImageVideoFile } = require('../../../utils/media-file')
 
 export default {
 	name: 'MessageFiles',
-	components: { SvgIcon, FormatMessage, MessageFile },
+	components: { SvgIcon, FormatMessage, ProgressBar, MessageFile },
 
 	props: {
 		currentUserId: { type: [String, Number], required: true },