From 4bf75c606a807f45c4528f028f7400a224c28519 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Fri, 31 Dec 2021 16:57:53 -0600
Subject: [PATCH] Add:iOS audio player

---
 android/app/capacitor.build.gradle            |   1 +
 .../src/main/assets/capacitor.plugins.json    |   4 +
 android/capacitor.settings.gradle             |   3 +
 assets/app.css                                |  25 +-
 components/app/AudioPlayer.vue                |   4 +-
 components/app/AudioPlayerContainer.vue       |   9 +-
 components/app/SideDrawer.vue                 |   5 +-
 components/bookshelf/LazyBookshelf.vue        |   3 +-
 components/readers/ComicReader.vue            |   8 +-
 ios/App/App.xcodeproj/project.pbxproj         |   2 +
 ios/App/App/Info.plist                        |   2 +
 ios/App/App/MyNativeAudio.m                   |   7 +-
 ios/App/App/MyNativeAudio.swift               | 293 +++++++++++++++++-
 ios/App/Podfile                               |   7 +
 layouts/blank.vue                             |   2 +-
 layouts/default.vue                           |  14 +-
 nuxt.config.js                                |   2 +-
 package-lock.json                             |   7 +-
 package.json                                  |   3 +-
 pages/audiobook/_id/index.vue                 |   8 +-
 pages/bookshelf.vue                           |   4 +-
 pages/bookshelf/index.vue                     |  17 +-
 pages/downloads.vue                           | 160 +++++-----
 plugins/init.client.js                        |   6 +
 24 files changed, 467 insertions(+), 129 deletions(-)

diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index a10f1982..4ad9dba0 100644
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -13,6 +13,7 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-dialog')
     implementation project(':capacitor-network')
+    implementation project(':capacitor-status-bar')
     implementation project(':capacitor-storage')
     implementation project(':robingenz-capacitor-app-update')
     implementation project(':capacitor-data-storage-sqlite')
diff --git a/android/app/src/main/assets/capacitor.plugins.json b/android/app/src/main/assets/capacitor.plugins.json
index 127f911b..1c40357f 100644
--- a/android/app/src/main/assets/capacitor.plugins.json
+++ b/android/app/src/main/assets/capacitor.plugins.json
@@ -15,6 +15,10 @@
 		"pkg": "@capacitor/network",
 		"classpath": "com.capacitorjs.plugins.network.NetworkPlugin"
 	},
+	{
+		"pkg": "@capacitor/status-bar",
+		"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"
+	},
 	{
 		"pkg": "@capacitor/storage",
 		"classpath": "com.capacitorjs.plugins.storage.StoragePlugin"
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index 0d7ae3ec..590a60b1 100644
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -14,6 +14,9 @@ project(':capacitor-dialog').projectDir = new File('../node_modules/@capacitor/d
 include ':capacitor-network'
 project(':capacitor-network').projectDir = new File('../node_modules/@capacitor/network/android')
 
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
+
 include ':capacitor-storage'
 project(':capacitor-storage').projectDir = new File('../node_modules/@capacitor/storage/android')
 
diff --git a/assets/app.css b/assets/app.css
index d964d2da..fbfb32a1 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -1,7 +1,30 @@
 @import "./fonts.css";
 
+body {
+  background-color: #262626;
+}
+
+.layout-wrapper {
+  height: calc(100vh - env(safe-area-inset-top));
+  min-height: calc(100vh - env(safe-area-inset-top));
+  max-height: calc(100vh - env(safe-area-inset-top));
+  margin-top: env(safe-area-inset-top);
+}
+
+#content {
+  height: calc(100% - 64px);
+  min-height: calc(100% - 64px);
+  max-height: calc(100% - 64px);
+}
+#content.playerOpen {
+  height: calc(100% - 164px);
+  min-height: calc(100% - 164px);
+  max-height: calc(100% - 164px);
+}
+
 #bookshelf {
