initial podcast support

src/library/TrackList.vue

@@ -54,9 +54,14 @@
           </template>
         </td>
         <td v-if="!noAlbum" class="d-none d-md-table-cell">
-          <router-link :to="{name: 'album', params: {id: item.albumId}}" @click.native.stop>
+          <template v-if="item.albumId">
+            <router-link :to="{name: 'album', params: {id: item.albumId}}" disabled @click.native.stop>
+              {{ item.album }}
+            </router-link>
+          </template>
+          <template v-else>
             {{ item.album }}
-          </router-link>
+          </template>
         </td>
         <td v-if="!noDuration" class="text-right d-none d-md-table-cell">
           {{ $formatDuration(item.duration) }}

src/library/podcast/PodcastDetails.vue

@@ -0,0 +1,88 @@
+<template>
+  <ContentLoader v-slot :loading="podcast ==null">
+    <h1>{{ podcast.name }}</h1>
+    <p>{{ podcast.description }}</p>
+    <table class="table table-hover table-borderless table-numbered">
+      <thead>
+        <tr>
+          <th>
+            #
+          </th>
+          <th class="text-left">
+            Title
+          </th>
+          <th class="text-right d-none d-md-table-cell">
+            Duration
+          </th>
+          <th class="text-right">
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in podcast.tracks"
+            :key="index"
+            :class="{'active': item.id === playingTrackId, 'disabled': !item.playable}"
+            @click="click(item)">
+          <td>
+            <button>
+              <Icon class="icon" :icon="isPlaying && item.id === playingTrackId ? 'pause-fill' :'play-fill'" />
+              <span class="number">{{ item.track }}</span>
+            </button>
+          </td>
+          <td>
+            {{ item.title }}
+            <div class="text-muted">
+              <small>{{ item.description }}</small>
+            </div>
+          </td>
+          <td class="text-right d-none d-md-table-cell">
+            <template v-if="item.duration">
+              {{ $formatDuration(item.duration) }}
+            </template>
+          </td>
+          <td class="text-right" @click.stop="">
+            <OverflowMenu :disabled="!item.playable" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </ContentLoader>
+</template>
+<script lang="ts">
+  import Vue from 'vue'
+  import { mapGetters } from 'vuex'
+
+  export default Vue.extend({
+    props: {
+      id: { type: String, required: true },
+    },
+    data() {
+      return {
+        podcast: null as null | any,
+      }
+    },
+    computed: {
+      ...mapGetters({
+        playingTrackId: 'player/trackId',
+        isPlaying: 'player/isPlaying',
+      }),
+    },
+    async created() {
+      this.podcast = await this.$api.getPodcast(this.id)
+    },
+    methods: {
+      async click(track: any) {
+        if (!track.playable) {
+          return
+        }
+        const tracks = this.podcast.tracks.filter((x: any) => x.playable)
+        const index = tracks.findIndex((x: any) => x.id === track.id)
+        return this.$store.dispatch('player/playTrackList', {
+          index,
+          tracks,
+        })
+      },
+    }
+  })
+</script>

src/library/podcast/PodcastLibrary.vue

@@ -0,0 +1,42 @@
+<template>
+  <ContentLoader v-slot :loading="items == null">
+    <div class="d-flex justify-content-between">
+      <h1>Podcasts</h1>
+      <OverflowMenu>
+        <b-dropdown-item-btn @click="refresh()">
+          Refresh
+        </b-dropdown-item-btn>
+      </OverflowMenu>
+    </div>
+    <Tiles square>
+      <Tile v-for="item in items" :key="item.id"
+            :image="item.image"
+            :to="{name: 'podcast', params: { id: item.id } }"
+            :title="item.name">
+        <template #text>
+          <strong>{{ item.trackCount }}</strong> episodes
+        </template>
+      </Tile>
+    </Tiles>
+  </ContentLoader>
+</template>
+<script lang="ts">
+  import Vue from 'vue'
+
+  export default Vue.extend({
+    data() {
+      return {
+        items: null as null | any[],
+      }
+    },
+    async created() {
+      this.items = await this.$api.getPodcasts()
+    },
+    methods: {
+      async refresh() {
+        await this.$api.refreshPodcasts()
+        this.items = await this.$api.getPodcasts()
+      }
+    }
+  })
+</script>