vicrodh
da7758b9d6
Land the "New" now-playing bar as the first of the four switchable layouts. A dedicated SongCard component holds the cover (or an idle sleeping cat), the elidable title, the artist·album links, and the vertical audio stamp (compact quality badge over the backend/mode LEDs). A full-width seek bar sits on top with a buffer-driven stream lock. The controls row uses responsive symmetric column zones (39/30/25% by window width); the side columns share one fraction so the transport stays absolutely centred and PLAY lands on the window centre. The song-card / controls divider is a hard wall: the text column stretches to push the audio stamp to its right edge, the album elides first (and never collapses to zero) so the stamp is always visible and never crosses the wall. Adds QualityBadgeFull compact mode, backend/mode output LED labels from settings, a global TooltipOverlay so clipped columns keep their tooltips, and the supporting icons. cc
96 lines
4.0 KiB
Plaintext
96 lines
4.0 KiB
Plaintext
// Full quality badge — a faithful port of the Tauri QualityBadgeStatic
|
|
// (full mode): a contained pill with the format icon, the tier label, and
|
|
// the exact bit-depth / sample-rate line.
|
|
//
|
|
// Intentionally not a creative reinterpretation — the Tauri layout is the
|
|
// contract. Used wherever a track list or detail view advertises its
|
|
// stored quality. `compact` scales it ~20% smaller for the now-playing
|
|
// AudioStamp without touching the other call sites.
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { QbzIcon } from "QbzIcon.slint";
|
|
|
|
export component QualityBadgeFull inherits Rectangle {
|
|
// "hires" | "cd" | "mp3" | "".
|
|
in property <string> tier;
|
|
// Exact quality, e.g. "24-bit / 96 kHz".
|
|
in property <string> detail;
|
|
// Whether to show the format icon (Hi-Res / CD / MP3 mark). The track-row
|
|
// variant turns it off.
|
|
in property <bool> show-icon: true;
|
|
// "bare" = no chip background or border, text centered — blends into a
|
|
// track row instead of looking like a contained badge.
|
|
in property <bool> bare: false;
|
|
// ~20%-smaller variant for the now-playing AudioStamp.
|
|
in property <bool> compact: false;
|
|
// Extra proportional scale on top of `compact` (1.0 = none). The
|
|
// now-playing stamp drops this to 0.9 below the responsive break so it
|
|
// never crowds the song card.
|
|
in property <float> scale-factor: 1.0;
|
|
|
|
property <string> tier-label: root.tier == "hires"
|
|
? "HI-RES"
|
|
: (root.tier == "mp3" ? "MP3" : "CD");
|
|
|
|
visible: root.tier != "";
|
|
height: (root.compact ? 29px : 36px) * root.scale-factor;
|
|
width: root.bare
|
|
? content.preferred-width
|
|
: Math.max(content.preferred-width, (root.compact ? 108px : 136px) * root.scale-factor);
|
|
border-radius: 4px;
|
|
background: root.bare ? transparent : Theme.surface-hover;
|
|
border-width: root.bare ? 0px : 1px;
|
|
border-color: Theme.border-subtle;
|
|
|
|
content := HorizontalLayout {
|
|
padding-left: root.bare ? 0px : (root.compact ? 8px : 10px) * root.scale-factor;
|
|
padding-right: root.bare ? 0px : (root.compact ? 8px : 10px) * root.scale-factor;
|
|
spacing: root.bare ? 0px : (root.compact ? 5px : 6px) * root.scale-factor;
|
|
alignment: root.bare ? center : start;
|
|
|
|
// Format icon. The Hi-Res brand mark keeps its own colors; the
|
|
// CD / MP3 marks render in muted grey.
|
|
if root.show-icon: VerticalLayout {
|
|
alignment: center;
|
|
if root.tier == "hires": Image {
|
|
source: @image-url("../assets/hi-res.svg");
|
|
width: (root.compact ? 19px : 24px) * root.scale-factor;
|
|
height: (root.compact ? 19px : 24px) * root.scale-factor;
|
|
image-fit: contain;
|
|
}
|
|
if root.tier == "cd": QbzIcon {
|
|
source: @image-url("../assets/cd.svg");
|
|
width: (root.compact ? 13px : 16px) * root.scale-factor;
|
|
height: (root.compact ? 13px : 16px) * root.scale-factor;
|
|
tint: #b0b0b0;
|
|
}
|
|
if root.tier == "mp3": QbzIcon {
|
|
source: @image-url("../assets/mp3.svg");
|
|
width: (root.compact ? 13px : 16px) * root.scale-factor;
|
|
height: (root.compact ? 13px : 16px) * root.scale-factor;
|
|
tint: #b0b0b0;
|
|
}
|
|
}
|
|
|
|
VerticalLayout {
|
|
alignment: center;
|
|
spacing: 1px;
|
|
Text {
|
|
text: root.tier-label;
|
|
color: #b0b0b0;
|
|
font-size: (root.compact ? 7px : 8px) * root.scale-factor;
|
|
font-weight: 100;
|
|
letter-spacing: 0.5px;
|
|
horizontal-alignment: root.bare ? center : left;
|
|
}
|
|
Text {
|
|
text: root.detail;
|
|
color: #999999;
|
|
font-size: (root.compact ? 8px : 9px) * root.scale-factor;
|
|
font-weight: 100;
|
|
horizontal-alignment: root.bare ? center : left;
|
|
}
|
|
}
|
|
}
|
|
}
|