Update toc menu and media progress display

client/components/cards/LazyBookCard.vue

@@ -325,8 +325,13 @@ export default {
       if (this.episodeProgress) return this.episodeProgress
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
+    useEBookProgress() {
+      if (!this.userProgress || this.userProgress.progress) return false
+      return this.userProgress.ebookProgress > 0
+    },
     userProgressPercent() {
-      return this.userProgress ? Math.max(this.userProgress.progress || 0, this.userProgress.ebookProgress || 0) : 0
+      if (this.useEBookProgress) return Math.max(Math.min(1, this.userProgress.ebookProgress), 0)
+      return this.userProgress ? Math.max(Math.min(1, this.userProgress.progress), 0) || 0 : 0
     },
     itemIsFinished() {
       return this.userProgress ? !!this.userProgress.isFinished : false

client/components/readers/EpubReader.vue

@@ -2,24 +2,20 @@
   <div class="h-full w-full">
     <div class="h-full flex items-center">
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center overflow-x-hidden justify-center">
-        <span v-if="hasPrev"
+        <span v-if="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
-          class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl"
-          @mousedown.prevent @click="prev">chevron_left</span>
       </div>
       <div id="frame" class="w-full" style="height: 80%">
-        <div id="viewer" class="shadow-md"></div>
+        <div id="viewer"></div>
       </div>
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center justify-center overflow-x-hidden">
-        <span v-if="hasNext"
+        <span v-if="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
-          class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl"
-          @mousedown.prevent @click="next">chevron_right</span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import ePub from "epubjs";
+import ePub from 'epubjs'
 
 /**
  * @typedef {object} EpubReader
@@ -31,7 +27,7 @@ export default {
     url: String,
     libraryItem: {
       type: Object,
-      default: () => { }
+      default: () => {}
     }
   },
   data() {
@@ -39,32 +35,48 @@ export default {
       /** @type {ePub.Book} */
       book: null,
       /** @type {ePub.Rendition} */
-      rendition: null,
+      rendition: null
-    };
+    }
   },
   computed: {
     /** @returns {string} */
-    libraryItemId() { return this.libraryItem?.id },
+    libraryItemId() {
-    hasPrev() { return !this.rendition?.location?.atStart },
+      return this.libraryItem?.id
-    hasNext() { return !this.rendition?.location?.atEnd },
+    },
+    hasPrev() {
+      return !this.rendition?.location?.atStart
+    },
+    hasNext() {
+      return !this.rendition?.location?.atEnd
+    },
     /** @returns {Array<ePub.NavItem>} */
-    chapters() { return this.book ? this.book.navigation.toc : [] },
+    chapters() {
+      return this.book ? this.book.navigation.toc : []
+    },
     userMediaProgress() {
       if (!this.libraryItemId) return
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
-    localStorageLocationsKey() { return `ebookLocations-${this.libraryItemId}` },
+    localStorageLocationsKey() {
+      return `ebookLocations-${this.libraryItemId}`
+    }
   },
   methods: {
-    prev() { return this.rendition?.prev() },
+    prev() {
-    next() { return this.rendition?.next() },
+      return this.rendition?.prev()
-    goToChapter(href) { return this.rendition?.display(href) },
+    },
+    next() {
+      return this.rendition?.next()
+    },
+    goToChapter(href) {
+      return this.rendition?.display(href)
+    },
     keyUp(e) {
       const rtl = this.book.package.metadata.direction === 'rtl'
       if ((e.keyCode || e.which) == 37) {
-        return rtl ? this.next() : this.prev();
+        return rtl ? this.next() : this.prev()
       } else if ((e.keyCode || e.which) == 39) {
-        return rtl ? this.prev() : this.next();
+        return rtl ? this.prev() : this.next()
       }
     },
     /**
@@ -79,68 +91,68 @@ export default {
     },
     /** @param {string} locationString */
     saveLocations(locationString) {
-      localStorage.setItem(this.localStorageLocationsKey, locationString);
+      localStorage.setItem(this.localStorageLocationsKey, locationString)
     },
     hasSavedLocations() {
-      return localStorage.getItem(this.localStorageLocationsKey) !== null;
+      return localStorage.getItem(this.localStorageLocationsKey) !== null
     },
     loadLocations() {
-      return localStorage.getItem(this.localStorageLocationsKey);
+      return localStorage.getItem(this.localStorageLocationsKey)
     },
     /** @param {string} location - CFI of the new location */
     relocated(location) {
       if (location.end.percentage) {
         this.updateProgress({
           ebookLocation: location.start.cfi,
-          ebookProgress: location.end.percentage,
+          ebookProgress: location.end.percentage
-        });
+        })
       } else {
         this.updateProgress({
-          ebookLocation: location.start.cfi,
+          ebookLocation: location.start.cfi
-        });
+        })
       }
     },
     initEpub() {
       /** @type {EpubReader} */
-      var reader = this;
+      var reader = this
 
       /** @type {ePub.Book} */
       reader.book = new ePub(reader.url, {
         width: window.innerWidth - 200,
-        height: window.innerHeight - 50,
+        height: window.innerHeight - 50
-      });
+      })
 
       /** @type {ePub.Rendition} */
-      reader.rendition = reader.book.renderTo("viewer", {
+      reader.rendition = reader.book.renderTo('viewer', {
         width: window.innerWidth - 200,
         height: window.innerHeight * 0.8
-      });
+      })
 
       // load saved progress
-      reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start);
+      reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start)
 
       // load style
