96 lines
1.7 KiB
Vue
96 lines
1.7 KiB
Vue
<!-- eslint-disable vue/no-v-html -->
|
|
<template>
|
|
<div>
|
|
<NcAvatar :display-name="name"
|
|
:is-no-user="true"
|
|
:size="256"
|
|
:url="image" />
|
|
<h2>{{ name }}</h2>
|
|
<p v-html="strippedDescription" />
|
|
<div>
|
|
<NcButton v-if="link"
|
|
:href="link"
|
|
target="_blank">
|
|
<template #icon>
|
|
<OpenInNewIcon :size="20" />
|
|
</template>
|
|
{{ title }}
|
|
</NcButton>
|
|
<NcButton v-if="url"
|
|
:href="url"
|
|
target="_blank">
|
|
<template #icon>
|
|
<DownloadIcon :size="20" />
|
|
</template>
|
|
{{ t('repod', 'Download') }} {{ size ? `(${episodeFileSize})` : '' }}
|
|
</NcButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcAvatar, NcButton } from '@nextcloud/vue'
|
|
import DownloadIcon from 'vue-material-design-icons/Download.vue'
|
|
import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
|
|
import { cleanHtml } from '../../utils/text.js'
|
|
import { humanFileSize } from '../../utils/size.js'
|
|
|
|
export default {
|
|
name: 'Modal',
|
|
components: {
|
|
DownloadIcon,
|
|
NcAvatar,
|
|
NcButton,
|
|
OpenInNewIcon,
|
|
},
|
|
props: {
|
|
description: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
image: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
link: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
url: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
episodeFileSize() {
|
|
return humanFileSize(this.size)
|
|
},
|
|
strippedDescription() {
|
|
return cleanHtml(this.description)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
div {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin: 2rem;
|
|
}
|
|
</style>
|