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

podcasts styling changes

Browse source
This commit is contained in:
booploops 2022-01-19 06:40:03 -08:00
parent 47da1fbc80
commit 3a2c2c66df
3 changed files with 47 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/renderer/style.less
View file

@ -2517,6 +2517,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
overflow-y: overlay;
border-left: 1px solid var(--color2);
.podcast-genre {
text-align: center;
margin: 6px;
font-size: 0.8em;
font-weight: 500;
opacity: 0.8;
}
.podcast-metainfo {
text-align: center;
font-size: 0.7em;
opacity: 0.8;
}
.podcast-header {
text-align:center;
}

2
src/renderer/views/main.ejs
View file

@ -199,7 +199,7 @@
page="browse"></sidebar-library-item>
<sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg"
page="radio"></sidebar-library-item>
<sidebar-library-item name="Podcasts" svg-icon="./assets/feather/radio.svg" v-if="isDev"
<sidebar-library-item name="Podcasts" svg-icon="./assets/feather/radio.svg"
page="podcasts"></sidebar-library-item>
<div class="app-sidebar-header-text">
Library

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

@ -13,7 +13,21 @@
</div>
<h3 class="podcast-header">{{ selected.attributes.name }}</h3>
<button @click="playEpisode(selected)" class="md-btn podcast-play-btn">Play Episode</button>
<div class="podcast-genre">
{{ selected.attributes.genreNames[0] }}
</div>
<div class="podcast-metainfo">
{{ msToMinSec(selected.attributes.durationInMilliseconds) }} • {{ new Date(selected.attributes.releaseDateTime).toLocaleString() }}
</div>
<p class="well podcast-description" v-if="selected.attributes.description.standard" v-html="selected.attributes.description.standard"></p>
<div class="row">
<div class="col">
<button class="md-btn md-btn-block" @click="openUrl(selected.attributes.websiteUrl)">Podcast Website</button>
</div>
<div class="col">
<button class="md-btn md-btn-block">Share</button>
</div>
</div>
</div>
</div>
</script>
@ -41,6 +55,9 @@
<div class="subtitle text-overflow-elipsis">
{{ item.attributes.description.standard }}
</div>
<div class="subtitle text-overflow-elipsis">
{{ msToMinSec(item.attributes.durationInMilliseconds) }} • {{ new Date(item.attributes.releaseDateTime).toLocaleString() }}
</div>
</div>
</div>
</script>
@ -48,7 +65,13 @@
Vue.component('podcast-episode', {
template: '#podcast-episode',
props: ['item', 'isselected'],
methods: {}
methods: {
msToMinSec(ms) {
var minutes = Math.floor(ms / 60000);
var seconds = ((ms % 60000) / 1000).toFixed(0);
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
}
}
});
Vue.component('podcast-tab', {
template: '#podcast-tab',
@ -78,6 +101,14 @@
// this.episodes = podcastShow.data.data[0].relationships.episodes.data
},
methods: {
openUrl(url) {
window.open(url)
},
msToMinSec(ms) {
var minutes = Math.floor(ms / 60000);
var seconds = ((ms % 60000) / 1000).toFixed(0);
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
},
playEpisode(episode) {
app.mk.setQueue({'episode': episode.id}).then(() => {app.mk.play()})
},