Adding files tables, fixing loading when switching streams

client/components/app/Appbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-16 bg-primary relative">
-    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-6 py-1 z-10">
+    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-6 py-1 z-20">
       <div class="flex h-full items-center">
         <img v-if="!showBack" src="/LogoTransparent.png" class="w-12 h-12 mr-4" />
         <a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">

client/components/app/StreamContainer.vue

@@ -14,7 +14,7 @@
       <span v-if="stream" class="material-icons px-4 cursor-pointer" @click="cancelStream">close</span>
     </div>
 
-    <audio-player ref="audioPlayer" :loading="!stream" @updateTime="updateTime" @hook:mounted="audioPlayerMounted" />
+    <audio-player ref="audioPlayer" :loading="isLoading" @updateTime="updateTime" @hook:mounted="audioPlayerMounted" />
   </div>
 </template>
 
@@ -34,6 +34,14 @@ export default {
     user() {
       return this.$store.state.user
     },
+    isLoading() {
+      if (!this.streamAudiobook) return false
+      if (this.stream) {
+        // IF Stream exists, set loading if stream is diff from next stream
+        return this.stream.audiobook.id !== this.streamAudiobook.id
+      }
+      return true
+    },
     streamAudiobook() {
       return this.$store.state.streamAudiobook
     },
@@ -56,7 +64,7 @@ export default {
   methods: {
     audioPlayerMounted() {
       if (this.stream) {
-        // this.$refs.audioPlayer.set(this.playlistUrl)
+        console.log('[STREAM-CONTAINER] audioPlayerMounted w/ Stream', this.stream)
         this.openStream()
       }
     },
@@ -77,6 +85,9 @@ export default {
       }
       var currentTime = this.stream.clientCurrentTime || 0
       this.$refs.audioPlayer.set(this.playlistUrl, currentTime, playOnLoad)
+      if (this.stream.isTranscodeComplete) {
+        this.$refs.audioPlayer.setStreamReady()
+      }
     },
     streamProgress(data) {
       if (!data.numSegments) return
@@ -87,14 +98,16 @@ export default {
     },
     streamOpen(stream) {
       this.stream = stream
-      this.$nextTick(() => {
+      if (this.$refs.audioPlayer) {
+        console.log('[STREAM-CONTAINER] streamOpen', stream)
         this.openStream()
-      })
+      }
     },
     streamClosed(streamId) {
       if (this.stream && this.stream.id === streamId) {
         this.terminateStream()
         this.$store.commit('clearStreamAudiobook', this.stream.audiobook.id)
+        this.stream = null
       }
     },
     streamReady() {
@@ -123,14 +136,6 @@ export default {
         this.$refs.audioPlayer.resetStream(startTime)
       }
     }
-  },
-  mounted() {
-    if (this.stream) {
-      console.log('[STREAM_CONTAINER] Mounted with STREAM', this.stream)
-      this.$nextTick(() => {
-        this.openStream()
-      })
-    }
   }
 }
 </script>

client/components/app/TracksTable.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="w-full my-2">
-    <div class="w-full bg-primary px-6 py-2 flex items-center cursor-pointer" @click.stop="clickBar">
-      <p class="pr-4">Audio Tracks</p>
-      <span class="bg-black-400 rounded-xl py-1 px-2 text-sm font-mono">{{ tracks.length }}</span>
-      <div class="flex-grow" />
-      <nuxt-link :to="`/audiobook/${audiobookId}/edit`" class="mr-4">
-        <ui-btn small color="primary">Edit Track Order</ui-btn>
-      </nuxt-link>
-      <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showTracks ? 'transform rotate-180' : ''">
-        <span class="material-icons text-4xl">expand_more</span>
-      </div>
-    </div>
-    <transition name="slide">
-      <div class="w-full" v-show="showTracks">
-        <table class="text-sm tracksTable">
-          <tr class="font-book">
-            <th>#</th>
-            <th class="text-left">Filename</th>
-            <th class="text-left">Size</th>
-            <th class="text-left">Duration</th>
-          </tr>
-          <template v-for="track in tracks">
-            <tr :key="track.index">
-              <td class="text-center">
-                <p>{{ track.index }}</p>
-              </td>
-              <td class="font-book">
-                {{ track.filename }}
-              </td>
-              <td class="font-mono">
-                {{ $bytesPretty(track.size) }}
-              </td>
-              <td class="font-mono">
-                {{ $secondsToTimestamp(track.duration) }}
-              </td>
-            </tr>
-          </template>
-        </table>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    tracks: {
-      type: Array,
-      default: () => []
-    },
-    audiobookId: String
-  },
-  data() {
-    return {
-      showTracks: false
-    }
-  },
-  computed: {},
-  methods: {
-    clickBar() {
-      this.showTracks = !this.showTracks
-    }
-  },
-  mounted() {}
-}
-</script>