fixes for covers in collections and collection paths

Author: KodeStar

components/BookDetails.vue

@@ -3,7 +3,7 @@
     <div class="text pt-3 lg:pt-8 p-8 pb-5 flex flex-col justify-center">
       <div class="lg:hidden"><BreadCrumbs /></div>
       <div class="w-full relative cover-container bg-gray-300 dark:bg-gray-800 justify-center flex items-center rounded-md shadow-inner">
-        <Cover :image="details.cover.path" :path="$route.query.folder" />
+        <Cover :book="book" :path="$route.query.folder" />
       </div>
     </div>
     <div class="text-xl flex justify-center px-8 font-bold">{{ name }}</div>
@@ -72,6 +72,9 @@ export default {
     seek () {
       return this.$store.state.app.book.seek
     },
+    book () {
+      return this.$store.state.app.book
+    },
     hash () {
       return this.$store.getters['app/hash'](this.$route.query.folder)
     },

components/Cover.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="[mini ? 'p-2' : 'p-4']" class="w-full h-full flex justify-center items-center absolute inset-0 ">
-    <img v-if="image" class="block rounded-md max-h-full" :src="displayimage" />
+    <img v-if="book" class="block rounded-md max-h-full" :src="displayimage" />
     <div v-else class="bg-gray-200 dark:bg-gray-800 w-full h-full p-1 relative rounded flex justify-center items-center text-center overflow-hidden">
       <svg class="absolute fill-current text-gray-300 dark:text-gray-860 inset-2 transform top-1/2 rotate-180 opacity-60 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="299.2254999999999 397.8038000000001 401.5409999999997 315.357">
         <path d="M681.4395 530.5928c-7.576-21.18-23.963-33.328-44.96-33.328h-18.151v112.545h18.151c21.275 0 37.716-11.724 45.097-32.154 2.644-7.197 4.042-15.312 4.042-23.47 0-7.84-1.446-16-4.179-23.593m-75.959 135.162c-7.915 8.056-19.048 12.674-30.542 12.674h-149.887c-11.521 0-22.373-4.506-30.57-12.702-8.054-7.915-12.673-19.05-12.673-30.544v-10.081h-20.884v6.767c0 16.855 4.4 31.759 12.705 43.07 8.861 12.406 22.551 20.08 39.548 22.186 3.465.494 7.073.744 10.721.744h152.193c3.651 0 7.258-.25 10.676-.739 17.198-2.114 30.564-9.575 39.732-22.182 8.075-11.192 12.386-25.775 12.538-42.2v-7.646h-20.709v10.081c0 11.407-4.672 22.539-12.848 30.572m-2.589-105.796h-34.725c-3.014 0-5.535-1.517-6.994-4.303l-13.465-22.148-22.213 54.207c-.713 2.139-2.207 3.759-4.265 4.582-.946.405-1.942.61-2.963.61-3.04 0-5.763-1.822-6.945-4.661l-22.973-53.708-24.537 72.2c-.056.167-.113.305-.168.443-.089.222-.177.444-.268.713-.149.449-.573.983-.948 1.456-1.04 1.171-2.14 1.955-3.269 2.33-.882.293-1.788.444-2.695.444-1.081 0-2.116-.217-2.937-.599-.734-.368-1.369-.685-1.814-1.128l-.107-.108-.121-.092c-.841-.657-1.648-1.84-2.224-3.214l-16.72-47.024h-35.441v75.224c0 7.33 2.992 14.526 8.21 19.743 5.219 5.219 12.415 8.21 19.742 8.21h149.887c7.437 0 14.448-2.915 19.744-8.21 5.217-5.217 8.209-12.413 8.209-19.743zm0-74.664c0-7.436-2.915-14.447-8.209-19.74-5.293-5.296-12.305-8.211-19.744-8.211h-39.921c-1.392 0-2.963-.491-4.376-1.388l-66.669-37.071v30.812c0 4.217-3.43 7.647-7.646 7.647h-31.275c-7.33 0-14.527 2.994-19.742 8.211-5.294 5.293-8.21 12.304-8.21 19.74v59.371h40.923c3.481 0 6.413 2.226 7.358 5.735l11.015 30.656 23.847-70.429c1.131-3.13 4.093-5.234 7.373-5.234.81 0 1.618.129 2.349.365 2.055.721 3.794 2.395 4.758 4.561l23.484 55.12 20.858-51.268c.56-1.679 1.688-3.065 3.272-4.014 1.217-.739 2.606-1.128 4.014-1.128 2.677 0 5.094 1.352 6.473 3.628l19.595 32.008h30.473zm-221.083 11.97h-18.153c-20.777 0-37.639 12.459-45.103 33.323-2.639 7.333-4.034 15.493-4.034 23.598 0 8.537 1.31 16.435 3.892 23.457 7.386 20.443 23.878 32.167 45.245 32.167h18.153zm314.203 85.493c-7.253 20.099-21.476 34.198-40.049 39.706l-1.604.476v8.929c0 20.138-5.369 38.127-15.537 52.044-11.508 15.991-28.816 25.811-50.081 28.404-4.197.561-8.452.844-12.649.844h-152.193c-4.196 0-8.45-.283-12.673-.846-21.387-2.624-38.231-12.184-50.065-28.417-10.158-13.902-15.527-31.891-15.527-52.029v-8.973l-1.465-.432c-18.724-5.515-32.942-19.61-40.054-39.735-3.244-8.649-4.889-18.252-4.889-28.543 0-9.727 1.696-19.662 4.9-28.717 9.951-27.644 31.649-43.496 59.53-43.496h18.15l.271-2.135c1.207-9.522 5.612-18.43 12.419-25.099 8.183-8.181 19.035-12.687 30.556-12.687h23.774l-.006-36.062c-.112-1.572.223-3.077.965-4.35 1.413-2.402 3.883-3.836 6.609-3.836 1.354 0 2.688.375 3.876 1.095l76.816 43.153h37.853c11.494 0 22.627 4.618 30.575 12.706 6.79 6.65 11.196 15.558 12.401 25.08l.27 2.135h18.295c27.789 0 49.435 15.852 59.382 43.484 3.209 9.065 4.905 18.999 4.905 28.765.138 9.627-1.508 19.496-4.755 28.536"/>
@@ -14,7 +14,7 @@
 <script>
 export default {
   name: 'Cover',
-  props: ['mini', 'image', 'path'],
+  props: ['mini', 'book', 'path'],
   data () {
     return {
       displayimage: null
@@ -34,7 +34,7 @@ export default {
     }
   },
   watch: {
-    image (to, from) {
+    book (to, from) {
       if (to !== from) {
         if (to !== null) {
           this.getImage()
@@ -49,10 +49,8 @@ export default {
   },
   methods: {
     async getImage () {
-      console.log('cover: this.$fetchOptions()')
-      console.log(this.$fetchOptions())
-      if (this.image) {
-        const src = this.$store.getters['app/getServerUrl'] + 'cover/' + this.image
+      if (this.book) {
+        const src = this.$bookUrl(this.book, this.$store.state.app) + 'cover/' + this.book.cover
         const getcover = await fetch(src, this.$fetchOptions())
         const cover = await getcover.blob()
         const coverUrl = URL.createObjectURL(cover)

components/Player.vue

@@ -4,7 +4,7 @@
       <div @click="closePlayer" class="absolute top-0 right-0 w-8 h-8 rounded-bl flex cursor-pointer justify-center items-center"><i class="fa-thin fa-chevron-down"></i></div>
       <div class="text p-8 pb-5 pt-12 flex justify-center flex-shrink">
         <div class="w-full relative cover-container bg-gray-300 dark:bg-gray-800 justify-center flex items-center rounded-md shadow-inner">
-          <Cover :image="image" :path="$route.query.folder" />
+          <Cover :book="book" :path="$route.query.folder" />
         </div>
       </div>
       <div class="w-full px-8 flex flex-col text-center items-center">
@@ -155,6 +155,9 @@ export default {
     seek () {
       return this.$store.state.app.book.seek
     },
+    book () {
+      return this.$store.state.app.book
+    },
     hash () {
       return this.$store.getters['app/hash'](this.$route.query.folder)
     },

pages/index.vue

@@ -7,7 +7,7 @@
 
           <div v-if="book" class="text w-28 h-28 lg:w-48 lg:h-48 flex justify-center flex-shrink">
             <div class="w-full relative cover-container bg-gray-300 dark:bg-gray-860 justify-center flex items-center rounded-md shadow-inner">
-              <Cover :mini="true" :image="book.cover" :path="book.path" />
+              <Cover :mini="true" :book="book" :path="book.path" />
             </div>
           </div>
 
@@ -25,7 +25,7 @@
 
             <div v-if="book" class="text w-28 h-28 lg:w-48 lg:h-48 flex justify-center flex-shrink">
               <div class="w-full relative cover-container bg-gray-300 dark:bg-gray-860 justify-center flex items-center rounded-md shadow-inner">
-                <Cover :image="book.cover" :path="book.path" />
+                <Cover :book="book" :path="book.path" />
               </div>
             </div>
 
@@ -43,7 +43,7 @@
 
           <div v-if="book" class="text w-28 h-28 lg:w-48 lg:h-48 flex justify-center flex-shrink">
             <div class="w-full relative cover-container bg-gray-300 dark:bg-gray-860 justify-center flex items-center rounded-md shadow-inner">
-              <Cover :image="book.cover" :path="book.path" />
+              <Cover :book="book" :path="book.path" />
             </div>
           </div>
 

plugins/audio.js

@@ -63,4 +63,12 @@ export default ({ app }, inject) => {
       credentials: 'include'
     }
   })
+  inject('bookUrl', (book, state) => {
+    // this needs to be set in app/actions as well because it's not injecting for some reason
+    let url = state.server
+    if (book.collection > 0) {
+      url = new URL(book.collection + '/', state.server).href
+    }
+    return url
+  })
 }

store/app/actions.js

@@ -113,6 +113,9 @@ export /* async */ function selectFolder (context, subfolder) {
   if (context.state.currentCollection > 0) {
     route.query.collection = context.state.currentCollection
   }
+  if (subfolder.collection && subfolder.collection > 0) {
+    route.query.collection = subfolder.collection
+  }
   this.app.router.push(route)
 }
 
@@ -172,6 +175,7 @@ export async function getBookDetails (context, hash) {
 
     book = {
       hash,
+      collection: context.state.currentCollection,
       name: 'Unknown',
       author: 'Unknown',
       description,