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

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

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

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

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