Updates to make alt bookshelf view look like the web app

android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt

@@ -25,7 +25,12 @@ data class DeviceSettings(
   companion object {
     // Static method to get default device settings
     fun default():DeviceSettings {
-      return DeviceSettings(false, 10, 10)
+      return DeviceSettings(
+        disableAutoRewind = false,
+        enableAltView = false,
+        jumpBackwardsTime = 10,
+        jumpForwardTime = 10
+      )
     }
   }
 

assets/app.css

@@ -57,11 +57,6 @@ body {
   background-image: url(/wood_panels.jpg);
 }
 
-.altBookshelfRow {
-  background-image: url(/grey_panel.jpg);
-  background-size: cover;
-}
-
 .bookshelfDivider {
   background: rgb(149, 119, 90);
   background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);

components/bookshelf/LazyBookshelf.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="bookshelf" class="w-full max-w-full h-full">
     <template v-for="shelf in totalShelves">
-      <div :key="shelf" class="w-full px-2 relative" :class="showBookshelfListView ? '' : bookshelfRowStyle" :id="`shelf-${shelf - 1}`" :style="{ height: shelfHeight + 'px' }">
+      <div :key="shelf" class="w-full px-2 relative" :class="showBookshelfListView || altViewEnabled ? '' : 'bookshelfRow'" :id="`shelf-${shelf - 1}`" :style="{ height: shelfHeight + 'px' }">
-        <div v-if="!showBookshelfListView" class="w-full absolute bottom-0 left-0 z-30" style="min-height: 16px" :class="[(bookshelfDividerStyle), (`h-${shelfDividerHeightIndex}`)]" />
+        <div v-if="!showBookshelfListView && !altViewEnabled" class="w-full absolute bottom-0 left-0 z-30 bookshelfDivider" style="min-height: 16px" :class="`h-${shelfDividerHeightIndex}`" />
-        <div v-else class="flex border-t border-white border-opacity-10" />
+        <div v-else-if="showBookshelfListView" class="flex border-t border-white border-opacity-10" />
       </div>
     </template>
 
@@ -69,14 +69,6 @@ export default {
     showBookshelfListView() {
       return this.isBookEntity && this.bookshelfListView
     },
-    bookshelfRowStyle() {
-      if (this.altViewEnabled) return 'altBookshelfRow'
-      return 'bookshelfRow'
-    },
-    bookshelfDividerStyle() {
-      if (this.altViewEnabled) return 'altBookshelfDivider'
-      return 'bookshelfDivider'
-    },
     entityName() {
       return this.page
     },
@@ -127,6 +119,10 @@ export default {
     },
     shelfHeight() {
       if (this.showBookshelfListView) return this.entityHeight + 16
+      if (this.altViewEnabled) {
+        var extraTitleSpace = this.isBookEntity ? 80 : 40
+        return this.entityHeight + extraTitleSpace * this.sizeMultiplier
+      }
       return this.entityHeight + 40
     },
     totalEntityCardWidth() {
@@ -135,7 +131,11 @@ export default {
       return this.entityWidth + 24
     },
     altViewEnabled() {
-      return this.$store.getters['getAltViewEnabled'];
+      return this.$store.getters['getAltViewEnabled']
+    },
+    sizeMultiplier() {
+      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      return this.entityWidth / baseSize
     }
   },
   methods: {

components/bookshelf/Shelf.vue

@@ -1,20 +1,24 @@
 <template>
   <div class="w-full relative">
-    <div class="flex items-end px-3 max-w-full overflow-x-auto" :class="bookshelfRowStyle" :style="{ height: shelfHeight + 'px' }">
+    <div v-if="altViewEnabled" class="px-5 pb-3 pt-4">
+      <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ label }}</p>
+    </div>
+
+    <div class="flex items-end px-3 max-w-full overflow-x-auto" :class="altViewEnabled ? '' : 'bookshelfRow'" :style="{ height: shelfHeight + 'px', paddingBottom: entityPaddingBottom + 'px' }">
       <template v-for="(entity, index) in entities">
-        <cards-lazy-book-card v-if="type === 'book' || type === 'podcast'" :key="entity.id" :index="index" :book-mount="entity" :width="bookWidth" :height="entityHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" is-categorized class="mx-2 relative" />
+        <cards-lazy-book-card v-if="type === 'book' || type === 'podcast'" :key="entity.id" :index="index" :book-mount="entity" :width="bookWidth" :height="entityHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :is-alt-view-enabled="altViewEnabled" class="mx-2 relative" />
-        <cards-lazy-book-card v-if="type === 'episode'" :key="entity.recentEpisode.id" :index="index" :book-mount="entity" :width="bookWidth" :height="entityHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" is-categorized class="mx-2 relative" />
+        <cards-lazy-book-card v-if="type === 'episode'" :key="entity.recentEpisode.id" :index="index" :book-mount="entity" :width="bookWidth" :height="entityHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :is-alt-view-enabled="altViewEnabled" class="mx-2 relative" />
-        <cards-lazy-series-card v-else-if="type === 'series'" :key="entity.id" :index="index" :series-mount="entity" :width="bookWidth * 2" :height="entityHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" is-categorized class="mx-2 relative" />
+        <cards-lazy-series-card v-else-if="type === 'series'" :key="entity.id" :index="index" :series-mount="entity" :width="bookWidth * 2" :height="entityHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :is-alt-view-enabled="altViewEnabled" is-categorized class="mx-2 relative" />
         <cards-author-card v-else-if="type === 'authors'" :key="entity.id" :width="bookWidth / 1.25" :height="bookWidth" :author="entity" :size-multiplier="1" class="mx-2" />
       </template>
     </div>
 
-    <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-4 md:left-8 w-36 rounded-md" style="height: 18px">
+    <div v-if="!altViewEnabled" class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-4 md:left-8 w-36 rounded-md" style="height: 18px">
-      <div class="w-full h-full flex items-center justify-center rounded-sm border" :class="bookshelfLabelStyle">
+      <div class="w-full h-full flex items-center justify-center rounded-sm border shinyBlack">
         <p class="transform text-xs">{{ label }}</p>
       </div>
     </div>
-    <div class="w-full h-5 z-40" :class="bookshelfDividerStyle"></div>
+    <div v-if="!altViewEnabled" class="w-full h-5 z-40 bookshelfDivider"></div>
   </div>
 </template>
 
@@ -32,36 +36,41 @@ export default {
     return {}
   },
   computed: {
+    entityPaddingBottom() {
+      if (!this.altViewEnabled) return 0
+      if (this.type === 'authors') return 10
+      else if (this.type === 'series') return 40
+      return 60 * this.sizeMultiplier
+    },
     shelfHeight() {
+      if (this.altViewEnabled) {
+        var extraTitleSpace = this.type === 'authors' ? 10 : this.type === 'series' ? 50 : 60
+        return this.entityHeight + extraTitleSpace * this.sizeMultiplier
+      }
       return this.entityHeight + 40
     },
     bookWidth() {
       var coverSize = 100
-      if (this.bookCoverAspectRatio === 1) return coverSize * 1.6
+      if (this.isCoverSquareAspectRatio) return coverSize * 1.6
       return coverSize
     },
     bookHeight() {
-      if (this.bookCoverAspectRatio === 1) return this.bookWidth
+      if (this.isCoverSquareAspectRatio) return this.bookWidth
       return this.bookWidth * 1.6
     },
     entityHeight() {
       return this.bookHeight
     },
+    sizeMultiplier() {
+      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      return this.bookWidth / baseSize
+    },
+    isCoverSquareAspectRatio() {
+      return this.bookCoverAspectRatio === 1
+    },
     bookCoverAspectRatio() {
       return this.$store.getters['getBookCoverAspectRatio']
     },
-    bookshelfRowStyle() {
-      if (this.altViewEnabled) return 'altBookshelfRow'
-      return 'bookshelfRow'
-    },
-    bookshelfLabelStyle() {
-      if (this.altViewEnabled) return 'altBookshelfLabel'
-      return 'shinyBlack'
-    },
-    bookshelfDividerStyle() {
-      if (this.altViewEnabled) return 'altBookshelfDivider'
-      return 'bookshelfDivider'
-    },
     altViewEnabled() {
       return this.$store.getters['getAltViewEnabled']
     }

components/cards/LazyBookCard.vue

@@ -6,13 +6,13 @@
     </div>
 
     <!-- Alternative bookshelf title/author/sort -->
-    <!-- <div v-if="isAlternativeBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
+    <div v-if="isAltViewEnabled" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
       <p class="truncate" :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
         {{ displayTitle }}
       </p>
-      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayAuthor }}</p>
+      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayAuthor || '&nbsp;' }}</p>
       <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
