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

changes to podcasts

Browse source
This commit is contained in:
booploops 2022-01-20 23:56:51 -08:00
parent a1b23e4a4a
commit c5b2861735
4 changed files with 101 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/index.js
View file

@ -3457,6 +3457,10 @@ const getBase64FromUrl = async(url) => {
});
}
function Clone (obj) {
return JSON.parse(JSON.stringify(obj));
}
function uuidv4() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)

4
src/renderer/less/compact.less
View file

@ -45,7 +45,7 @@
}
@media (max-width: 951px) {
.content-inner {
#app-content {
zoom: 0.8;
}
}
@ -53,7 +53,7 @@
// if page width is less than 951px
@media (max-width: 951px) {
.content-inner {
#app-content {
zoom: 0.8;
}
}

49
src/renderer/style.less
View file

@ -2574,6 +2574,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
border-right: 1px solid var(--color2);
flex: none;
overflow-x: hidden;
.podcast-list-header {
border-bottom: 1px solid var(--color2);
font-size: 0.7em;
padding: 6px;
background: #ffffff17;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
}
.podcasts-search {
padding: 10px;
position: sticky;
top:0;
left:0;
width:100%;
border-bottom: 1px solid var(--color2);
}
}
.episodes-list {
@ -2608,13 +2627,37 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
.podcasts-details {
height: 100%;
height: 96%;
width: 400px;
flex: none;
background: rgba(200, 200, 200, 0.1);
background: rgb(20 20 20 / 97%);
overflow-y: overlay;
border-left: 1px solid var(--color2);
overflow-x: hidden;
position: absolute;
right: 2%;
top: 2%;
border-radius: 10px;
box-shadow: var(--ciderShadow-Generic);
z-index: 2;
.close-btn {
width: 50px;
height: 42px;
background-image: var(--gfx-closeBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
appearance: none;
border: 0;
background-color: transparent;
position: absolute;
top: 0;
right: 0;
&:hover {
background-color: rgb(196, 43, 28)
}
}
.podcast-genre {
text-align: center;

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

@ -1,7 +1,26 @@
<script type="text/x-template" id="apple-podcasts">
<div class="content-inner podcasts-page">
<div class="podcasts-list">
<podcast-tab :isselected="podcastSelected.id == podcast.id" @click.native="selectPodcast(podcast)" v-for="podcast in podcasts" :item="podcast"></podcast-tab>
<div class="podcasts-search">
<div class="search-input-container" style="width:100%;">
<div class="search-input--icon"></div>
<input type="search"
style="width:100%;"
spellcheck="false"
placeholder="Search..."
v-model="search.term" class="search-input">
</div>
</div>
<div>
<div class="podcast-list-header" v-if="ciderPodcasts.length != 0">
Followed on Cider
</div>
<div class="podcast-list-header" v-if="podcasts.length != 0">
Subscribed on iTunes
</div>
<podcast-tab :isselected="podcastSelected.id == podcast.id" @click.native="selectPodcast(podcast)" v-for="podcast in podcasts" :item="podcast"></podcast-tab>
</div>
</div>
<div class="episodes-list">
<div v-if="podcastSelected.id != -1" class="episodes-inline-info">
@ -25,28 +44,32 @@
<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>
<div class="podcast-genre">
{{ selected.attributes.genreNames[0] }}
</div>
<div class="podcast-metainfo">
{{ msToMinSec(selected.attributes.durationInMilliseconds) }} • {{ new Date(selected.attributes.releaseDateTime).toLocaleString() }}
</div>
<div class="well podcast-description" v-if="selected.attributes.description.standard">{{ selected.attributes.description.standard }}</div>
<div class="row">
<div class="col">
<button class="md-btn md-btn-block" @click="openUrl(selected.attributes.websiteUrl)">Podcast Website</button>
<transition name="wpfade">
<div class="podcasts-details" v-if="selected.id != -1">
<button class="close-btn" @click="selected.id = -1"></button>
<div class="podcast-artwork">
<mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>
</div>
<div class="col">
<button class="md-btn md-btn-block">Share</button>
<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>
<div class="well podcast-description" v-if="selected.attributes.description.standard">{{ selected.attributes.description.standard }}</div>
<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>
</transition>
</div>
</script>
<script type="text/x-template" id="podcast-tab">
@ -100,8 +123,13 @@
template: '#apple-podcasts',
data: function () {
return {
ciderPodcasts: [],
podcasts: [],
episodes: [],
search: {
term: "",
results: []
},
podcastSelected: {
id: -1
},
@ -135,7 +163,7 @@
this.getEpisodes(podcast)
},
selectEpisode(episode) {
this.selected = episode
this.selected = Clone(episode)
},
async getEpisodes(podcast) {
this.episodes = []