fix radio table

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"
+        <tr v-for="(item, index) in items"
-            :class="{'active': item.id === playingTrackId}">
+            :key="index"
-          <td @click="play(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() {

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