Add: Experimental collections add/remove & db #151

client/pages/audiobook/_id/index.vue

@@ -113,6 +113,10 @@
               <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="isRead" class="mx-0.5" @click="toggleRead" />
             </ui-tooltip>
 
+            <ui-tooltip v-if="showExperimentalFeatures" text="Collections" direction="top">
+              <ui-icon-btn icon="collections_bookmark" class="mx-0.5" outlined @click="collectionsClick" />
+            </ui-tooltip>
+
             <ui-btn v-if="isDeveloperMode" class="mx-2" @click="openRssFeed">Open RSS Feed</ui-btn>
           </div>
 
@@ -433,6 +437,10 @@ export default {
     downloadClick() {
       this.$store.commit('showEditModalOnTab', { audiobook: this.audiobook, tab: 'download' })
     },
+    collectionsClick() {
+      this.$store.commit('setSelectedAudiobook', this.audiobook)
+      this.$store.commit('globals/setShowUserCollectionsModal', true)
+    },
     resize() {
       this.windowWidth = window.innerWidth
     }

client/pages/collection/_id.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="page-wrapper" class="bg-bg page overflow-hidden" :class="streamAudiobook ? 'streaming' : ''">
+    <div class="w-full h-full overflow-y-auto px-2 py-6 md:p-8">
+      <div class="flex flex-col sm:flex-row max-w-6xl mx-auto">
+        <div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 208px">
+          <div class="relative" style="height: fit-content">
+            <cards-group-cover :name="collectionName" type="collection" :book-items="bookItems" :width="176" :height="176" />
+          </div>
+        </div>
+        <div class="flex-grow px-2 py-6 md:py-0 md:px-10">
+          <div class="flex">
+            <div class="mb-4">
+              <div class="flex sm:items-end flex-col sm:flex-row">
+                <h1 class="text-2xl md:text-3xl font-sans">
+                  {{ collectionName }}
+                </h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, params, app, redirect, route }) {
+    if (!store.state.user.user) {
+      return redirect(`/login?redirect=${route.path}`)
+    }
+    var collection = await app.$axios.$get(`/api/collection/${params.id}`).catch((error) => {
+      console.error('Failed', error)
+      return false
+    })
+    if (!collection) {
+      return redirect('/')
+    }
+    store.commit('user/addUpdateCollection', collection)
+    return {
+      collection
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    streamAudiobook() {
+      return this.$store.state.streamAudiobook
+    },
+    bookItems() {
+      return this.collection.books || []
+    },
+    collectionName() {
+      return this.collection.name || ''
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/pages/library/_library/bookshelf/_id.vue

@@ -47,6 +47,10 @@ export default {
     var libraryPage = params.id || ''
     store.commit('audiobooks/setLibraryPage', libraryPage)
 
+    if (libraryPage === 'collections') {
+      store.dispatch('user/loadUserCollections')
+    }
+
     return {
       id: libraryPage,
       libraryId,