diff --git a/src/renderer/style.less b/src/renderer/style.less
index 4ffe1c84..60713503 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -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;
}
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 61628029..f6fd7cf4 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -199,7 +199,7 @@
page="browse">
-
+
+ {{ selected.attributes.genreNames[0] }}
+
+
+ {{ msToMinSec(selected.attributes.durationInMilliseconds) }} • {{ new Date(selected.attributes.releaseDateTime).toLocaleString() }}
+
+
+
+
+
+
+
+
+
@@ -41,6 +55,9 @@
{{ item.attributes.description.standard }}
+
+ {{ msToMinSec(item.attributes.durationInMilliseconds) }} • {{ new Date(item.attributes.releaseDateTime).toLocaleString() }}
+
@@ -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()})
},