76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<div class="flex">
|
|
<NcAvatar
|
|
:display-name="episode.name"
|
|
:is-no-user="true"
|
|
:size="256"
|
|
:url="episode.image" />
|
|
<h2>{{ episode.name }}</h2>
|
|
<i v-if="episode.author">{{ episode.author }}</i>
|
|
<br />
|
|
<SafeHtml :source="episode.description || ''" />
|
|
<div class="flex">
|
|
<NcButton v-if="episode.link" :href="episode.link" target="_blank">
|
|
<template #icon>
|
|
<OpenInNewIcon :size="20" />
|
|
</template>
|
|
{{ episode.title }}
|
|
</NcButton>
|
|
<NcButton
|
|
v-if="episode.url"
|
|
:download="filenameFromUrl(episode.url)"
|
|
:href="episode.url"
|
|
target="_blank">
|
|
<template #icon>
|
|
<DownloadIcon :size="20" />
|
|
</template>
|
|
{{ t('repod', 'Download') }}
|
|
{{ episode.size ? `(${humanFileSize(episode.size)})` : '' }}
|
|
</NcButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { NcAvatar, NcButton } from '@nextcloud/vue'
|
|
import DownloadIcon from 'vue-material-design-icons/Download.vue'
|
|
import type { EpisodeInterface } from '../../utils/types.ts'
|
|
import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
|
|
import SafeHtml from './SafeHtml.vue'
|
|
import { filenameFromUrl } from '../../utils/url.ts'
|
|
import { humanFileSize } from '../../utils/size.ts'
|
|
import { t } from '@nextcloud/l10n'
|
|
|
|
export default {
|
|
name: 'Modal',
|
|
components: {
|
|
DownloadIcon,
|
|
NcAvatar,
|
|
NcButton,
|
|
OpenInNewIcon,
|
|
SafeHtml,
|
|
},
|
|
props: {
|
|
episode: {
|
|
type: Object as () => EpisodeInterface,
|
|
required: true,
|
|
},
|
|
},
|
|
methods: {
|
|
filenameFromUrl,
|
|
humanFileSize,
|
|
t,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.flex {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin: 2rem;
|
|
}
|
|
</style>
|