@neoskola/auto-play 0.3.18 → 0.3.20

package/ios/templates/NowPlayingTemplate.swift

@@ -2,7 +2,8 @@ import CarPlay
 import MediaPlayer
 import AVFoundation
 
-class NowPlayingTemplate: NSObject, AutoPlayTemplate {
+class NowPlayingTemplate: AutoPlayTemplate {
+    var template: CPListTemplate
     var config: NowPlayingTemplateConfig
     private var loadedImage: UIImage?
     private var isSetupComplete = false
@@ -27,33 +28,184 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
     }
 
     func getTemplate() -> CPTemplate {
-        return CPNowPlayingTemplate.shared
+        return template
     }
 
     init(config: NowPlayingTemplateConfig) {
         self.config = config
 
-        super.init()
+        // CarPlay-safe custom player screen using CPListTemplate.
+        let titleText = Parser.parseText(text: config.title) ?? "Now Playing"
+        let subtitleText = config.subtitle.flatMap { Parser.parseText(text: $0) } ?? ""
+
+        let initialInfoItem = CPListItem(
+            text: titleText,
+            detailText: subtitleText,
+            image: UIImage(systemName: "music.note"),
+            accessoryImage: nil,
+            accessoryType: .none
+        )
+        initialInfoItem.isEnabled = false
+
+        let initialSection = CPListSection(
+            items: [initialInfoItem],
+            header: nil,
+            sectionIndexTitle: nil
+        )
+
+        template = CPListTemplate(
+            title: "Now Playing",
+            sections: [initialSection],
+            assistantCellConfiguration: nil,
+            id: config.id
+        )
+
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            NowPlayingSessionManager.shared.ensureSessionActive()
+            self.setupRemoteCommandCenter()
+            self.updatePlayerUI()
+            self.updateNowPlayingInfo()
+            self.isSetupComplete = true
 
-        // Set the config ID on the shared singleton so TemplateStore can find it
-        initTemplate(template: CPNowPlayingTemplate.shared, id: config.id)
+            if let image = config.image {
+                self.loadImageAsync(image: image)
+            }
+        }
+    }
 
