added track-details page
This commit is contained in:
@@ -10,6 +10,7 @@ import '@components/config-page/config-page.ts';
|
||||
import '@components/artists-view/artists-view.ts';
|
||||
import '@components/artist-details/artist-details.ts';
|
||||
import '@components/search-bar/search-bar.ts';
|
||||
import '@components/track-details/track-details.ts';
|
||||
import type { SearchBar } from '@components/search-bar/search-bar.ts';
|
||||
import '@awesome.me/webawesome/dist/styles/themes/default.css';
|
||||
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
|
||||
@@ -23,6 +23,9 @@ import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
|
||||
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
import '@components/playlist-picker/playlist-picker.js';
|
||||
import type { PlaylistPicker } from '@components/playlist-picker/playlist-picker.js';
|
||||
import '@components/track-details/track-details.js';
|
||||
import type { TrackDetails } from '@components/track-details/track-details.js';
|
||||
import type { CoverArtUrls } from '@components/track-details/track-details.js';
|
||||
import './album-dropdown.js';
|
||||
import type {
|
||||
TrackClickDetail,
|
||||
@@ -696,6 +699,9 @@ export class CoverGrid extends LitElement {
|
||||
@query('#playlist-submenu')
|
||||
private playlistSubmenuPopup!: HTMLElement;
|
||||
|
||||
@query('track-details')
|
||||
private trackDetailsDialog!: TrackDetails;
|
||||
|
||||
@query('#grid-single')
|
||||
private virtualizerSingle!: LitVirtualizer;
|
||||
|
||||
@@ -3066,11 +3072,49 @@ export class CoverGrid extends LitElement {
|
||||
case 'play-next':
|
||||
queueStore.playTracksNext(filePaths);
|
||||
break;
|
||||
case 'track-details':
|
||||
this.openTrackDetails(filePaths[0]!);
|
||||
break;
|
||||
}
|
||||
|
||||
this.closeContextMenu(true);
|
||||
}
|
||||
|
||||
private openTrackDetails(filePath: string) {
|
||||
const track = this.expandedTracks.find(
|
||||
(t) => t.FilePath === filePath,
|
||||
);
|
||||
|
||||
if (!track) return;
|
||||
|
||||
const coverArt =
|
||||
this.resolveTrackCoverArt(track.Album);
|
||||
|
||||
this.trackDetailsDialog?.show(
|
||||
track,
|
||||
coverArt ?? undefined,
|
||||
);
|
||||
}
|
||||
|
||||
private resolveTrackCoverArt(
|
||||
albumName: string,
|
||||
): CoverArtUrls | null {
|
||||
if (!albumName) return null;
|
||||
|
||||
const album = this.albums.find(
|
||||
(a) => a.Name === albumName,
|
||||
);
|
||||
|
||||
if (!album || !album.CoverArtPath) return null;
|
||||
|
||||
return {
|
||||
coverArtPath: album.CoverArtPath,
|
||||
coverArtSmall: album.CoverArtSmall,
|
||||
coverArtMedium: album.CoverArtMedium,
|
||||
coverArtLarge: album.CoverArtLarge,
|
||||
};
|
||||
}
|
||||
|
||||
private closeContextMenu(clearSelection = false) {
|
||||
if (!this.contextMenuOpen) return;
|
||||
|
||||
@@ -3548,12 +3592,33 @@ export class CoverGrid extends LitElement {
|
||||
slot="icon"
|
||||
name="plus"
|
||||
></wa-icon>
|
||||
Add to Playlist
|
||||
<span
|
||||
class="submenu-arrow"
|
||||
>▶</span
|
||||
>
|
||||
Add to Playlist
|
||||
<span
|
||||
class="submenu-arrow"
|
||||
>▶</span
|
||||
>
|
||||
</wa-dropdown-item>
|
||||
${this.contextMenuTarget
|
||||
.kind ===
|
||||
'track' &&
|
||||
this.selectedTracks
|
||||
.size === 1
|
||||
? html`
|
||||
<wa-dropdown-item
|
||||
@click=${() =>
|
||||
this.onContextMenuAction(
|
||||
'track-details',
|
||||
)}
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="circle-info"
|
||||
></wa-icon>
|
||||
Track
|
||||
Details
|
||||
</wa-dropdown-item>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
@@ -3577,6 +3642,8 @@ export class CoverGrid extends LitElement {
|
||||
`
|
||||
: nothing}
|
||||
</wa-popup>
|
||||
|
||||
<track-details></track-details>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,6 +40,10 @@ import {
|
||||
createTrackCardDragImage,
|
||||
removeDragImage,
|
||||
} from '@utils/drag-image';
|
||||
import { libraryStore } from '@store/library-store';
|
||||
import '@components/track-details/track-details.js';
|
||||
import type { TrackDetails } from '@components/track-details/track-details.js';
|
||||
import type { CoverArtUrls } from '@components/track-details/track-details.js';
|
||||
|
||||
const SCROLL_DEBOUNCE_MS = 100;
|
||||
|
||||
@@ -191,6 +195,9 @@ export class PlaylistView
|
||||
@query('#playlist-context-menu')
|
||||
private playlistContextMenuPopup!: HTMLElement;
|
||||
|
||||
@query('track-details')
|
||||
private trackDetailsDialog!: TrackDetails;
|
||||
|
||||
private closeContextMenuHandler = () => {
|
||||
this.closeContextMenu();
|
||||
this.closePlaylistContextMenu();
|
||||
@@ -1066,7 +1073,9 @@ export class PlaylistView
|
||||
queueStore.setQueue(filePaths, 0);
|
||||
break;
|
||||
case 'add-to-queue':
|
||||
queueStore.addTracksToQueue(filePaths);
|
||||
queueStore.addTracksToQueue(
|
||||
filePaths,
|
||||
);
|
||||
break;
|
||||
case 'play-next':
|
||||
queueStore.playTracksNext(filePaths);
|
||||
@@ -1074,11 +1083,60 @@ export class PlaylistView
|
||||
case 'remove':
|
||||
void this.removeSelectedTracks();
|
||||
break;
|
||||
case 'track-details':
|
||||
this.openTrackDetails(filePaths[0]!);
|
||||
break;
|
||||
}
|
||||
|
||||
this.closeContextMenu(true);
|
||||
}
|
||||
|
||||
private openTrackDetails(filePath: string) {
|
||||
const tracks =
|
||||
libraryStore.getCachedTracks();
|
||||
const track = tracks?.find(
|
||||
(t) => t.FilePath === filePath,
|
||||
);
|
||||
|
||||
if (!track) return;
|
||||
|
||||
const coverArt =
|
||||
this.resolvePlaylistCoverArt(
|
||||
track.Album,
|
||||
);
|
||||
|
||||
this.trackDetailsDialog?.show(
|
||||
track,
|
||||
coverArt ?? undefined,
|
||||
);
|
||||
}
|
||||
|
||||
private resolvePlaylistCoverArt(
|
||||
albumName: string,
|
||||
): CoverArtUrls | null {
|
||||
if (!albumName) return null;
|
||||
|
||||
const albums =
|
||||
libraryStore.getCachedAlbums();
|
||||
|
||||
if (!albums) return null;
|
||||
|
||||
const album = albums.find(
|
||||
(a) => a.Name === albumName,
|
||||
);
|
||||
|
||||
if (!album || !album.CoverArtPath) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
coverArtPath: album.CoverArtPath,
|
||||
coverArtSmall: album.CoverArtSmall,
|
||||
coverArtMedium: album.CoverArtMedium,
|
||||
coverArtLarge: album.CoverArtLarge,
|
||||
};
|
||||
}
|
||||
|
||||
private async removeSelectedTracks() {
|
||||
if (this.activePlaylistIndex < 0) return;
|
||||
|
||||
@@ -1840,12 +1898,30 @@ export class PlaylistView
|
||||
name="plus"
|
||||
></wa-icon>
|
||||
Add to Playlist
|
||||
<span
|
||||
class="submenu-arrow"
|
||||
>
|
||||
▶
|
||||
</span>
|
||||
<span
|
||||
class="submenu-arrow"
|
||||
>
|
||||
▶
|
||||
</span>
|
||||
</wa-dropdown-item>
|
||||
${this.selection
|
||||
.selectionCount === 1
|
||||
? html`
|
||||
<wa-dropdown-item
|
||||
@click=${() =>
|
||||
this.onContextMenuAction(
|
||||
'track-details',
|
||||
)}
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="circle-info"
|
||||
></wa-icon>
|
||||
Track
|
||||
Details
|
||||
</wa-dropdown-item>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
@@ -1913,6 +1989,8 @@ export class PlaylistView
|
||||
`
|
||||
: nothing}
|
||||
</wa-popup>
|
||||
|
||||
<track-details></track-details>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -29,6 +29,10 @@ import {
|
||||
createTrackCardDragImage,
|
||||
removeDragImage,
|
||||
} from '@utils/drag-image';
|
||||
import { libraryStore } from '@store/library-store';
|
||||
import '@components/track-details/track-details.js';
|
||||
import type { TrackDetails } from '@components/track-details/track-details.js';
|
||||
import type { CoverArtUrls } from '@components/track-details/track-details.js';
|
||||
|
||||
const MIN_WIDTH = 200;
|
||||
const MAX_WIDTH = 500;
|
||||
@@ -80,6 +84,9 @@ export class QueuePanel
|
||||
@query('lit-virtualizer')
|
||||
private virtualizer!: LitVirtualizer;
|
||||
|
||||
@query('track-details')
|
||||
private trackDetailsDialog!: TrackDetails;
|
||||
|
||||
private closePickerHandler = (e: MouseEvent) => {
|
||||
const path = e.composedPath();
|
||||
const popup = this.addToPlaylistPopup;
|
||||
@@ -686,13 +693,68 @@ export class QueuePanel
|
||||
this.queue.playAtIndex(indices[0]!);
|
||||
break;
|
||||
case 'remove':
|
||||
this.queue.removeTracksFromQueue(indices);
|
||||
this.queue.removeTracksFromQueue(
|
||||
indices,
|
||||
);
|
||||
break;
|
||||
case 'track-details':
|
||||
this.openTrackDetails(indices[0]!);
|
||||
break;
|
||||
}
|
||||
|
||||
this.closeContextMenu(true);
|
||||
}
|
||||
|
||||
private openTrackDetails(index: number) {
|
||||
const queueTrack =
|
||||
this.queue.tracks[index];
|
||||
|
||||
if (!queueTrack) return;
|
||||
|
||||
const tracks =
|
||||
libraryStore.getCachedTracks();
|
||||
const track = tracks?.find(
|
||||
(t) =>
|
||||
t.FilePath === queueTrack.filePath,
|
||||
);
|
||||
|
||||
if (!track) return;
|
||||
|
||||
const coverArt =
|
||||
this.resolveQueueCoverArt(track.Album);
|
||||
|
||||
this.trackDetailsDialog?.show(
|
||||
track,
|
||||
coverArt ?? undefined,
|
||||
);
|
||||
}
|
||||
|
||||
private resolveQueueCoverArt(
|
||||
albumName: string,
|
||||
): CoverArtUrls | null {
|
||||
if (!albumName) return null;
|
||||
|
||||
const albums =
|
||||
libraryStore.getCachedAlbums();
|
||||
|
||||
if (!albums) return null;
|
||||
|
||||
const album = albums.find(
|
||||
(a) => a.Name === albumName,
|
||||
);
|
||||
|
||||
if (!album || !album.CoverArtPath) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
coverArtPath: album.CoverArtPath,
|
||||
coverArtSmall: album.CoverArtSmall,
|
||||
coverArtMedium: album.CoverArtMedium,
|
||||
coverArtLarge: album.CoverArtLarge,
|
||||
};
|
||||
}
|
||||
|
||||
private closeContextMenu(clearSelection = false) {
|
||||
if (!this.contextMenuOpen) return;
|
||||
|
||||
@@ -1394,6 +1456,24 @@ export class QueuePanel
|
||||
▶
|
||||
</span>
|
||||
</wa-dropdown-item>
|
||||
${this.selection
|
||||
.selectionCount === 1
|
||||
? html`
|
||||
<wa-dropdown-item
|
||||
@click=${() =>
|
||||
this.onContextMenuAction(
|
||||
'track-details',
|
||||
)}
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="circle-info"
|
||||
></wa-icon>
|
||||
Track
|
||||
Details
|
||||
</wa-dropdown-item>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
@@ -1420,6 +1500,8 @@ export class QueuePanel
|
||||
`
|
||||
: nothing}
|
||||
</wa-popup>
|
||||
|
||||
<track-details></track-details>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,633 @@
|
||||
import { LitElement, html, css, nothing } from 'lit';
|
||||
import {
|
||||
customElement,
|
||||
state,
|
||||
query,
|
||||
} from 'lit/decorators.js';
|
||||
import type { library } from '@go/models';
|
||||
import { formatMilliseconds } from '@utils/time';
|
||||
|
||||
import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
|
||||
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
|
||||
/** Cover art URLs resolved from the album cache. */
|
||||
export interface CoverArtUrls {
|
||||
coverArtPath: string;
|
||||
coverArtSmall: string;
|
||||
coverArtMedium: string;
|
||||
coverArtLarge: string;
|
||||
}
|
||||
|
||||
/** Editable field definition. */
|
||||
interface MetadataField {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string;
|
||||
editable: boolean;
|
||||
type: 'text' | 'number';
|
||||
}
|
||||
|
||||
/**
|
||||
* Modal dialog displaying detailed metadata for a single track.
|
||||
*
|
||||
* Call `show(track, coverArt?)` to open and `close()` to dismiss.
|
||||
* Includes an edit toggle for future tag-writing support.
|
||||
*/
|
||||
@customElement('track-details')
|
||||
export class TrackDetails extends LitElement {
|
||||
@state() private track: library.Track | null = null;
|
||||
@state() private coverArt: CoverArtUrls | null = null;
|
||||
@state() private editing = false;
|
||||
@state() private editValues: Record<string, string> = {};
|
||||
|
||||
@query('wa-dialog')
|
||||
private dialog!: HTMLElement & {
|
||||
show: () => void;
|
||||
hide: () => void;
|
||||
};
|
||||
|
||||
// =================================================================
|
||||
// PUBLIC API
|
||||
// =================================================================
|
||||
|
||||
/** Open the dialog for the given track. */
|
||||
show(
|
||||
track: library.Track,
|
||||
coverArt?: CoverArtUrls,
|
||||
): void {
|
||||
this.track = track;
|
||||
this.coverArt = coverArt ?? null;
|
||||
this.editing = false;
|
||||
this.editValues = {};
|
||||
|
||||
this.updateComplete.then(() => {
|
||||
this.dialog?.show();
|
||||
});
|
||||
}
|
||||
|
||||
/** Close the dialog. */
|
||||
close(): void {
|
||||
this.dialog?.hide();
|
||||
this.editing = false;
|
||||
this.editValues = {};
|
||||
}
|
||||
|
||||
// =================================================================
|
||||
// STYLES
|
||||
// =================================================================
|
||||
|
||||
static override styles = css`
|
||||
wa-dialog {
|
||||
--width: 640px;
|
||||
}
|
||||
|
||||
wa-dialog::part(dialog) {
|
||||
background: var(--yj-bg-surface, #212529);
|
||||
color: var(--yj-text-primary, #fff);
|
||||
border: 1px solid var(--yj-border, #444);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
wa-dialog::part(title) {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--yj-text-primary, #fff);
|
||||
padding: 16px 20px 8px;
|
||||
}
|
||||
|
||||
wa-dialog::part(header-actions) {
|
||||
padding: 16px 20px 8px;
|
||||
}
|
||||
|
||||
wa-dialog::part(close-button__base) {
|
||||
color: var(--yj-text-tertiary, #888);
|
||||
}
|
||||
|
||||
wa-dialog::part(body) {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.top-section {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cover-art {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-art img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(
|
||||
--yj-bg-elevated,
|
||||
#343a40
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cover-placeholder wa-icon {
|
||||
color: var(--yj-text-tertiary, #888);
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.main-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-meta .title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--yj-text-primary, #fff);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.main-meta .artist {
|
||||
font-size: 15px;
|
||||
color: var(--yj-text-secondary, #b3b3b3);
|
||||
}
|
||||
|
||||
.main-meta .album {
|
||||
font-size: 14px;
|
||||
color: var(--yj-text-tertiary, #888);
|
||||
}
|
||||
|
||||
.main-meta .duration {
|
||||
font-size: 13px;
|
||||
color: var(--yj-text-tertiary, #888);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--yj-border-subtle, #333);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.metadata-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 8px 12px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--yj-text-tertiary, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
font-size: 13px;
|
||||
color: var(--yj-text-secondary, #b3b3b3);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.meta-value.empty {
|
||||
color: var(--yj-text-tertiary, #888);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Edit mode inputs */
|
||||
.meta-input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--yj-bg-elevated, #343a40);
|
||||
border: 1px solid
|
||||
var(--yj-border-subtle, #333);
|
||||
border-radius: 4px;
|
||||
color: var(--yj-text-primary, #fff);
|
||||
font-size: 13px;
|
||||
padding: 4px 8px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.meta-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--yj-accent, #ffd43b);
|
||||
}
|
||||
|
||||
.main-input {
|
||||
background: var(--yj-bg-elevated, #343a40);
|
||||
border: 1px solid
|
||||
var(--yj-border-subtle, #333);
|
||||
border-radius: 4px;
|
||||
color: var(--yj-text-primary, #fff);
|
||||
font-family: inherit;
|
||||
padding: 4px 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--yj-accent, #ffd43b);
|
||||
}
|
||||
|
||||
.main-input.title-input {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.main-input.artist-input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.main-input.album-input {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--yj-border, #444);
|
||||
background: var(
|
||||
--yj-bg-elevated,
|
||||
#343a40
|
||||
);
|
||||
color: var(--yj-text-primary, #fff);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--yj-bg-overlay, #495057);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--yj-accent, #ffd43b);
|
||||
color: #000;
|
||||
border-color: var(--yj-accent, #ffd43b);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(
|
||||
--yj-accent-hover,
|
||||
#ffe066
|
||||
);
|
||||
border-color: var(
|
||||
--yj-accent-hover,
|
||||
#ffe066
|
||||
);
|
||||
}
|
||||
`;
|
||||
|
||||
// =================================================================
|
||||
// RENDER
|
||||
// =================================================================
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<wa-dialog label="Track Details">
|
||||
${this.track
|
||||
? this.renderContent()
|
||||
: nothing}
|
||||
</wa-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderContent() {
|
||||
const t = this.track!;
|
||||
|
||||
return html`
|
||||
<div class="top-section">
|
||||
${this.renderCoverArt()}
|
||||
<div class="main-meta">
|
||||
${this.renderMainFields(t)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="metadata-grid">
|
||||
${this.renderDetailFields(t)}
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
${this.renderActions()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderCoverArt() {
|
||||
const src =
|
||||
this.coverArt?.coverArtLarge ??
|
||||
this.coverArt?.coverArtMedium ??
|
||||
this.coverArt?.coverArtPath;
|
||||
|
||||
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="Album cover"
|
||||
@error=${this.handleImageError}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleImageError = (e: Event) => {
|
||||
const img = e.target as HTMLImageElement;
|
||||
const fallback = this.coverArt?.coverArtPath;
|
||||
|
||||
if (fallback && img.src !== fallback) {
|
||||
img.src = fallback;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const container = img.parentElement;
|
||||
|
||||
if (container) {
|
||||
container.innerHTML =
|
||||
'<div class="cover-placeholder">' +
|
||||
'<wa-icon name="music"></wa-icon>' +
|
||||
'</div>';
|
||||
}
|
||||
};
|
||||
|
||||
private renderMainFields(t: library.Track) {
|
||||
if (this.editing) {
|
||||
return html`
|
||||
<input
|
||||
class="main-input title-input"
|
||||
.value=${this.getEditValue(
|
||||
'title',
|
||||
t.TrackName,
|
||||
)}
|
||||
@input=${(e: Event) =>
|
||||
this.onEditInput(
|
||||
'title',
|
||||
e,
|
||||
)}
|
||||
placeholder="Title"
|
||||
/>
|
||||
<input
|
||||
class="main-input artist-input"
|
||||
.value=${this.getEditValue(
|
||||
'artist',
|
||||
t.ArtistName,
|
||||
)}
|
||||
@input=${(e: Event) =>
|
||||
this.onEditInput(
|
||||
'artist',
|
||||
e,
|
||||
)}
|
||||
placeholder="Artist"
|
||||
/>
|
||||
<input
|
||||
class="main-input album-input"
|
||||
.value=${this.getEditValue(
|
||||
'album',
|
||||
t.Album,
|
||||
)}
|
||||
@input=${(e: Event) =>
|
||||
this.onEditInput(
|
||||
'album',
|
||||
e,
|
||||
)}
|
||||
placeholder="Album"
|
||||
/>
|
||||
<span class="duration">
|
||||
${formatMilliseconds(t.TrackLength)}
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<span class="title">
|
||||
${t.TrackName || this.fileNameFromPath(t.FilePath)}
|
||||
</span>
|
||||
<span class="artist">
|
||||
${t.ArtistName || 'Unknown Artist'}
|
||||
</span>
|
||||
${t.Album
|
||||
? html`<span class="album"
|
||||
>${t.Album}</span
|
||||
>`
|
||||
: nothing}
|
||||
<span class="duration">
|
||||
${formatMilliseconds(t.TrackLength)}
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderDetailFields(t: library.Track) {
|
||||
const fields: MetadataField[] = [
|
||||
{
|
||||
key: 'genre',
|
||||
label: 'Genre',
|
||||
value: (t.Genre ?? []).join(', '),
|
||||
editable: true,
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
key: 'year',
|
||||
label: 'Year',
|
||||
value: t.Year ? String(t.Year) : '',
|
||||
editable: true,
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
key: 'composer',
|
||||
label: 'Composer',
|
||||
value: t.Composer ?? '',
|
||||
editable: true,
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
key: 'trackNumber',
|
||||
label: 'Track #',
|
||||
value: t.TrackNumber
|
||||
? String(t.TrackNumber)
|
||||
: '',
|
||||
editable: true,
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
key: 'discNumber',
|
||||
label: 'Disc #',
|
||||
value: t.DiscNumber
|
||||
? String(t.DiscNumber)
|
||||
: '',
|
||||
editable: true,
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
key: 'fileType',
|
||||
label: 'File Type',
|
||||
value: t.FileType ?? '',
|
||||
editable: false,
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
key: 'filePath',
|
||||
label: 'File Path',
|
||||
value: t.FilePath ?? '',
|
||||
editable: false,
|
||||
type: 'text',
|
||||
},
|
||||
];
|
||||
|
||||
return fields.map((f) => this.renderField(f));
|
||||
}
|
||||
|
||||
private renderField(f: MetadataField) {
|
||||
const display =
|
||||
this.getEditValue(f.key, f.value) || f.value;
|
||||
|
||||
return html`
|
||||
<span class="meta-label">${f.label}</span>
|
||||
${this.editing && f.editable
|
||||
? html`
|
||||
<input
|
||||
class="meta-input"
|
||||
type=${f.type}
|
||||
.value=${this.getEditValue(
|
||||
f.key,
|
||||
f.value,
|
||||
)}
|
||||
@input=${(e: Event) =>
|
||||
this.onEditInput(
|
||||
f.key,
|
||||
e,
|
||||
)}
|
||||
/>
|
||||
`
|
||||
: html`
|
||||
<span
|
||||
class="meta-value ${display
|
||||
? ''
|
||||
: 'empty'}"
|
||||
>
|
||||
${display || 'None'}
|
||||
</span>
|
||||
`}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderActions() {
|
||||
if (this.editing) {
|
||||
return html`
|
||||
<button
|
||||
class="btn"
|
||||
@click=${this.cancelEdit}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click=${this.saveEdit}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<button
|
||||
class="btn"
|
||||
@click=${this.startEdit}
|
||||
>
|
||||
<wa-icon name="pen-to-square"></wa-icon>
|
||||
Edit
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
// =================================================================
|
||||
// EDIT LOGIC
|
||||
// =================================================================
|
||||
|
||||
private startEdit = () => {
|
||||
this.editing = true;
|
||||
this.editValues = {};
|
||||
};
|
||||
|
||||
private cancelEdit = () => {
|
||||
this.editing = false;
|
||||
this.editValues = {};
|
||||
};
|
||||
|
||||
private saveEdit = () => {
|
||||
// TODO: implement tag writing when backend support is added.
|
||||
// For now, just exit edit mode.
|
||||
this.editing = false;
|
||||
this.editValues = {};
|
||||
};
|
||||
|
||||
private getEditValue(
|
||||
key: string,
|
||||
fallback: string,
|
||||
): string {
|
||||
return key in this.editValues
|
||||
? this.editValues[key]!
|
||||
: fallback;
|
||||
}
|
||||
|
||||
private onEditInput(key: string, e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
|
||||
this.editValues = {
|
||||
...this.editValues,
|
||||
[key]: input.value,
|
||||
};
|
||||
}
|
||||
|
||||
// =================================================================
|
||||
// HELPERS
|
||||
// =================================================================
|
||||
|
||||
private fileNameFromPath(filePath: string): string {
|
||||
const parts = filePath.split(/[\\/]/);
|
||||
const filename =
|
||||
parts[parts.length - 1] ?? filePath;
|
||||
|
||||
return filename.replace(/\.[^.]+$/, '');
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'track-details': TrackDetails;
|
||||
}
|
||||
}
|
||||
@@ -35,6 +35,9 @@ import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
|
||||
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
import '@components/playlist-picker/playlist-picker.js';
|
||||
import type { PlaylistPicker } from '@components/playlist-picker/playlist-picker.js';
|
||||
import '@components/track-details/track-details.js';
|
||||
import type { TrackDetails } from '@components/track-details/track-details.js';
|
||||
import type { CoverArtUrls } from '@components/track-details/track-details.js';
|
||||
|
||||
const COLUMN_STORAGE_KEY = 'track-list-column-widths';
|
||||
const SORT_FIELD_KEY = 'track-list-sort-field';
|
||||
@@ -93,6 +96,9 @@ export class TrackList extends LitElement implements SelectionHost {
|
||||
@query('#playlist-submenu')
|
||||
private playlistSubmenuPopup!: HTMLElement;
|
||||
|
||||
@query('track-details')
|
||||
private trackDetailsDialog!: TrackDetails;
|
||||
|
||||
@query('lit-virtualizer')
|
||||
private virtualizer!: LitVirtualizer;
|
||||
|
||||
@@ -1163,7 +1169,8 @@ export class TrackList extends LitElement implements SelectionHost {
|
||||
};
|
||||
|
||||
private onContextMenuAction(action: string) {
|
||||
const filePaths = this.selection.getSelectedKeysOrdered();
|
||||
const filePaths =
|
||||
this.selection.getSelectedKeysOrdered();
|
||||
|
||||
if (filePaths.length === 0) return;
|
||||
|
||||
@@ -1177,11 +1184,53 @@ export class TrackList extends LitElement implements SelectionHost {
|
||||
case 'play-next':
|
||||
queueStore.playTracksNext(filePaths);
|
||||
break;
|
||||
case 'track-details':
|
||||
this.openTrackDetails(filePaths[0]!);
|
||||
break;
|
||||
}
|
||||
|
||||
this.closeContextMenu(true);
|
||||
}
|
||||
|
||||
private openTrackDetails(filePath: string) {
|
||||
const track = this.tracks.find(
|
||||
(t) => t.FilePath === filePath,
|
||||
);
|
||||
|
||||
if (!track) return;
|
||||
|
||||
const coverArt =
|
||||
this.resolveCoverArt(track.Album);
|
||||
|
||||
this.trackDetailsDialog?.show(
|
||||
track,
|
||||
coverArt ?? undefined,
|
||||
);
|
||||
}
|
||||
|
||||
private resolveCoverArt(
|
||||
albumName: string,
|
||||
): CoverArtUrls | null {
|
||||
if (!albumName) return null;
|
||||
|
||||
const albums = this.libraryCtrl.cachedAlbums;
|
||||
|
||||
if (!albums) return null;
|
||||
|
||||
const album = albums.find(
|
||||
(a) => a.Name === albumName,
|
||||
);
|
||||
|
||||
if (!album || !album.CoverArtPath) return null;
|
||||
|
||||
return {
|
||||
coverArtPath: album.CoverArtPath,
|
||||
coverArtSmall: album.CoverArtSmall,
|
||||
coverArtMedium: album.CoverArtMedium,
|
||||
coverArtLarge: album.CoverArtLarge,
|
||||
};
|
||||
}
|
||||
|
||||
private closeContextMenu(clearSelection = false) {
|
||||
if (!this.contextMenuOpen) return;
|
||||
|
||||
@@ -1651,6 +1700,22 @@ export class TrackList extends LitElement implements SelectionHost {
|
||||
Add to Playlist
|
||||
<span class="submenu-arrow">▶</span>
|
||||
</wa-dropdown-item>
|
||||
${this.selection.selectionCount === 1
|
||||
? html`
|
||||
<wa-dropdown-item
|
||||
@click=${() =>
|
||||
this.onContextMenuAction(
|
||||
'track-details',
|
||||
)}
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="circle-info"
|
||||
></wa-icon>
|
||||
Track Details
|
||||
</wa-dropdown-item>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
@@ -1673,6 +1738,8 @@ export class TrackList extends LitElement implements SelectionHost {
|
||||
`
|
||||
: nothing}
|
||||
</wa-popup>
|
||||
|
||||
<track-details></track-details>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -280,10 +280,38 @@ class ThemeStore {
|
||||
|
||||
// Set the document color-scheme so native form controls
|
||||
// (select dropdowns, scrollbars, etc.) match the theme.
|
||||
root.style.colorScheme =
|
||||
this.state.backgroundShade === 'light'
|
||||
? 'light'
|
||||
: 'dark';
|
||||
const isDark =
|
||||
this.state.backgroundShade !== 'light';
|
||||
|
||||
root.style.colorScheme = isDark
|
||||
? 'dark'
|
||||
: 'light';
|
||||
|
||||
// Bridge to WebAwesome's theme system so wa-dialog,
|
||||
// wa-drawer, and other WA components inherit the
|
||||
// correct surface colours instead of defaulting to
|
||||
// white (light mode).
|
||||
if (isDark) {
|
||||
root.classList.add('wa-dark');
|
||||
} else {
|
||||
root.classList.remove('wa-dark');
|
||||
}
|
||||
|
||||
const palette =
|
||||
SHADE_PALETTES[this.state.backgroundShade];
|
||||
|
||||
root.style.setProperty(
|
||||
'--wa-color-surface-raised',
|
||||
palette.bgSurface,
|
||||
);
|
||||
root.style.setProperty(
|
||||
'--wa-color-surface-default',
|
||||
palette.bgBase,
|
||||
);
|
||||
root.style.setProperty(
|
||||
'--wa-color-surface-lowered',
|
||||
palette.bgElevated,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user