/macos/Plac/Views/PlaybackBar.swift at d85027493fbf578475c7ce0fca8fb7794a19fa96

// Copyright 2025 Shota FUJI
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
// SPDX-License-Identifier: Apache-2.0

import OSLog
import RoonKit
import SwiftUI

struct PlaybackBar: View {
	@Environment(ZoneDataModel.self) var model: ZoneDataModel

	@State private var isPerformingAction = false
	@State private var isZonePickerVisible = false
	@State private var isOutputPanelVisible = false

	private var zone: TransportService.Zone? {
		model.zone
	}

	var body: some View {
		@Bindable var model = model

		VStack(alignment: .leading, spacing: 14) {
			HStack(spacing: 8) {
				if let imageKey = zone?.nowPlaying?.imageKey {
					Artwork(imageKey: imageKey, width: 96, height: 96)
						.frame(width: 48, height: 48)
				}

				VStack(alignment: .leading, spacing: 2) {
					let line1 = zone?.nowPlaying?.doubleLine.line1 ?? " "
					let line2 = zone?.nowPlaying?.doubleLine.line2 ?? " "

					Text(line1)
						.font(.headline)
						.lineLimit(1)

					Text(line2)
						.font(.subheadline)
						.lineLimit(1)
				}
				.frame(maxWidth: .infinity, alignment: .leading)
			}

			HStack(spacing: 20) {
				HStack {
					Button {
						Task {
							await performAction(.previous)
						}
					} label: {
						Label {
							Text(
								String(
									localized: "PlaybackBar.Previous",
									defaultValue: "Previous",
									comment: "A label for a previous button."
								)
							)
						} icon: {
							Image(systemName: "backward.end.fill")
						}
					}
					.font(.title3)
					.disabled(isPerformingAction)
					.disabled(!(zone?.isPreviousAllowed ?? false))

					ZStack {
						Button {
							Task {
								await performAction(.pause)
							}
						} label: {
							Label {
								Text(
									String(
										localized: "PlaybackBar.Pause",
										defaultValue: "Pause",
										comment: "A label for a pause button."
									)
								)
							} icon: {
								Image(systemName: "pause.fill")
							}
						}
						.font(.title)
						.disabled(isPerformingAction)
						.disabled(!(zone?.isPauseAllowed ?? false))
						.opacity(zone?.state != .playing ? 0 : 1)

						Button {
							Task {
								await performAction(.play)
							}
						} label: {
							Label {
								Text(
									String(
										localized: "PlaybackBar.Play",
										defaultValue: "Play",
										comment: "A label for a play button."
									)
								)
							} icon: {
								Image(systemName: "play.fill")
							}
						}
						.font(.title)
						.disabled(isPerformingAction)
						.disabled(!(zone?.isPlayAllowed ?? false))
						.opacity(zone?.state == .playing ? 0 : 1)
					}

					Button {
						Task {
							await performAction(.next)
						}
					} label: {
						Label {
							Text(
								String(
									localized: "PlaybackBar.Next",
									defaultValue: "Next",
									comment: "A label for a next button."
								)
							)
						} icon: {
							Image(systemName: "forward.end.fill")
						}
					}
					.font(.title3)
					.disabled(isPerformingAction)
					.disabled(!(zone?.isNextAllowed ?? false))
				}
				.labelStyle(.iconOnly)
				.buttonStyle(.borderless)

				if let length = model.zone?.nowPlaying?.length, length > 0,
					let zone = zone
				{
					// Adding step parameter results in messy and broken-look UI on macOS.
					// The tick marks might work for less ticks (up to 10,) but it's completely
					// broken on this kind of usage; they are too dense to the point it renders
					// like visual glitch, and some ticks are skipped. I'd call it broken.
					// Fortunately, in this usecase, eliminating `step: 1.0` is acceptable because
					// we're casting to `Int64` anyway. So, even when SwiftUI uses steps less than
					// 1, fractional part will be ignored and end experience will be similar to
					// `step: 1.0`.
					Slider(
						value: $model.seek,
						in: 0.0...Float(length),
						onEditingChanged: { editing in
							if editing {
								model.suppressSeekUpdates = true
							} else {
								Task {
									do {
										let msg = try await model.conn.request(
											try Moo(
												seek: .init(zoneID: zone.id, seconds: Int64(model.seek))
											),
											timeout: .seconds(2)
										)

										_ = try TransportService.SeekResponse(msg)
									} catch {
										Logger().warning("Failed to seek: \(error)")
									}

									// If we resume accepting seek change events before seek request,
									// there is a chance incoming seek change "resets" seekbar position
									// then seek request updates seek then an event after that moves
									// seekbar position. From user's perspective, this is "seekbar
									// jumps to previous position then jumps again to the dragged
									// position". That's not good UX.
									model.suppressSeekUpdates = false
								}
							}
						}
					) {
						Text(
							String(
								localized: "PlaybackBar.Seekbar",
								defaultValue: "Playback seekbar",
								comment: "A label for seekbar."
							)
						)
					}
					.labelsHidden()
					.disabled(!(zone.isSeekAllowed ?? false))
					.frame(maxWidth: .infinity)
				} else {
					Spacer()
				}

				HStack {
					if model.zones.count > 0 && zone != nil {
						Button {
							isZonePickerVisible = true
						} label: {
							Label {
								Text(
									String(
										localized: "PlaybackBar.ZonePicker.Label",
										defaultValue: "Zone",
										comment: "A label for zone picker."
									)
								)
							} icon: {
								Image(systemName: "square.2.layers.3d.top.filled")
							}
							.labelStyle(.iconOnly)
						}
						.help(Text("PlaybackBar.ZonePicker.Label"))
						.popover(isPresented: $isZonePickerVisible) {
							List(selection: $model.zone) {
								Section {
									ForEach(model.zones) { (zone: TransportService.Zone) in
										Text(zone.displayName).tag(zone)
									}
								} header: {
									Text(
										String(
											localized: "PlaybackBar.ZonePicker.Title",
											defaultValue: "Zones"
										)
									)
								}
							}
						}
						.scaledToFit()
					}

					if let zone = zone {
						Button {
							isOutputPanelVisible = true
						} label: {
							Label {
								Text(
									String(
										localized: "PlaybackBar.OutputPanel.Label",
										defaultValue: "Sound Outputs"
									)
								)
							} icon: {
								Image(systemName: "hifispeaker")
							}
							.labelStyle(.iconOnly)
						}
						.help(Text("PlaybackBar.OutputPanel.Label"))
						// iPadOS has a long standing but that it can't determine
						// `popover` size based on its content, resulting in rendering
						// at minimum size. On the other hand, macOS has a same problem
						// but for `sheet`... so we have to use `popover` on macOS and
						// `sheet` on others.
						#if os(macOS)
							.popover(isPresented: $isOutputPanelVisible) {
								List {
									ForEach(zone.outputs) { output in
										OutputRow(output: output, model: model)
									}
								}
								.listStyle(.sidebar)
							}
						#else
							.sheet(isPresented: $isOutputPanelVisible) {
								VStack {
									List {
										ForEach(zone.outputs) { output in
											OutputRow(output: output, model: model)
										}

										Button {
											isOutputPanelVisible = false
										} label: {
											Text(
												String(
													localized: "PlaybackBar.OutputPanel.Close",
													defaultValue: "Close"
												)
											)
										}
									}
								}
							}
						#endif
					}
				}
			}
		}
		.padding([.horizontal], 12)
		.padding([.vertical], 10)
	}

