[web-src] Show progressbar for podcast track in progress

web-src/src/components/ListItemTrack.vue

@@ -1,5 +1,5 @@
 <template functional>
-  <div class="media" :id="'index_' + props.track.title_sort.charAt(0).toUpperCase()">
+  <div class="media" :id="'index_' + props.track.title_sort.charAt(0).toUpperCase()" :class="{ 'with-progress': slots().progress }">
     <figure class="media-left fd-has-action" v-if="slots().icon" @click="listeners.click">
       <slot name="icon"></slot>
     </figure>
@@ -7,6 +7,7 @@
       <h1 class="title is-6" :class="{ 'has-text-grey': props.track.media_kind === 'podcast' && props.track.play_count > 0 }">{{ props.track.title }}</h1>
       <h2 class="subtitle is-7 has-text-grey"><b>{{ props.track.artist }}</b></h2>
       <h2 class="subtitle is-7 has-text-grey">{{ props.track.album }}</h2>
+      <slot name="progress"></slot>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>

web-src/src/mystyles.css

@@ -7,6 +7,34 @@
   background-color: hsl(0, 0%, 21%);
 }
 
+.track-progress {
+  margin: 0;
+  padding: 0;
+  min-width: 250px;
+  width: 100%;
+}
+
+.track-progress .range-slider-knob {
+  visibility: hidden;
+}
+
+.track-progress .range-slider-fill {
+  background-color: hsl(217, 71%, 53%);
+  height: 2px;
+}
+
+.track-progress .range-slider-rail {
+  background-color: hsl(0, 0%, 100%);
+}
+
+.media.with-progress h2:last-of-type {
+  margin-bottom: 6px;
+}
+
+.media.with-progress {
+  margin-top: 0px;
+}
+
 a.navbar-item {
   outline: 0;
   line-height: 1.5;

web-src/src/pages/PagePodcast.vue

@@ -14,6 +14,16 @@
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
       <list-item-track v-for="track in tracks" :key="track.id" :track="track" @click="play_track(track)">
+        <template slot="progress">
+          <range-slider
+            class="track-progress"
+            min="0"
+            :max="track.length_ms"
+            step="1"
+            :disabled="true"
+            :value="track.seek_ms" >
+          </range-slider>
+        </template>
         <template slot="actions">
           <a @click="open_dialog(track)">
             <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@@ -30,6 +40,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
+import RangeSlider from 'vue-range-slider'
 import webapi from '@/webapi'
 
 const albumData = {
@@ -49,7 +60,7 @@ const albumData = {
 export default {
   name: 'PagePodcast',
   mixins: [ LoadDataBeforeEnterMixin(albumData) ],
-  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack },
+  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, RangeSlider },
 
   data () {
     return {

web-src/src/pages/PagePodcasts.vue

@@ -6,6 +6,16 @@
       </template>
       <template slot="content">
         <list-item-track v-for="track in new_episodes.items" :key="track.id" :track="track" @click="play_track(track)">
+          <template slot="progress">
+            <range-slider
+              class="track-progress"
+              min="0"
+              :max="track.length_ms"
+              step="1"
+              :disabled="true"
+              :value="track.seek_ms" >
+            </range-slider>
+          </template>
           <template slot="actions">
             <a @click="open_track_dialog(track)">
               <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@@ -42,6 +52,7 @@ import ListItemTrack from '@/components/ListItemTrack'
 import ListItemAlbum from '@/components/ListItemAlbum'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import RangeSlider from 'vue-range-slider'
 import webapi from '@/webapi'
 
 const albumsData = {
@@ -61,7 +72,7 @@ const albumsData = {
 export default {
   name: 'PagePodcasts',
   mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
-  components: { ContentWithHeading, ListItemTrack, ListItemAlbum, ModalDialogTrack, ModalDialogAlbum },
+  components: { ContentWithHeading, ListItemTrack, ListItemAlbum, ModalDialogTrack, ModalDialogAlbum, RangeSlider },
 
   data () {
     return {