Add: bookshelf list view, add: sort by most recent

components/app/Bookshelf.vue

@@ -3,7 +3,7 @@
     <template v-for="(shelf, index) in groupedBooks">
       <div :key="index" class="border-b border-opacity-10 w-full bookshelfRow py-4 flex justify-around relative">
         <template v-for="audiobook in shelf">
-          <cards-book-card :key="audiobook.id" :audiobook="audiobook" :width="cardWidth" :user-progress="userAudiobooks[audiobook.id]" :local-user-progress="localUserAudiobooks[audiobook.id]" />
+          <cards-book-card :key="audiobook.id" :audiobook="audiobook" :width="cardWidth" />
         </template>
         <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
       </div>
@@ -41,19 +41,13 @@ export default {
       return this.$store.getters['user/getFilterOrderKey']
     },
     hasFilters() {
-      return this.$store.getters['user/getUserSetting']('filterBy') !== 'all'
-    },
-    userAudiobooks() {
-      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
-    },
-    localUserAudiobooks() {
-      return this.$store.state.user.localUserAudiobooks || {}
+      return this.$store.getters['user/getUserSetting']('mobileFilterBy') !== 'all'
     }
   },
   methods: {
     clearFilter() {
       this.$store.dispatch('user/updateUserSettings', {
-        filterBy: 'all'
+        mobileFilterBy: 'all'
       })
     },
     calcShelves() {

components/app/BookshelfList.vue

@@ -0,0 +1,138 @@
+<template>
+  <div id="bookshelf" ref="wrapper" class="w-full overflow-y-auto">
+    <template v-for="(ab, index) in audiobooks">
+      <div :key="index" class="border-b border-opacity-10 w-full bookshelfRow py-4 px-2 flex relative">
+        <app-bookshelf-list-row :audiobook="ab" :card-width="cardWidth" :page-width="pageWidth" />
+        <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
+      </div>
+    </template>
+    <div v-show="!audiobooks.length" class="w-full py-16 text-center text-xl">
+      <div class="py-4">No Audiobooks</div>
+      <ui-btn v-if="hasFilters" @click="clearFilter">Clear Filter</ui-btn>
+    </div>
+    <div v-show="isLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-70 z-20">
+      <div class="py-4">Loading...</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currFilterOrderKey: null,
+      pageWidth: 0,
+      audiobooks: []
+    }
+  },
+  computed: {
+    isLoading() {
+      return this.$store.state.audiobooks.isLoading
+    },
+    cardWidth() {
+      return 75
+    },
+    cardHeight() {
+      return this.cardWidth * 2
+    },
+    contentRowWidth() {
+      return this.pageWidth - 16 - this.cardWidth
+    },
+    filterOrderKey() {
+      return this.$store.getters['user/getFilterOrderKey']
+    },
+    hasFilters() {
+      return this.$store.getters['user/getUserSetting']('mobileFilterBy') !== 'all'
+    }
+  },
+  methods: {
+    clearFilter() {
+      this.$store.dispatch('user/updateUserSettings', {
+        mobileFilterBy: 'all'
+      })
+    },
+    calcShelves() {
+      this.audiobooks = this.$store.getters['audiobooks/getFilteredAndSorted']()
+    },
+    audiobooksUpdated() {
+      this.calcShelves()
+    },
+    init() {
+      if (this.$refs.wrapper) {
+        this.pageWidth = this.$refs.wrapper.clientWidth
+        this.calcShelves()
+      }
+    },
+    resize() {
+      this.init()
+    },
+    settingsUpdated() {
+      if (this.currFilterOrderKey !== this.filterOrderKey) {
+        this.calcShelves()
+      }
+    },
+    async loadAudiobooks() {
+      var currentLibrary = await this.$localStore.getCurrentLibrary()
+      if (currentLibrary) {
+        this.$store.commit('libraries/setCurrentLibrary', currentLibrary.id)
+      }
+      this.$store.dispatch('audiobooks/load')
+    },
+    socketConnected(isConnected) {
+      if (isConnected) {
+        console.log('Connected - Load from server')
+        this.loadAudiobooks()
+      } else {
+        console.log('Disconnected - Reset to local storage')
+        this.$store.commit('audiobooks/reset')
+        this.$store.dispatch('audiobooks/useDownloaded')
+        // this.calcShelves()
+        // this.$store.dispatch('downloads/loadFromStorage')
+      }
+    }
+  },
+  mounted() {
+    this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
+    this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
+    window.addEventListener('resize', this.resize)
+
+    if (!this.$server) {
+      console.error('Bookshelf mounted no server')
+      return
+    }
+
+    this.$server.on('connected', this.socketConnected)
+    if (this.$server.connected) {
+      this.loadAudiobooks()
+    } else {
+      console.log('Bookshelf - Server not connected using downloaded')
+    }
+    this.init()
+  },
+  beforeDestroy() {
+    this.$store.commit('audiobooks/removeListener', 'bookshelf')
+    this.$store.commit('user/removeSettingsListener', 'bookshelf')
+    window.removeEventListener('resize', this.resize)
+
+    if (!this.$server) {
+      console.error('Bookshelf beforeDestroy no server')
+      return
+    }
+    this.$server.off('connected', this.socketConnected)
+  }
+}
+</script>
+
+<style>
+#bookshelf {
+  height: calc(100% - 48px);
+}
+.bookshelfRow {
+  background-image: url(/wood_panels.jpg);
+}
+.bookshelfDivider {
+  background: rgb(149, 119, 90);
+  background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
+  box-shadow: 2px 14px 8px #111111aa;
+}
+</style>

