Support for opus audio type, experimental features toggle, epub reader starting point

client/pages/audiobook/_id/index.vue

@@ -42,10 +42,10 @@
               Missing
             </ui-btn>
 
-            <!-- <ui-btn v-if="ebooks.length" color="info" :padding-x="4" small class="flex items-center h-9 mr-2" @click="openEbook">
+            <ui-btn v-if="showExperimentalFeatures && epubEbook" color="info" :padding-x="4" small class="flex items-center h-9 mr-2" @click="openEbook">
               <span class="material-icons -ml-2 pr-2 text-white">auto_stories</span>
               Read
-            </ui-btn> -->
+            </ui-btn>
 
             <ui-tooltip v-if="userCanUpdate" text="Edit" direction="top">
               <ui-icon-btn icon="edit" class="mx-0.5" @click="editClick" />
@@ -91,9 +91,9 @@
           <tables-other-files-table v-if="otherFiles.length" :audiobook-id="audiobook.id" :files="otherFiles" class="mt-6" />
         </div>
       </div>
-
-      <div id="area"></div>
     </div>
+
+    <app-reader v-if="showExperimentalFeatures" v-model="showReader" :url="epubUrl" />
   </div>
 </template>
 
@@ -117,6 +117,7 @@ export default {
   },
   data() {
     return {
+      showReader: false,
       isRead: false,
       resettingProgress: false,
       isProcessingReadUpdate: false
@@ -134,6 +135,9 @@ export default {
     isDeveloperMode() {
       return this.$store.state.developerMode
     },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     missingPartChunks() {
       if (this.missingParts === 1) return this.missingParts[0]
       var chunks = []
@@ -233,6 +237,12 @@ export default {
     ebooks() {
       return this.audiobook.ebooks
     },
+    epubEbook() {
+      return this.audiobook.ebooks.find((eb) => eb.ext === '.epub')
+    },
+    epubUrl() {
+      return this.epubEbook ? this.epubEbook.path : null
+    },
     description() {
       return this.book.description || ''
     },
@@ -272,16 +282,7 @@ export default {
   },
   methods: {
     openEbook() {
-      var ebook = this.ebooks[0]
-      console.log('Ebook', ebook)
-      this.$axios
-        .$get(`/ebook/open/${this.audiobookId}/${ebook.ino}`)
-        .then(() => {
-          console.log('opened')
-        })
-        .catch((error) => {
-          console.error('failed', error)
-        })
+      this.showReader = true
     },
     toggleRead() {
       var updatePayload = {

client/pages/config/index.vue

@@ -37,7 +37,7 @@
 
       <div class="h-0.5 bg-primary bg-opacity-50 w-full" />
 
-      <div class="py-4 mb-4">
+      <div class="py-4">
         <p class="text-2xl">Scanner</p>
         <div class="flex items-start py-2">
           <div class="py-2">
@@ -61,6 +61,8 @@
         </div>
       </div>
 
+      <div class="h-0.5 bg-primary bg-opacity-50 w-full" />
+
       <div class="py-4 mb-4">
         <p class="text-2xl">Metadata</p>
         <div class="flex items-start py-2">
@@ -103,7 +105,27 @@
           </svg>
         </a>
       </div>
+
+      <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
+
+      <div class="py-12 mb-4 opacity-60 hover:opacity-100">
+        <div class="flex items-center">
+          <div>
+            <div class="flex items-center">
+              <ui-toggle-switch v-model="showExperimentalFeatures" @input="toggleShowExperimentalFeatures" />
+              <ui-tooltip :text="experimentalFeaturesTooltip">
+                <p class="pl-4 text-lg">Experimental Features <span class="material-icons icon-text">info_outlined</span></p>
+              </ui-tooltip>
+            </div>
+          </div>
+          <!-- <div class="flex-grow" /> -->
+          <div>
+            <a href="https://github.com/advplyr/audiobookshelf/discussions/75#discussion-3604812" target="_blank" class="text-blue-500 hover:text-blue-300 underline">Join the discussion</a>
+          </div>
+        </div>
+      </div>
     </div>
+
     <div class="fixed bottom-0 left-0 w-10 h-10" @dblclick="setDeveloperMode"></div>
 
     <modals-account-modal v-model="showAccountModal" :account="selectedAccount" />
@@ -147,6 +169,9 @@ export default {
     saveMetadataTooltip() {
       return 'This will write a "metadata.nfo" file in all of your audiobook directories.'
     },
+    experimentalFeaturesTooltip() {
+      return 'Features in development that could use your feedback and help testing.'
+    },
     serverSettings() {
       return this.$store.state.serverSettings
     },
@@ -158,9 +183,15 @@ export default {
     },
     isScanningCovers() {
       return this.$store.state.isScanningCovers
+    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
     }
   },
   methods: {
+    toggleShowExperimentalFeatures() {
+      this.$store.commit('setExperimentalFeatures', !this.showExperimentalFeatures)
+    },
     updateCoverStorageDestination(val) {
       this.newServerSettings.coverDestination = val ? this.$constants.CoverDestination.AUDIOBOOK : this.$constants.CoverDestination.METADATA
       this.updateServerSettings({
@@ -190,6 +221,15 @@ export default {
       var value = !this.$store.state.developerMode
       this.$store.commit('setDeveloperMode', value)
       this.$toast.info(`Developer Mode ${value ? 'Enabled' : 'Disabled'}`)
+
+      this.$axios
+        .$get('/test-fs')
+        .then((res) => {
+          console.log('Test FS Result', res)
+        })
+        .catch((error) => {
+          console.error('Failed to test FS', error)
+        })
     },
     scan() {
       this.$root.socket.emit('scan')