Files
filebrowser/_assets/src/components/Preview.vue
Henrique Dias 1138e7e9bd Add ids to some buttons
Former-commit-id: 20c0f70776847e655516225044c208ed5757b2b8 [formerly d53bf61e15b860ea089c7a615190d6414c80d48a] [formerly 81022384e3a5057961c691f4099f9980f93bcd12 [formerly 2d9caaec4a]]
Former-commit-id: f3f07876ffc578eaec86c81b452fa1f3783aec18 [formerly ec550918fcf18507073c01481581b4a70059cbe7]
Former-commit-id: d9adac0236fcf450c3b1d4b3eb523cf6285ca552
2017-07-04 17:46:02 +01:00

69 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)
url += `?token=${this.$store.state.jwt}`
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>