Update:New library icons and picker using icon font

client/assets/absicons.css

@@ -45,7 +45,7 @@
   content: "\e900";
 }
 
-.icon-database-2:before {
+.icon-database:before {
   content: "\e906";
 }
 
@@ -69,7 +69,7 @@
   content: "\e91e";
 }
 
-.icon-book:before {
+.icon-book-1:before {
   content: "\e91f";
 }
 

client/components/tables/library/LibraryItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
     <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <widgets-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
+    <ui-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" font-size="xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
     <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
       <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
     </svg>

client/components/ui/LibrariesDropdown.vue

@@ -2,17 +2,17 @@
   <div v-if="currentLibrary" class="relative h-8 max-w-52 md:min-w-32" v-click-outside="clickOutsideObj">
     <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
       <div class="flex items-center justify-center sm:justify-start">
-        <widgets-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
+        <ui-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
         <span class="hidden sm:block truncate">{{ currentLibrary.name }}</span>
       </div>
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
         <template v-for="library in librariesFiltered">
-          <li :key="library.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="selectLibrary(library)">
+          <li :key="library.id" class="text-gray-400 hover:text-white select-none relative py-2 cursor-pointer hover:bg-black-400" role="option" @click="selectLibrary(library)">
             <div class="flex items-center px-2">
-              <widgets-library-icon :icon="library.icon" class="mr-1.5 text-gray-400" />
+              <ui-library-icon :icon="library.icon" class="mr-1.5" />
               <span class="font-normal block truncate font-sans text-sm">{{ library.name }}</span>
             </div>
           </li>

client/components/ui/LibraryIcon.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :class="`h-${size} w-${size} min-w-${size} text-${fontSize}`" class="flex items-center justify-center">
+    <span class="abs-icons" :class="`icon-${iconToUse}`"></span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      default: 'audiobookshelf'
+    },
+    fontSize: {
+      type: String,
+      default: 'lg'
+    },
+    size: {
+      type: Number,
+      default: 5
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    iconToUse() {
+      return this.icons.includes(this.icon) ? this.icon : 'audiobookshelf'
+    },
+    icons() {
+      return this.$store.state.globals.libraryIcons
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/ui/MediaIconPicker.vue

@@ -3,19 +3,19 @@
     <p class="text-sm font-semibold">{{ label }}</p>
 
     <button type="button" :disabled="disabled" class="relative h-full w-full border border-gray-600 rounded shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer bg-primary text-gray-100 hover:text-gray-200" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
-      <span class="flex items-center">
+      <ui-library-icon :icon="selectedItem" />
-        <widgets-library-icon :icon="selected" />
-      </span>
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+      <div v-show="showMenu" class="absolute -left-[4.5rem] z-10 -mt-px bg-primary border border-black-200 shadow-lg max-h-56 w-48 rounded-md py-1 overflow-auto focus:outline-none sm:text-sm">
-        <template v-for="type in types">
+        <div class="flex justify-center items-center flex-wrap">
-          <li :key="type.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400 flex justify-center" id="listbox-option-0" role="option" @click="select(type)">
+          <template v-for="icon in icons">
-            <widgets-library-icon :icon="type.id" />
+            <div :key="icon" class="p-2">
-          </li>
+              <span class="abs-icons text-xl text-white text-opacity-80 hover:text-opacity-100 cursor-pointer" :class="`icon-${icon}`" @click="select(icon)"></span>
-        </template>
+            </div>
-      </ul>
+          </template>
+        </div>
+      </div>
     </transition>
   </div>
 </template>
@@ -37,29 +37,7 @@ export default {
         events: ['mousedown'],
         isActive: true
       },
-      showMenu: false,
+      showMenu: false
-      types: [
-        {
-          id: 'database',
-          name: 'Database'
-        },
-        {
-          id: 'audiobook',
-          name: 'Audiobooks'
-        },
-        {
-          id: 'book',
-          name: 'Books'
-        },
-        {
-          id: 'podcast',
-          name: 'Podcasts'
-        },
-        {
-          id: 'comic',
-          name: 'Comics'
-        }
-      ]
     }
   },
   computed: {
@@ -71,11 +49,11 @@ export default {
         this.$emit('input', val)
       }
     },
-    selectedItem() {
+    icons() {
-      return this.types.find((t) => t.id === this.selected)
+      return this.$store.state.globals.libraryIcons
     },
-    selectedName() {
+    selectedItem() {
-      return this.selectedItem ? this.selectedItem.name : 'Database'
+      return this.icons.find((i) => i === this.selected) || 'audiobookshelf'
     }
   },
   methods: {
@@ -86,9 +64,9 @@ export default {
     clickedOutside() {
       this.showMenu = false
     },
-    select(type) {
+    select(icon) {
       if (this.disabled) return
-      this.selected = type.id
+      this.selected = icon
       this.showMenu = false
     }
   },

client/store/globals.js

@@ -28,7 +28,8 @@ export const state = () => ({
       text: 'YYYY-MM-DD',
       value: 'yyyy-MM-dd'
     }
-  ]
+  ],
+  libraryIcons: ['database', 'audiobookshelf', 'books-1', 'books-2', 'book-1', 'microphone-1', 'microphone-3', 'radio', 'podcast', 'rss', 'headphones', 'music', 'file-picture', 'rocket', 'power', 'star', 'heart']
 })
 
 export const getters = {

server/objects/Library.js

@@ -8,7 +8,7 @@ class Library {
     this.name = null
     this.folders = []
     this.displayOrder = 1
-    this.icon = 'database' // database, podcast, book, audiobook, comic
+    this.icon = 'database'
     this.mediaType = 'book' // book, podcast
     this.provider = 'google'
 
@@ -46,14 +46,15 @@ class Library {
 
     this.createdAt = library.createdAt
     this.lastUpdate = library.lastUpdate
-    this.cleanOldValues() // mediaType changed for v2
+    this.cleanOldValues() // mediaType changed for v2 and icon change for v2.2.2
   }
 
   cleanOldValues() {
-    var availableIcons = ['database', 'audiobook', 'book', 'comic', 'podcast']
+    const availableIcons = ['database', 'audiobookshelf', 'books-1', 'books-2', 'book-1', 'microphone-1', 'microphone-3', 'radio', 'podcast', 'rss', 'headphones', 'music', 'file-picture', 'rocket', 'power', 'star', 'heart']
     if (!availableIcons.includes(this.icon)) {
-      if (this.icon === 'default') this.icon = 'database'
+      if (this.icon === 'audiobook') this.icon = 'audiobookshelf'
-      else if (this.icon.endsWith('s') && availableIcons.includes(this.icon.slice(0, -1))) this.icon = this.icon.slice(0, -1)
+      else if (this.icon === 'book') this.icon = 'books-1'
+      else if (this.icon === 'comic') this.icon = 'file-picture'
       else this.icon = 'database'
     }
     if (!this.mediaType || (this.mediaType !== 'podcast' && this.mediaType !== 'book' && this.mediaType !== 'video')) {