Add:Experimental change bookshelf texture #186

client/components/app/Appbar.vue

@@ -133,6 +133,9 @@ export default {
     }
   },
   methods: {
+    toggleBookshelfTexture() {
+      this.$store.dispatch('setBookshelfTexture', 'wood2.png')
+    },
     async back() {
       var popped = await this.$store.dispatch('popRoute')
       if (popped) this.$store.commit('setIsRoutingBack', true)

client/components/app/BookShelf.vue

@@ -2,13 +2,17 @@
   <div id="bookshelf" class="overflow-hidden relative block max-h-full">
     <div ref="wrapper" class="h-full w-full relative" :class="isGridMode ? 'overflow-y-scroll' : 'overflow-hidden'">
       <!-- Cover size widget -->
-      <div v-show="!isSelectionMode && isGridMode" class="fixed bottom-2 right-4 z-30">
+      <div v-show="!isSelectionMode && isGridMode" class="fixed bottom-4 right-4 z-30">
         <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
           <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize">remove</span>
           <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
           <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize">add</span>
         </div>
       </div>
+      <!-- Experimental Bookshelf Texture -->
+      <div v-show="showExperimentalFeatures" class="fixed bottom-4 right-28 z-40">
+        <div class="rounded-full py-1 bg-primary hover:bg-bg cursor-pointer px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent @click="showBookshelfTextureModal"><p class="text-sm py-0.5">Texture</p></div>
+      </div>
 
       <div v-if="!audiobooks.length" class="w-full flex flex-col items-center justify-center py-12">
         <p class="text-center text-2xl font-book mb-4 py-4">Your Audiobookshelf is empty!</p>
@@ -110,6 +114,9 @@ export default {
     }
   },
   computed: {
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     isGridMode() {
       return this.viewMode === 'grid'
     },
@@ -226,6 +233,9 @@ export default {
     }
   },
   methods: {
+    showBookshelfTextureModal() {
+      this.$store.commit('globals/setShowBookshelfTextureModal', true)
+    },
     editBook(audiobook) {
       var bookIds = this.entities.map((e) => e.id)
       this.$store.commit('setBookshelfBookIds', bookIds)
@@ -455,7 +465,7 @@ export default {
 
 <style>
 .bookshelfRow {
-  background-image: url(/wood_panels.jpg);
+  background-image: var(--bookshelf-texture-img);
 }
 .bookshelfDivider {
   background: rgb(149, 119, 90);

client/components/app/BookShelfCategorized.vue

@@ -1,13 +1,17 @@
 <template>
   <div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-scroll relative">
     <!-- Cover size widget -->
-    <div class="fixed bottom-2 right-4 z-40">
+    <div class="fixed bottom-4 right-4 z-40">
       <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
         <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize">remove</span>
         <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
         <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize">add</span>
       </div>
     </div>
+    <!-- Experimental Bookshelf Texture -->
+    <div v-show="showExperimentalFeatures" class="fixed bottom-4 right-28 z-40">
+      <div class="rounded-full py-1 bg-primary hover:bg-bg cursor-pointer px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent @click="showBookshelfTextureModal"><p class="text-sm py-0.5">Texture</p></div>
+    </div>
 
     <div v-if="!audiobooks.length" class="w-full flex flex-col items-center justify-center py-12">
       <p class="text-center text-2xl font-book mb-4 py-4">Your Audiobookshelf is empty!</p>
@@ -39,6 +43,9 @@ export default {
     }
   },
   computed: {
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     userAudiobooks() {
       return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
     },
@@ -109,6 +116,9 @@ export default {
     }
   },
   methods: {
+    showBookshelfTextureModal() {
+      this.$store.commit('globals/setShowBookshelfTextureModal', true)
+    },
     increaseSize() {
       this.selectedSizeIndex = Math.min(this.availableSizes.length - 1, this.selectedSizeIndex + 1)
       this.resize()

client/components/app/BookShelfRow.vue

@@ -124,7 +124,12 @@ export default {
 .categorizedBookshelfRow {
   scroll-behavior: smooth;
   width: calc(100vw - 80px);
-  background-image: url(/wood_panels.jpg);
+
+  /* background-color: rgb(214, 116, 36); */
+  background-image: var(--bookshelf-texture-img);
+  /* background-position: center; */
+  /* background-size: contain; */
+  background-repeat: repeat-x;
 }
 @media (max-width: 768px) {
   .categorizedBookshelfRow {

client/components/modals/BookshelfTextureModal.vue

@@ -0,0 +1,68 @@
+<template>
+  <modals-modal v-model="show" name="textures" :width="'40vw'" :height="'unset'" :bg-opacity="10" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Bookshelf Texture</p>
+      </div>
+    </template>
+    <div class="px-4 w-full max-w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300" @mousedown.prevent @mouseup.prevent @mousemove.prevent>
+      <h1 class="text-2xl mb-2">Select a bookshelf texture (For testing only)</h1>
+      <div class="overflow-y-hidden overflow-x-auto">
+        <div class="flex -mx-1">
+          <template v-for="texture in textures">
+            <div :key="texture" class="relative mx-1" style="height: 180px; width: 180px; min-width: 180px" @mousedown.prevent @mouseup.prevent>
+              <img :src="texture" class="h-full object-cover cursor-pointer" @click="setTexture(texture)" />
+              <div v-if="texture === selectedBookshelfTexture" class="absolute top-0 left-0 flex items-center justify-center w-full h-full bg-black bg-opacity-10">
+                <span class="material-icons text-4xl text-success">check</span>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <!-- <div class="flex pt-4">
+        <div class="flex-grow" />
+        <ui-btn color="success" type="submit">Submit</ui-btn>
+      </div> -->
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      textures: ['/textures/wood_default.jpg', '/textures/wood1.png', '/textures/wood2.png', '/textures/wood3.png', '/textures/wood4.png', '/textures/leather1.jpg'],
+      processing: false
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showBookshelfTextureModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowBookshelfTextureModal', val)
+      }
+    },
+    selectedBookshelfTexture() {
+      return this.$store.state.selectedBookshelfTexture
+    }
+  },
+  methods: {
+    init() {},
+    setTexture(img) {
+      this.$store.dispatch('setBookshelfTexture', img)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 items-center justify-center opacity-0 hidden" :class="`z-${zIndex}`">
+  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-opacity-${bgOpacity}`">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
     <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="clickClose">
@@ -40,6 +40,10 @@ export default {
     zIndex: {
       type: Number,
       default: 40
+    },
+    bgOpacity: {
+      type: Number,
+      default: 75
     }
   },
   data() {