pagesassos/panel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

feat: video handling on gallery panel

Browse source
This commit is contained in:
Matthieu Bessat 2020-07-18 12:43:37 +02:00
parent de2e56baae
commit f162732a65
1 changed files with 39 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/views/Delegate/Gallery.vue
View file

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