feat: video handling on gallery panel

src/views/Delegate/Gallery.vue

@@ -70,12 +70,26 @@
         md="6"
         lg="4"
       >
-        <v-card>
-          <v-img
-            :src="media.location"
-            height="200"
-            class="grey darken-4"
-          ></v-img>
+        <v-card class="media-card">
+          <div v-if="media.contentType.split('/')[0] === 'image'">
+            <v-img
+              :src="media.location"
+              height="200px"
+              title="Ouvrir l'image"
+              class="grey darken-4 media-card-image"
+              @click="openMedia(media)"
+            />
+          </div>
+          <div
+            v-else
+            style="height: 200px; background: linear-gradient(45deg, rgba(52,152,219,1) 0%, rgba(142,68,173,1) 100%);"
+            class="d-flex justify-center align-center grey darken-2">
+            <v-btn color="white" icon x-large @click="openMedia(media)">
+              <v-icon>
+                play_circle_filled
+              </v-icon>
+            </v-btn>
+          </div>
           <v-card-actions>
             <v-tooltip bottom>
               <template v-slot:activator="{ on, attrs }">
@@ -155,12 +169,17 @@
             <v-progress-linear
               color="purple"
               height="2em"
+              buffer-value="0"
+              stream
               v-model="uploadProgress"
             >
               <template v-slot="{ value }">
                 <strong>{{ Math.ceil(value) }}%</strong>
               </template>
             </v-progress-linear>
+            <p class="mb-0 mt-1">
+              Soyez patient car le téléversement peut prendre du temps
+            </p>
           </div>
         </v-card-text>
         <v-card-actions>
@@ -203,7 +222,7 @@ export default {
     files: [],
     deleteMediaModal: false,
     mediaToDelete: {},
-    uploadProgress: 50
+    uploadProgress: 0
   }),
 
   computed: {
@@ -258,12 +277,12 @@ export default {
 
         this.$apitator.post('/delegate/medias', formData, {
           withAuth: true,
-          onUploadProgress: (progressEvent) => {
-            console.log(progressEvent)
-            const totalLength = progressEvent.lengthComputable ? progressEvent.total : progressEvent.target.getResponseHeader('content-length') || progressEvent.target.getResponseHeader('x-decompressed-content-length')
-            console.log('onUploadProgress', totalLength)
-            if (totalLength !== null) {
-              this.uploadProgress = Math.round((progressEvent.loaded * 100) / totalLength)
+          axiosConfig: {
+            onUploadProgress: (progressEvent) => {
+              const totalLength = progressEvent.lengthComputable ? progressEvent.total : progressEvent.target.getResponseHeader('content-length') || progressEvent.target.getResponseHeader('x-decompressed-content-length')
+              if (totalLength !== null) {
+                this.uploadProgress = Math.round((progressEvent.loaded * 100) / totalLength)
+              }
             }
           }
         }).then(res => {
@@ -337,6 +356,9 @@ export default {
       this.$store.commit('SET_DATA', {
         cover: null
       })
+    },
+    openMedia (item) {
+      window.open(item.location, '_blank').focus()
     }
   }
 }
@@ -357,4 +379,8 @@ export default {
   margin-top: -16em;
   background-color: rgba(41, 128, 185, 0.4);
 }
+
+.media-card-image {
+  cursor: pointer;
+}
 </style>