yonlu/yellowjacket
1
1
Fork 0
Code Issues 52 Pull Requests 4 Actions Packages Projects Releases 12 Wiki Activity

view tracks in playlist view and play playlists

Browse Source
This commit is contained in:
yonlu
2026-02-16 02:18:45 -05:00
parent 2a40be5f52
commit 95e1b32e86
8 changed files with 672 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/playlist-view/playlist-view.ts
+267 -23
View File
@@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit';
import { LitElement, html, css, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@awesome.me/webawesome/dist/components/icon/icon.js';
@@ -6,12 +6,24 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
import {
GetAllPlaylists,
CreatePlaylist,
GetPlaylistTracks,
} from '@go/playlist/Service';
import type { playlist } from '@go/models';
import { QueueController } from '@store/controllers/queue-controller';
import '@components/track-info/track-info';
interface PlaylistEntry {
summary: playlist.Summary;
expanded: boolean;
loading: boolean;
tracks: playlist.Track[] | null;
}
@customElement('playlist-view')
export class PlaylistView extends LitElement {
@state() private playlists: playlist.Summary[] = [];
private queue = new QueueController(this);
@state() private entries: PlaylistEntry[] = [];
@state() private loading = true;
@state() private creating = false;
@state() private newPlaylistName = '';
@@ -126,17 +138,33 @@ export class PlaylistView extends LitElement {
}
.playlist-item {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.playlist-item:hover {
.playlist-header {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 10px;
cursor: pointer;
user-select: none;
}
.playlist-header:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.chevron {
font-size: 14px;
color: #888;
flex-shrink: 0;
transition: transform 0.15s ease;
}
.chevron.expanded {
transform: rotate(90deg);
}
.playlist-icon {
font-size: 18px;
color: #888;
@@ -149,6 +177,64 @@ export class PlaylistView extends LitElement {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.track-count {
font-size: 11px;
color: #666;
flex-shrink: 0;
}
.playlist-body {
padding: 0 16px 12px 42px;
}
.playlist-actions {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
}
.play-all-button {
background: none;
border: 1px solid #555;
border-radius: 4px;
color: #fff;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-family: inherit;
}
.play-all-button:hover {
border-color: #ffd43b;
color: #ffd43b;
}
.track-item {
padding: 6px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.track-item:last-child {
border-bottom: none;
}
.tracks-loading {
padding: 12px 0;
color: #888;
font-size: 12px;
}
.tracks-empty {
padding: 12px 0;
color: #666;
font-size: 12px;
}
.loading {
@@ -187,16 +273,85 @@ export class PlaylistView extends LitElement {
private async loadPlaylists() {
try {
this.loading = true;
const result = await GetAllPlaylists();
this.playlists = result ?? [];
const summaries = result ?? [];
this.entries = summaries.map((s) => ({
summary: s,
expanded: false,
loading: false,
tracks: null,
}));
} catch (err) {
console.error('Failed to load playlists:', err);
this.playlists = [];
this.entries = [];
} finally {
this.loading = false;
}
}
private handleToggle = async (index: number) => {
const entry = this.entries[index];
if (!entry) return;
// Collapse if already expanded.
if (entry.expanded) {
this.entries = this.entries.map((e, i) =>
i === index ? { ...e, expanded: false } : e,
);
return;
}
// Expand and lazy-load tracks if not yet fetched.
if (entry.tracks === null) {
this.entries = this.entries.map((e, i) =>
i === index
? { ...e, expanded: true, loading: true }
: e,
);
try {
const tracks = await GetPlaylistTracks(
entry.summary.ID,
);
this.entries = this.entries.map((e, i) =>
i === index
? {
...e,
loading: false,
tracks: tracks ?? [],
}
: e,
);
} catch (err) {
console.error('Failed to load playlist tracks:', err);
this.entries = this.entries.map((e, i) =>
i === index
? { ...e, loading: false, tracks: [] }
: e,
);
}
} else {
this.entries = this.entries.map((e, i) =>
i === index ? { ...e, expanded: true } : e,
);
}
};
private handlePlayAll = (index: number) => {
const entry = this.entries[index];
if (!entry?.tracks || entry.tracks.length === 0) return;
const filePaths = entry.tracks.map((t) => t.FilePath);
this.queue.setQueue(filePaths, 0);
};
private handleNewPlaylistClick = () => {
this.creating = true;
this.newPlaylistName = '';
@@ -256,9 +411,11 @@ export class PlaylistView extends LitElement {
</button>
</div>
${this.creating ? this.renderCreateForm() : ''}
${this.creating ? this.renderCreateForm() : nothing}
${this.loading
? html`<div class="loading">Loading playlists...</div>`
? html`<div class="loading">
Loading playlists...
</div>`
: this.renderPlaylistList()}
`;
}
@@ -275,7 +432,9 @@ export class PlaylistView extends LitElement {
@input=${this.handleInputChange}
@keydown=${this.handleInputKeydown}
/>
<button @click=${this.handleCancelCreate}>Cancel</button>
<button @click=${this.handleCancelCreate}>
Cancel
</button>
<button
class="primary"
?disabled=${!canCreate}
@@ -288,7 +447,7 @@ export class PlaylistView extends LitElement {
}
private renderPlaylistList() {
if (this.playlists.length === 0) {
if (this.entries.length === 0) {
return html`
<div class="empty-state">
<wa-icon name="list"></wa-icon>
@@ -302,20 +461,105 @@ export class PlaylistView extends LitElement {
return html`
<ul class="playlist-list">
${this.playlists.map(
(p) => html`
<li class="playlist-item">
<wa-icon
class="playlist-icon"
name="list"
></wa-icon>
<span class="playlist-name">${p.Name}</span>
</li>
`,
${this.entries.map((entry, i) =>
this.renderPlaylistItem(entry, i),
)}
</ul>
`;
}
private renderPlaylistItem(entry: PlaylistEntry, index: number) {
const trackCount = entry.tracks?.length;
const countLabel =
trackCount !== undefined && trackCount !== null
? `${trackCount} track${trackCount !== 1 ? 's' : ''}`
: '';
return html`
<li class="playlist-item">
<div
class="playlist-header"
@click=${() => this.handleToggle(index)}
>
<wa-icon
class="chevron ${entry.expanded
? 'expanded'
: ''}"
name="chevron-right"
></wa-icon>
<wa-icon
class="playlist-icon"
name="list"
></wa-icon>
<span class="playlist-name">
${entry.summary.Name}
</span>
${countLabel
? html`<span class="track-count">
${countLabel}
</span>`
: nothing}
</div>
${entry.expanded
? this.renderPlaylistBody(entry, index)
: nothing}
</li>
`;
}
private renderPlaylistBody(
entry: PlaylistEntry,
index: number,
) {
if (entry.loading) {
return html`
<div class="playlist-body">
<div class="tracks-loading">
Loading tracks...
</div>
</div>
`;
}
if (!entry.tracks || entry.tracks.length === 0) {
return html`
<div class="playlist-body">
<div class="tracks-empty">
This playlist is empty.
</div>
</div>
`;
}
return html`
<div class="playlist-body">
<div class="playlist-actions">
<button
class="play-all-button"
@click=${(e: Event) => {
e.stopPropagation();
this.handlePlayAll(index);
}}
>
<wa-icon name="play"></wa-icon>
Play All
</button>
</div>
${entry.tracks.map(
(track) => html`
<div class="track-item">
<track-info
.trackTitle=${track.Title}
.artist=${track.Artist}
.duration=${track.Duration}
.filePath=${track.FilePath}
></track-info>
</div>
`,
)}
</div>
`;
}
}
declare global {
frontend/src/components/track-info/track-info.ts
+213
View File
@@ -0,0 +1,213 @@
import { LitElement, html, css, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@awesome.me/webawesome/dist/components/icon/icon.js';
import { formatMilliseconds } from '@utils/time';
/**
* Reusable track info display component.
*
* All fields are optional — the parent decides which to provide.
* Handles text truncation, fallback display for missing title
* (uses filename from filePath), and a cover art placeholder.
*
* @example
* ```html
* <track-info
* trackTitle="Song Name"
* artist="Artist Name"
* duration="240000"
* ></track-info>
*
* <track-info
* trackTitle="Song Name"
* artist="Artist Name"
* coverArt="/covers/abc.jpg"
* coverArtThumbnail="/covers/abc_thumb.jpg"
* ></track-info>
* ```
*/
@customElement('track-info')
export class TrackInfo extends LitElement {
@property() trackTitle?: string;
@property() artist?: string;
@property() album?: string;
@property() coverArt?: string;
@property() coverArtThumbnail?: string;
@property() duration?: string;
@property() filePath?: string;
static override styles = css`
:host {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.cover-art {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 3px;
overflow: hidden;
}
.cover-art img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cover-placeholder {
width: 100%;
height: 100%;
background-color: #2a2d30;
display: flex;
align-items: center;
justify-content: center;
}
.cover-placeholder wa-icon {
color: #666;
font-size: 18px;
}
.text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.title {
font-size: 13px;
font-weight: 500;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.secondary {
font-size: 11px;
color: #888;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.duration {
font-size: 12px;
color: #888;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
`;
override render() {
const showCover =
this.coverArt !== undefined || this.coverArtThumbnail !== undefined;
const displayTitle = this.getDisplayTitle();
const secondaryParts = this.getSecondaryText();
return html`
${showCover ? this.renderCoverArt() : nothing}
<div class="text">
${displayTitle
? html`<span class="title">${displayTitle}</span>`
: nothing}
${secondaryParts
? html`<span class="secondary"
>${secondaryParts}</span
>`
: nothing}
</div>
${this.duration
? html`<span class="duration"
>${formatMilliseconds(this.duration)}</span
>`
: nothing}
`;
}
private renderCoverArt() {
const src = this.coverArtThumbnail ?? this.coverArt;
if (!src) {
return html`
<div class="cover-art">
<div class="cover-placeholder">
<wa-icon name="music"></wa-icon>
</div>
</div>
`;
}
return html`
<div class="cover-art">
<img
src="${src}"
alt="Cover art"
@error=${this.handleImageError}
/>
</div>
`;
}
private handleImageError = (e: Event) => {
const img = e.target as HTMLImageElement;
// Try full-size image if thumbnail failed.
if (this.coverArt && img.src !== this.coverArt) {
img.src = this.coverArt;
return;
}
// Replace with placeholder on final failure.
const container = img.parentElement;
if (container) {
container.innerHTML =
'<div class="cover-placeholder">' +
'<wa-icon name="music"></wa-icon>' +
'</div>';
}
};
private getDisplayTitle(): string {
if (this.trackTitle) return this.trackTitle;
if (this.filePath) {
const parts = this.filePath.split(/[\\/]/);
const filename = parts[parts.length - 1] ?? this.filePath;
return filename.replace(/\.[^.]+$/, '');
}
return '';
}
private getSecondaryText(): string {
const parts: string[] = [];
if (this.artist) {
parts.push(this.artist);
}
if (this.album) {
parts.push(this.album);
}
return parts.join(' \u2014 ');
}
}
declare global {
interface HTMLElementTagNameMap {
'track-info': TrackInfo;
}
}