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

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: [