vicrodh
1db40d87ef
Phase-2 Slice 10. - ui/myqbz/MyQbzMixModal.slint + src/myqbz_mix.rs: the DJ-mix "random queue" modal. Open resolves the collection in-order + shuffle::unique_track_count (deterministic) for the slider max (buildSizeOptions). Shuffle re-resolves, runs dedup_by_similarity + hybrid_sample with a thread RNG kept in a SYNC scope (dropped before the next .await -- !Send confinement), then replace-plays + stamps queue-source + touch_play; toasts "Playing N of M" when the per-album cap shrinks the pool. Wired on_dj_mix. - Detail bulk bar (MultiSelectBar, bottom-docked): add-selected -> AddToMixtapeModal with the selected payloads; remove-selected -> repo::remove_item (highest position first so compaction does not invalidate pending positions) -> reload + clear selection + toast. Deferred to polish: the bulk bar's queue / add-to-playlist / clear-X groups (§13.1). Backend crates untouched. cargo check -p qbz-slint green. cc
215 lines
9.3 KiB
Plaintext
215 lines
9.3 KiB
Plaintext
// My QBZ — DJ-mix "Random queue" sampler modal (TrackMixModal, spec 21 §C /
|
|
// spec 12 §12).
|
|
//
|
|
// Opened from the hero DJ-mix CTA. Lets the user pick how many randomly-sampled
|
|
// songs to enqueue from this collection. The size choices come from the
|
|
// backend's buildSizeOptions math (50,100,150,…,All(N)) where N is the deduped
|
|
// unique-track count; the modal exposes them through a snapping slider (the
|
|
// prompt's directive — mirror QbzSlider + the modal idiom). On confirm it hands
|
|
// the chosen size to the Rust controller, which runs dedup_by_similarity +
|
|
// hybrid_sample and replaces the queue.
|
|
//
|
|
// Chrome mirrors MyQbzEditModal: an own backdrop (#000000bf) + a 440px panel,
|
|
// h2 title (18px bold), and a footer with secondary Cancel + a primary Shuffle.
|
|
// Backdrop click + Cancel close without committing; Shuffle is disabled while
|
|
// loading / busy or when no size is available.
|
|
//
|
|
// Per spec §23 the button labels are HARDCODED English in the Tauri source; we
|
|
// keep them @tr here (translate hardcoded UI strings on port).
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { Typography } from "../foundation/typography.slint";
|
|
import { Radius } from "../foundation/radius.slint";
|
|
import { MyQbzMixState, MyQbzMixActions } from "../state.slint";
|
|
import { QbzSlider } from "../primitives/QbzSlider.slint";
|
|
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
|
|
|
|
export component MyQbzMixModal inherits Rectangle {
|
|
visible: MyQbzMixState.open;
|
|
|
|
// Shuffle is allowed once a count is loaded (a non-empty options list) and
|
|
// nothing is in flight.
|
|
property <bool> can-shuffle:
|
|
!MyQbzMixState.loading
|
|
&& !MyQbzMixState.busy
|
|
&& MyQbzMixState.size-options.length > 0
|
|
&& MyQbzMixState.selected-size > 0;
|
|
// Slider travels over option INDICES (0..options-1). A single option (small
|
|
// collection -> only "All (N)") still renders a degenerate 0..0 track.
|
|
property <int> slider-max: Math.max(0, MyQbzMixState.size-options.length - 1);
|
|
// The dropdown-style display value for the current size: "All (N)" for the
|
|
// trailing entry, else the plain number.
|
|
property <string> size-label:
|
|
MyQbzMixState.selected-is-all
|
|
? @tr("All ({})", MyQbzMixState.selected-size)
|
|
: "\{MyQbzMixState.selected-size}";
|
|
|
|
if MyQbzMixState.open: Rectangle {
|
|
background: #000000bf;
|
|
TouchArea {
|
|
mouse-cursor: default;
|
|
clicked => {
|
|
MyQbzMixActions.close();
|
|
}
|
|
}
|
|
Rectangle {
|
|
width: Math.min(root.width - 80px, 440px);
|
|
height: panel.preferred-height;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
border-radius: Radius.md;
|
|
background: Theme.surface-card;
|
|
border-width: 1px;
|
|
border-color: Theme.border-subtle;
|
|
drop-shadow-blur: 32px;
|
|
drop-shadow-color: #00000080;
|
|
// Swallow clicks on the panel (so they don't reach the backdrop).
|
|
TouchArea { }
|
|
|
|
panel := VerticalLayout {
|
|
padding: 24px;
|
|
spacing: 18px;
|
|
|
|
// --- Title (h2) — mixModal.title = "Random queue" --------
|
|
Text {
|
|
text: @tr("Random queue");
|
|
color: Theme.text-primary;
|
|
font-size: 18px;
|
|
font-weight: Typography.bold;
|
|
}
|
|
|
|
// --- Body copy (mixModal.body) ---------------------------
|
|
Text {
|
|
text: @tr("Create a random queue with songs from this collection. How many songs do you want?");
|
|
color: Theme.text-secondary;
|
|
font-size: 14px;
|
|
wrap: word-wrap;
|
|
}
|
|
|
|
// --- Loading state (mixModal.computing) ------------------
|
|
if MyQbzMixState.loading: HorizontalLayout {
|
|
spacing: 8px;
|
|
alignment: start;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
LoadingSpinner { size: 18px; }
|
|
}
|
|
Text {
|
|
text: @tr("Loading…");
|
|
color: Theme.text-secondary;
|
|
font-size: 14px;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
// --- Size field (slider + count labels) ------------------
|
|
if !MyQbzMixState.loading && MyQbzMixState.size-options.length > 0: VerticalLayout {
|
|
spacing: 8px;
|
|
|
|
// Field label (mixModal.numberOfSongs).
|
|
Text {
|
|
text: @tr("Number of songs");
|
|
color: Theme.text-primary;
|
|
font-size: 13px;
|
|
font-weight: Typography.medium;
|
|
}
|
|
|
|
// Selected size + slider on one row.
|
|
HorizontalLayout {
|
|
spacing: 12px;
|
|
// The current pick (big, accent), so the slider's effect
|
|
// is legible.
|
|
Text {
|
|
text: root.size-label;
|
|
color: Theme.accent;
|
|
font-size: 15px;
|
|
font-weight: Typography.semibold;
|
|
vertical-alignment: center;
|
|
min-width: 64px;
|
|
}
|
|
VerticalLayout {
|
|
horizontal-stretch: 1;
|
|
alignment: center;
|
|
QbzSlider {
|
|
width: 100%;
|
|
minimum: 0;
|
|
maximum: root.slider-max;
|
|
value: MyQbzMixState.selected-index;
|
|
changed(v) => {
|
|
MyQbzMixActions.set-index(v);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Helper (mixModal.songsAvailable) = "{n} songs available".
|
|
Text {
|
|
text: @tr("{} songs available", MyQbzMixState.unique-count);
|
|
color: Theme.text-muted;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
// --- Footer (.tm-actions, right-aligned) -----------------
|
|
HorizontalLayout {
|
|
alignment: end;
|
|
spacing: 12px;
|
|
|
|
// Cancel (secondary).
|
|
Rectangle {
|
|
width: cancel-label.preferred-width + 32px;
|
|
height: 38px;
|
|
border-radius: Radius.sm;
|
|
background: cancel-ta.has-hover ? Theme.surface-hover : Theme.surface-elevated;
|
|
border-width: 1px;
|
|
border-color: Theme.border-subtle;
|
|
cancel-label := Text {
|
|
text: @tr("Cancel");
|
|
color: Theme.text-primary;
|
|
font-size: Typography.body;
|
|
font-weight: Typography.semibold;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
}
|
|
cancel-ta := TouchArea {
|
|
mouse-cursor: MyQbzMixState.busy ? default : pointer;
|
|
clicked => {
|
|
if (!MyQbzMixState.busy) {
|
|
MyQbzMixActions.close();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Shuffle / Add to queue (primary) — mixModal.confirm.
|
|
Rectangle {
|
|
width: confirm-label.preferred-width + 40px;
|
|
height: 38px;
|
|
border-radius: Radius.sm;
|
|
opacity: root.can-shuffle ? 1.0 : 0.5;
|
|
background: confirm-ta.has-hover && root.can-shuffle
|
|
? #ffffffd6
|
|
: Theme.accent;
|
|
confirm-label := Text {
|
|
text: @tr("Add to queue");
|
|
color: #ffffff;
|
|
font-size: Typography.body;
|
|
font-weight: Typography.semibold;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
}
|
|
confirm-ta := TouchArea {
|
|
mouse-cursor: root.can-shuffle ? pointer : default;
|
|
clicked => {
|
|
if (root.can-shuffle) {
|
|
MyQbzMixActions.shuffle();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|