{
+ web_sys::window()?
+ .document()?
+ .get_element_by_id("audition")?
+ .dyn_into()
+ .ok()
+}
+
+#[component]
+pub fn App() -> impl IntoView {
+ let store = Store::new();
+
+ // mode → — CSS owns the mode presentation
+ Effect::new(move |_| {
+ let m = store.mode.get();
+ if let Some(body) = web_sys::window()
+ .and_then(|w| w.document())
+ .and_then(|d| d.body())
+ {
+ body.set_class_name(m.class());
+ }
+ });
+
+ // boot: episode, mic, meters
+ Effect::new(move |_| {
+ spawn_local(async move {
+ match api::episode().await {
+ Ok(e) => {
+ store.episode.set(Some(e));
+ store.select(0);
+ }
+ Err(e) => store.status.set(format!("episode load failed: {e}")),
+ }
+ match audio::init_mic(None).await {
+ Ok((devices, active)) => {
+ store
+ .devices
+ .set(devices.into_iter().map(|d| (d.id, d.label)).collect());
+ store.active_device.set(active);
+ audio::start_meters(move |l, r| store.meter.set((l, r)));
+ }
+ Err(e) => store.status.set(format!("mic init failed: {e}")),
+ }
+ });
+ });
+
+ // takes rail follows the selected clip (and explicit reloads)
+ Effect::new(move |_| {
+ let Some(c) = store.current_clip() else {
+ return;
+ };
+ let _ = store.takes_reload.get();
+ spawn_local(async move {
+ match api::takes(&c.id).await {
+ Ok(t) => {
+ // drop stale responses if the user switched clips mid-fetch
+ if store.current_clip_untracked().map(|cc| cc.id) == Some(c.id) {
+ store.takes.set(t);
+ }
+ }
+ Err(e) => store.status.set(format!("takes: {e}")),
+ }
+ });
+ });
+
+ // audition player follows the `playing` signal
+ Effect::new(move |_| {
+ let url = store.playing.get();
+ let Some(el) = audition_element() else {
+ return;
+ };
+ match url {
+ Some(u) => {
+ el.set_src(&u);
+ let _ = el.play();
+ }
+ None => el.pause().unwrap_or(()),
+ }
+ });
+
+ window_event_listener(ev::keydown, move |e: web_sys::KeyboardEvent| {
+ let idle = store.mode.get_untracked() == Mode::Idle;
+ match (e.code().as_str(), e.key().as_str()) {
+ ("Space", _) => {
+ e.prevent_default();
+ toggle_record(store);
+ }
+ (_, "Enter") => keep_take(store),
+ (_, "r") => retake(store),
+ (_, "ArrowDown" | "ArrowRight") if idle => {
+ let max = store
+ .episode
+ .with_untracked(|e| e.as_ref().map(|e| e.clips.len()).unwrap_or(1));
+ store.select((store.current.get_untracked() + 1).min(max.saturating_sub(1)));
+ }
+ (_, "ArrowUp" | "ArrowLeft") if idle => {
+ store.select(store.current.get_untracked().saturating_sub(1));
+ }
+ _ => {}
+ }
+ });
+
+ view! {
+
+
+
+
+
+
+
+ {move || store.countdown.get()}
+ }
+}
+
+#[component]
+fn ClipsRail(store: Store) -> impl IntoView {
+ view! {
+
+ }
+}
+
+/// One-line comparison stats from a take's saved coach report.
+fn take_meta(r: &Review) -> String {
+ let mut m = Vec::new();
+ if let Some(acc) = r.accuracy_pct {
+ m.push(format!("{acc:.0}% script"));
+ }
+ if let Some(wps) = r.wps {
+ m.push(format!("{wps:.1} w/s"));
+ }
+ m.push(format!("peak {:.0}dB", r.max_db));
+ if r.clipped {
+ m.push("🔴 clipped".into());
+ }
+ if !r.fits {
+ m.push("⚠ long".into());
+ }
+ if !r.pauses.is_empty() {
+ m.push(format!(
+ "💀 {} pause{}",
+ r.pauses.len(),
+ if r.pauses.len() > 1 { "s" } else { "" }
+ ));
+ }
+ m.join(" · ")
+}
+
+#[component]
+fn TakesRail(store: Store) -> impl IntoView {
+ view! {
+
+ }
+}
+
+#[component]
+fn TakeRow(
+ store: Store,
+ take: TakeInfo,
+ key: String,
+ url: String,
+ clip_id: String,
+) -> impl IntoView {
+ let file = take.file.clone();
+ let name = file.trim_end_matches(".mp3").to_string();
+ let meta = take.review.as_ref().map(take_meta).unwrap_or_default();
+ let coaching = take
+ .review
+ .as_ref()
+ .map(|r| r.coaching.clone())
+ .unwrap_or_default();
+ let transcript = take.review.as_ref().and_then(|r| r.transcript.clone());
+ let has_review = take.review.is_some();
+ let approved = take.approved;
+ let key_open = key.clone();
+ let key_click = key.clone();
+ let url_play = url.clone();
+ let file_approve = file.clone();
+
+ view! {
+
+
+ "›"
+ {name}
+ {format!("{}s", fmt2(take.duration))}
+
+ {if approved {
+ view! { "✓" }.into_any()
+ } else {
+ view! {
+
+ }
+ .into_any()
+ }}
+
+ {(!meta.is_empty()).then(|| view! {
{meta}
})}
+
+
+ {if has_review {
+ view! {
+
+ {coaching.into_iter().map(|n| view! { - {n}
}).collect_view()}
+
+ {transcript.map(|t| view! {
{format!("heard: “{t}”")}
})}
+ }
+ .into_any()
+ } else {
+ view! {
"no analysis saved for this take"
}.into_any()
+ }}
+
+
+
+ {move || store.current_clip().map(|c| format!("{} / {}", c.scene, c.clip)).unwrap_or("—".into())}
+
+
+ {move || {
+ store
+ .current_clip()
+ .map(|c| {
+ format!(
+ "window {}s at tempo {}{}",
+ fmt2(c.window),
+ c.tempo,
+ match c.take_duration {
+ Some(d) => format!(" · current take {}s", fmt2(d)),
+ None => " · no take yet".into(),
+ },
+ )
+ })
+ .unwrap_or_default()
+ }}
+
+
+
+ }
+}
+
+#[component]
+fn Stage(store: Store) -> impl IntoView {
+ view! {
+
+
+
+ {move || store.current_clip().map(|c| c.text).unwrap_or("loading…".into())}
+
+
+
+
+
+ {move || match (store.review.get(), store.review_error.get()) {
+ (Some(r), _) => {
+ let acc = r.accuracy_pct.map(|a| format!(" · script {a:.0}%")).unwrap_or_default();
+ let pace = r.wps.map(|w| format!(" · {w:.1} w/s")).unwrap_or_default();
+ view! {
+ "COACH · take " {format!("{:03}", r.take)} " · "
+ {format!("{}s", fmt2(r.duration))}
+ {format!(" / {}s window{acc}{pace} · peak {:.1} dB", fmt2(r.window), r.max_db)}
+ }
+ .into_any()
+ }
+ (None, Some(e)) => view! { "COACH · unavailable (" {e} ")" }.into_any(),
+ (None, None) => view! { "COACH · analyzing take…" }.into_any(),
+ }}
+
+
+ {move || {
+ store
+ .review
+ .get()
+ .map(|r| r.coaching.into_iter().map(|n| view! { - {n}
}).collect_view())
+ }}
+
+
+ {move || {
+ store
+ .review
+ .get()
+ .and_then(|r| r.transcript)
+ .map(|t| format!("heard: “{t}”"))
+ }}
+
+
+
+
+
+
+