okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improvements to podcast ui

Browse source
This commit is contained in:
booploops 2022-01-19 04:48:42 -08:00
parent 062cbefb33
commit 47da1fbc80
2 changed files with 95 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/renderer/style.less
View file

@ -2495,18 +2495,50 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.podcasts-list {
height: 100%;
width: 400px;
background: gray;
width: 280px;
background: rgb(200 200 200 / 10%);
overflow-y: overlay;
border-right: 1px solid var(--color2);
flex: none;
}
.episodes-list {
height: 100%;
width: 100%;
background: black;
background: rgb(200 200 200 / 6%);
overflow-y: overlay;
}
.podcasts-details {
height: 100%;
width: 400px;
flex: none;
background: rgba(200, 200, 200, 0.1);
overflow-y: overlay;
border-left: 1px solid var(--color2);
.podcast-header {
text-align:center;
}
.podcast-play-btn {
width: 50%;
display: block;
margin: 0 auto;
}
.podcast-description {
margin: 12px;
font-size: 0.75em;
}
.podcast-artwork {
width: 200px;
margin: 16px auto;
height: 200px;
}
}
}

77
src/renderer/views/pages/podcasts.ejs
View file

@ -1,18 +1,24 @@
<script type="text/x-template" id="apple-podcasts">
<div class="content-inner podcasts-page">
<div class="podcasts-list">
<podcast-item @click.native="getEpisodes(podcast)" v-for="podcast in podcasts" :item="podcast"></podcast-item>
<podcast-tab :isselected="podcastSelected.id == podcast.id" @click.native="selectPodcast(podcast)" v-for="podcast in podcasts" :item="podcast"></podcast-tab>
</div>
<div class="episodes-list">
<div class="well">
<mediaitem-square kind="small" :item="episode" v-for="episode in episodes"></mediaitem-square>
<podcast-episode :isselected="selected.id == episode.id" @dblclick.native="playEpisode(episode)" @click.native="selectEpisode(episode)" :item="episode"
v-for="episode in episodes"></podcast-episode>
</div>
<div class="podcasts-details" v-if="selected.id != -1">
<div class="podcast-artwork">
<mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>
</div>
<h3 class="podcast-header">{{ selected.attributes.name }}</h3>
<button @click="playEpisode(selected)" class="md-btn podcast-play-btn">Play Episode</button>
<p class="well podcast-description" v-if="selected.attributes.description.standard" v-html="selected.attributes.description.standard"></p>
</div>
</div>
</script>
<script type="text/x-template" id="podcast-item">
<div class="cd-mediaitem-list-item">
<script type="text/x-template" id="podcast-tab">
<div class="cd-mediaitem-list-item" :class="{'mediaitem-selected': isselected}">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork.url"
@ -26,10 +32,27 @@
</div>
</div>
</script>
<script type="text/x-template" id="podcast-episode">
<div class="cd-mediaitem-list-item" :class="{'mediaitem-selected': isselected}">
<div class="info-rect" :style="{'padding-left':'16px'}">
<div class="title text-overflow-elipsis">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis">
{{ item.attributes.description.standard }}
</div>
</div>
</div>
</script>
<script>
Vue.component('podcast-item', {
template: '#podcast-item',
props: ['item'],
Vue.component('podcast-episode', {
template: '#podcast-episode',
props: ['item', 'isselected'],
methods: {}
});
Vue.component('podcast-tab', {
template: '#podcast-tab',
props: ['item', 'isselected'],
methods: {}
});
Vue.component('apple-podcasts', {
@ -37,18 +60,34 @@
data: function () {
return {
podcasts: [],
episodes: []
episodes: [],
podcastSelected: {
id: -1
},
selected: {
id: -1
}
}
},
async mounted() {
let podcastShow = await app.mk.api.v3.podcasts(`/v1/me/library/podcasts?include=episodes`)
this.podcasts = podcastShow.data.data
if(podcastShow.data.next) {
if (podcastShow.data.next) {
await this.getNext(podcastShow.data.next)
}
// this.episodes = podcastShow.data.data[0].relationships.episodes.data
},
methods: {
playEpisode(episode) {
app.mk.setQueue({'episode': episode.id}).then(() => {app.mk.play()})
},
selectPodcast(podcast) {
this.podcastSelected = podcast
this.getEpisodes(podcast)
},
selectEpisode(episode) {
this.selected = episode
},
async getEpisodes(podcast) {
this.episodes = []
let eps = await app.mk.api.v3.podcasts(`/v1/catalog/${app.mk.storefrontId}/podcasts/${podcast.id}?include=episodes`)
@ -56,23 +95,27 @@
eps.data.data[0].relationships.episodes.data.forEach(ep => {
this.episodes.push(ep)
})
if(eps.data.data[0].relationships.episodes.next) {
await this.getNextEpisodes(eps.data.data[0].relationships.episodes.next)
if (eps.data.data[0].relationships.episodes.next) {
await this.getNextEpisodes(eps.data.data[0].relationships.episodes.next, podcast.id)
}
},
async getNextEpisodes(next) {
async getNextEpisodes(next, podcastId) {
let podcastShow = await app.mk.api.v3.podcasts(next)
if(podcastId != this.podcastSelected.id) {
return
}
podcastShow.data.data.forEach(ep => {
this.episodes.push(ep)
})
if(podcastShow.data.next) {
await this.getNextEpisodes(podcastShow.data.next)
if (podcastShow.data.next) {
await this.getNextEpisodes(podcastShow.data.next, podcastId)
}
},
async getNext(next) {
let podcastShow = await app.mk.api.v3.podcasts(next)
this.podcasts = this.podcasts.concat(podcastShow.data.data)
if(podcastShow.data.next) {
if (podcastShow.data.next) {
await this.getNext(podcastShow.data.next)
}
}