From 72792d1e31ecc74080dd53a2fbdf63f5476a1077 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Thu, 31 Jan 2019 11:42:40 +0100
Subject: [PATCH] [web-src] Show progressbar for podcast track in progress

---
 web-src/src/components/ListItemTrack.vue |  3 ++-
 web-src/src/mystyles.css                 | 28 ++++++++++++++++++++++++
 web-src/src/pages/PagePodcast.vue        | 13 ++++++++++-
 web-src/src/pages/PagePodcasts.vue       | 13 ++++++++++-
 4 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/web-src/src/components/ListItemTrack.vue b/web-src/src/components/ListItemTrack.vue
index 5af1804b..86fe54ba 100644
--- a/web-src/src/components/ListItemTrack.vue
+++ b/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>
diff --git a/web-src/src/mystyles.css b/web-src/src/mystyles.css
index f1bc9340..9a27978e 100644
--- a/web-src/src/mystyles.css
+++ b/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;
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index 4aa9a5d5..d86b6332 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/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 {
diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index 95409d8b..638929c4 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/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 {