-        // Setup remote commands and now playing info synchronously
-        // so they're ready before CPNowPlayingTemplate.shared is pushed
-        NowPlayingSessionManager.shared.ensureSessionActive()
-        setupRemoteCommandCenter()
-        updateNowPlayingInfo()
+    // MARK: - Player UI
+
+    private func updatePlayerUI() {
+        let titleText = Parser.parseText(text: config.title) ?? "Now Playing"
+        let subtitleText = config.subtitle.flatMap { Parser.parseText(text: $0) } ?? ""
+        let elapsedText = formatTime(currentElapsedTime)
+        let totalText = currentDuration > 0 ? formatTime(currentDuration) : "--:--"
+        let stateText = config.isPlaying ? "Playing" : "Paused"
+        let stateIcon = config.isPlaying ? "play.circle.fill" : "pause.circle.fill"
+
+        let infoItem = CPListItem(
+            text: titleText,
+            detailText: subtitleText,
+            image: loadedImage ?? UIImage(systemName: "music.note"),
+            accessoryImage: nil,
+            accessoryType: .none
+        )
+        infoItem.isEnabled = false
+
+        let timingItem = CPListItem(
+            text: "\(elapsedText) / \(totalText)",
+            detailText: stateText,
+            image: UIImage(systemName: stateIcon),
+            accessoryImage: nil,
+            accessoryType: .none
+        )
+        timingItem.isEnabled = false
+
+        let progressPercent: Int
+        if currentDuration > 0 {
+            let ratio = max(0.0, min(currentElapsedTime / currentDuration, 1.0))
+            progressPercent = Int(ratio * 100.0)
+        } else {
+            progressPercent = 0
+        }
+        let progressItem = CPListItem(
+            text: "Progress \(progressPercent)%",
+            detailText: progressBarText(elapsed: currentElapsedTime, duration: currentDuration),
+            image: UIImage(systemName: "waveform.path.ecg"),
+            accessoryImage: nil,
+            accessoryType: .none
+        )
+        progressItem.isEnabled = false
+
+        let previousItem = CPListItem(
+            text: "Previous Lesson",
+            detailText: nil,
+            image: UIImage(systemName: "backward.fill"),
+            accessoryImage: nil,
+            accessoryType: .none
+        )
+        previousItem.isEnabled = config.onPreviousTrack != nil
+        previousItem.handler = { [weak self] _, completion in
+            self?.config.onPreviousTrack?()
+            completion()
+        }
+
+        let playPauseItem = CPListItem(
+            text: config.isPlaying ? "Pause" : "Play",
+            detailText: nil,
+            image: UIImage(systemName: config.isPlaying ? "pause.fill" : "play.fill"),
+            accessoryImage: nil,
+            accessoryType: .none
+        )
+        playPauseItem.handler = { [weak self] _, completion in
+            guard let self = self else {
+                completion()
+                return
+            }
 
-        // Set playbackState before push so CarPlay sees an active now-playing session
-        if config.isPlaying {
-            MPNowPlayingInfoCenter.default().playbackState = .playing
+            if self.config.isPlaying {
+                self.pauseAudio()
+                self.config.onPause?()
+            } else {
+                self.resumeAudio()
+                self.config.onPlay?()
+            }
+            completion()
+        }
+
+        let nextItem = CPListItem(
+            text: "Next Lesson",
+            detailText: nil,
+            image: UIImage(systemName: "forward.fill"),
+            accessoryImage: nil,
+            accessoryType: .none
+        )
+        nextItem.isEnabled = config.onNextTrack != nil
+        nextItem.handler = { [weak self] _, completion in
+            self?.config.onNextTrack?()
+            completion()
         }
 
-        isSetupComplete = true
+        let infoSection = CPListSection(
+            items: [infoItem],
+            header: nil,
+            sectionIndexTitle: nil
+        )
 
-        if let image = config.image {
-            loadImageAsync(image: image)
+        let timelineSection = CPListSection(
+            items: [timingItem, progressItem],
+            header: nil,
+            sectionIndexTitle: nil
+        )
+
+        let controlSection = CPListSection(
+            items: [previousItem, playPauseItem, nextItem],
+            header: nil,
+            sectionIndexTitle: nil
+        )
+
+        template.updateSections([infoSection, timelineSection, controlSection])
+    }
+
+    private func formatTime(_ seconds: Double) -> String {
+        guard !seconds.isNaN && !seconds.isInfinite && seconds >= 0 else { return "0:00" }
+        let mins = Int(seconds) / 60
+        let secs = Int(seconds) % 60
+        return String(format: "%d:%02d", mins, secs)
+    }
+
+    private func progressBarText(elapsed: Double, duration: Double) -> String {
+        let totalBars = 16
+        guard duration > 0, !duration.isNaN, !duration.isInfinite else {
+            return "[----------------]"
         }
+
+        let clamped = max(0.0, min(elapsed / duration, 1.0))
+        let filledCount = Int((clamped * Double(totalBars)).rounded(.towardZero))
+        let filled = String(repeating: "#", count: filledCount)
+        let empty = String(repeating: "-", count: max(totalBars - filledCount, 0))
+        return "[\(filled)\(empty)]"
     }
 
     // MARK: - Native Audio Playback
@@ -73,6 +225,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
         NowPlayingSessionManager.shared.ensureSessionActive()
         config.isPlaying = true
         updateNowPlayingInfo()
+        updatePlayerUI()
         MPNowPlayingInfoCenter.default().playbackState = .playing
 
         print("[NowPlayingTemplate] Downloading audio: \(url)")
@@ -131,6 +284,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
                 if !duration.isNaN && !duration.isInfinite && duration > 0 {
                     self.currentDuration = duration
                     self.updateNowPlayingInfo()
+                    self.updatePlayerUI()
                     print("[NowPlayingTemplate] Duration resolved via KVO: \(duration)s")
                 }
             }
@@ -200,6 +354,9 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
         nowPlayingInfo[MPNowPlayingInfoPropertyPlaybackRate] = config.isPlaying ? 1.0 : 0.0
         MPNowPlayingInfoCenter.default().nowPlayingInfo = nowPlayingInfo
 
+        // Update custom player UI
+        updatePlayerUI()
+
         // 95% completion check
         if !completionFired && currentDuration > 0 && currentTime / currentDuration >= 0.95 {
             completionFired = true
@@ -217,6 +374,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
     private func handlePlaybackFinished() {
         config.isPlaying = false
         MPNowPlayingInfoCenter.default().playbackState = .stopped
+        updatePlayerUI()
         if !completionFired {
             completionFired = true
             config.onComplete?()
@@ -229,6 +387,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
         player?.pause()
         config.isPlaying = false
         updatePlaybackState(isPlaying: false)
+        updatePlayerUI()
         reportProgress()
     }
 
@@ -238,6 +397,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
         player?.play()
         config.isPlaying = true
         updatePlaybackState(isPlaying: true)
+        updatePlayerUI()
     }
 
     @MainActor
@@ -262,6 +422,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
         cleanupPlayer()
         config.isPlaying = false
         MPNowPlayingInfoCenter.default().playbackState = .stopped
+        updatePlayerUI()
     }
 
     private func cleanupPlayer() {
@@ -307,8 +468,6 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
             nowPlayingInfo[MPMediaItemPropertyArtwork] = artwork
         }
 
-        // Keep playback metadata populated even before duration is known.
-        // This helps CarPlay recognize an active now-playing session.
         nowPlayingInfo[MPNowPlayingInfoPropertyElapsedPlaybackTime] = currentElapsedTime
         nowPlayingInfo[MPNowPlayingInfoPropertyPlaybackRate] = config.isPlaying ? 1.0 : 0.0
 
@@ -381,6 +540,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
             self.player?.seek(to: time)
             self.currentElapsedTime = positionEvent.positionTime
             self.updateNowPlayingInfo()
+            self.updatePlayerUI()
             return .success
         }
     }
