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

client/store/scanners.js

@@ -17,6 +17,12 @@ export const state = () => ({
       text: 'iTunes',
       value: 'itunes'
     }
+  ],
+  podcastProviders: [
+    {
+      text: 'iTunes',
+      value: 'itunes'
+    }
   ]
 })
 

server/objects/Library.js

@@ -7,8 +7,7 @@ class Library {
     this.name = null
     this.folders = []
     this.displayOrder = 1
-    this.icon = 'database'
-    this.mediaCategory = 'default' // default, podcast, book, audiobook, comic
+    this.icon = 'database' // database, podcast, book, audiobook, comic
     this.mediaType = 'book' // book, podcast
     this.provider = 'google'
     this.disableWatcher = false
@@ -33,30 +32,24 @@ class Library {
     this.folders = (library.folders || []).map(f => new Folder(f))
     this.displayOrder = library.displayOrder || 1
     this.icon = library.icon || 'database'
-    this.mediaCategory = library.mediaCategory || library.mediaType || 'default' // mediaCategory used to be mediaType
     this.mediaType = library.mediaType
     this.provider = library.provider || 'google'
     this.disableWatcher = !!library.disableWatcher
 
     this.createdAt = library.createdAt
     this.lastUpdate = library.lastUpdate
-    this.cleanOldValues() // mediaCategory and mediaType were changed for v2
+    this.cleanOldValues() // mediaType changed for v2
   }
 
   cleanOldValues() {
-    if (this.mediaCategory.endsWith('s')) {
-      this.mediaCategory = this.mediaCategory.slice(0, -1)
-    }
-    var availableCategories = ['default', 'audiobook', 'book', 'comic', 'podcast']
-    if (!availableCategories.includes(this.mediaCategory)) {
-      this.mediaCategory = 'default'
-    }
-    if (!availableCategories.includes(this.icon)) {
-      this.icon = this.mediaCategory
+    var availableIcons = ['database', 'audiobook', 'book', 'comic', 'podcast']
+    if (!availableIcons.includes(this.icon)) {
+      if (this.icon === 'default') this.icon = 'database'
+      else if (this.icon.endsWith('s') && availableIcons.includes(this.icon.slice(0, -1))) this.icon = this.icon.slice(0, -1)
+      else this.icon = 'database'
     }
     if (!this.mediaType || (this.mediaType !== 'podcast' && this.mediaType !== 'book')) {
-      if (this.mediaCategory === 'podcast') this.mediaType = 'podcast'
-      else this.mediaType = 'book'
+      this.mediaType = 'book'
     }
   }
 
@@ -67,7 +60,6 @@ class Library {
       folders: (this.folders || []).map(f => f.toJSON()),
       displayOrder: this.displayOrder,
       icon: this.icon,
-      mediaCategory: this.mediaCategory,
       mediaType: this.mediaType,
       provider: this.provider,
       disableWatcher: this.disableWatcher,
@@ -95,7 +87,6 @@ class Library {
     }
     this.displayOrder = data.displayOrder || 1
     this.icon = data.icon || 'database'
-    this.mediaCategory = data.mediaCategory || 'default'
     this.mediaType = data.mediaType || 'book'
     this.disableWatcher = !!data.disableWatcher
     this.createdAt = Date.now()
@@ -105,7 +96,7 @@ class Library {
   update(payload) {
     var hasUpdates = false
 
-    var keysToCheck = ['name', 'provider', 'mediaCategory', 'mediaType', 'icon']
+    var keysToCheck = ['name', 'provider', 'mediaType', 'icon']
     keysToCheck.forEach((key) => {
       if (payload[key] && payload[key] !== this[key]) {
         this[key] = payload[key]

server/utils/dbMigration.js

@@ -10,6 +10,7 @@ const Logger = require('../Logger')
 const LegacyAudiobook = require('../objects/legacy/Audiobook')
 const UserAudiobookData = require('../objects/legacy/UserAudiobookData')
 
+const Library = require('../objects/Library')
 const LibraryItem = require('../objects/LibraryItem')
 const Book = require('../objects/mediaTypes/Book')
 
@@ -384,6 +385,25 @@ function cleanSessionObj(db, userListeningSession) {
 async function migrateUserData(db) {
   Logger.info(`==== Starting User migration ====`)
 
+  // Libraries with previous mediaType of "podcast" moved to "book"
+  //   because migrating those items to podcast objects will be a nightmare
+  //   users will need to create a new library for podcasts
+  var availableIcons = ['database', 'audiobook', 'book', 'comic', 'podcast']
+  const libraries = await db.librariesDb.select((result) => (result.mediaType != 'book' || !availableIcons.includes(result.icon)))
+    .then((results) => results.data.map(lib => new Library(lib)))
+  if (!libraries.length) {
+    Logger.info('[dbMigration] No libraries found needing migration')
+  } else {
+    for (const library of libraries) {
+      Logger.info(`>> Migrating library "${library.name}" with media type "${library.mediaType}"`)
+      await db.librariesDb.update((record) => record.id === library.id, () => library).then(() => true).catch((error) => {
+        Logger.error(`[dbMigration] Update library failed: ${error}`)
+        return false
+      })
+    }
+  }
+
+
   const userObjects = await db.usersDb.select((result) => result.audiobooks != undefined).then((results) => results.data)
   if (!userObjects.length) {
     Logger.warn('[dbMigration] No users found needing migration')