Add chapter support, handle audio focus

android/app/build.gradle

@@ -10,8 +10,8 @@ android {
         applicationId "com.audiobookshelf.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 7
-        versionName "0.3.0-beta"
+        versionCode 8
+        versionName "0.4.0-beta"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

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

@@ -21,6 +21,7 @@ import com.bumptech.glide.load.engine.DiskCacheStrategy
 import com.bumptech.glide.request.RequestOptions
 import com.getcapacitor.JSObject
 import com.google.android.exoplayer2.*
+import com.google.android.exoplayer2.audio.AudioAttributes
 import com.google.android.exoplayer2.ext.mediasession.MediaSessionConnector
 import com.google.android.exoplayer2.ext.mediasession.TimelineQueueNavigator
 import com.google.android.exoplayer2.source.hls.HlsMediaSource
@@ -138,6 +139,10 @@ class PlayerNotificationService : Service()  {
     simpleExoPlayerBuilder.setSeekBackIncrementMs(10000)
     simpleExoPlayerBuilder.setSeekForwardIncrementMs(10000)
     mPlayer = simpleExoPlayerBuilder.build()
+    mPlayer.setHandleAudioBecomingNoisy(true)
+
+    var audioAttributes:AudioAttributes = AudioAttributes.Builder().setUsage(C.USAGE_MEDIA).setContentType(C.CONTENT_TYPE_SPEECH).build()
+    mPlayer.setAudioAttributes(audioAttributes, true)
 
     setPlayerListeners()
 

components/app/StreamContainer.vue

@@ -7,6 +7,9 @@
           <p class="px-2 text-xs text-gray-400">by {{ author }}</p>
         </div>
         <div class="flex-grow" />
+        <div class="cursor-pointer flex items-center justify-center mr-6 w-6 text-center" :class="chapters.length ? 'text-gray-300' : 'text-gray-400'" @mousedown.prevent @mouseup.prevent @click="clickChapterBtn">
+          <span class="material-icons text-2xl">format_list_bulleted</span>
+        </div>
         <span class="material-icons" @click="cancelStream">close</span>
       </div>
       <div class="absolute left-2 -top-10">
@@ -15,6 +18,7 @@
       <audio-player-mini ref="audioPlayerMini" :loading="!stream || currStreamAudiobookId !== streamAudiobookId" @updateTime="updateTime" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @hook:mounted="audioPlayerMounted" />
     </div>
     <modals-playback-speed-modal v-model="showPlaybackSpeedModal" :playback-speed.sync="playbackSpeed" @change="changePlaybackSpeed" />
+    <modals-chapters-modal v-model="showChapterModal" :chapters="chapters" @select="selectChapter" />
   </div>
 </template>
 
@@ -28,7 +32,8 @@ export default {
       stream: null,
       lastServerUpdateSentSeconds: 0,
       showPlaybackSpeedModal: false,
-      playbackSpeed: 1
+      playbackSpeed: 1,
+      showChapterModal: false
     }
   },
   computed: {
@@ -56,6 +61,9 @@ export default {
     series() {
       return this.book ? this.book.series : ''
     },
+    chapters() {
+      return this.streamAudiobook ? this.streamAudiobook.chapters || [] : []
+    },
     volumeNumber() {
       return this.book ? this.book.volumeNumber : ''
     },
@@ -81,6 +89,16 @@ export default {
     }
   },
   methods: {
+    clickChapterBtn() {
+      if (!this.chapters.length) return
+      this.showChapterModal = true
+    },
+    selectChapter(chapter) {
+      if (this.$refs.audioPlayerMini) {
+        this.$refs.audioPlayerMini.seek(chapter.start)
+      }
+      this.showChapterModal = false
+    },
     async cancelStream() {
       const { value } = await Dialog.confirm({
         title: 'Confirm',

components/modals/ChaptersModal.vue

@@ -0,0 +1,50 @@
+<template>
+  <modals-modal v-model="show" :width="300" height="100%">
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+        <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+          <template v-for="chapter in chapters">
+            <li :key="chapter.id" class="text-gray-50 select-none relative py-3 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(chapter)">
+              <div class="flex items-center justify-center px-3">
+                <span class="font-normal block truncate text-lg">{{ chapter.title }}</span>
+                <div class="flex-grow" />
+                <span class="font-mono text-gray-300">{{ $secondsToTimestamp(chapter.start) }}</span>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    chapters: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    clickedOption(chapter) {
+      this.$emit('select', chapter)
+    }
+  },
+  mounted() {}
+}
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-app",
-  "version": "v0.3.0-beta",
+  "version": "v0.4.0-beta",
   "author": "advplyr",
   "scripts": {
     "dev": "nuxt --hostname localhost --port 1337",