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:
Millian Lamiaux
2026-05-15 22:41:20 +02:00
parent 71de3c0aa7
commit fe005ee7f3
2 changed files with 246 additions and 103 deletions

View File

@@ -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)
}
}