-  min-height: calc(100vh - 48px);
+  height: calc(100% - 48px);
+  min-height: calc(100% - 48px);
 }
 
 .box-shadow-sm {
diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index 76d5a003..3472e2e9 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed top-0 bottom-0 left-0 right-0 z-50 pointer-events-none" :class="showFullscreen ? 'fullscreen' : ''">
+  <div class="fixed top-0 left-0 layout-wrapper right-0 z-50 pointer-events-none" :class="showFullscreen ? 'fullscreen' : ''">
     <div v-if="showFullscreen" class="w-full h-full z-10 bg-bg absolute top-0 left-0 pointer-events-auto">
       <div class="top-2 left-4 absolute cursor-pointer">
         <span class="material-icons text-5xl" @click="collapseFullscreen">expand_more</span>
@@ -524,6 +524,7 @@ export default {
       this.streamId = stream ? stream.id : null
       this.audiobookId = audiobookStreamData.audiobookId
       this.initObject = { ...audiobookStreamData }
+      console.log('[AudioPlayer] Set Audio Player', !!stream)
 
       var init = true
       if (!!stream) {
@@ -612,6 +613,7 @@ export default {
         var data = await MyNativeAudio.getCurrentTime()
         this.currentTime = Number((data.value / 1000).toFixed(2))
         this.bufferedTime = Number((data.bufferedTime / 1000).toFixed(2))
+        console.log('[AudioPlayer] Got Current Time', this.currentTime)
         this.timeupdate()
       }, 1000)
     },
diff --git a/components/app/AudioPlayerContainer.vue b/components/app/AudioPlayerContainer.vue
index fd2f3094..53ab10e4 100644
--- a/components/app/AudioPlayerContainer.vue
+++ b/components/app/AudioPlayerContainer.vue
@@ -378,7 +378,7 @@ export default {
       console.log('[StreamContainer] Stream Open: ' + this.title)
 
       if (!this.$refs.audioPlayer) {
-        console.error('No Audio Player Mini')
+        console.error('[StreamContainer] No Audio Player Mini')
         return
       }
 
@@ -406,7 +406,12 @@ export default {
         audiobookId: this.audiobookId,
         tracks: this.tracksForCast
       }
-
+      console.log('[StreamContainer] Set Audio Player', JSON.stringify(audiobookStreamData))
+      if (!this.$refs.audioPlayer) {
+        console.error('[StreamContainer] Invalid no audio player')
+      } else {
+        console.log('[StreamContainer] Has Audio Player Ref')
+      }
       this.$refs.audioPlayer.set(audiobookStreamData, stream, !this.stream)
 
       this.stream = stream
diff --git a/components/app/SideDrawer.vue b/components/app/SideDrawer.vue
index bdfc53d7..bcab1bc2 100644
--- a/components/app/SideDrawer.vue
+++ b/components/app/SideDrawer.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="fixed top-0 left-0 right-0 bottom-0 w-full h-full z-50 overflow-hidden pointer-events-none">
+  <div class="fixed top-0 left-0 right-0 layout-wrapper w-full z-50 overflow-hidden pointer-events-none">
     <div class="absolute top-0 left-0 w-full h-full bg-black transition-opacity duration-200" :class="show ? 'bg-opacity-60 pointer-events-auto' : 'bg-opacity-0'" @click="clickBackground" />
     <div class="absolute top-0 right-0 w-64 h-full bg-primary transform transition-transform py-6 pointer-events-auto" :class="show ? '' : 'translate-x-64'" @click.stop>
       <div class="px-6 mb-4">
         <p v-if="socketConnected" class="text-base">
-          Welcome, <strong>{{ username }}</strong>
+          Welcome,
+          <strong>{{ username }}</strong>
         </p>
       </div>
       <div class="w-full overflow-y-auto">
diff --git a/components/bookshelf/LazyBookshelf.vue b/components/bookshelf/LazyBookshelf.vue
index d8946039..2cdaf3eb 100644
--- a/components/bookshelf/LazyBookshelf.vue
+++ b/components/bookshelf/LazyBookshelf.vue
@@ -90,8 +90,9 @@ export default {
       return this.isCoverSquareAspectRatio ? 1 : 1.6
     },
     bookWidth() {
-      // var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
       var coverSize = 100
+      if (window.innerWidth <= 375) coverSize = 90
+
       if (this.isCoverSquareAspectRatio) return coverSize * 1.6
       return coverSize
     },
diff --git a/components/readers/ComicReader.vue b/components/readers/ComicReader.vue
index d821a279..08c97b0b 100644
--- a/components/readers/ComicReader.vue
+++ b/components/readers/ComicReader.vue
@@ -8,8 +8,8 @@
     <div v-show="showInfoMenu" v-click-outside="clickOutside" class="pagemenu absolute top-20 right-0 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-full" style="top: 72px">
       <div v-for="key in comicMetadataKeys" :key="key" class="w-full px-2 py-1">
         <p class="text-xs">
-          <strong>{{ key }}</strong
-          >: {{ comicMetadata[key] }}
+          <strong>{{ key }}</strong>
+          : {{ comicMetadata[key] }}
         </p>
       </div>
     </div>
@@ -210,10 +210,10 @@ export default {
 
 <style scoped>
 #comic-reader {
-  height: calc(100vh - 32px);
+  height: calc(100% - 32px);
 }
 .pagemenu {
-  max-height: calc(100vh - 80px);
+  max-height: calc(100% - 80px);
 }
 .comicimg {
   height: 100%;
diff --git a/ios/App/App.xcodeproj/project.pbxproj b/ios/App/App.xcodeproj/project.pbxproj
index 3cded07c..396d87ec 100644
--- a/ios/App/App.xcodeproj/project.pbxproj
+++ b/ios/App/App.xcodeproj/project.pbxproj
@@ -357,6 +357,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
+				DEVELOPMENT_TEAM = 7UFJ7D8V6A;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -378,6 +379,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
+				DEVELOPMENT_TEAM = 7UFJ7D8V6A;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
diff --git a/ios/App/App/Info.plist b/ios/App/App/Info.plist
index c79947f5..98c706b0 100644
--- a/ios/App/App/Info.plist
+++ b/ios/App/App/Info.plist
@@ -30,6 +30,7 @@
 	<key>UIBackgroundModes</key>
 	<array>
 		<string>audio</string>
+		<string>fetch</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
@@ -44,6 +45,7 @@
 		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
 	<key>UISupportedInterfaceOrientations~ipad</key>
 	<array>
diff --git a/ios/App/App/MyNativeAudio.m b/ios/App/App/MyNativeAudio.m
index 0e6aa4f6..b6dde25e 100644
--- a/ios/App/App/MyNativeAudio.m
+++ b/ios/App/App/MyNativeAudio.m
@@ -6,8 +6,11 @@ CAP_PLUGIN(MyNativeAudio, "MyNativeAudio",
     CAP_PLUGIN_METHOD(initPlayer, CAPPluginReturnPromise);
     CAP_PLUGIN_METHOD(playPlayer, CAPPluginReturnPromise);
     CAP_PLUGIN_METHOD(pausePlayer, CAPPluginReturnPromise);
-    CAP_PLUGIN_METHOD(seekForward10, CAPPluginReturnPromise);
-    CAP_PLUGIN_METHOD(seekBackward10, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(seekForward, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(seekBackward, CAPPluginReturnPromise);
     CAP_PLUGIN_METHOD(seekPlayer, CAPPluginReturnPromise);
     CAP_PLUGIN_METHOD(terminateStream, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(getStreamSyncData, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(getCurrentTime, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(setPlaybackSpeed, CAPPluginReturnPromise);
 )
diff --git a/ios/App/App/MyNativeAudio.swift b/ios/App/App/MyNativeAudio.swift
index 216f1c1a..cc1439f1 100644
--- a/ios/App/App/MyNativeAudio.swift
+++ b/ios/App/App/MyNativeAudio.swift
@@ -1,8 +1,26 @@
 import Foundation
 import Capacitor
+import MediaPlayer
 import AVKit
 
+
+extension UIImageView {
+    public func imageFromUrl(urlString: String) {
+        if let url = NSURL(string: urlString) {
+            let request = NSURLRequest(url: url as URL)
+            NSURLConnection.sendAsynchronousRequest(request as URLRequest, queue: OperationQueue.main) {
+                (response: URLResponse?, data: Data?, error: Error?) -> Void in
+                if let imageData = data as Data? {
+                    self.image = UIImage(data: imageData)
+                }
+            }
+        }
+    }
+}
+
 struct Audiobook {
+    var streamId = ""
+    var audiobookId = ""
     var title = "No Title"
     var author = "Unknown"
     var playWhenReady = false
@@ -16,18 +34,43 @@ struct Audiobook {
 
 @objc(MyNativeAudio)
 public class MyNativeAudio: CAPPlugin {
+    
     var avPlayer: AVPlayer!
     var currentCall: CAPPluginCall?
     var audioPlayer: AVPlayer!
     var audiobook: Audiobook?
+    
+    enum PlayerState {
+        case stopped
+        case playing
+        case paused
+    }
+    
+    private var playerState: PlayerState = .stopped
+    
+    // Key-value observing context
+    private var playerItemContext = 0
 
     override public func load() {
+        NSLog("Load MyNativeAudio")
         NotificationCenter.default.addObserver(self, selector: #selector(stop),
                                                name:Notification.Name.AVPlayerItemDidPlayToEndTime, object: nil)
+        NotificationCenter.default.addObserver(self,
+                                               selector: #selector(appDidEnterBackground),
+                                               name: UIApplication.didEnterBackgroundNotification, object: nil)
+        
+        NotificationCenter.default.addObserver(self,
+                                               selector: #selector(appWillEnterForeground),
+                                               name: UIApplication.willEnterForegroundNotification, object: nil)
+        
+        setupRemoteTransportControls()
     }
 
     @objc func initPlayer(_ call: CAPPluginCall)  {
+        NSLog("Init Player")
        audiobook = Audiobook(
+            streamId: call.getString("id") ?? "",
+            audiobookId: call.getString("audiobookId") ?? "",
             title: call.getString("title") ?? "No Title",
             author: call.getString("author") ?? "Unknown",
             playWhenReady: call.getBool("playWhenReady", false),
@@ -50,51 +93,85 @@ public class MyNativeAudio: CAPPlugin {
             url: url!,
             options: ["AVURLAssetHTTPHeaderFieldsKey": headers]
         )
+        
+        print("Playing audiobook url \(String(describing: url))")
+        
+        // For play in background
+        do {
+            try AVAudioSession.sharedInstance().setCategory(.playback, mode: .default, options: [.mixWithOthers, .allowAirPlay])
+            NSLog("[TEST] Playback OK")
+            try AVAudioSession.sharedInstance().setActive(true)
+            NSLog("[TEST] Session is Active")
+        } catch {
+            NSLog("[TEST] Failed to set BG Data")
+            print(error)
+        }
+        
         let playerItem = AVPlayerItem(asset: asset)
-        self.audioPlayer = AVPlayer(playerItem: playerItem)
-//        self.audioPlayer = AVPlayer(url: url)
+        
+        // Register as an observer of the player item's status property
+        playerItem.addObserver(self,
+                               forKeyPath: #keyPath(AVPlayerItem.status),
+                               options: [.old, .new],
+                               context: &playerItemContext)
 
-        self.audioPlayer.play()
+        self.audioPlayer = AVPlayer(playerItem: playerItem)
+        let time = self.audioPlayer.currentItem?.currentTime()
+        
+        print("Audio Player Initialized \(String(describing: time))")
+        
+        call.resolve(["success": true])
     }
     
-    @objc func seekForward10() {
+    @objc func seekForward(_ call: CAPPluginCall) {
+        let amount = (Double(call.getString("amount", "0")) ?? 0) / 1000
+        
         let duration = self.audioPlayer.currentItem?.duration.seconds ?? 0
         let currentTime = self.audioPlayer.currentItem?.currentTime().seconds ?? 0
-        var destinationTime = currentTime + 10
+        var destinationTime = currentTime + amount
         if (destinationTime > duration) { destinationTime = duration }
         
         let time = CMTime(seconds:destinationTime,preferredTimescale: 1000)
         self.audioPlayer.seek(to: time)
+        call.resolve()
     }
     
-    @objc func seekBackward10() {
+    @objc func seekBackward(_ call: CAPPluginCall) {
+        let amount = (Double(call.getString("amount", "0")) ?? 0) / 1000
+        
         let currentTime = self.audioPlayer.currentItem?.currentTime().seconds ?? 0
-        var destinationTime = currentTime - 10
+        var destinationTime = currentTime - amount
         if (destinationTime < 0) { destinationTime = 0 }
         
         let time = CMTime(seconds:destinationTime,preferredTimescale: 1000)
         self.audioPlayer.seek(to: time)
+        call.resolve()
     }
     
     @objc func seekPlayer(_ call: CAPPluginCall) {
-        var seekTime = call.getInt("timeMs") ?? 0
-        seekTime /= 1000
+        var seekTime = (Int(call.getString("timeMs", "0")) ?? 0) / 1000
+        NSLog("Seek Player \(seekTime)")
+        
         if (seekTime < 0) { seekTime = 0 }
         
         let time = CMTime(seconds:Double(seekTime),preferredTimescale: 1000)
         self.audioPlayer.seek(to: time)
+        call.resolve()
     }
     
-    @objc func pausePlayer() {
-        self.audioPlayer.pause()
+    @objc func pausePlayer(_ call: CAPPluginCall) {
+        pause()
+        call.resolve()
     }
     
-    @objc func playPlayer() {
-        self.audioPlayer.play()
+    @objc func playPlayer(_ call: CAPPluginCall) {
+        play()
+        call.resolve()
     }
     
-    @objc func terminateStream() {
-        self.audioPlayer.pause()
+    @objc func terminateStream(_ call: CAPPluginCall) {
+        pause()
+        call.resolve()
     }
     
     @objc func stop() {
@@ -103,4 +180,190 @@ public class MyNativeAudio: CAPPlugin {
             call.resolve([ "result": true])
         }
     }
+    
+    @objc func getCurrentTime(_ call: CAPPluginCall) {
+        let currTime = self.audioPlayer.currentItem?.currentTime().seconds ?? 0
+        let buffTime = self.audioPlayer.currentItem?.currentTime().seconds ?? 0
+        NSLog("AVPlayer getCurrentTime \(currTime)")
+        call.resolve([ "value": currTime * 1000, "bufferedTime": buffTime * 1000 ])
+    }
+    
+    @objc func getStreamSyncData(_ call: CAPPluginCall) {
+        let streamId = audiobook?.streamId ?? ""
+        call.resolve([ "isPlaying": false, "lastPauseTime": 0, "id": streamId ])
+    }
+    
+    @objc func setPlaybackSpeed(_ call: CAPPluginCall) {
+        let speed = call.getFloat("speed") ?? 0
+        NSLog("[TEST] Set Playback Speed \(speed)")
+        audioPlayer.rate = speed
+        
+        call.resolve()
+    }
+
+    func play() {
+        audioPlayer.play()
+        self.notifyListeners("onPlayingUpdate", data: [
+            "value": true
+        ])
+        
+        playerState = .playing
+        setupNowPlaying()
+    }
+    
+    func pause() {
+        audioPlayer.pause()
+        self.notifyListeners("onPlayingUpdate", data: [
+            "value": false
+        ])
+        
+        playerState = .paused
+    }
+    
+    func currentTime() -> Double {
+        return self.audioPlayer.currentItem?.currentTime().seconds ?? 0
+    }
+    
+    func duration() -> Double {
+        return self.audioPlayer.currentItem?.duration.seconds ?? 0
+    }
+    
+    func playbackRate() -> Float {
+        return self.audioPlayer.rate
+    }
+    
+    func sendMetadata() {
+        let currTime = self.audioPlayer.currentItem?.currentTime().seconds ?? 0
+        let duration = self.audioPlayer.currentItem?.duration.seconds ?? 0
+        self.notifyListeners("onMetadata", data: [
+            "duration": duration * 1000,
+            "currentTime": currTime * 1000,
+            "stateName": "unknown"
+        ])
+    }
+    
+    
+    public override func observeValue(forKeyPath keyPath: String?,
+                               of object: Any?,
+                               change: [NSKeyValueChangeKey : Any]?,
+                               context: UnsafeMutableRawPointer?) {
+
+        // Only handle observations for the playerItemContext
+        guard context == &playerItemContext else {
+            super.observeValue(forKeyPath: keyPath,
+                               of: object,
+                               change: change,
+                               context: context)
+            return
+        }
+
+        if keyPath == #keyPath(AVPlayerItem.status) {
+            let status: AVPlayerItem.Status
+            if let statusNumber = change?[.newKey] as? NSNumber {
+                status = AVPlayerItem.Status(rawValue: statusNumber.intValue)!
+                print("AVPlayer Status Change \(String(status.rawValue))")
+            } else {
+                status = .unknown
+            }
+
+            // Switch over status value
+            switch status {
+            case .readyToPlay:
+                // Player item is ready to play.
+                NSLog("AVPlayer ready to play")
+                setNowPlayingMetadata()
+                sendMetadata()
+                if (audiobook?.playWhenReady == true) {
+                    NSLog("AVPlayer playWhenReady == true")
+                    play()
+                }
+                break
+            case .failed:
+                // Player item failed. See error.
+                break
+            case .unknown:
+                // Player item is not yet ready
+                break
+            @unknown default:
+                break
+            }
+        }
+    }
+    
+    @objc func appDidEnterBackground() {
+        setupNowPlaying()
+        NSLog("[TEST] App Enter Backround")
+    }
+
+    @objc func appWillEnterForeground() {
+        
+        NSLog("[TEST] App Will Enter Foreground")
+    }
+    
+    func setupRemoteTransportControls() {
+        // Get the shared MPRemoteCommandCenter
+        let commandCenter = MPRemoteCommandCenter.shared()
+
+        // Add handler for Play Command
+        commandCenter.playCommand.addTarget { [unowned self] event in
+            NSLog("[TEST] Play Command \(playbackRate())")
+            if playbackRate() == 0.0 {
+                play()
+                return .success
+            }
+            return .commandFailed
+        }
+
+        // Add handler for Pause Command
+        commandCenter.pauseCommand.addTarget { [unowned self] event in
+            NSLog("[TEST] Pause Command \(playbackRate())")
+            if playbackRate() == 1.0 {
+                pause()
+                return .success
+            }
+            return .commandFailed
+        }
+    }
+    
+    func setNowPlayingMetadata() {
+       
+        let nowPlayingInfoCenter = MPNowPlayingInfoCenter.default()
+        var nowPlayingInfo = [String: Any]()
+        
+        NSLog("%@", "**** Set track metadata: title \(audiobook?.title ?? "")")
+        nowPlayingInfo[MPNowPlayingInfoPropertyAssetURL] = audiobook?.playlistUrl ?? ""
+        nowPlayingInfo[MPNowPlayingInfoPropertyMediaType] = "hls"
+        nowPlayingInfo[MPNowPlayingInfoPropertyIsLiveStream] = false
+        nowPlayingInfo[MPMediaItemPropertyTitle] = audiobook?.title ?? ""
+        nowPlayingInfo[MPMediaItemPropertyArtist] = audiobook?.author ?? ""
+        
+        if (audiobook?.cover != nil) {
+            let myImageView = UIImageView()
+            myImageView.imageFromUrl(urlString: audiobook?.cover ?? "")
+            nowPlayingInfo[MPMediaItemPropertyArtwork] = myImageView.image
+        }
+
+        nowPlayingInfo[MPMediaItemPropertyAlbumArtist] = audiobook?.author ?? ""
+        nowPlayingInfo[MPMediaItemPropertyAlbumTitle] = audiobook?.title ?? ""
+        
+        nowPlayingInfoCenter.nowPlayingInfo = nowPlayingInfo
+    }
+    
+    func setupNowPlaying() {
+        
+        if (playerState != .playing) {
+            NSLog("[TEST] Not current playing so not updating now playing info")
+            return
+        }
+        
+        let nowPlayingInfoCenter = MPNowPlayingInfoCenter.default()
+        var nowPlayingInfo = nowPlayingInfoCenter.nowPlayingInfo ?? [String: Any]()
+        
+        NSLog("%@", "**** Set playback info: rate \(playbackRate()), position \(currentTime()), duration \(duration())")
+        nowPlayingInfo[MPMediaItemPropertyPlaybackDuration] = duration()
+        nowPlayingInfo[MPNowPlayingInfoPropertyElapsedPlaybackTime] = currentTime()
+        nowPlayingInfo[MPNowPlayingInfoPropertyPlaybackRate] = playbackRate()
+        nowPlayingInfo[MPNowPlayingInfoPropertyDefaultPlaybackRate] = 1.0
+        nowPlayingInfoCenter.nowPlayingInfo = nowPlayingInfo
+    }
 }
diff --git a/ios/App/Podfile b/ios/App/Podfile
index 47efa339..b280c19a 100644
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@@ -9,7 +9,14 @@ 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 'CapacitorCommunitySqlite', :path => '../../node_modules/@capacitor-community/sqlite'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
   pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog'
+  pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
+  pod 'RobingenzCapacitorAppUpdate', :path => '../../node_modules/@robingenz/capacitor-app-update'
+  pod 'CapacitorDataStorageSqlite', :path => '../../node_modules/capacitor-data-storage-sqlite'
 end
 
 target 'App' do
diff --git a/layouts/blank.vue b/layouts/blank.vue
index 500b73b3..789d695d 100644
--- a/layouts/blank.vue
+++ b/layouts/blank.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full min-h-screen h-full bg-bg text-white">
+  <div class="w-full layout-wrapper bg-bg text-white">
     <Nuxt />
   </div>
 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 8ac7c036..7a7667db 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full min-h-screen h-full bg-bg text-white">
+  <div class="w-full layout-wrapper bg-bg text-white">
     <app-appbar />
-    <div id="content" class="overflow-hidden" :class="playerIsOpen ? 'playerOpen' : ''">
+    <div id="content" class="overflow-hidden relative" :class="playerIsOpen ? 'playerOpen' : ''">
       <Nuxt />
     </div>
     <app-audio-player-container ref="streamContainer" />
@@ -16,7 +16,6 @@ import { Capacitor } from '@capacitor/core'
 import { AppUpdate } from '@robingenz/capacitor-app-update'
 import AudioDownloader from '@/plugins/audio-downloader'
 import StorageManager from '@/plugins/storage-manager'
-import MyNativeAudio from '@/plugins/my-native-audio'
 
 export default {
   data() {
@@ -414,12 +413,3 @@ export default {
   }
 }
 </script>
-
-<style>
-#content {
-  height: calc(100vh - 64px);
-}
-#content.playerOpen {
-  height: calc(100vh - 164px);
-}
-</style>
\ No newline at end of file
diff --git a/nuxt.config.js b/nuxt.config.js
index 6ff5d90c..a3fc6480 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -20,7 +20,7 @@ export default {
     },
     meta: [
       { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { name: 'viewport', content: 'viewport-fit=cover, width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1' },
       { hid: 'description', name: 'description', content: '' },
       { name: 'format-detection', content: 'telephone=no' }
     ],
diff --git a/package-lock.json b/package-lock.json
index ace69487..0c15a4f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-app",
-  "version": "0.9.33-beta",
+  "version": "0.9.35-beta",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1076,6 +1076,11 @@
       "resolved": "https://registry.npmjs.org/@capacitor/network/-/network-1.0.3.tgz",
       "integrity": "sha512-DgRusTC0UkTJE9IQIAMgqBnRnTaj8nFeGH7dwRldfVBZAtHBTkU8wCK/tU1oWtaY2Wam+iyVKXUAhYDO7yeD9Q=="
     },
+    "@capacitor/status-bar": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-1.0.6.tgz",
+      "integrity": "sha512-5MGWFq76iiKvHpbZ/Xc0Zig3WZyzWZ62wvC4qxak8OuVHBNG4fA1p/XXY9teQPaU3SupEJHnLkw6Gn1LuDp+ew=="
+    },
     "@capacitor/storage": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@capacitor/storage/-/storage-1.1.0.tgz",
diff --git a/package.json b/package.json
index 78147387..346336ec 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@capacitor/dialog": "^1.0.3",
     "@capacitor/ios": "^3.2.2",
     "@capacitor/network": "^1.0.3",
+    "@capacitor/status-bar": "^1.0.6",
     "@capacitor/storage": "^1.1.0",
     "@nuxtjs/axios": "^5.13.6",
     "@robingenz/capacitor-app-update": "^1.0.0",
@@ -38,4 +39,4 @@
     "@nuxtjs/tailwindcss": "^4.2.0",
     "postcss": "^8.3.5"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/audiobook/_id/index.vue b/pages/audiobook/_id/index.vue
index 88d88d00..d4df1fa7 100644
--- a/pages/audiobook/_id/index.vue
+++ b/pages/audiobook/_id/index.vue
@@ -15,7 +15,8 @@
         <h3 v-if="series" class="font-book text-gray-300 text-lg leading-7">{{ seriesText }}</h3>
         <p class="text-sm text-gray-400">by {{ author }}</p>
         <p v-if="numTracks" class="text-gray-300 text-sm my-1">
-          {{ $elapsedPretty(duration) }}<span class="px-4">{{ $bytesPretty(size) }}</span>
+          {{ $elapsedPretty(duration) }}
+          <span class="px-4">{{ $bytesPretty(size) }}</span>
         </p>
 
         <div v-if="progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
@@ -35,7 +36,7 @@
             <span class="material-icons">auto_stories</span>
             <span v-if="!showPlay" class="px-2 text-base">Read {{ ebookFormat }}</span>
           </ui-btn>
-          <ui-btn v-if="isConnected && showPlay" color="primary" class="flex items-center justify-center" :padding-x="2" @click="downloadClick">
+          <ui-btn v-if="isConnected && showPlay && !isIos" color="primary" class="flex items-center justify-center" :padding-x="2" @click="downloadClick">
             <span class="material-icons" :class="downloadObj ? 'animate-pulse' : ''">{{ downloadObj ? (isDownloading || isDownloadPreparing ? 'downloading' : 'download_done') : 'download' }}</span>
           </ui-btn>
         </div>
@@ -84,6 +85,9 @@ export default {
     }
   },
   computed: {
+    isIos() {
+      return this.$platform === 'ios'
+    },
     isConnected() {
       return this.$store.state.socketConnected
     },
diff --git a/pages/bookshelf.vue b/pages/bookshelf.vue
index 179a75d0..b71048eb 100644
--- a/pages/bookshelf.vue
+++ b/pages/bookshelf.vue
@@ -7,7 +7,7 @@
 
       <!-- <div v-if="isLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
         <ui-loading-indicator />
-      </div> -->
+      </div>-->
     </div>
   </div>
 </template>
@@ -27,11 +27,13 @@ export default {
 
 <style>
 .main-content {
+  height: calc(100% - 72px);
   max-height: calc(100% - 72px);
   min-height: calc(100% - 72px);
   max-width: 100vw;
 }
 .main-content.home-page {
+  height: calc(100% - 36px);
   max-height: calc(100% - 36px);
   min-height: calc(100% - 36px);
 }
diff --git a/pages/bookshelf/index.vue b/pages/bookshelf/index.vue
index 27ff631c..1fd132a7 100644
--- a/pages/bookshelf/index.vue
+++ b/pages/bookshelf/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full">
+  <div class="w-full h-full min-h-full relative">
     <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>
@@ -7,19 +7,24 @@
     <div v-if="!shelves.length" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
       <div>
         <p class="mb-4 text-center text-xl">
-          Bookshelf empty<span v-show="isSocketConnected">
-            for library <strong>{{ currentLibraryName }}</strong></span
-          >
+          Bookshelf empty
+          <span v-show="isSocketConnected">
+            for library
+            <strong>{{ currentLibraryName }}</strong>
+          </span>
         </p>
         <div class="w-full" v-if="!isSocketConnected">
           <div class="flex justify-center items-center mb-3">
             <span class="material-icons text-error text-lg">cloud_off</span>
             <p class="pl-2 text-error text-sm">Audiobookshelf server not connected.</p>
           </div>
-          <p class="px-4 text-center text-error absolute bottom-12 left-0 right-0 mx-auto"><strong>Important!</strong> This app requires that you are running <u>your own server</u> and does not provide any content.</p>
+          <p class="px-4 text-center text-error absolute bottom-12 left-0 right-0 mx-auto">
+            <strong>Important!</strong> This app requires that you are running
+            <u>your own server</u> and does not provide any content.
+          </p>
         </div>
         <div class="flex justify-center">
-          <ui-btn v-if="!isSocketConnected" small @click="$router.push('/connect')" class="w-32"> Connect </ui-btn>
+          <ui-btn v-if="!isSocketConnected" small @click="$router.push('/connect')" class="w-32">Connect</ui-btn>
         </div>
       </div>
     </div>
diff --git a/pages/downloads.vue b/pages/downloads.vue
index bdbd0d25..20009c47 100644
--- a/pages/downloads.vue
+++ b/pages/downloads.vue
@@ -2,91 +2,96 @@
   <div class="w-full h-full py-6">
     <h1 class="text-2xl px-4">Downloads</h1>
 
-    <div class="w-full px-2 py-2" :class="hasStoragePermission ? '' : 'text-error'">
-      <div class="flex items-center">
-        <span class="material-icons" @click="changeDownloadFolderClick">{{ hasStoragePermission ? 'folder' : 'error' }}</span>
-        <p v-if="hasStoragePermission" class="text-sm px-4" @click="changeDownloadFolderClick">{{ downloadFolderSimplePath || 'No Download Folder Selected' }}</p>
-        <p v-else class="text-sm px-4" @click="changeDownloadFolderClick">No Storage Permissions. Click here</p>
-      </div>
-      <!-- <p v-if="hasStoragePermission" class="text-xs text-gray-400 break-all max-w-full">{{ downloadFolderUri }}</p> -->
+    <template v-if="isIos"></template>
+  </div>
+</template>
+<template v-else>
+  <div class="w-full px-2 py-2" :class="hasStoragePermission ? '' : 'text-error'">
+    <div class="flex items-center">
+      <span class="material-icons" @click="changeDownloadFolderClick">{{ hasStoragePermission ? 'folder' : 'error' }}</span>
+      <p v-if="hasStoragePermission" class="text-sm px-4" @click="changeDownloadFolderClick">{{ downloadFolderSimplePath || 'No Download Folder Selected' }}</p>
+      <p v-else class="text-sm px-4" @click="changeDownloadFolderClick">No Storage Permissions. Click here</p>
     </div>
+    <!-- <p v-if="hasStoragePermission" class="text-xs text-gray-400 break-all max-w-full">{{ downloadFolderUri }}</p> -->
+  </div>
 
-    <div class="w-full h-10 relative">
-      <div class="absolute top-px left-0 z-10 w-full h-full flex">
-        <div class="flex-grow h-full bg-primary rounded-t-md mr-px" @click="showingDownloads = true">
-          <div class="flex items-center justify-center rounded-t-md border-t border-l border-r border-white border-opacity-20 h-full" :class="showingDownloads ? 'text-gray-100' : 'border-b bg-black bg-opacity-20 text-gray-400'">
-            <p>Downloads</p>
-          </div>
+  <div class="w-full h-10 relative">
+    <div class="absolute top-px left-0 z-10 w-full h-full flex">
+      <div class="flex-grow h-full bg-primary rounded-t-md mr-px" @click="showingDownloads = true">
+        <div class="flex items-center justify-center rounded-t-md border-t border-l border-r border-white border-opacity-20 h-full" :class="showingDownloads ? 'text-gray-100' : 'border-b bg-black bg-opacity-20 text-gray-400'">
+          <p>Downloads</p>
         </div>
-        <div class="flex-grow h-full bg-primary rounded-t-md ml-px" @click="showingDownloads = false">
-          <div class="flex items-center justify-center h-full rounded-t-md border-t border-l border-r border-white border-opacity-20" :class="!showingDownloads ? 'text-gray-100' : 'border-b bg-black bg-opacity-20 text-gray-400'">
-            <p>Files</p>
-          </div>
+      </div>
+      <div class="flex-grow h-full bg-primary rounded-t-md ml-px" @click="showingDownloads = false">
+        <div class="flex items-center justify-center h-full rounded-t-md border-t border-l border-r border-white border-opacity-20" :class="!showingDownloads ? 'text-gray-100' : 'border-b bg-black bg-opacity-20 text-gray-400'">
+          <p>Files</p>
         </div>
       </div>
     </div>
-    <div class="list-content-body relative w-full overflow-x-hidden bg-primary">
-      <template v-if="showingDownloads">
-        <div v-if="!totalDownloads" class="flex items-center justify-center h-40">
-          <p>No Downloads</p>
-        </div>
-        <ul v-else class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-          <template v-for="download in downloadsDownloading">
-            <li :key="download.id" class="text-gray-400 select-none relative px-4 py-5 border-b border-white border-opacity-10 bg-black bg-opacity-10">
-              <div class="flex items-center justify-center">
-                <div class="w-3/4">
-                  <span class="text-xs">({{ downloadingProgress[download.id] || 0 }}%) {{ download.isPreparing ? 'Preparing' : 'Downloading' }}...</span>
-                  <p class="font-normal truncate text-sm">{{ download.audiobook.book.title }}</p>
-                </div>
-                <div class="flex-grow" />
+  </div>
+  <div class="list-content-body relative w-full overflow-x-hidden bg-primary">
+    <template v-if="showingDownloads">
+      <div v-if="!totalDownloads" class="flex items-center justify-center h-40">
+        <p>No Downloads</p>
+      </div>
+      <ul v-else class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+        <template v-for="download in downloadsDownloading">
+          <li :key="download.id" class="text-gray-400 select-none relative px-4 py-5 border-b border-white border-opacity-10 bg-black bg-opacity-10">
+            <div class="flex items-center justify-center">
+              <div class="w-3/4">
+                <span class="text-xs">({{ downloadingProgress[download.id] || 0 }}%) {{ download.isPreparing ? 'Preparing' : 'Downloading' }}...</span>
+                <p class="font-normal truncate text-sm">{{ download.audiobook.book.title }}</p>
+              </div>
+              <div class="flex-grow" />
 
-                <div class="shadow-sm text-white flex items-center justify-center rounded-full animate-spin">
-                  <span class="material-icons">refresh</span>
-                </div>
+              <div class="shadow-sm text-white flex items-center justify-center rounded-full animate-spin">
+                <span class="material-icons">refresh</span>
               </div>
-            </li>
-          </template>
-          <template v-for="download in downloadsReady">
-            <li :key="download.id" class="text-gray-50 select-none relative pr-4 pl-2 py-5 border-b border-white border-opacity-10" @click="jumpToAudiobook(download)">
-              <modals-downloads-download-item :download="download" @play="playDownload" @delete="clickDeleteDownload" />
-            </li>
-          </template>
-        </ul>
-      </template>
-      <template v-else>
-        <div class="w-full h-full">
-          <div class="w-full flex justify-around py-4 px-2">
-            <ui-btn small @click="searchFolder">Re-Scan</ui-btn>
-            <ui-btn small @click="changeDownloadFolderClick">Change Folder</ui-btn>
-            <ui-btn small color="error" @click="resetFolder">Reset</ui-btn>
-          </div>
-          <p v-if="isScanning" class="text-center my-8">Scanning Folder..</p>
-          <p v-else-if="!mediaScanResults" class="text-center my-8">No Files Found</p>
-          <template v-else>
-            <template v-for="mediaFolder in mediaScanResults.folders">
-              <div :key="mediaFolder.uri" class="w-full px-2 py-2">
-                <div class="flex items-center">
-                  <span class="material-icons text-base text-white text-opacity-50">folder</span>
-                  <p class="ml-1 py-0.5">{{ mediaFolder.name }}</p>
-                </div>
-                <div v-for="mediaFile in mediaFolder.files" :key="mediaFile.uri" class="ml-3 flex items-center">
-                  <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
-                  <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
-                </div>
-              </div>
-            </template>
-            <template v-for="mediaFile in mediaScanResults.files">
-              <div :key="mediaFile.uri" class="w-full px-2 py-2">
-                <div class="flex items-center">
-                  <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
-                  <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
-                </div>
-              </div>
-            </template>
-          </template>
+            </div>
+          </li>
+        </template>
+        <template v-for="download in downloadsReady">
+          <li :key="download.id" class="text-gray-50 select-none relative pr-4 pl-2 py-5 border-b border-white border-opacity-10" @click="jumpToAudiobook(download)">
+            <modals-downloads-download-item :download="download" @play="playDownload" @delete="clickDeleteDownload" />
+          </li>
+        </template>
+      </ul>
+    </template>
+    <template v-else>
+      <div class="w-full h-full">
+        <div class="w-full flex justify-around py-4 px-2">
+          <ui-btn small @click="searchFolder">Re-Scan</ui-btn>
+          <ui-btn small @click="changeDownloadFolderClick">Change Folder</ui-btn>
+          <ui-btn small color="error" @click="resetFolder">Reset</ui-btn>
         </div>
-      </template>
-    </div>
+        <p v-if="isScanning" class="text-center my-8">Scanning Folder..</p>
+        <p v-else-if="!mediaScanResults" class="text-center my-8">No Files Found</p>
+        <template v-else>
+          <template v-for="mediaFolder in mediaScanResults.folders">
+            <div :key="mediaFolder.uri" class="w-full px-2 py-2">
+              <div class="flex items-center">
+                <span class="material-icons text-base text-white text-opacity-50">folder</span>
+                <p class="ml-1 py-0.5">{{ mediaFolder.name }}</p>
+              </div>
+              <div v-for="mediaFile in mediaFolder.files" :key="mediaFile.uri" class="ml-3 flex items-center">
+                <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
+                <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
+              </div>
+            </div>
+          </template>
+          <template v-for="mediaFile in mediaScanResults.files">
+            <div :key="mediaFile.uri" class="w-full px-2 py-2">
+              <div class="flex items-center">
+                <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
+                <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
+              </div>
+            </div>
+          </template>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
   </div>
 </template>
 
@@ -105,6 +110,9 @@ export default {
     }
   },
   computed: {
+    isIos() {
+      return this.$platform === 'ios'
+    },
     isSocketConnected() {
       return this.$store.state.socketConnected
     },
diff --git a/plugins/init.client.js b/plugins/init.client.js
index 0935b955..840e66f4 100644
--- a/plugins/init.client.js
+++ b/plugins/init.client.js
@@ -1,8 +1,14 @@
 import Vue from 'vue'
 import { App } from '@capacitor/app'
 import { Dialog } from '@capacitor/dialog'
+import { StatusBar, Style } from '@capacitor/status-bar';
 import { formatDistance, format } from 'date-fns'
 
+const setStatusBarStyleDark = async () => {
+  await StatusBar.setStyle({ style: Style.Dark })
+}
+setStatusBarStyleDark()
+
 App.addListener('backButton', async ({ canGoBack }) => {
   if (!canGoBack) {
     const { value } = await Dialog.confirm({