nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: blinking previewer

Browse Source
This commit is contained in:
Ramires Viana 2020-07-14 01:18:53 +00:00
parent 0727496601
commit 72c7c2db26
4 changed files with 70 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/components/files/Preview.vue
View File

@ -5,38 +5,42 @@
<i class="material-icons">close</i>
</button>
<rename-button v-if="user.perm.rename"></rename-button>
<delete-button v-if="user.perm.delete"></delete-button>
<download-button v-if="user.perm.download"></download-button>
<info-button></info-button>
<template v-if="!loading">
<rename-button v-if="user.perm.rename"></rename-button>
<delete-button v-if="user.perm.delete"></delete-button>
<download-button v-if="user.perm.download"></download-button>
<info-button></info-button>
</template>
</div>
<button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
<i class="material-icons">chevron_left</i>
</button>
<button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
<i class="material-icons">chevron_right</i>
</button>
<template v-if="!loading">
<button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
<i class="material-icons">chevron_left</i>
</button>
<button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
<i class="material-icons">chevron_right</i>
</button>
<div class="preview">
<ExtendedImage v-if="req.type == 'image'" :src="raw"></ExtendedImage>
<audio v-else-if="req.type == 'audio'" :src="raw" autoplay controls></audio>
<video v-else-if="req.type == 'video'" :src="raw" autoplay controls>
<track
kind="captions"
v-for="(sub, index) in subtitles"
:key="index"
:src="sub"
:label="'Subtitle ' + index" :default="index === 0">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a :href="download">download it</a>
and watch it with your favorite video player!
</video>
<object v-else-if="req.extension == '.pdf'" class="pdf" :data="raw"></object>
<a v-else-if="req.type == 'blob'" :href="download">
<h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
</a>
</div>
<div class="preview">
<ExtendedImage v-if="req.type == 'image'" :src="raw"></ExtendedImage>
<audio v-else-if="req.type == 'audio'" :src="raw" autoplay controls></audio>
<video v-else-if="req.type == 'video'" :src="raw" autoplay controls>
<track
kind="captions"
v-for="(sub, index) in subtitles"
:key="index"
:src="sub"
:label="'Subtitle ' + index" :default="index === 0">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a :href="download">download it</a>
and watch it with your favorite video player!
</video>
<object v-else-if="req.extension == '.pdf'" class="pdf" :data="raw"></object>
<a v-else-if="req.type == 'blob'" :href="download">
<h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
</a>
</div>
</template>
</div>
</template>
@ -96,30 +100,23 @@ export default {
return `${this.previewUrl}&inline=true`
}
},
watch: {
req: function () {
this.updatePreview()
}
},
async mounted () {
window.addEventListener('keyup', this.key)
if (this.req.subtitles) {
this.subtitles = this.req.subtitles.map(sub => `${baseURL}/api/raw${sub}?auth=${this.jwt}&inline=true`)
}
try {
if (this.oldReq.items) {
this.updateLinks(this.oldReq.items)
} else {
const path = url.removeLastDir(this.$route.path)
const res = await api.fetch(path)
this.updateLinks(res.items)
}
} catch (e) {
this.$showError(e)
}
this.$store.commit('setPreviewMode', true)
this.updatePreview()
},
beforeDestroy () {
window.removeEventListener('keyup', this.key)
this.$store.commit('setPreviewMode', false)
},
methods: {
back () {
this.$store.commit('setPreviewMode', false)
let uri = url.removeLastDir(this.$route.path) + '/'
this.$router.push({ path: uri })
},
@ -138,7 +135,26 @@ export default {
if (this.hasPrevious) this.prev()
}
},
updateLinks (items) {
async updatePreview () {
if (this.req.subtitles) {
this.subtitles = this.req.subtitles.map(sub => `${baseURL}/api/raw${sub}?auth=${this.jwt}&inline=true`)
}
this.previousLink = ''
this.nextLink = ''
let items = this.oldReq.items
if (!items) {
try {
const path = url.removeLastDir(this.$route.path)
const res = await api.fetch(path)
items = res.items
} catch (e) {
this.$showError(e)
}
}
for (let i = 0; i < items.length; i++) {
if (items[i].name !== this.req.name) {
continue

3
frontend/src/store/index.js
View File

@ -23,7 +23,8 @@ const state = {
show: null,
showShell: false,
showMessage: null,
showConfirm: null
showConfirm: null,
previewMode: false
}
export default new Vuex.Store({

3
frontend/src/store/mutations.js
View File

@ -82,6 +82,9 @@ const mutations = {
resetClipboard: (state) => {
state.clipboard.key = ''
state.clipboard.items = []
},
setPreviewMode(state, value) {
state.previewMode = value
}
}

5
frontend/src/views/Files.vue
View File

@ -10,14 +10,15 @@
<router-link :to="link.url">{{ link.name }}</router-link>
</span>
</div>
<div v-if="error">
<not-found v-if="error.message === '404'"></not-found>
<forbidden v-else-if="error.message === '403'"></forbidden>
<internal-error v-else></internal-error>
</div>
<preview v-else-if="isPreview"></preview>
<editor v-else-if="isEditor"></editor>
<listing :class="{ multiple }" v-else-if="isListing"></listing>
<preview v-else-if="isPreview"></preview>
<div v-else>
<h2 class="message">
<span>{{ $t('files.loading') }}</span>
@ -65,7 +66,7 @@ export default {
'show'
]),
isPreview () {
return !this.loading && !this.isListing && !this.isEditor
return !this.loading && !this.isListing && !this.isEditor || this.loading && this.$store.state.previewMode
},
breadcrumbs () {
let parts = this.$route.path.split('/')