feat(myqbz): DJ-mix modal + detail multi-select bulk bar
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
This commit is contained in:
12 files changed
+739
-17
No files matched your search
@@ -28,6 +28,7 @@ import { QbzIcon } from "../primitives/QbzIcon.slint";
|
||||
import { QualityBadgeFull } from "../primitives/QualityBadgeFull.slint";
|
||||
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
|
||||
import { ListScrollbar } from "../primitives/ListScrollbar.slint";
|
||||
import { MultiSelectBar } from "../primitives/MultiSelectBar.slint";
|
||||
import { CollectionMosaic } from "CollectionMosaic.slint";
|
||||
|
||||
// --- Hero action button (.action-btn-circle family) ---------------------
|
||||
@@ -1365,4 +1366,31 @@ export component MixtapeDetailView inherits Rectangle {
|
||||
visible-height: flick.height;
|
||||
viewport-y <=> flick.viewport-y;
|
||||
}
|
||||
|
||||
// ===================== BULK ACTION BAR =============================
|
||||
// Spec 12 §13: a bottom-docked bar that appears while items are selected
|
||||
// (placement='bottom' default). Mirrors the local-library MultiSelectBar
|
||||
// chrome. The action set in THIS view (§13.1, minus the split-queue and
|
||||
// add-to-playlist/favorites buttons not threaded by this slice): Add to
|
||||
// Mixtape/Collection + Remove from this collection (danger). The bar emits
|
||||
// the id; the Rust side routes it (open AddToMixtapeModal / remove + reload).
|
||||
if MyQbzDetailState.select-mode && MyQbzDetailState.selected-count > 0: Rectangle {
|
||||
x: 18px;
|
||||
// Sit just above the fixed player bar (the scroller reserves 100px at
|
||||
// its bottom; the bar floats over that gutter).
|
||||
y: parent.height - self.height - 12px;
|
||||
width: parent.width - 18px - 22px;
|
||||
height: 44px;
|
||||
MultiSelectBar {
|
||||
width: 100%;
|
||||
selected-count: MyQbzDetailState.selected-count;
|
||||
actions: [
|
||||
{ id: "add-to-mixtape", label: @tr("Add to Mixtape/Collection"), danger: false, needs-selection: true },
|
||||
{ id: "remove-selected", label: @tr("Remove"), danger: true, needs-selection: true },
|
||||
];
|
||||
action(id) => {
|
||||
MyQbzDetailActions.bulk-action(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user