Xefir/repod
1
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 37 Wiki Activity

Modal episode (to be split)
All checks were successful
repod / xml (push) Successful in 37s
Details
repod / php (push) Successful in 1m10s
Details
repod / nodejs (push) Successful in 2m2s
Details

Browse Source
This commit is contained in:
Michel Roux 2023-12-24 16:34:27 +01:00
parent 50abff2f9d
commit d43ec9dd75
1 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Feed/Episodes.vue
View File

@ -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>