	private func performAction(_ action: TransportService.ControlAction) async {
		guard let zone = zone else {
			return
		}

		isPerformingAction = true

		do {
			let msg = try await model.conn.request(
				try Moo(control: .init(zoneID: zone.id, control: action)),
				timeout: .seconds(5)
			)

			_ = try TransportService.ControlResponse(msg)
		} catch {
			Logger().warning("Failed to send control message: \(error)")
		}

		isPerformingAction = false
	}
}

struct OutputRow: View {
	private let logger = Logger()

	private let output: TransportService.Output
	private let model: ZoneDataModel
	@State private var volume: Float64

	var body: some View {
		Section {
			switch output.volume?.type {
			case .some("incremental"):
				Stepper(
					label: {
						Text(
							String(
								localized: "PlaybackBar.OutputPanel.StepVolumeLabel",
								defaultValue: "Volume Control"
							)
						)
					},
					onIncrement: {
						Task {
							do {
								let res = try await model.conn.request(
									.init(
										changeVolume: .init(
											outputID: output.id,
											value: 1.0,
											mode: .relative
										)
									)
								)

								_ = try TransportService.ChangeVolumeResponse(res)
							} catch {
								logger.warning("Failed to increment volume: \(error)")
							}
						}
					},
					onDecrement: {
						Task {
							do {
								let res = try await model.conn.request(
									.init(
										changeVolume: .init(
											outputID: output.id,
											value: -1.0,
											mode: .relative
										)
									)
								)

								_ = try TransportService.ChangeVolumeResponse(res)
							} catch {
								logger.warning("Failed to decrement volume: \(error)")
							}
						}
					}
				)
			case .none:
				Text(
					String(
						localized: "PlaybackBar.OutputPanel.NoVolumeControl",
						defaultValue: "This output does not support volume control."
					)
				)
			case .some(let type):
				let min = output.volume?.min ?? 0
				let max = output.volume?.max ?? 100
				let format = { (value: Float64) in
					switch type {
					case "db":
						String(format: "%1.fdB", value)
					default:
						String(format: "%.f%%", ((value - min) / max) * 100)
					}
				}

				VStack {
					Slider(
						value: $volume,
						in: .init(uncheckedBounds: (min, max)),
					) {
						Text(
							String(
								localized: "PlaybackBar.OutputPanel.VolumeSlider",
								defaultValue: "Volume slider",
								comment: "A label for volume slider."
							)
						)
					} minimumValueLabel: {
						Text(format(min))
					} maximumValueLabel: {
						Text(format(max))
					} onEditingChanged: { editing in
						// Issue API request only when user stopped editing (e.g., lift a finger)
						guard editing == false else {
							return
						}

						Task {
							do {
								let res = try await model.conn.request(
									.init(
										changeVolume: .init(
											outputID: output.id,
											value: volume,
											mode: .absolute
										)
									)
								)

								_ = try TransportService.ChangeVolumeResponse(res)
							} catch {
								logger.warning("Failed to change volume: \(error)")
							}
						}
					}
					.labelsHidden()

					Text(format(volume))
				}
			}
		} header: {
			Text(output.displayName)
		}
	}

