82 lines
1.4 KiB
Vue
82 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<NcAvatar :display-name="episodeName"
|
||
|
|
:is-no-user="true"
|
||
|
|
size="256"
|
||
|
|
:url="episodeImage" />
|
||
|
|
<h2>{{ episodeName }}</h2>
|
||
|
|
{{ episodeDescription }}
|
||
|
|
<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('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,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 2rem;
|
||
|
|
margin: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buttons {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|