vicrodh
e1bdec5094
- Rework the "All" list view to the aligned column layout of the mixtape detail list: artwork + hover play, title + clickable-artist subtitle, a TYPE column, a dedicated SOURCE column (SourceGlyph), the row QualityBadgeFull in a Quality column (was the uneven grid badge), favorite/follow indicator, and the per-kind context menu — no longer bare and out of tune. - Fix the NVIDIA "wallpaper join" background seam: replace the float hash2 in ambient.wgsl + plasma.wgsl with a bit-exact integer (u32) lattice hash so the same cell corner hashes identically from adjacent cells on NVIDIA. - Fix the close-to-tray "RefCell already mutably borrowed" panic introduced by the teardown texture-clear: defer the set via upgrade_in_event_loop so it runs after the window adapter releases its borrow. - Add "Go to album" to the TrackCard context menu and the list-row menu (adds album-id to the feed model). cc
324 lines
13 KiB
Plaintext
324 lines
13 KiB
Plaintext
// Track card for grid surfaces (the Library "All" mixed feed).
|
|
//
|
|
// A reduced AlbumCard: a single track rendered as a 200px card instead of a
|
|
// list row. Mirrors AlbumCard.slint 1:1 for design coherence — same 200x200
|
|
// clipped cover, hover scrim, centered play/favorite/more overlay row, then a
|
|
// 6px spacer and a 40px meta row (title + "Track • Artist" subtitle beside an
|
|
// icon-only quality badge). Deterministic 246px height.
|
|
//
|
|
// Unlike AlbumCard (whose body click OPENS the album), a track card's body
|
|
// click PLAYS the track (like PlaylistCard's body-opens=false). Actions bubble
|
|
// up as media-action("track", id, action).
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { Typography } from "../foundation/typography.slint";
|
|
import { Radius } from "../foundation/radius.slint";
|
|
import { Spacing } from "../foundation/spacing.slint";
|
|
import { TrackItem, NavState } from "../state.slint";
|
|
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
|
import { QualityBadge } from "../primitives/QualityBadge.slint";
|
|
import { ContextMenu } from "../primitives/ContextMenu.slint";
|
|
import { ContextMenuItem } from "../primitives/ContextMenuItem.slint";
|
|
|
|
// Circular hover-overlay action button. Solid (semi-transparent) fill so the
|
|
// whole circle is a stable hit/hover surface. File-local by design — every card
|
|
// (AlbumCard/PlaylistCard/ArtistGridCard) carries its own copy.
|
|
component OverlayButton inherits Rectangle {
|
|
in property <image> icon;
|
|
in property <bool> primary: false;
|
|
in property <length> diameter: 36px;
|
|
in property <length> icon-size: 16px;
|
|
in property <bool> active: false;
|
|
out property <bool> hovered: ta.has-hover;
|
|
callback clicked();
|
|
|
|
width: root.diameter;
|
|
height: root.diameter;
|
|
border-radius: root.diameter / 2;
|
|
background: root.primary
|
|
? (ta.has-hover ? #ffffffd6 : #ffffff)
|
|
: (ta.has-hover ? #ffffff3d : #ffffff24);
|
|
border-width: root.primary ? 0px : 1.5px;
|
|
border-color: #ffffffcc;
|
|
|
|
QbzIcon {
|
|
source: root.icon;
|
|
width: root.icon-size;
|
|
height: root.icon-size;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
tint: root.active
|
|
? Theme.accent
|
|
: (root.primary ? #000000 : #ffffff);
|
|
}
|
|
|
|
ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.clicked();
|
|
}
|
|
pointer-event(e) => {
|
|
if (e.kind == PointerEventKind.down && e.button == PointerEventButton.back) {
|
|
NavState.request-back();
|
|
}
|
|
if (e.kind == PointerEventKind.down && e.button == PointerEventButton.forward) {
|
|
NavState.request-forward();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export component TrackCard inherits Rectangle {
|
|
in property <TrackItem> track;
|
|
in property <bool> show-favorite: true;
|
|
// Always-visible source badge on the artwork (Library All: local | plex |
|
|
// qobuz). Off elsewhere (single-source surfaces).
|
|
in property <bool> show-source-badge: false;
|
|
// Fade out when the card is being removed (favorites un-favorite).
|
|
opacity: root.track.removing ? 0.0 : 1.0;
|
|
animate opacity { duration: 250ms; }
|
|
callback clicked(string);
|
|
// kind ("track"), track id, action ("play" | "queue" | "play-next" |
|
|
// "favorite" | "open").
|
|
callback media-action(string, string, string);
|
|
|
|
in property <length> card-height: 246px;
|
|
width: 200px;
|
|
height: root.card-height;
|
|
|
|
property <bool> overlay-on: hover.has-hover
|
|
|| fav-btn.hovered || play-btn.hovered || more-btn.hovered;
|
|
|
|
VerticalLayout {
|
|
alignment: start;
|
|
spacing: 0px;
|
|
|
|
// --- Artwork + hover overlay -------------------------------------
|
|
Rectangle {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: Radius.sm;
|
|
background: Theme.surface-elevated;
|
|
clip: true;
|
|
|
|
Image {
|
|
width: 100%;
|
|
height: 100%;
|
|
source: root.track.artwork;
|
|
image-fit: cover;
|
|
}
|
|
|
|
// Hover scrim.
|
|
Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000000;
|
|
opacity: root.overlay-on ? 0.6 : 0.0;
|
|
animate opacity { duration: 150ms; }
|
|
}
|
|
|
|
// Card body — click PLAYS the track. Declared before the action
|
|
// buttons so those, when interactive, win the pointer.
|
|
hover := TouchArea {
|
|
width: 100%;
|
|
height: 100%;
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.media-action("track", root.track.id, "play");
|
|
}
|
|
}
|
|
|
|
// Hover action buttons — favorite / play / more.
|
|
HorizontalLayout {
|
|
x: 0px;
|
|
y: 120px;
|
|
width: 200px;
|
|
height: 44px;
|
|
alignment: center;
|
|
spacing: 12px;
|
|
opacity: root.overlay-on ? 1.0 : 0.0;
|
|
animate opacity { duration: 150ms; }
|
|
|
|
VerticalLayout {
|
|
alignment: center;
|
|
fav-btn := OverlayButton {
|
|
visible: root.show-favorite;
|
|
icon: root.track.is-favorite
|
|
? @image-url("../assets/icons/heart-filled.svg")
|
|
: @image-url("../assets/icons/heart.svg");
|
|
active: root.track.is-favorite;
|
|
clicked => {
|
|
root.media-action("track", root.track.id, "favorite");
|
|
}
|
|
}
|
|
}
|
|
play-btn := OverlayButton {
|
|
icon: @image-url("../assets/icons/play-fill.svg");
|
|
primary: true;
|
|
diameter: 44px;
|
|
icon-size: 18px;
|
|
clicked => {
|
|
root.media-action("track", root.track.id, "play");
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
more-btn := OverlayButton {
|
|
icon: @image-url("../assets/icons/ellipsis.svg");
|
|
clicked => {
|
|
track-menu.show();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Always-visible source badge — bottom-right of the art. Small
|
|
// rounded square (ADR-008: not a pill).
|
|
if root.show-source-badge && root.track.source != "": Rectangle {
|
|
x: parent.width - self.width - 6px;
|
|
y: parent.height - self.height - 6px;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
background: #000000b3;
|
|
Image {
|
|
source: root.track.source == "plex"
|
|
? @image-url("../assets/icons/plex-logo.svg")
|
|
: (root.track.source == "qobuz"
|
|
? @image-url("../assets/icons/qobuz-logo-filled.svg")
|
|
: @image-url("../assets/icons/hard-drive.svg"));
|
|
colorize: root.track.source == "local" ? #ffffff : transparent;
|
|
width: root.track.source == "plex" ? 16px
|
|
: (root.track.source == "qobuz" ? 18px : 14px);
|
|
height: self.width;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
image-fit: contain;
|
|
}
|
|
}
|
|
|
|
// Context menu for the "more" button.
|
|
track-menu := PopupWindow {
|
|
x: 26px;
|
|
y: 56px;
|
|
width: 196px;
|
|
// Play / Play-next / Queue / Go-to-artist / Go-to-album / favorite.
|
|
height: 6 * 33px + 10px;
|
|
ContextMenu {
|
|
ContextMenuItem {
|
|
icon: @image-url("../assets/icons/play.svg");
|
|
label: @tr("Play");
|
|
clicked => {
|
|
root.media-action("track", root.track.id, "play");
|
|
}
|
|
}
|
|
ContextMenuItem {
|
|
icon: @image-url("../assets/icons/list-plus.svg");
|
|
label: @tr("Play next");
|
|
clicked => {
|
|
root.media-action("track", root.track.id, "play-next");
|
|
}
|
|
}
|
|
ContextMenuItem {
|
|
icon: @image-url("../assets/icons/list-end.svg");
|
|
label: @tr("Add to queue");
|
|
clicked => {
|
|
root.media-action("track", root.track.id, "queue");
|
|
}
|
|
}
|
|
if root.track.artist-id != "": ContextMenuItem {
|
|
icon: @image-url("../assets/icons/user.svg");
|
|
label: @tr("Go to artist");
|
|
clicked => {
|
|
root.media-action("artist", root.track.artist-id, "open");
|
|
}
|
|
}
|
|
if root.track.album-id != "": ContextMenuItem {
|
|
icon: @image-url("../assets/icons/disc.svg");
|
|
label: @tr("Go to album");
|
|
clicked => {
|
|
root.media-action("album", root.track.album-id, "open");
|
|
}
|
|
}
|
|
if root.show-favorite: ContextMenuItem {
|
|
icon: root.track.is-favorite
|
|
? @image-url("../assets/icons/heart-filled.svg")
|
|
: @image-url("../assets/icons/heart.svg");
|
|
label: root.track.is-favorite
|
|
? @tr("Remove from Library")
|
|
: @tr("Add to Library");
|
|
clicked => {
|
|
root.media-action("track", root.track.id, "favorite");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle { height: 6px; }
|
|
|
|
// --- Title / "Track • Artist" + quality badge --------------------
|
|
HorizontalLayout {
|
|
height: 40px;
|
|
spacing: Spacing.sm;
|
|
|
|
VerticalLayout {
|
|
alignment: center;
|
|
spacing: 2px;
|
|
horizontal-stretch: 1;
|
|
|
|
// Track title — clickable, plays the track (same as the body).
|
|
title-area := TouchArea {
|
|
height: 20px;
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.media-action("track", root.track.id, "play");
|
|
}
|
|
Text {
|
|
width: 100%;
|
|
text: root.track.title;
|
|
color: title-area.has-hover ? Theme.accent : Theme.text-primary;
|
|
font-size: Typography.body - 2px;
|
|
font-weight: Typography.medium;
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
// "Track • Artist" subtitle — the artist portion links to the
|
|
// artist page when an id is known.
|
|
artist-area := TouchArea {
|
|
height: 18px;
|
|
mouse-cursor: root.track.artist-id != "" ? pointer : default;
|
|
clicked => {
|
|
if (root.track.artist-id != "") {
|
|
root.media-action("artist", root.track.artist-id, "open");
|
|
}
|
|
}
|
|
Text {
|
|
width: 100%;
|
|
text: @tr("Track") + " • " + root.track.artist;
|
|
color: root.track.artist-id != "" && artist-area.has-hover
|
|
? Theme.text-primary
|
|
: Theme.text-muted;
|
|
font-size: Typography.link - 1px;
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Icon-only quality badge. TrackItem has no pre-composed label, so
|
|
// the hover tooltip carries the bare detail line (e.g. "24-bit /
|
|
// 96 kHz") rather than AlbumCard's full "Hi-Res: …" string.
|
|
VerticalLayout {
|
|
alignment: center;
|
|
QualityBadge {
|
|
tier: root.track.quality-tier;
|
|
label: root.track.quality-detail;
|
|
detail: root.track.quality-detail;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|