	init(output: TransportService.Output, model: ZoneDataModel) {
		self.model = model
		self.output = output
		self.volume = output.volume?.value ?? 0
	}
}

// MARK: - Previews

private actor MockServer: Communicatable {
	var position: Int64 = 0
	var length: Int64 = 120

	var messages: AsyncStream<Moo> {
		AsyncStream { stream in
			Task {
				do {
					while true {
						try Task.checkCancellation()
						try await Task.sleep(for: .seconds(1))

						position += 1
						if position > length {
							position = 0
						}

						let body = """
								{
									"zones_seek_changed": [
										{
											"zone_id": "0-foo",
											"seek_position": \(String(position, radix: 10))
										}
									]
								}
							"""

						stream.yield(
							Moo(
								verb: "CONTINUE",
								service: "idk",
								headers: [
									"Content-Type": "application/json",
									"Content-Length": String(body.utf8.count, radix: 10),
								],
								body: body.data(using: .utf8)!
							)
						)
					}
				} catch {
					stream.finish()
				}
			}
		}
	}

	func request(_ msg: consuming Moo) async throws -> Moo {
		try await request(msg: msg, timeout: nil)
	}

	func request(_ msg: consuming Moo, timeout: ContinuousClock.Instant.Duration)
		async throws -> Moo
	{
		try await request(msg: msg, timeout: timeout)
	}

	fileprivate enum MockRequestError: Error {
		case unsupportedMessage
		case invalidRequest
	}

	private func request(
		msg: Moo,
		timeout: ContinuousClock.Instant.Duration? = nil
	) async throws -> Moo {
		switch msg.service {
		case "\(TransportService.id)/subscribe_zones":
			let body = """
				{
					"zones": [
						{
							"zone_id": "0-foo",
							"display_name": "Foo",
							"outputs": [
								{
									"output_id": "foo-out1",
									"display_name": "Foo Output #1",
									"volume": {
										"type": "number",
										"min": 0,
										"max": 100,
										"step": 1,
										"value": 50,
										"is_muted": false
									}
								},
								{
									"output_id": "foo-out2",
									"display_name": "Foo Output #2",
									"volume": {
										"type": "incremental"
									}
								},
								{
									"output_id": "foo-out3",
									"display_name": "Foo Output #3",
									"volume": {
										"type": "db",
										"min": 0,
										"max": 85,
										"step": 0.1,
										"value": 21,
										"is_muted": false
									}
								}
							],
							"now_playing": {
								"seek_position": \(String(position, radix: 10)),
								"length": \(String(length, radix: 10)),
								"one_line": {
									"line1": "A song"
								},
								"two_line": {
									"line1": "A song",
									"line2": "That's it"
								},
								"three_line": {
									"line1": "A song",
									"line2": "Really, that's it"
								}
							},
							"state": "playing",
							"is_previous_allowed": true,
							"is_next_allowed": false,
							"is_pause_allowed": true,
							"is_play_allowed": true,
							"is_seek_allowed": true
						},
						{
							"zone_id": "1-bar",
							"display_name": "Bar",
							"outputs": [],
							"state": "stopped"
						}
					]
				}
				"""

			return Moo(
				verb: "COMPLETE",
				service: "Subscribed",
				headers: [
					"Content-Type": "application/json",
					"Content-Length": String(body.utf8.count, radix: 10),
				],
				body: body.data(using: .utf8)!
			)
		case "\(TransportService.id)/seek":
			let res = try msg.json(type: TransportService.SeekRequest.self)

			position = res.seconds

			return Moo(verb: "COMPLETE", service: "Success")
		case "\(TransportService.id)/change_volume":
			let res = try msg.json(type: TransportService.ChangeVolumeRequest.self)
			print(
				"Got change_volume request for \(res.outputID), with \(res.value) in \(res.mode)"
			)

			return Moo(verb: "COMPLETE", service: "Success")
		default:
			throw MockRequestError.unsupportedMessage
		}
	}

	func send(_ msg: consuming Moo) async throws {
		// No-op
	}
}

#Preview {
	let model = ZoneDataModel(conn: MockServer())

	PlaybackBar()
		.environment(model)
		.task {
			do {
				try await model.watchChanges()
			} catch {
				print(error)
			}
		}
}