@@ -396,6 +556,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
                 DispatchQueue.main.async {
                     self.loadedImage = uiImage
                     self.updateNowPlayingInfo()
+                    self.updatePlayerUI()
                 }
             }.resume()
         }
@@ -405,6 +566,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
 
     @MainActor
     func invalidate() {
+        updatePlayerUI()
         updateNowPlayingInfo()
 
         if loadedImage == nil, let image = config.image {
@@ -451,6 +613,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
         NowPlayingSessionManager.shared.ensureSessionActive()
 
         if !isSetupComplete {
+            updatePlayerUI()
             updateNowPlayingInfo()
             isSetupComplete = true
         }
@@ -477,6 +640,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
         config.title = AutoText(text: title, distance: nil, duration: nil)
         config.subtitle = AutoText(text: subtitle, distance: nil, duration: nil)
         updateNowPlayingInfo()
+        updatePlayerUI()
     }
 
     @MainActor
@@ -498,5 +662,7 @@ class NowPlayingTemplate: NSObject, AutoPlayTemplate {
         nowPlayingInfo[MPNowPlayingInfoPropertyElapsedPlaybackTime] = elapsedTime
         nowPlayingInfo[MPNowPlayingInfoPropertyPlaybackRate] = config.isPlaying ? 1.0 : 0.0
         MPNowPlayingInfoCenter.default().nowPlayingInfo = nowPlayingInfo
+
+        updatePlayerUI()
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoskola/auto-play",
-  "version": "0.3.18",
+  "version": "0.3.20",
   "description": "Android Auto and Apple CarPlay for react-native",
   "main": "lib/index",
   "module": "lib/index",