components/app/BookshelfListRow.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="w-full h-full flex">
+    <cards-book-card :audiobook="audiobook" :width="cardWidth" class="self-end" />
+    <div class="relative px-2" :style="{ width: contentRowWidth + 'px' }">
+      <div class="flex">
+        <nuxt-link :to="`/audiobook/${audiobook.id}`">
+          <p class="leading-6" style="font-size: 1.1rem">{{ audiobook.book.title }}</p>
+        </nuxt-link>
+        <div class="flex-grow" />
+        <div class="flex items-center">
+          <!-- <button class="mx-1" @click="editAudiobook(ab)">
+                <span class="material-icons text-icon pb-px">edit</span>
+              </button> -->
+          <button v-if="!isPlaying" class="mx-1 rounded-full w-6 h-6" @click="playAudiobook">
+            <span class="material-icons">play_arrow</span>
+          </button>
+        </div>
+      </div>
+      <p v-if="audiobook.book.subtitle" class="text-gray-200 leading-6 truncate" style="font-size: 0.9rem">{{ audiobook.book.subtitle }}</p>
+      <p class="text-sm text-gray-200">by {{ audiobook.book.author }}</p>
+      <div class="flex items-center py-1">
+        <p class="text-xs text-gray-300">{{ $elapsedPretty(audiobook.duration) }}</p>
+        <span class="px-3 text-xs text-gray-300">•</span>
+        <p class="text-xs text-gray-300 font-mono">{{ $bytesPretty(audiobook.size, 0) }}</p>
+        <span class="px-3 text-xs text-gray-300">•</span>
+        <p class="text-xs text-gray-300">{{ numTracks }} tracks</p>
+      </div>
+      <div class="flex">
+        <div v-if="userProgressPercent && !userIsRead" class="w-min my-1">
+          <div class="bg-primary bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">Progress: {{ Math.floor(userProgressPercent * 100) }}%</div>
+        </div>
+        <div v-if="isDownloadPlayable" class="w-min my-1 mx-1">
+          <div class="bg-success bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">Downloaded</div>
+        </div>
+        <div v-else-if="isDownloading" class="w-min my-1 mx-1">
+          <div class="bg-warning bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">Downloading...</div>
+        </div>
+        <div v-if="isPlaying" class="w-min my-1 mx-1">
+          <div class="bg-info bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">{{ isStreaming ? 'Streaming' : 'Playing' }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    },
+    cardWidth: {
+      type: Number,
+      default: 75
+    },
+    pageWidth: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    audiobookId() {
+      return this.audiobook.id
+    },
+    mostRecentUserProgress() {
+      return this.$store.getters['user/getMostRecentAudiobookProgress'](this.audiobookId)
+    },
+    userProgressPercent() {
+      return this.mostRecentUserProgress ? this.mostRecentUserProgress.progress || 0 : 0
+    },
+    userIsRead() {
+      return this.mostRecentUserProgress ? !!this.mostRecentUserProgress.isRead : false
+    },
+    contentRowWidth() {
+      return this.pageWidth - 16 - this.cardWidth
+    },
+    isDownloading() {
+      return this.downloadObj ? this.downloadObj.isDownloading : false
+    },
+    isDownloadPreparing() {
+      return this.downloadObj ? this.downloadObj.isPreparing : false
+    },
+    isDownloadPlayable() {
+      return this.downloadObj && !this.isDownloading && !this.isDownloadPreparing
+    },
+    downloadedCover() {
+      return this.downloadObj ? this.downloadObj.cover : null
+    },
+    downloadObj() {
+      return this.$store.getters['downloads/getDownload'](this.audiobookId)
+    },
+    isStreaming() {
+      return this.$store.getters['isAudiobookStreaming'](this.audiobookId)
+    },
+    isPlaying() {
+      return this.$store.getters['isAudiobookPlaying'](this.audiobookId)
+    },
+    numTracks() {
+      if (this.audiobook.tracks) return this.audiobook.tracks.length
+      return this.audiobook.numTracks || 0
+    }
+  },
+  methods: {
+    playAudiobook() {
+      if (this.isPlaying) {
+        return
+      }
+      this.$store.commit('setPlayOnLoad', true)
+      if (!this.isDownloadPlayable) {
+        // Stream
+        console.log('[PLAYCLICK] Set Playing STREAM ' + this.audiobook.book.title)
+        this.$store.commit('setStreamAudiobook', this.audiobook)
+        this.$server.socket.emit('open_stream', this.audiobook.id)
+      } else {
+        // Local
+        console.log('[PLAYCLICK] Set Playing Local Download ' + this.audiobook.book.title)
+        this.$store.commit('setPlayingDownload', this.downloadObj)
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

components/app/StreamContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full p-4 pointer-events-none fixed bottom-0 left-0 right-0 z-20">
-    <div v-if="audiobook" class="w-full bg-primary absolute bottom-0 left-0 right-0 z-50 p-2 pointer-events-auto" @click.stop @mousedown.stop @mouseup.stop>
+    <div v-if="audiobook" id="streamContainer" class="w-full bg-primary absolute bottom-0 left-0 right-0 z-50 p-2 pointer-events-auto" @click.stop @mousedown.stop @mouseup.stop>
       <div class="pl-16 pr-2 flex items-center pb-2">
         <div>
           <p class="px-2">{{ title }}</p>
@@ -12,7 +12,7 @@
         </div>
         <span class="material-icons" @click="cancelStream">close</span>
       </div>
-      <div class="absolute left-2 -top-10">
+      <div class="absolute left-2 -top-10 bookCoverWrapper">
         <cards-book-cover :audiobook="audiobook" :download-cover="downloadedCover" :width="64" />
       </div>
       <audio-player-mini ref="audioPlayerMini" :loading="isLoading" @updateTime="updateTime" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @hook:mounted="audioPlayerMounted" />
@@ -379,4 +379,13 @@ export default {
     this.$store.commit('removeStreamListener')
   }
 }
-</script>
+</script>
+
+<style>
+.bookCoverWrapper {
+  box-shadow: 3px -2px 5px #00000066;
+}
+#streamContainer {
+  box-shadow: 0px -8px 8px #11111177;
+}
+</style>

components/cards/BookCard.vue

@@ -17,9 +17,9 @@
             <span class="material-icons text-success" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">download_done</span>
           </div>
 
-          <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>
+          <div class="absolute bottom-0 left-0 h-1.5 shadow-sm" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
 
-          <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+          <div v-if="showError" :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem', bottom: sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300 absolute left-0">
             <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
           </div>
         </div>
@@ -35,14 +35,6 @@ export default {
       type: Object,
       default: () => null
     },
-    userProgress: {
-      type: Object,
-      default: () => null
-    },
-    localUserProgress: {
-      type: Object,
-      default: () => null
-    },
     width: {
       type: Number,
       default: 140
@@ -87,16 +79,17 @@ export default {
       return this.orderBy === 'book.authorLF' ? this.authorLF : this.authorFL
     },
     orderBy() {
-      return this.$store.getters['user/getUserSetting']('orderBy')
+      return this.$store.getters['user/getUserSetting']('mobileOrderBy')
     },
     mostRecentUserProgress() {
-      if (!this.localUserProgress) return this.userProgress
-      if (!this.userProgress) return this.localUserProgress
-      return this.localUserProgress.lastUpdate > this.userProgress.lastUpdate ? this.localUserProgress : this.userProgress
+      return this.$store.getters['user/getMostRecentAudiobookProgress'](this.audiobookId)
     },
     userProgressPercent() {
       return this.mostRecentUserProgress ? this.mostRecentUserProgress.progress || 0 : 0
     },
+    userIsRead() {
+      return this.mostRecentUserProgress ? !!this.mostRecentUserProgress.isRead : false
+    },
     showError() {
       return this.hasMissingParts || this.hasInvalidParts
     },
@@ -110,7 +103,6 @@ export default {
       return this.download ? this.download.cover : null
     },
     download() {
-      return null
       return this.$store.getters['downloads/getDownloadIfReady'](this.audiobookId)
     },
     errorText() {

components/modals/OrderModal.vue

@@ -54,6 +54,10 @@ export default {
         {
           text: 'Size',
           value: 'size'
+        },
+        {
+          text: 'Last Read',
+          value: 'recent'
         }
       ]
     }
@@ -89,6 +93,7 @@ export default {
       if (this.selected === val) {
         this.selectedDesc = !this.selectedDesc
       } else {
+        if (val === 'recent' || val === 'addedAt') this.selectedDesc = true // Progress defaults to descending
         this.selected = val
       }
       this.show = false