Add:Experimental change bookshelf texture #186

client/assets/app.css

@@ -2,6 +2,10 @@
 @import './transitions.css';
 @import './draggable.css';
 
+:root {
+  --bookshelf-texture-img: url(/textures/wood_default.jpg);
+}
+
 .page {
   width: 100%;
   height: calc(100% - 64px);

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() {

client/layouts/default.vue

@@ -9,6 +9,7 @@
     <modals-edit-modal />
     <modals-user-collections-modal />
     <modals-edit-collection-modal />
+    <modals-bookshelf-texture-modal />
     <readers-reader />
   </div>
 </template>

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.6.29",
+  "version": "1.6.30",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {

client/pages/config/index.vue

@@ -58,6 +58,13 @@
       </a>
     </div>
 
+    <div v-if="showExperimentalFeatures" class="h-0.5 bg-primary bg-opacity-30 w-full" />
+
+    <div v-if="showExperimentalFeatures" class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 my-8">
+      <p>Experimental Bookshelf Texture</p>
+      <div class="flex"></div>
+    </div>
+
     <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
 
     <div class="py-12 mb-4 opacity-60 hover:opacity-100">

client/store/globals.js

@@ -3,7 +3,8 @@ export const state = () => ({
   showBatchUserCollectionModal: false,
   showUserCollectionsModal: false,
   showEditCollectionModal: false,
-  selectedCollection: null
+  selectedCollection: null,
+  showBookshelfTextureModal: false
 })
 
 export const getters = {
@@ -29,5 +30,9 @@ export const mutations = {
   setEditCollection(state, collection) {
     state.selectedCollection = collection
     state.showEditCollectionModal = true
+  },
+  setShowBookshelfTextureModal(state, val) {
+    state.showBookshelfTextureModal = val
+    console.log('shopw', val)
   }
 }

client/store/index.js

@@ -20,7 +20,8 @@ export const state = () => ({
   showExperimentalFeatures: false,
   backups: [],
   bookshelfBookIds: [],
-  openModal: null
+  openModal: null,
+  selectedBookshelfTexture: '/textures/wood_default.jpg'
 })
 
 export const getters = {
@@ -69,6 +70,11 @@ export const actions = {
     var last = _history.pop()
     commit('setRouteHistory', _history)
     return last
+  },
+  setBookshelfTexture({ commit, state }, img) {
+    let root = document.documentElement;
+    commit('setBookshelfTexture', img)
+    root.style.setProperty('--bookshelf-texture-img', `url(${img})`);
   }
 }
 
@@ -178,5 +184,8 @@ export const mutations = {
   },
   setOpenModal(state, val) {
     state.openModal = val
+  },
+  setBookshelfTexture(state, val) {
+    state.selectedBookshelfTexture = val
   }
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.6.23",
+  "version": "1.6.29",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.6.29",
+  "version": "1.6.30",
   "description": "Self-hosted audiobook server for managing and playing audiobooks",
   "main": "index.js",
   "scripts": {