Library update migrate to use book mediaType, disable editing mediaType, set icon instead of media category

client/components/modals/libraries/EditLibrary.vue

@@ -7,13 +7,16 @@
 
     <div v-if="!showDirectoryPicker" class="w-full h-full py-4">
       <div class="flex flex-wrap md:flex-nowrap -mx-1">
+        <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
+          <ui-dropdown v-model="mediaType" :items="mediaTypes" label="Media Type" :disabled="!!library" small @input="changedMediaType" />
+        </div>
         <div class="w-full md:flex-grow px-1 py-1 md:py-0">
           <ui-text-input-with-label v-model="name" label="Library Name" />
         </div>
-        <div class="w-1/2 md:w-72 px-1 py-1 md:py-0">
-          <ui-media-category-picker v-model="mediaCategory" />
+        <div class="w-1/5 md:w-18 px-1 py-1 md:py-0">
+          <ui-media-icon-picker v-model="icon" />
         </div>
-        <div class="w-1/2 md:w-72 px-1 py-1 md:py-0">
+        <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
           <ui-dropdown v-model="provider" :items="providers" label="Metadata Provider" small />
         </div>
       </div>
@@ -68,11 +71,22 @@ export default {
     return {
       name: '',
       provider: 'google',
-      mediaCategory: '',
+      icon: '',
       folders: [],
       showDirectoryPicker: false,
       disableWatcher: false,
-      newFolderPath: ''
+      newFolderPath: '',
+      mediaType: null,
+      mediaTypes: [
+        {
+          value: 'book',
+          text: 'Books'
+        },
+        {
+          value: 'podcast',
+          text: 'Podcasts'
+        }
+      ]
     }
   },
   computed: {
@@ -90,9 +104,10 @@ export default {
       var newfolderpaths = this.folderPaths.join(',')
       var origfolderpaths = this.library.folders.map((f) => f.fullPath).join(',')
 
-      return newfolderpaths === origfolderpaths && this.name === this.library.name && this.provider === this.library.provider && this.disableWatcher === this.library.disableWatcher && this.mediaCategory === this.library.mediaCategory && !this.newFolderPath
+      return newfolderpaths === origfolderpaths && this.name === this.library.name && this.provider === this.library.provider && this.disableWatcher === this.library.disableWatcher && this.icon === this.library.icon && !this.newFolderPath
     },
     providers() {
+      if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
       return this.$store.state.scanners.providers
     },
     globalWatcherDisabled() {
@@ -100,6 +115,9 @@ export default {
     }
   },
   methods: {
+    changedMediaType() {
+      this.provider = this.providers[0].value
+    },
     removeFolder(folder) {
       this.folders = this.folders.filter((f) => f.fullPath !== folder.fullPath)
     },
@@ -113,7 +131,8 @@ export default {
       this.provider = this.library ? this.library.provider : 'google'
       this.folders = this.library ? this.library.folders.map((p) => ({ ...p })) : []
       this.disableWatcher = this.library ? !!this.library.disableWatcher : false
-      this.mediaCategory = this.library ? this.library.mediaCategory : 'default'
+      this.icon = this.library ? this.library.icon : 'default'
+      this.mediaType = this.library ? this.library.mediaType : 'book'
       this.showDirectoryPicker = false
     },
     selectFolder(fullPath) {
@@ -144,8 +163,7 @@ export default {
         name: this.name,
         provider: this.provider,
         folders: this.folders,
-        mediaCategory: this.mediaCategory,
-        icon: this.mediaCategory,
+        icon: this.icon,
         disableWatcher: this.disableWatcher
       }
 
@@ -180,8 +198,8 @@ export default {
         name: this.name,
         provider: this.provider,
         folders: this.folders,
-        mediaCategory: this.mediaCategory,
-        icon: this.mediaCategory,
+        icon: this.icon,
+        mediaType: this.mediaType,
         disableWatcher: this.disableWatcher
       }
 

client/components/ui/Dropdown.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="relative w-full" v-click-outside="clickOutsideObj">
-    <p class="text-sm font-semibold">{{ label }}</p>
-    <button type="button" :disabled="disabled" class="relative w-full border border-gray-600 rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" :class="small ? 'h-9' : 'h-10'" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+    <p class="text-sm font-semibold" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
+    <button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
         <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons text-gray-100">expand_more</span>
+        <span class="material-icons">expand_more</span>
       </span>
     </button>
 
@@ -63,6 +63,16 @@ export default {
     },
     selectedText() {
       return this.selectedItem ? this.selectedItem.text : ''
+    },
+    buttonClass() {
+      var classes = []
+      if (this.small) classes.push('h-9')
+      else classes.push('h-10')
+
+      if (this.disabled) classes.push('cursor-not-allowed border-gray-600 bg-primary bg-opacity-70 border-opacity-70 text-gray-400')
+      else classes.push('cursor-pointer border-gray-600 bg-primary text-gray-100')
+
+      return classes.join(' ')
     }
   },
   methods: {

client/components/ui/MediaIconPicker.vue

@@ -4,22 +4,15 @@
 
     <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">
-        <widgets-library-icon :icon="selected" class="mr-2" />
-        <span class="block truncate text-sm">{{ selectedName }}</span>
-      </span>
-      <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons text-gray-100">expand_more</span>
+        <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">
         <template v-for="type in types">
-          <li :key="type.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="select(type)">
-            <div class="flex items-center px-3">
-              <widgets-library-icon :icon="type.id" class="mr-2" />
-              <span class="font-normal block truncate font-sans text-sm">{{ type.name }}</span>
-            </div>
+          <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)">
+            <widgets-library-icon :icon="type.id" />
           </li>
         </template>
       </ul>
@@ -34,7 +27,7 @@ export default {
     disabled: Boolean,
     label: {
       type: String,
-      default: 'Media Category'
+      default: 'Icon'
     }
   },
   data() {