feat: Live Activity accessibility and supplemental families (small/medium)
- Add @Environment activityFamily, isActivityFullscreen, isLuminanceReduced - Split into lockScreenView() and smallLockScreenView() variants - Add supplementalActivityFamilies([.small, .medium]) support - Add keylineTint and contentMargins to Dynamic Island - Add accessibility labels throughout (VoiceOver support) - Hide music bar animation when isLuminanceReduced
This commit is contained in:
@@ -16,57 +16,38 @@ struct SkipTrackIntent: AppIntent {
|
||||
struct MusicLiveActivity: Widget {
|
||||
var body: some WidgetConfiguration {
|
||||
ActivityConfiguration(for: MusicActivityAttributes.self) { context in
|
||||
// ── Lock Screen / Banner ───────────────────
|
||||
VStack(spacing: 0) {
|
||||
HStack(spacing: 10) {
|
||||
Image(systemName: "music.note")
|
||||
.font(.title3.weight(.semibold))
|
||||
.foregroundStyle(.green)
|
||||
@Environment(\.activityFamily) var activityFamily
|
||||
@Environment(\.isActivityFullscreen) var isFullscreen
|
||||
@Environment(\.isLuminanceReduced) var isLuminanceReduced
|
||||
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(context.state.title)
|
||||
.font(.headline)
|
||||
.foregroundStyle(.primary)
|
||||
.lineLimit(1)
|
||||
Text(context.state.artist)
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
.lineLimit(1)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
if context.state.isPlaying {
|
||||
LiveActivityMusicBars()
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
switch activityFamily {
|
||||
case .small:
|
||||
smallLockScreenView(context: context)
|
||||
default:
|
||||
lockScreenView(context: context, isFullscreen: isFullscreen, isLuminanceReduced: isLuminanceReduced)
|
||||
}
|
||||
.activityBackgroundTint(.black.opacity(0.9))
|
||||
.activitySystemActionForegroundColor(.white)
|
||||
|
||||
} dynamicIsland: { context in
|
||||
DynamicIsland {
|
||||
// ── Expanded ────────────────────────────
|
||||
DynamicIslandExpandedRegion(.leading) {
|
||||
HStack(spacing: 6) {
|
||||
Image(systemName: "music.note")
|
||||
.foregroundStyle(.green)
|
||||
.accessibilityLabel("Music")
|
||||
Text(context.state.title)
|
||||
.font(.caption.weight(.semibold))
|
||||
.lineLimit(1)
|
||||
.accessibilityLabel(context.state.title)
|
||||
if context.state.isPlaying {
|
||||
LiveActivityMusicBars()
|
||||
}
|
||||
}
|
||||
.padding(.leading, 8)
|
||||
}
|
||||
DynamicIslandExpandedRegion(.center) {
|
||||
Text(context.state.artist)
|
||||
.font(.caption2)
|
||||
.foregroundStyle(.secondary)
|
||||
.lineLimit(1)
|
||||
.accessibilityLabel(context.state.artist)
|
||||
}
|
||||
DynamicIslandExpandedRegion(.trailing) {
|
||||
Button(intent: SkipTrackIntent()) {
|
||||
@@ -83,31 +64,102 @@ struct MusicLiveActivity: Widget {
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.padding(.trailing, 8)
|
||||
.accessibilityLabel("Skip track")
|
||||
}
|
||||
} compactLeading: {
|
||||
// ── Compact Leading ─────────────────────
|
||||
Image(systemName: "music.note")
|
||||
.foregroundStyle(.green)
|
||||
.font(.system(size: 14))
|
||||
.accessibilityLabel("Music playing")
|
||||
} compactTrailing: {
|
||||
// ── Compact Trailing ────────────────────
|
||||
HStack(spacing: 3) {
|
||||
Image(systemName: "music.note")
|
||||
.font(.system(size: 10))
|
||||
.foregroundStyle(.green)
|
||||
.accessibilityHidden(true)
|
||||
Text(context.state.title)
|
||||
.font(.system(size: 10, weight: .medium))
|
||||
.lineLimit(1)
|
||||
.accessibilityLabel(context.state.title)
|
||||
}
|
||||
.accessibilityLabel("Now playing: \(context.state.title)")
|
||||
} minimal: {
|
||||
// ── Minimal ─────────────────────────────
|
||||
Image(systemName: "music.note")
|
||||
.foregroundStyle(.green)
|
||||
.font(.system(size: 13))
|
||||
.accessibilityLabel("Music playing")
|
||||
}
|
||||
.keylineTint(.green)
|
||||
.contentMargins(.leading, 8, for: .expanded)
|
||||
.contentMargins(.trailing, 8, for: .expanded)
|
||||
.widgetURL(URL(string: "tabatago://music")!)
|
||||
}
|
||||
.supplementalActivityFamilies([.small, .medium])
|
||||
}
|
||||
|
||||
// MARK: - Lock Screen / Banner
|
||||
|
||||
@ViewBuilder
|
||||
private func lockScreenView(
|
||||
context: ActivityViewContext<MusicActivityAttributes>,
|
||||
isFullscreen: Bool,
|
||||
isLuminanceReduced: Bool
|
||||
) -> some View {
|
||||
VStack(spacing: 0) {
|
||||
HStack(spacing: 10) {
|
||||
Image(systemName: "music.note")
|
||||
.font(isFullscreen ? .title.weight(.semibold) : .title3.weight(.semibold))
|
||||
.foregroundStyle(.green)
|
||||
.accessibilityLabel("Music")
|
||||
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(context.state.title)
|
||||
.font(isFullscreen ? .title2 : .headline)
|
||||
.foregroundStyle(.primary)
|
||||
.lineLimit(1)
|
||||
.accessibilityLabel(context.state.title)
|
||||
Text(context.state.artist)
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
.lineLimit(1)
|
||||
.accessibilityLabel(context.state.artist)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
if context.state.isPlaying, !isLuminanceReduced {
|
||||
LiveActivityMusicBars()
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, isFullscreen ? 20 : 12)
|
||||
}
|
||||
.activityBackgroundTint(.black.opacity(0.9))
|
||||
.activitySystemActionForegroundColor(.white)
|
||||
}
|
||||
|
||||
// MARK: - Small (Apple Watch / CarPlay)
|
||||
|
||||
@ViewBuilder
|
||||
private func smallLockScreenView(context: ActivityViewContext<MusicActivityAttributes>) -> some View {
|
||||
HStack(spacing: 6) {
|
||||
Image(systemName: "music.note")
|
||||
.font(.caption)
|
||||
.foregroundStyle(.green)
|
||||
.accessibilityLabel("Music")
|
||||
Text(context.state.title)
|
||||
.font(.caption.weight(.medium))
|
||||
.lineLimit(1)
|
||||
.accessibilityLabel(context.state.title)
|
||||
Spacer()
|
||||
Text(context.state.artist)
|
||||
.font(.caption2)
|
||||
.foregroundStyle(.secondary)
|
||||
.lineLimit(1)
|
||||
}
|
||||
.padding(.horizontal, 12)
|
||||
.padding(.vertical, 8)
|
||||
.activityBackgroundTint(.black.opacity(0.9))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,6 +179,7 @@ struct LiveActivityMusicBars: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
.accessibilityHidden(true)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user