91 lines
1.7 KiB
Vue
91 lines
1.7 KiB
Vue
<!-- eslint-disable vue/no-v-html -->
|
|
<template>
|
|
<div class="content">
|
|
<NcAvatar :display-name="episodeName"
|
|
:is-no-user="true"
|
|
size="256"
|
|
:url="episodeImage" />
|
|
<h2>{{ episodeName }}</h2>
|
|
<div v-html="description" />
|
|
<div class="buttons">
|
|
<NcButton v-if="episodeLink" :href="episodeLink" target="_blank">
|
|
<template #icon>
|
|
<OpenInNew :size="20" />
|
|
</template>
|
|
{{ podcastName }}
|
|
</NcButton>
|
|
<NcButton v-if="episodeUrl" :href="episodeUrl" target="_blank">
|
|
<template #icon>
|
|
<Download :size="20" />
|
|
</template>
|
|
{{ t('repod', 'Download') }}
|
|
</NcButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcAvatar, NcButton } from '@nextcloud/vue'
|
|
import Download from 'vue-material-design-icons/Download.vue'
|
|
import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
|
|
|
|
export default {
|
|
name: 'Modal',
|
|
components: {
|
|
Download,
|
|
NcAvatar,
|
|
NcButton,
|
|
OpenInNew,
|
|
},
|
|
props: {
|
|
episodeName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
episodeImage: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
episodeDescription: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
episodeUrl: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
episodeLink: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
podcastName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
description() {
|
|
const pre = document.createElement('pre')
|
|
pre.innerHTML = this.episodeDescription
|
|
const strippedDescription = pre.textContent || pre.innerText || ''
|
|
return strippedDescription.replace(/\n/g, '<br>')
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
margin: 2rem;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
</style>
|