Minor UI fixes, hide cast button when not connected to server, update sort options

android/app/src/main/java/com/audiobookshelf/app/MainActivity.kt

@@ -53,19 +53,18 @@ class MainActivity : BridgeActivity() {
   }
 
   public override fun onCreate(savedInstanceState: Bundle?) {
-    StrictMode.setThreadPolicy(StrictMode.ThreadPolicy.Builder()
-      .detectDiskReads()
-      .detectDiskWrites().detectAll()
-      .detectNetwork() // or .detectAll() for all detectable problems
-      .penaltyLog()
-      .build())
-    StrictMode.setVmPolicy(VmPolicy.Builder()
-      .detectLeakedSqlLiteObjects()
-      .detectLeakedClosableObjects()
-      .penaltyLog()
-//      .penaltyDeath()
-      .build())
-
+    // TODO: Optimize using strict mode logs
+//    StrictMode.setThreadPolicy(StrictMode.ThreadPolicy.Builder()
+//      .detectDiskReads()
+//      .detectDiskWrites().detectAll()
+//      .detectNetwork() // or .detectAll() for all detectable problems
+//      .penaltyLog()
+//      .build())
+//    StrictMode.setVmPolicy(VmPolicy.Builder()
+//      .detectLeakedSqlLiteObjects()
+//      .detectLeakedClosableObjects()
+//      .penaltyLog()
+//      .build())
 
     super.onCreate(savedInstanceState)
 

components/app/Appbar.vue

@@ -17,7 +17,8 @@
 
       <widgets-download-progress-indicator />
 
-      <div v-show="isCastAvailable" class="mx-2 cursor-pointer">
+      <!-- Must be connected to a server to cast, only supports media items on server -->
+      <div v-show="isCastAvailable && user" class="mx-2 cursor-pointer">
         <span class="material-icons" :class="isCasting ? 'text-success' : ''" style="font-size: 1.75rem" @click="castClick">cast</span>
       </div>
 

components/cards/LazyListBookCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="rounded-sm z-10 cursor-pointer py-1" @click="clickCard">
-    <div class="h-full flex">
+    <div class="h-full flex relative">
       <div class="w-20 h-20 relative" style="min-width: 80px; max-width: 80px">
         <!-- When cover image does not fill -->
         <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
@@ -13,10 +13,6 @@
 
         <!-- No progress shown for collapsed series or podcasts in library -->
         <div v-if="!isPodcast && !collapsedSeries" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 80 * userProgressPercent + 'px' }"></div>
-
-        <div v-if="localLibraryItem || isLocal" class="absolute top-0 right-0 z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-          <span class="material-icons text-2xl text-success">{{ isLocalOnly ? 'task' : 'download_done' }}</span>
-        </div>
       </div>
       <div class="flex-grow px-2">
         <p class="whitespace-normal" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">
@@ -25,6 +21,10 @@
         <p class="truncate text-gray-400" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">by {{ displayAuthor }}</p>
         <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
       </div>
+
+      <div v-if="localLibraryItem || isLocal" class="absolute top-0 right-0 z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+        <span class="material-icons text-2xl text-success">{{ isLocalOnly ? 'task' : 'download_done' }}</span>
+      </div>
     </div>
   </div>
 </template>

components/covers/BookCover.vue

@@ -5,7 +5,8 @@
         <div class="absolute cover-bg" ref="coverBg" />
       </div>
 
-      <img v-if="fullCoverUrl" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
+      <img v-if="fullCoverUrl" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg && !hasCover ? 'object-contain' : 'object-fill'" />
+
       <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
         <p class="font-book text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
         <div class="absolute top-2 right-2">

components/modals/OrderModal.vue

@@ -46,6 +46,14 @@ export default {
         {
           text: 'Size',
           value: 'size'
+        },
+        {
+          text: 'File Birthtime',
+          value: 'birthtimeMs'
+        },
+        {
+          text: 'File Modified',
+          value: 'mtimeMs'
         }
       ],
       podcastItems: [

pages/bookshelf/index.vue

@@ -75,7 +75,7 @@ export default {
           id: 'local-books',
           label: 'Local Books',
           type: 'book',
-          entities: books
+          entities: books.slice(0, 10)
         })
       }
       if (podcasts.length) {
@@ -83,7 +83,7 @@ export default {
           id: 'local-podcasts',
           label: 'Local Podcasts',
           type: 'podcast',
-          entities: podcasts
+          entities: podcasts.slice(0, 10)
         })
       }
 

pages/item/_id.vue

@@ -4,7 +4,7 @@
       <div class="w-32">
         <div class="relative">
           <covers-book-cover :library-item="libraryItem" :width="128" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-          <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm z-10" :style="{ width: 128 * progressPercent + 'px' }"></div>
+          <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1.5 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 128 * progressPercent + 'px' }"></div>
         </div>
       </div>
       <div class="flex-grow px-3">