-    </div> -->
+    </div>
 
     <div v-if="booksInSeries" class="absolute z-20 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ booksInSeries }}</div>
 
@@ -84,7 +84,7 @@ export default {
     },
     bookCoverAspectRatio: Number,
     showSequence: Boolean,
-    bookshelfView: Number,
+    isAltViewEnabled: Boolean,
     bookMount: {
       // Book can be passed as prop or set with setEntity()
       type: Object,
@@ -346,6 +346,11 @@ export default {
         return this.author.slice(0, 27) + '...'
       }
       return this.author
+    },
+    titleDisplayBottomOffset() {
+      if (!this.isAltViewEnabled) return 0
+      else if (!this.displaySortLine) return 3 * this.sizeMultiplier
+      return 4.25 * this.sizeMultiplier
     }
   },
   methods: {

components/cards/LazyCollectionCard.vue

@@ -5,8 +5,8 @@
       <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
 
-    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(240, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+      <div class="w-full h-full flex items-center justify-center rounded-sm border" :class="isAltViewEnabled ? 'altBookshelfLabel' : 'shinyBlack'" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
     </div>
@@ -19,7 +19,8 @@ export default {
     index: Number,
     width: Number,
     height: Number,
-    bookCoverAspectRatio: Number
+    bookCoverAspectRatio: Number,
+    isAltViewEnabled: Boolean
   },
   data() {
     return {

components/cards/LazySeriesCard.vue

@@ -5,8 +5,11 @@
       <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="title" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
 
-    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+    <div v-if="isAltViewEnabled && isCategorized" class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <div class="w-full h-full altBookshelfLabel flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+    </div>
+    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(240, width) + 'px' }">
+      <div class="w-full h-full flex items-center justify-center rounded-sm border" :class="isAltViewEnabled ? 'altBookshelfLabel' : 'shinyBlack'" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
     </div>
@@ -24,6 +27,7 @@ export default {
       type: Object,
       default: () => null
     },
+    isAltViewEnabled: Boolean,
     isCategorized: Boolean
   },
   data() {

ios/App/Podfile

@@ -9,12 +9,12 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
-  pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog'
+  pod 'CapacitorDialog', :path => '..\..\node_modules\@capacitor\dialog'
-  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
+  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
-  pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
+  pod 'CapacitorNetwork', :path => '..\..\node_modules\@capacitor\network'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
-  pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
+  pod 'CapacitorStorage', :path => '..\..\node_modules\@capacitor\storage'
 end
 
 target 'App' do

mixins/bookshelfCardsHelpers.js

@@ -45,7 +45,8 @@ export default {
         index,
         width: this.entityWidth,
         height: this.entityHeight,
-        bookCoverAspectRatio: this.bookCoverAspectRatio
+        bookCoverAspectRatio: this.bookCoverAspectRatio,
+        isAltViewEnabled: this.altViewEnabled
       }
       if (this.entityName === 'series-books') props.showSequence = true
       if (this.entityName === 'books') {
@@ -54,7 +55,7 @@ export default {
         props.sortingIgnorePrefix = !!this.sortingIgnorePrefix
       }
 
-      var _this = this
+      // var _this = this
       var instance = new ComponentClass({
         propsData: props,
         created() {

pages/bookshelf/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full min-h-full relative">
-    <div v-if="!loading" class="w-full">
+    <div v-if="!loading" class="w-full" :class="{ 'py-6': altViewEnabled }">
       <template v-for="(shelf, index) in shelves">
         <bookshelf-shelf :key="shelf.id" :label="shelf.label" :entities="shelf.entities" :type="shelf.type" :style="{ zIndex: shelves.length - index }" />
       </template>
@@ -53,6 +53,9 @@ export default {
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
+    },
+    altViewEnabled() {
+      return this.$store.getters['getAltViewEnabled']
     }
   },
   methods: {

pages/settings.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="w-full h-full p-8">
-    <div v-if="$platform !== 'ios'" class="flex items-center py-3" @click="toggleDisableAutoRewind">
-      <div class="w-10 flex justify-center">
-        <ui-toggle-switch v-model="settings.disableAutoRewind" @input="saveSettings" />
-      </div>
-      <p class="pl-4">Disable Auto Rewind</p>
-    </div>
     <div class="flex items-center py-3" @click="toggleEnableAltView">
       <div class="w-10 flex justify-center">
         <ui-toggle-switch v-model="settings.enableAltView" @input="saveSettings" />
       </div>
       <p class="pl-4">Alternative Bookshelf View</p>
     </div>
+    <div v-if="$platform !== 'ios'" class="flex items-center py-3" @click="toggleDisableAutoRewind">
+      <div class="w-10 flex justify-center">
+        <ui-toggle-switch v-model="settings.disableAutoRewind" @input="saveSettings" />
+      </div>
+      <p class="pl-4">Disable Auto Rewind</p>
+    </div>
     <div class="flex items-center py-3" @click="toggleJumpBackwards">
       <div class="w-10 flex justify-center">
         <span class="material-icons text-4xl">{{ currentJumpBackwardsTimeIcon }}</span>