From 383334cfe5f0b9eadc75741d2210de1122fcf350 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sun, 24 Jan 2021 12:24:16 +0100
Subject: [PATCH] fix radio table

---
 src/library/radio/RadioStations.vue | 20 ++++++++++++++++----
 src/player/store.ts                 |  3 +++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/library/radio/RadioStations.vue b/src/library/radio/RadioStations.vue
index 321d5e5..88ceca9 100644
--- a/src/library/radio/RadioStations.vue
+++ b/src/library/radio/RadioStations.vue
@@ -1,9 +1,12 @@
 <template>
   <div v-if="items">
     <h1>Radio</h1>
-    <table class="table table-hover table-borderless">
+    <table class="table table-hover table-borderless table-numbered">
       <thead>
         <tr>
+          <th>
+            #
+          </th>
           <th class="text-left">
             Title
           </th>
@@ -13,9 +16,17 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(item, index) in items" :key="index"
-            :class="{'active': item.id === playingTrackId}">
-          <td @click="play(index)">
+        <tr v-for="(item, index) in items"
+            :key="index"
+            :class="{'active': item.id === playingTrackId}"
+            @click="play(index)">
+          <td>
+            <button>
+              <Icon class="icon" :icon="isPlaying && item.id === playingTrackId ? 'pause-fill' :'play-fill'" />
+              <span class="number">{{ index + 1 }}</span>
+            </button>
+          </td>
+          <td>
             {{ item.title }}
             <div>
               <small class="text-muted">
@@ -49,6 +60,7 @@
     computed: {
       ...mapGetters({
         playingTrackId: 'player/trackId',
+        isPlaying: 'player/isPlaying',
       }),
     },
     async created() {
diff --git a/src/player/store.ts b/src/player/store.ts
index 79e90a2..f862310 100644
--- a/src/player/store.ts
+++ b/src/player/store.ts
@@ -188,6 +188,9 @@ export const playerModule: Module<State, any> = {
     trackId(state, getters): number {
       return getters.track ? getters.track.id : -1
     },
+    isPlaying(state): boolean {
+      return state.isPlaying
+    },
     progress(state) {
       if (state.currentTime > -1 && state.duration > 0) {
         return (state.currentTime / state.duration) * 100