Function BlockPlayer

preview/src/main.rs:1416–1513

()

#[component]
fn BlockPlayer() -> Element {
    const TRACK_DURATION_SECONDS: f64 = 212.0;
    const TRACK_START_SECONDS: f64 = 84.0;

    let mut playing = use_signal(|| true);
    let mut progress_seconds = use_signal(|| Some(TRACK_START_SECONDS));
    let current_time = use_memo(move || format_track_time(progress_seconds().unwrap_or(0.0)));
    let duration_time = format_track_time(TRACK_DURATION_SECONDS);

    use_effect(move || {
        let mut timer = document::eval(
            "setInterval(() => {
                dioxus.send(performance.now());
            }, 100);",
        );

        spawn(async move {
            let mut last_tick_ms: Option<f64> = None;

            while let Ok(now_ms) = timer.recv::<f64>().await {
                let elapsed_seconds = last_tick_ms
                    .map(|last_ms| ((now_ms - last_ms) / 1000.0).clamp(0.0, 0.25))
                    .unwrap_or(0.0);
                last_tick_ms = Some(now_ms);

                if !playing() {
                    continue;
                }

                let current = progress_seconds().unwrap_or(0.0);
                let next = if current >= TRACK_DURATION_SECONDS {
                    0.0
                } else {
                    (current + elapsed_seconds).min(TRACK_DURATION_SECONDS)
                };
                progress_seconds.set(Some(next));
            }
        });
    });

    rsx! {
        div { style: "display: flex; gap: 0.85rem; align-items: center;",
            img {
                src: "https://avatar.vercel.sh/midnight-city",
                alt: "Midnight City album art",
                width: "64",
                height: "64",
                style: "width: 64px; height: 64px; border-radius: 0.45rem; object-fit: cover; flex-shrink: 0; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.35);",
            }
            div { style: "flex: 1; min-width: 0;",
                p { style: "margin: 0; font-weight: 600; color: var(--secondary-color-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",
                    "Midnight City"
                }
                p { style: "margin: 0.15rem 0 0; color: var(--secondary-color-5); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",
                    "M83 · Hurry Up, We're Dreaming"
                }
            }
        }