Modal episode (to be split)
This commit is contained in:
parent
50abff2f9d
commit
d43ec9dd75
@ -9,7 +9,8 @@
|
||||
:details="moment(episode.episodePubDate.date).fromNow()"
|
||||
:force-display-actions="true"
|
||||
:name="episode.episodeName"
|
||||
:title="episode.episodeDescription">
|
||||
:title="episode.episodeDescription"
|
||||
@click="modalEpisode = episode">
|
||||
<template #icon>
|
||||
<NcAvatar :display-name="episode.episodeName"
|
||||
:is-no-user="true"
|
||||
@ -34,13 +35,41 @@
|
||||
</template>
|
||||
</NcListItem>
|
||||
</AdaptativeList>
|
||||
<NcModal v-if="modalEpisode"
|
||||
size="small"
|
||||
@close="modalEpisode = null">
|
||||
<div class="modal-content">
|
||||
<NcAvatar :display-name="modalEpisode.episodeName"
|
||||
:is-no-user="true"
|
||||
size="256"
|
||||
:url="modalEpisode.episodeImage" />
|
||||
<h2>{{ modalEpisode.episodeName }}</h2>
|
||||
{{ modalEpisode.episodeDescription }}
|
||||
<div class="modal-buttons">
|
||||
<NcButton v-if="modalEpisode.episodeLink" :href="modalEpisode.episodeLink" target="_blank">
|
||||
<template #icon>
|
||||
<OpenInNew :size="20" />
|
||||
</template>
|
||||
{{ modalEpisode.podcastName }}
|
||||
</NcButton>
|
||||
<NcButton v-if="modalEpisode.episodeUrl" :href="modalEpisode.episodeUrl" target="_blank">
|
||||
<template #icon>
|
||||
<Download :size="20" />
|
||||
</template>
|
||||
{{ t('Download') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
|
||||
import { NcActionButton, NcAvatar, NcButton, NcListItem, NcModal } from '@nextcloud/vue'
|
||||
import AdaptativeList from '../Atoms/AdaptativeList.vue'
|
||||
import Download from 'vue-material-design-icons/Download.vue'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
|
||||
import PlayButton from 'vue-material-design-icons/Play.vue'
|
||||
import StopButton from 'vue-material-design-icons/Stop.vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
@ -53,10 +82,14 @@ export default {
|
||||
name: 'Episodes',
|
||||
components: {
|
||||
AdaptativeList,
|
||||
Download,
|
||||
Loading,
|
||||
NcActionButton,
|
||||
NcAvatar,
|
||||
NcButton,
|
||||
NcListItem,
|
||||
NcModal,
|
||||
OpenInNew,
|
||||
PlayButton,
|
||||
StopButton,
|
||||
},
|
||||
@ -64,6 +97,7 @@ export default {
|
||||
return {
|
||||
episodes: [],
|
||||
loading: true,
|
||||
modalEpisode: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -103,4 +137,17 @@ export default {
|
||||
.ended {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user