fix(slint): search results 1:1 with Tauri
- Most popular: a crowned hero inline with the artists carousel; its cover now resolves (a dedicated artwork target was missing). - Artists: a real carousel on the All tab, ArtistCard restyled to the Tauri For-You tile with a Follow chip (favorites the artist) shown when the user does not follow it. - Playlists: a PlaylistCarousel of PlaylistCard, with a count-based PlaylistCollage (1/2/3/4-up) instead of a flat row list. - Carousels gained a View all link; result counts removed from titles. - searchType filter is a styled radio row (ring + accent dot) at the top right with a clear button, not a dropdown. - Title fixed to Search Results. - QbzCore::favorite_artist_ids backs the follow state. cc
This commit is contained in:
15 files changed
+1213
-339
No files matched your search
@@ -1,5 +1,6 @@
|
||||
// Artist card — a circular portrait with the artist name and a subtitle
|
||||
// (album count). Mirrors the Tauri search artist card.
|
||||
// Artist card — a circular portrait with the artist name and, when the
|
||||
// user does not already follow the artist, a Follow chip. Style ported
|
||||
// from the Tauri Discover "For You" artist tile.
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Typography } from "../foundation/typography.slint";
|
||||
@@ -9,27 +10,41 @@ import { QbzIcon } from "../primitives/QbzIcon.slint";
|
||||
export component ArtistCard inherits Rectangle {
|
||||
in property <SlimItem> artist;
|
||||
callback clicked(string);
|
||||
// kind ("artist"), artist id, action ("follow").
|
||||
callback media-action(string, string, string);
|
||||
|
||||
width: 160px;
|
||||
height: 200px;
|
||||
width: 170px;
|
||||
height: 248px;
|
||||
border-radius: 8px;
|
||||
background: ta.has-hover ? Theme.surface-elevated : transparent;
|
||||
|
||||
// Whole-card click — declared before the content so the Follow chip
|
||||
// keeps its own clicks.
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked(root.artist.id);
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
padding: 12px;
|
||||
spacing: 8px;
|
||||
alignment: start;
|
||||
spacing: 12px;
|
||||
|
||||
// Circular portrait, centered in the card column.
|
||||
// Circular portrait.
|
||||
HorizontalLayout {
|
||||
alignment: center;
|
||||
Rectangle {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
border-radius: 74px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 70px;
|
||||
clip: true;
|
||||
background: Theme.surface-elevated;
|
||||
QbzIcon {
|
||||
source: @image-url("../assets/icons/user.svg");
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
tint: Theme.text-muted;
|
||||
@@ -43,31 +58,54 @@ export component ArtistCard inherits Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 2px;
|
||||
Text {
|
||||
text: root.artist.title;
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.body;
|
||||
font-weight: Typography.medium;
|
||||
horizontal-alignment: center;
|
||||
overflow: elide;
|
||||
}
|
||||
Text {
|
||||
text: root.artist.subtitle;
|
||||
visible: root.artist.subtitle != "";
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.link;
|
||||
horizontal-alignment: center;
|
||||
overflow: elide;
|
||||
}
|
||||
Text {
|
||||
text: root.artist.title;
|
||||
width: 146px;
|
||||
color: Theme.text-primary;
|
||||
font-size: 14px;
|
||||
font-weight: Typography.medium;
|
||||
horizontal-alignment: center;
|
||||
overflow: elide;
|
||||
}
|
||||
}
|
||||
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked(root.artist.id);
|
||||
// Follow chip — only while the user does not follow the artist.
|
||||
if !root.artist.following: HorizontalLayout {
|
||||
alignment: center;
|
||||
Rectangle {
|
||||
width: chip-row.preferred-width;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
background: follow-ta.has-hover
|
||||
? Theme.surface-hover
|
||||
: Theme.surface-elevated;
|
||||
chip-row := HorizontalLayout {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
spacing: 6px;
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
QbzIcon {
|
||||
source: @image-url("../assets/icons/user-plus.svg");
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
tint: Theme.text-primary;
|
||||
}
|
||||
}
|
||||
Text {
|
||||
text: @tr("Follow");
|
||||
color: Theme.text-primary;
|
||||
font-size: 12px;
|
||||
font-weight: Typography.medium;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
follow-ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.media-action("artist", root.artist.id, "follow");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
// Artist carousel — a title, prev/next page controls, and a clipped,
|
||||
// sliding track of artist cards. Same paging mechanism as Carousel, but
|
||||
// for artists (circular cards). Used by the search results All tab.
|
||||
// Artist carousel — title, "View all" link, prev/next page controls, and
|
||||
// a clipped sliding track of artist cards. Same paging mechanism as
|
||||
// Carousel. Used by the search results All tab.
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Typography } from "../foundation/typography.slint";
|
||||
@@ -39,14 +39,39 @@ component NavButton inherits Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
component ViewAllLink inherits Rectangle {
|
||||
callback clicked();
|
||||
width: link-text.preferred-width + 16px;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
background: ta.has-hover ? Theme.surface-hover : transparent;
|
||||
link-text := Text {
|
||||
text: @tr("View all");
|
||||
color: Theme.accent;
|
||||
font-size: 14px;
|
||||
font-weight: Typography.medium;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
}
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component ArtistCarousel inherits VerticalLayout {
|
||||
in property <string> title;
|
||||
in property <[SlimItem]> artists;
|
||||
in property <bool> show-view-all: false;
|
||||
callback artist-clicked(string);
|
||||
callback media-action(string, string, string);
|
||||
callback view-all-clicked();
|
||||
|
||||
property <length> card-width: 160px;
|
||||
property <length> card-height: 200px;
|
||||
property <length> gap: 24px;
|
||||
property <length> card-width: 170px;
|
||||
property <length> card-height: 248px;
|
||||
property <length> gap: 16px;
|
||||
|
||||
property <int> count: root.artists.length;
|
||||
property <int> per-page: Math.max(
|
||||
@@ -62,6 +87,7 @@ export component ArtistCarousel inherits VerticalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 8px;
|
||||
Text {
|
||||
text: root.title;
|
||||
color: Theme.text-primary;
|
||||
@@ -70,26 +96,31 @@ export component ArtistCarousel inherits VerticalLayout {
|
||||
vertical-alignment: center;
|
||||
horizontal-stretch: 1;
|
||||
}
|
||||
HorizontalLayout {
|
||||
spacing: 4px;
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
NavButton {
|
||||
icon: @image-url("../assets/icons/chevron-left.svg");
|
||||
enabled: root.current-page > 0;
|
||||
clicked => {
|
||||
root.page = root.current-page - 1;
|
||||
}
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
NavButton {
|
||||
icon: @image-url("../assets/icons/chevron-left.svg");
|
||||
enabled: root.current-page > 0;
|
||||
clicked => {
|
||||
root.page = root.current-page - 1;
|
||||
}
|
||||
}
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
NavButton {
|
||||
icon: @image-url("../assets/icons/chevron-right.svg");
|
||||
enabled: root.current-page < root.page-count - 1;
|
||||
clicked => {
|
||||
root.page = root.current-page + 1;
|
||||
}
|
||||
}
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
NavButton {
|
||||
icon: @image-url("../assets/icons/chevron-right.svg");
|
||||
enabled: root.current-page < root.page-count - 1;
|
||||
clicked => {
|
||||
root.page = root.current-page + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
if root.show-view-all: VerticalLayout {
|
||||
alignment: center;
|
||||
ViewAllLink {
|
||||
clicked => {
|
||||
root.view-all-clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -113,6 +144,9 @@ export component ArtistCarousel inherits VerticalLayout {
|
||||
clicked(id) => {
|
||||
root.artist-clicked(id);
|
||||
}
|
||||
media-action(k, i, a) => {
|
||||
root.media-action(k, i, a);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,10 +42,34 @@ component NavButton inherits Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
component ViewAllLink inherits Rectangle {
|
||||
callback clicked();
|
||||
width: link-text.preferred-width + 16px;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
background: ta.has-hover ? Theme.surface-hover : transparent;
|
||||
link-text := Text {
|
||||
text: @tr("View all");
|
||||
color: Theme.accent;
|
||||
font-size: 14px;
|
||||
font-weight: Typography.medium;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
}
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component Carousel inherits VerticalLayout {
|
||||
in property <DiscoverSection> section;
|
||||
in property <bool> show-view-all: false;
|
||||
callback album-clicked(string);
|
||||
callback media-action(string, string, string);
|
||||
callback view-all-clicked();
|
||||
|
||||
property <length> card-width: 220px;
|
||||
property <length> card-height: 266px;
|
||||
@@ -97,6 +121,14 @@ export component Carousel inherits VerticalLayout {
|
||||
}
|
||||
}
|
||||
}
|
||||
if root.show-view-all: VerticalLayout {
|
||||
alignment: center;
|
||||
ViewAllLink {
|
||||
clicked => {
|
||||
root.view-all-clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
// Playlist card — the album card's twin for playlists: a 162px cover (a
|
||||
// collage of up to four covers), a hover overlay with favorite / play /
|
||||
// more, and a title / subtitle stack. No quality badge, no award ribbon.
|
||||
|
||||
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 { SearchPlaylistItem } from "../state.slint";
|
||||
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
||||
import { ContextMenu } from "../primitives/ContextMenu.slint";
|
||||
import { ContextMenuItem } from "../primitives/ContextMenuItem.slint";
|
||||
import { PlaylistCollage } from "PlaylistCollage.slint";
|
||||
|
||||
component OverlayButton inherits Rectangle {
|
||||
in property <image> icon;
|
||||
in property <bool> primary: false;
|
||||
in property <length> diameter: 36px;
|
||||
in property <length> icon-size: 16px;
|
||||
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: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
tint: root.primary ? #000000 : #ffffff;
|
||||
}
|
||||
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component PlaylistCard inherits Rectangle {
|
||||
in property <SearchPlaylistItem> playlist;
|
||||
// kind ("playlist"), playlist id, action ("play" | "play-next" |
|
||||
// "queue" | "favorite").
|
||||
callback media-action(string, string, string);
|
||||
|
||||
width: 162px;
|
||||
height: 210px;
|
||||
|
||||
property <bool> overlay-on: hover.has-hover
|
||||
|| fav-btn.hovered || play-btn.hovered || more-btn.hovered;
|
||||
|
||||
VerticalLayout {
|
||||
alignment: start;
|
||||
spacing: 0px;
|
||||
|
||||
// --- Cover collage + hover overlay -------------------------------
|
||||
Rectangle {
|
||||
width: 162px;
|
||||
height: 162px;
|
||||
border-radius: Radius.sm;
|
||||
clip: true;
|
||||
|
||||
PlaylistCollage {
|
||||
playlist: root.playlist;
|
||||
size: 162px;
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000000;
|
||||
opacity: root.overlay-on ? 0.6 : 0.0;
|
||||
animate opacity { duration: 150ms; }
|
||||
}
|
||||
|
||||
hover := TouchArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.media-action("playlist", root.playlist.id, "play");
|
||||
}
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
x: 0px;
|
||||
y: 95px;
|
||||
width: 162px;
|
||||
height: 44px;
|
||||
alignment: center;
|
||||
spacing: 12px;
|
||||
opacity: root.overlay-on ? 1.0 : 0.0;
|
||||
animate opacity { duration: 150ms; }
|
||||
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
fav-btn := OverlayButton {
|
||||
icon: @image-url("../assets/icons/heart.svg");
|
||||
clicked => {
|
||||
root.media-action("playlist", root.playlist.id, "favorite");
|
||||
}
|
||||
}
|
||||
}
|
||||
play-btn := OverlayButton {
|
||||
icon: @image-url("../assets/icons/play-fill.svg");
|
||||
primary: true;
|
||||
diameter: 44px;
|
||||
icon-size: 18px;
|
||||
clicked => {
|
||||
root.media-action("playlist", root.playlist.id, "play");
|
||||
}
|
||||
}
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
more-btn := OverlayButton {
|
||||
icon: @image-url("../assets/icons/ellipsis.svg");
|
||||
clicked => {
|
||||
playlist-menu.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
playlist-menu := PopupWindow {
|
||||
x: 26px;
|
||||
y: 56px;
|
||||
width: 196px;
|
||||
height: 109px;
|
||||
ContextMenu {
|
||||
ContextMenuItem {
|
||||
icon: @image-url("../assets/icons/play.svg");
|
||||
label: @tr("Play");
|
||||
clicked => {
|
||||
root.media-action("playlist", root.playlist.id, "play");
|
||||
}
|
||||
}
|
||||
ContextMenuItem {
|
||||
icon: @image-url("../assets/icons/list-plus.svg");
|
||||
label: @tr("Play next");
|
||||
clicked => {
|
||||
root.media-action("playlist", root.playlist.id, "play-next");
|
||||
}
|
||||
}
|
||||
ContextMenuItem {
|
||||
icon: @image-url("../assets/icons/list-end.svg");
|
||||
label: @tr("Add to queue");
|
||||
clicked => {
|
||||
root.media-action("playlist", root.playlist.id, "queue");
|
||||
}
|
||||
}
|
||||
ContextMenuItem {
|
||||
icon: @image-url("../assets/icons/heart.svg");
|
||||
label: @tr("Add to favorites");
|
||||
clicked => {
|
||||
root.media-action("playlist", root.playlist.id, "favorite");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle { height: 6px; }
|
||||
|
||||
// --- Title / subtitle --------------------------------------------
|
||||
VerticalLayout {
|
||||
height: 42px;
|
||||
spacing: 2px;
|
||||
padding-left: Spacing.xs;
|
||||
Text {
|
||||
text: root.playlist.title;
|
||||
height: 20px;
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.body;
|
||||
font-weight: Typography.semibold;
|
||||
vertical-alignment: center;
|
||||
overflow: elide;
|
||||
}
|
||||
Text {
|
||||
text: root.playlist.subtitle;
|
||||
height: 16px;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.link;
|
||||
vertical-alignment: center;
|
||||
overflow: elide;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
// Playlist carousel — title, "View all" link, prev/next page controls,
|
||||
// and a clipped sliding track of playlist cards. Same paging mechanism as
|
||||
// Carousel. Used by the search results All tab.
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Typography } from "../foundation/typography.slint";
|
||||
import { SearchPlaylistItem } from "../state.slint";
|
||||
import { PlaylistCard } from "PlaylistCard.slint";
|
||||
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
||||
|
||||
component NavButton inherits Rectangle {
|
||||
in property <image> icon;
|
||||
in property <bool> enabled: true;
|
||||
callback clicked();
|
||||
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 14px;
|
||||
opacity: root.enabled ? 1.0 : 0.4;
|
||||
background: ta.has-hover && root.enabled
|
||||
? Theme.surface-hover
|
||||
: Theme.surface-elevated;
|
||||
|
||||
QbzIcon {
|
||||
source: root.icon;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
tint: root.enabled ? Theme.text-primary : Theme.text-muted;
|
||||
}
|
||||
|
||||
ta := TouchArea {
|
||||
enabled: root.enabled;
|
||||
mouse-cursor: root.enabled ? pointer : default;
|
||||
clicked => {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component ViewAllLink inherits Rectangle {
|
||||
callback clicked();
|
||||
width: link-text.preferred-width + 16px;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
background: ta.has-hover ? Theme.surface-hover : transparent;
|
||||
link-text := Text {
|
||||
text: @tr("View all");
|
||||
color: Theme.accent;
|
||||
font-size: 14px;
|
||||
font-weight: Typography.medium;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
}
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component PlaylistCarousel inherits VerticalLayout {
|
||||
in property <string> title;
|
||||
in property <[SearchPlaylistItem]> playlists;
|
||||
in property <bool> show-view-all: false;
|
||||
callback view-all-clicked();
|
||||
callback media-action(string, string, string);
|
||||
|
||||
property <length> card-width: 162px;
|
||||
property <length> card-height: 210px;
|
||||
property <length> gap: 24px;
|
||||
|
||||
property <int> count: root.playlists.length;
|
||||
property <int> per-page: Math.max(
|
||||
1,
|
||||
Math.floor((viewport.width + root.gap) / (root.card-width + root.gap)));
|
||||
property <int> page-count: Math.max(1, Math.ceil(root.count / root.per-page));
|
||||
property <int> page: 0;
|
||||
property <int> current-page: Math.min(Math.max(0, root.page), root.page-count - 1);
|
||||
property <length> step: root.per-page * (root.card-width + root.gap);
|
||||
property <length> content-width:
|
||||
root.count * root.card-width + Math.max(0, root.count - 1) * root.gap;
|
||||
|
||||
spacing: 12px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 8px;
|
||||
Text {
|
||||
text: root.title;
|
||||
color: Theme.text-primary;
|
||||
font-size: 18px;
|
||||
font-weight: Typography.semibold;
|
||||
vertical-alignment: center;
|
||||
horizontal-stretch: 1;
|
||||
}
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
NavButton {
|
||||
icon: @image-url("../assets/icons/chevron-left.svg");
|
||||
enabled: root.current-page > 0;
|
||||
clicked => {
|
||||
root.page = root.current-page - 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
NavButton {
|
||||
icon: @image-url("../assets/icons/chevron-right.svg");
|
||||
enabled: root.current-page < root.page-count - 1;
|
||||
clicked => {
|
||||
root.page = root.current-page + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
if root.show-view-all: VerticalLayout {
|
||||
alignment: center;
|
||||
ViewAllLink {
|
||||
clicked => {
|
||||
root.view-all-clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
viewport := Rectangle {
|
||||
height: root.card-height;
|
||||
clip: true;
|
||||
|
||||
Rectangle {
|
||||
x: -root.current-page * root.step;
|
||||
y: 0px;
|
||||
width: root.content-width;
|
||||
height: root.card-height;
|
||||
animate x { duration: 220ms; easing: ease-in-out; }
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: root.gap;
|
||||
for playlist in root.playlists: PlaylistCard {
|
||||
playlist: playlist;
|
||||
media-action(k, i, a) => {
|
||||
root.media-action(k, i, a);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
x: 0px;
|
||||
width: 56px;
|
||||
background: @linear-gradient(90deg, Theme.surface-main 0%, transparent 100%);
|
||||
opacity: root.current-page > 0 ? 1.0 : 0.0;
|
||||
animate opacity { duration: 150ms; }
|
||||
}
|
||||
Rectangle {
|
||||
x: parent.width - self.width;
|
||||
width: 56px;
|
||||
background: @linear-gradient(90deg, transparent 0%, Theme.surface-main 100%);
|
||||
opacity: root.current-page < root.page-count - 1 ? 1.0 : 0.0;
|
||||
animate opacity { duration: 150ms; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
// Playlist cover collage. Qobuz returns up to four cover images per
|
||||
// playlist; the layout is chosen by how many are available — single,
|
||||
// dual (side by side), triple (one large + two stacked), or quad (three
|
||||
// stacked left + one large right). Ported from the Tauri PlaylistCollage.
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
||||
import { SearchPlaylistItem } from "../state.slint";
|
||||
|
||||
export component PlaylistCollage inherits Rectangle {
|
||||
in property <SearchPlaylistItem> playlist;
|
||||
in property <length> size: 162px;
|
||||
|
||||
width: root.size;
|
||||
height: root.size;
|
||||
clip: true;
|
||||
background: Theme.surface-elevated;
|
||||
|
||||
property <length> gap: 2px;
|
||||
property <int> n: root.playlist.cover-count;
|
||||
|
||||
// 0 covers — placeholder glyph.
|
||||
if root.n <= 0: QbzIcon {
|
||||
source: @image-url("../assets/icons/list-music.svg");
|
||||
width: root.size * 0.32;
|
||||
height: root.size * 0.32;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
tint: Theme.text-muted;
|
||||
}
|
||||
|
||||
// 1 — full bleed.
|
||||
if root.n == 1: Image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
source: root.playlist.cover1;
|
||||
image-fit: cover;
|
||||
}
|
||||
|
||||
// 2 — side by side halves.
|
||||
if root.n == 2: HorizontalLayout {
|
||||
spacing: root.gap;
|
||||
Image {
|
||||
source: root.playlist.cover1;
|
||||
image-fit: cover;
|
||||
width: (root.size - root.gap) / 2;
|
||||
height: root.size;
|
||||
}
|
||||
Image {
|
||||
source: root.playlist.cover2;
|
||||
image-fit: cover;
|
||||
width: (root.size - root.gap) / 2;
|
||||
height: root.size;
|
||||
}
|
||||
}
|
||||
|
||||
// 3 — one large left, two stacked right.
|
||||
if root.n == 3: HorizontalLayout {
|
||||
spacing: root.gap;
|
||||
Image {
|
||||
source: root.playlist.cover1;
|
||||
image-fit: cover;
|
||||
width: (root.size - root.gap) * 0.62;
|
||||
height: root.size;
|
||||
}
|
||||
VerticalLayout {
|
||||
spacing: root.gap;
|
||||
Image {
|
||||
source: root.playlist.cover2;
|
||||
image-fit: cover;
|
||||
width: (root.size - root.gap) * 0.38;
|
||||
height: (root.size - root.gap) / 2;
|
||||
}
|
||||
Image {
|
||||
source: root.playlist.cover3;
|
||||
image-fit: cover;
|
||||
width: (root.size - root.gap) * 0.38;
|
||||
height: (root.size - root.gap) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 4+ — three stacked left, one large right.
|
||||
if root.n >= 4: HorizontalLayout {
|
||||
spacing: root.gap;
|
||||
VerticalLayout {
|
||||
spacing: root.gap;
|
||||
Image {
|
||||
source: root.playlist.cover1;
|
||||
image-fit: cover;
|
||||
width: (root.size - root.gap) * 0.34;
|
||||
height: (root.size - 2 * root.gap) / 3;
|
||||
}
|
||||
Image {
|
||||
source: root.playlist.cover2;
|
||||
image-fit: cover;
|
||||
width: (root.size - root.gap) * 0.34;
|
||||
height: (root.size - 2 * root.gap) / 3;
|
||||
}
|
||||
Image {
|
||||
source: root.playlist.cover3;
|
||||
image-fit: cover;
|
||||
width: (root.size - root.gap) * 0.34;
|
||||
height: (root.size - 2 * root.gap) / 3;
|
||||
}
|
||||
}
|
||||
Image {
|
||||
source: root.playlist.cover4;
|
||||
image-fit: cover;
|
||||
width: (root.size - root.gap) * 0.66;
|
||||
height: root.size;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user