vicrodh
ad6c98ff7d
Extends Play later (end of the manual block) from track rows to every surface that already offered Play next / Add to queue: - playback.rs: enqueue_album_later, enqueue_playlist_later (mixed sidecar interleave), enqueue_artist_top_later, enqueue_tracks_later, enqueue_local_tracks_later — all NATURAL order (each add_track_later appends, no reverse), QConnect controller routing via play_later_batch_on_peer_if_active, and post-add queue sync. - local_playlist::enqueue_later_by_id (source-aware rows, offline-only stamp preserved), myqbz_play RowMode::PlayLater + BulkEnqueueMode. - 19 dispatch arms in main.rs (album/playlist/artist/label/mix/ favorites/local-library/album-page/disc/myqbz dialects). - 12 context menus + 10 bulk bars in .slint: list-plus icon between Play next and Add to queue, popup heights bumped. The immersive tap-action dropdown is deliberately untouched (it is a configurable single-tap behavior setting, not a context menu). km
299 lines
12 KiB
Plaintext
299 lines
12 KiB
Plaintext
// 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, PinnedActions } 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: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
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" |
|
|
// "play-later" | "queue" | "favorite" | "open").
|
|
callback media-action(string, string, string);
|
|
// When true, a click on the card BODY opens the playlist ("open")
|
|
// instead of playing it — the Favorites grid wants body=open, the play
|
|
// button=play. Discover/Search leave it false (body=play), unchanged.
|
|
in property <bool> body-opens: false;
|
|
|
|
width: 200px;
|
|
height: 246px;
|
|
|
|
property <bool> overlay-on: hover.has-hover
|
|
|| fav-btn.hovered || play-btn.hovered || more-btn.hovered
|
|
|| pin-ta.has-hover;
|
|
|
|
VerticalLayout {
|
|
alignment: start;
|
|
spacing: 0px;
|
|
|
|
// --- Cover collage + hover overlay -------------------------------
|
|
Rectangle {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: Radius.sm;
|
|
clip: true;
|
|
|
|
PlaylistCollage {
|
|
playlist: root.playlist;
|
|
size: 200px;
|
|
}
|
|
|
|
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, root.body-opens ? "open" : "play");
|
|
}
|
|
}
|
|
|
|
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; }
|
|
|
|
// Owned playlist → favorite (heart). Foreign Qobuz playlist →
|
|
// follow / unfollow (the overlay's primary action, mirroring the
|
|
// playlist header). Always one element named `fav-btn` so its
|
|
// hover keeps feeding `overlay-on`.
|
|
VerticalLayout {
|
|
alignment: center;
|
|
fav-btn := OverlayButton {
|
|
icon: root.playlist.is-owned
|
|
? @image-url("../assets/icons/heart.svg")
|
|
: (root.playlist.is-following
|
|
? @image-url("../assets/icons/check.svg")
|
|
: @image-url("../assets/icons/user-plus.svg"));
|
|
clicked => {
|
|
if (root.playlist.is-owned) {
|
|
root.media-action("playlist", root.playlist.id, "favorite");
|
|
} else if (root.playlist.is-following) {
|
|
root.media-action("playlist", root.playlist.id, "unfollow");
|
|
} else {
|
|
root.media-action("playlist", root.playlist.id, "follow");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Pin glyph — top-right of the cover. Filled accent pin always
|
|
// visible when pinned (state indicator); outline pin
|
|
// hover-revealed otherwise. Always-mounted (opacity, not `if`)
|
|
// so its TouchArea's has-hover can join `overlay-on` above.
|
|
pin-badge := Rectangle {
|
|
x: parent.width - self.width - 8px;
|
|
y: 8px;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 13px;
|
|
background: pin-ta.has-hover ? #000000cc : #00000099;
|
|
opacity: root.overlay-on ? 1.0 : 0.0;
|
|
animate opacity { duration: 150ms; }
|
|
QbzIcon {
|
|
source: root.playlist.is-pinned
|
|
? @image-url("../assets/icons/pin-filled.svg")
|
|
: @image-url("../assets/icons/pin.svg");
|
|
width: 14px;
|
|
height: 14px;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
tint: root.playlist.is-pinned ? Theme.accent : #ffffff;
|
|
}
|
|
pin-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
PinnedActions.toggle-pin("playlist", root.playlist.id,
|
|
root.playlist.title, root.playlist.subtitle,
|
|
root.playlist.url1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Owned playlists get the queueing actions + favorite; foreign
|
|
// Qobuz playlists get queueing + follow/unfollow + copy (hidden
|
|
// once copied). Height tracks the visible item count (10px chrome
|
|
// + 33px/row) so the panel never clips or over-reserves.
|
|
playlist-menu := PopupWindow {
|
|
property <int> item-count: root.playlist.is-owned
|
|
? 5
|
|
: (root.playlist.is-copied ? 5 : 6);
|
|
x: 26px;
|
|
y: 56px;
|
|
width: 196px;
|
|
height: 10px + self.item-count * 33px;
|
|
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-start.svg");
|
|
label: @tr("Play next");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "play-next");
|
|
}
|
|
}
|
|
ContextMenuItem {
|
|
icon: @image-url("../assets/icons/list-plus.svg");
|
|
label: @tr("Play later");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "play-later");
|
|
}
|
|
}
|
|
ContextMenuItem {
|
|
icon: @image-url("../assets/icons/list-end.svg");
|
|
label: @tr("Add to queue");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "queue");
|
|
}
|
|
}
|
|
if root.playlist.is-owned: ContextMenuItem {
|
|
icon: @image-url("../assets/icons/heart.svg");
|
|
label: @tr("Add to Library");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "favorite");
|
|
}
|
|
}
|
|
if !root.playlist.is-owned: ContextMenuItem {
|
|
icon: root.playlist.is-following
|
|
? @image-url("../assets/icons/check.svg")
|
|
: @image-url("../assets/icons/user-plus.svg");
|
|
label: root.playlist.is-following
|
|
? @tr("Unfollow on Qobuz")
|
|
: @tr("Follow on Qobuz");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id,
|
|
root.playlist.is-following ? "unfollow" : "follow");
|
|
}
|
|
}
|
|
if !root.playlist.is-owned && !root.playlist.is-copied: ContextMenuItem {
|
|
icon: @image-url("../assets/icons/copy.svg");
|
|
label: @tr("Copy to your library");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "copy");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle { height: 6px; }
|
|
|
|
// --- Title / subtitle line ---------------------------------------
|
|
// The second line is the playlist's category tag (Discover cards) OR,
|
|
// when there is no tag, the muted subtitle (owner / track count — used
|
|
// by the Search + Favorites grids). The category is an UPPERCASE accent
|
|
// eyebrow (uppercased in Rust; Slint has no text-transform), styled like
|
|
// the QbzSelect "BP"/section-header accent-caps. Mutually exclusive so
|
|
// the slot never doubles up.
|
|
VerticalLayout {
|
|
height: 40px;
|
|
spacing: 2px;
|
|
padding-left: Spacing.xs;
|
|
Text {
|
|
text: root.playlist.title;
|
|
height: 20px;
|
|
color: Theme.text-primary;
|
|
font-size: Typography.body - 2px;
|
|
font-weight: Typography.semibold;
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
if root.playlist.category != "": Text {
|
|
text: root.playlist.category;
|
|
height: 16px;
|
|
color: Theme.accent;
|
|
font-size: 11px;
|
|
font-weight: Typography.semibold;
|
|
letter-spacing: 0.5px;
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
if root.playlist.category == "": Text {
|
|
text: root.playlist.subtitle;
|
|
height: 16px;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.link - 1px;
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
}
|
|
}
|