Implemented in-app download notifications on the ContentView view in the Sample app target.

This commit is contained in:
2026-07-05 12:39:58 +02:00
parent 88262a7dee
commit 6373fad0cd
2 changed files with 215 additions and 62 deletions
@@ -11,6 +11,42 @@
}
}
},
"view.recording.notification.download.cancelled" : {
"comment" : "The message of the notification for a cancelled speech model download.",
"extractionState" : "manual",
"localizations" : {
"en" : {
"stringUnit" : {
"state" : "translated",
"value" : "The speech model download for %@ was cancelled."
}
}
}
},
"view.recording.notification.download.failed" : {
"comment" : "The message of the notification for a failed speech model download.",
"extractionState" : "manual",
"localizations" : {
"en" : {
"stringUnit" : {
"state" : "translated",
"value" : "The speech model for %@ could not be downloaded."
}
}
}
},
"view.recording.notification.download.started" : {
"comment" : "The message of the notification for a started speech model download. ",
"extractionState" : "manual",
"localizations" : {
"en" : {
"stringUnit" : {
"state" : "translated",
"value" : "Downloading the speech model for %@…"
}
}
}
},
"view.recording.picker.locale.title" : {
"localizations" : {
"en" : {
+179 -62
View File
@@ -5,21 +5,27 @@ import SwiftUI
///
/// The view hosts the `RecordingView` feature from the `Recording` target of the `Features` package, which drives the whole recording flow,
/// inside a navigation stack, and presents the transcribed text of every processed recording in a modal sheet of its own navigation stack.
/// A toolbar menu picks the locale of the spoken language to transcribe, and every pick kicks off the preinstallation of the locale's speech
/// model assets, whose download events surface as transient in-app notifications overlaying the feature just below the navigation bar.
///
/// The services attached to the feature and the transcription shown in the sheet live in the view's ``Model``; the view itself only renders it and
/// forwards the feature's output and the sheet's dismissal. The navigation titles of the stacks are localized through the app's string catalog.
/// The services attached to the feature, the transcription shown in the sheet, and the posted notifications live in the view's ``Model``;
/// the view itself only renders it and forwards the feature's output, the picker's changes, and the sheet's dismissal. All user-facing text
/// is localized through the app's string catalog.
struct ContentView: View {
// MARK: Properties
/// The model that owns the attached services and the transcription presented in the modal sheet.
/// The model that owns the attached services, the transcription presented in the modal sheet, and the posted in-app notifications.
@State private var model = Model()
// MARK: Body
/// The content of the view: a navigation stack with the recording feature's view, attached to the model's services, with a toolbar picker
/// for the locale of the spoken language to transcribe, and a modal sheet presenting the transcribed text of every processed recording
/// or a content unavailable message when the transcription is empty closable through its toolbar button or a swipe.
/// The content of the view: a navigation stack with the recording feature's view, attached to the model's services and expanded to fill
/// the available space, with a toolbar picker for the locale of the spoken language to transcribe, and a modal sheet presenting the
/// transcribed text of every processed recording or a content unavailable message when the transcription is empty closable
/// through its toolbar button or a swipe. The model's in-app notifications overlay the feature, stacking downward just below the
/// navigation bar; each one slides in from the leading edge when posted and out again when its scheduled dismissal arrives, without
/// displacing the recording controls underneath.
var body: some View {
NavigationStack {
RecordingView(
@@ -29,81 +35,192 @@ struct ContentView: View {
) { transcription in
model.received(transcription)
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity
)
.navigationTitle("view.recording.navigation.title")
#if !os(macOS)
.navigationBarTitleDisplayMode(.inline)
#endif
.toolbar {
ToolbarItem(placement: .primaryAction) {
Menu {
Picker(
"view.recording.picker.locale.title",
selection: $model.locale
) {
ForEach(
model.locales,
id: \.self
) {
Text(model.name(for: $0))
.tag($0)
}
}
.pickerStyle(.inline)
} label: {
Label(
"view.recording.picker.locale.title",
systemImage: "globe"
)
}
.disabled(model.locales.isEmpty)
menuLocale
}
}
.overlay(
alignment: .topLeading
) {
stackNotifications
}
.task {
await model.load()
}
.task(id: model.locale) {
await model.preinstallAssets()
.onChange(
of: model.locale,
initial: false
) {
model.preinstall()
}
}
.sheet(item: $model.transcription) { transcription in
NavigationStack {
Group {
if transcription.isEmpty {
ContentUnavailableView(
"view.transcription.unavailable.title",
systemImage: "text.page.slash",
description: Text("view.transcription.unavailable.description")
)
} else {
ScrollView {
Text(transcription.text)
.font(.body)
.fontWeight(.regular)
.foregroundStyle(.primary)
.frame(
maxWidth: .infinity,
alignment: .leading
)
.padding()
}
}
}
.navigationTitle("view.transcription.navigation.title")
#if !os(macOS)
.navigationBarTitleDisplayMode(.inline)
#endif
.toolbar {
Button(role: .close) {
model.dismissed()
}
}
}
.presentationDetents([.medium, .large])
sheetTranscription(for: transcription)
}
}
}
// MARK: - Subviews
private extension ContentView {
// MARK: Computed
/// The toolbar menu that picks the locale of the spoken language to transcribe from the supported locales, disabled until
/// they are loaded.
var menuLocale: some View {
Menu {
Picker(
"view.recording.picker.locale.title",
selection: $model.locale
) {
ForEach(
model.locales,
id: \.self
) {
Text(model.name(for: $0))
.tag($0)
}
}
.pickerStyle(.inline)
} label: {
Label(
"view.recording.picker.locale.title",
systemImage: "globe"
)
}
.disabled(model.locales.isEmpty)
}
/// The stack of the model's in-app notifications, each one sliding in from the leading edge when posted and out again when
/// its scheduled dismissal arrives.
var stackNotifications: some View {
VStack(
alignment: .leading,
spacing: Constant.Spacing.stack
) {
ForEach(
model.notifications
) { notification in
Label {
Text(notification.textMessage)
} icon: {
Image(systemName: notification.imageSymbol)
}
.labelStyle(.notification(
event: notification.event
))
.transition(.move(
edge: .leading
).combined(
with: .opacity
))
}
}
.padding(.horizontal)
.animation(
.spring,
value: model.notifications
)
}
// MARK: Methods
/// Returns the content of the modal sheet presenting the given transcription or a content unavailable message when it is
/// empty inside a navigation stack of its own, closable through its toolbar button or a swipe.
///
/// - Parameter transcription: The transcription to present.
/// - Returns: The content of the modal sheet.
func sheetTranscription(
for transcription: Transcription
) -> some View {
NavigationStack {
Group {
if transcription.isEmpty {
ContentUnavailableView(
"view.transcription.unavailable.title",
systemImage: "text.page.slash",
description: Text("view.transcription.unavailable.description")
)
} else {
ScrollView {
Text(transcription.text)
.font(.body)
.fontWeight(.regular)
.foregroundStyle(.primary)
.frame(
maxWidth: .infinity,
alignment: .leading
)
.padding()
}
}
}
.navigationTitle("view.transcription.navigation.title")
#if !os(macOS)
.navigationBarTitleDisplayMode(.inline)
#endif
.toolbar {
Button(role: .close) {
model.dismissed()
}
}
}
.presentationDetents([.medium, .large])
}
}
// MARK: - AppNotification+Extensions
private extension AppNotification {
// MARK: Properties
/// The system symbol of the icon matching the notification's event.
var imageSymbol: String {
switch event {
case .cancelled: "xmark.circle"
case .failed: "exclamationmark.triangle"
case .started: "arrow.down.circle"
}
}
// MARK: Methods
/// The localized message of the notification, naming the locale of the speech model, from the app's string catalog.
var textMessage: LocalizedStringResource {
switch event {
case .cancelled: .viewRecordingNotificationDownloadCancelled(localeName)
case .failed: .viewRecordingNotificationDownloadFailed(localeName)
case .started: .viewRecordingNotificationDownloadStarted(localeName)
}
}
}
// MARK: - Constants
/// The constant values used across the view.
private enum Constant {
/// The spacing constants.
enum Spacing {
/// The spacing between the elements of a stack.
static let stack: CGFloat = 8
}
}
// MARK: - Previews
#Preview(