4487f8c42e
Former-commit-id: 372cd53a6822a5e308b1db41593d1285f4c4ea22 [formerly 32161936b6b381a5c945ac404005f00cbc947499] [formerly 9572d67b6ead3d407f5899dcb46c2c7527fea437 [formerly d48867f603d3c2a7dccbf32c95ca498403ef710d]] Former-commit-id: 411c250031965f3e66c8acb341871800c120e637 [formerly 7801398085d8d8ed0e306e4fea63b94f6729b541] Former-commit-id: fe0c0ad2201510b10cb0ac724a3066ee4378fd67
68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<template>
|
|
<div id="previewer">
|
|
<div class="bar">
|
|
<button @click="back" class="action" aria-label="Close Preview" id="close">
|
|
<i class="material-icons">close</i>
|
|
</button>
|
|
|
|
<rename-button v-if="allowEdit()"></rename-button>
|
|
<delete-button v-if="allowEdit()"></delete-button>
|
|
<download-button></download-button>
|
|
<info-button></info-button>
|
|
</div>
|
|
|
|
<div class="preview">
|
|
<img v-if="req.type == 'image'" :src="raw()">
|
|
<audio v-else-if="req.type == 'audio'" :src="raw()" controls></audio>
|
|
<video v-else-if="req.type == 'video'" :src="raw()" controls>
|
|
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">Download <i class="material-icons">file_download</i></h2>
|
|
</a>
|
|
<pre v-else >{{ req.content }}</pre>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import url from '@/utils/url'
|
|
import InfoButton from './buttons/Info'
|
|
import DeleteButton from './buttons/Delete'
|
|
import RenameButton from './buttons/Rename'
|
|
import DownloadButton from './buttons/Download'
|
|
|
|
export default {
|
|
name: 'preview',
|
|
components: {
|
|
InfoButton,
|
|
DeleteButton,
|
|
RenameButton,
|
|
DownloadButton
|
|
},
|
|
computed: mapState(['req']),
|
|
methods: {
|
|
download: function () {
|
|
let url = `${this.$store.state.baseURL}/api/download`
|
|
url += this.req.url.slice(6)
|
|
|
|
return url
|
|
},
|
|
raw: function () {
|
|
return `${this.download()}?&inline=true`
|
|
},
|
|
back: function (event) {
|
|
let uri = url.removeLastDir(this.$route.path) + '/'
|
|
this.$router.push({ path: uri })
|
|
},
|
|
allowEdit: function (event) {
|
|
return this.$store.state.user.allowEdit
|
|
}
|
|
}
|
|
}
|
|
</script>
|