-      reader.rendition.themes.default({ "*": { "color": "#fff!important" } });
+      reader.rendition.themes.default({ '*': { color: '#fff!important' } })
 
       reader.book.ready.then(() => {
         // set up event listeners
-        reader.rendition.on('relocated', reader.relocated);
+        reader.rendition.on('relocated', reader.relocated)
         reader.rendition.on('keydown', reader.keyUp)
-        document.addEventListener('keydown', reader.keyUp, false);
+        document.addEventListener('keydown', reader.keyUp, false)
 
         // load ebook cfi locations
         if (this.hasSavedLocations()) {
-          reader.book.locations.load(this.loadLocations());
+          reader.book.locations.load(this.loadLocations())
         } else {
           reader.book.locations.generate().then(() => {
-            this.saveLocations(reader.book.locations.save());
+            this.saveLocations(reader.book.locations.save())
-          });
+          })
+        }
+      })
     }
-      });
-    },
   },
   mounted() {
-    this.initEpub();
+    this.initEpub()
-  },
+  }
-};
+}
 </script>

client/components/readers/Reader.vue

@@ -1,13 +1,11 @@
 <template>
   <div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-60 bg-primary text-white">
-
     <div class="absolute top-4 left-4 z-20">
-      <span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl"
+      <span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl" @click="toggleToC">menu</span>
-        @click="toggleToC">menu</span>
     </div>
 
     <div class="absolute top-4 left-1/2 transform -translate-x-1/2">
-      <h1 class="text-2xl mb-1" style="line-height: 1.15; font-weight: 100;">
+      <h1 class="text-2xl mb-1" style="line-height: 1.15; font-weight: 100">
         <span style="font-weight: 600">{{ abTitle }}</span>
         <span v-if="abAuthor" style="display: inline"> – </span>
         <span v-if="abAuthor">{{ abAuthor }}</span>
@@ -19,24 +17,22 @@
       <span class="material-icons cursor-pointer text-2xl" @click="close">close</span>
     </div>
 
-    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl"
+    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" :library-item="selectedLibraryItem" />
-      :library-item="selectedLibraryItem" />
 
-    <div ref="tocContainer" class="w-full h-full fixed inset-0 invisible ">
+    <!-- TOC side nav -->
-      <div @click="toggleToC" ref="tocOverlay"
+    <div v-if="tocOpen" class="w-full h-full fixed inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
-        class="w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 opacity-0"></div>
+    <div v-if="hasToC" class="w-72 h-full max-h-full absolute top-0 left-0 bg-bg shadow-xl transition-transform z-30" :class="tocOpen ? 'translate-x-0' : '-translate-x-72'" @click.stop.prevent="toggleToC">
-      <div @click="toggleToC" class="w-96 h-full absolute left-0" style="background: #232323">
+      <div class="p-4 h-full overflow-hidden">
-        <div style="padding: 10px;">
+        <p class="text-lg font-semibold mb-2">Table of Contents</p>
+        <div class="tocContent">
           <ul>
-            <li v-for="chapter in chapters" :key="chapter.id">
+            <li v-for="chapter in chapters" :key="chapter.id" class="py-1">
-              <a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label
+              <a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
-              }}</a>
             </li>
           </ul>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -145,13 +141,10 @@ export default {
   },
   methods: {
     toggleToC() {
-      this.tocOpen = !this.tocOpen;
+      this.tocOpen = !this.tocOpen
-      this.chapters = this.$refs.readerComponent.chapters;
+      this.chapters = this.$refs.readerComponent.chapters
-      this.$refs.tocContainer.classList.toggle('invisible')
-      this.$refs.tocOverlay.classList.toggle('opacity-0')
-      this.$refs.tocOverlay.classList.toggle('opacity-50')
     },
-    openSettings() { },
+    openSettings() {},
     hotkey(action) {
       console.log('Reader hotkey', action)
       if (!this.$refs.readerComponent) return
@@ -192,4 +185,8 @@ export default {
 .ebook-viewer {
   height: calc(100% - 96px);
 }
+.tocContent {
+  height: calc(100% - 36px);
+  overflow-y: auto;
+}
 </style>

client/pages/item/_id/index.vue

@@ -156,7 +156,7 @@
           <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
             <p v-if="progressPercent < 1" class="leading-6">{{ $strings.LabelYourProgress }}: {{ Math.round(progressPercent * 100) }}%</p>
             <p v-else class="text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt, dateFormat) }}</p>
-            <p v-if="progressPercent < 1" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
+            <p v-if="progressPercent < 1 && !useEBookProgress" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
             <p class="text-gray-400 text-xs pt-1">{{ $strings.LabelStarted }} {{ $formatDate(userProgressStartedAt, dateFormat) }}</p>
 
             <div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
@@ -471,8 +471,13 @@ export default {
       const duration = this.userMediaProgress.duration || this.duration
       return duration - this.userMediaProgress.currentTime
     },
+    useEBookProgress() {
+      if (!this.userMediaProgress || this.userMediaProgress.progress) return false
+      return this.userMediaProgress.ebookProgress > 0
+    },
     progressPercent() {
-      return this.userMediaProgress ? Math.max(Math.min(1, Math.max(this.userMediaProgress.progress || 0, this.userMediaProgress.ebookProgress || 0)), 0) : 0
+      if (this.useEBookProgress) return Math.max(Math.min(1, this.userMediaProgress.ebookProgress), 0)
+      return this.userMediaProgress ? Math.max(Math.min(1, this.userMediaProgress.progress), 0) : 0
     },
     userProgressStartedAt() {
       return this.userMediaProgress ? this.userMediaProgress.startedAt : 0