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

fix(18-02): add field labels to all track-details states (single/batch, read/edit)

Browse Source
This commit is contained in:
yonlu
2026-03-18 13:40:11 -04:00
parent 9df2d6764a
commit d430ad884b
1 changed files with 91 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/track-details/track-details.ts
+39 -16
View File
@@ -878,33 +878,36 @@ export class TrackDetails extends LitElement {
<span class="batch-header"> <span class="batch-header">
${this.batchTracks.length} tracks selected ${this.batchTracks.length} tracks selected
</span> </span>
<div class="main-field-group">
<label class="main-field-label">Title</label>
${titleField?.mixed ${titleField?.mixed
? html`<span class="mixed-value"> ? html`<span class="mixed-value">
${this.countDistinctValues('title')} different titles ${this.countDistinctValues('title')} different titles
</span>` </span>`
: titleField?.value : html`<span class="title">
? html`<span class="title"> ${titleField?.value || 'None'}
${titleField.value} </span>`}
</span>` </div>
: nothing} <div class="main-field-group">
<label class="main-field-label">Artist</label>
${artistField?.mixed ${artistField?.mixed
? html`<span class="mixed-value"> ? html`<span class="mixed-value">
${this.countDistinctValues('artist')} different artists ${this.countDistinctValues('artist')} different artists
</span>` </span>`
: artistField?.value : html`<span class="artist">
? html`<span class="artist"> ${artistField?.value || 'Unknown Artist'}
${artistField.value} </span>`}
</span>` </div>
: nothing} <div class="main-field-group">
<label class="main-field-label">Album</label>
${albumField?.mixed ${albumField?.mixed
? html`<span class="mixed-value"> ? html`<span class="mixed-value">
${this.countDistinctValues('album')} different albums ${this.countDistinctValues('album')} different albums
</span>` </span>`
: albumField?.value : html`<span class="album">
? html`<span class="album"> ${albumField?.value || 'No album'}
${albumField.value} </span>`}
</span>` </div>
: nothing}
`; `;
} }
@@ -1235,6 +1238,8 @@ export class TrackDetails extends LitElement {
private renderMainFields(t: library.Track) { private renderMainFields(t: library.Track) {
if (this.editing) { if (this.editing) {
return html` return html`
<div class="main-field-group">
<label class="main-field-label">Title</label>
<input <input
class="main-input title-input" class="main-input title-input"
.value=${this.getEditValue( .value=${this.getEditValue(
@@ -1248,6 +1253,9 @@ export class TrackDetails extends LitElement {
)} )}
placeholder="Title" placeholder="Title"
/> />
</div>
<div class="main-field-group">
<label class="main-field-label">Artist</label>
<input <input
class="main-input artist-input" class="main-input artist-input"
.value=${this.getEditValue( .value=${this.getEditValue(
@@ -1261,6 +1269,9 @@ export class TrackDetails extends LitElement {
)} )}
placeholder="Artist" placeholder="Artist"
/> />
</div>
<div class="main-field-group">
<label class="main-field-label">Album</label>
<input <input
class="main-input album-input" class="main-input album-input"
.value=${this.getEditValue( .value=${this.getEditValue(
@@ -1274,6 +1285,7 @@ export class TrackDetails extends LitElement {
)} )}
placeholder="Album" placeholder="Album"
/> />
</div>
<span class="duration"> <span class="duration">
${formatMilliseconds(t.TrackLength)} ${formatMilliseconds(t.TrackLength)}
</span> </span>
@@ -1281,17 +1293,28 @@ export class TrackDetails extends LitElement {
} }
return html` return html`
<div class="main-field-group">
<label class="main-field-label">Title</label>
<span class="title"> <span class="title">
${t.TrackName || this.fileNameFromPath(t.FilePath)} ${t.TrackName || this.fileNameFromPath(t.FilePath)}
</span> </span>
</div>
<div class="main-field-group">
<label class="main-field-label">Artist</label>
<span class="artist"> <span class="artist">
${t.ArtistName || 'Unknown Artist'} ${t.ArtistName || 'Unknown Artist'}
</span> </span>
</div>
<div class="main-field-group">
<label class="main-field-label">Album</label>
${t.Album ${t.Album
? html`<span class="album" ? html`<span class="album"
>${t.Album}</span >${t.Album}</span
>` >`
: nothing} : html`<span class="album" style="font-style: italic"
>No album</span
>`}
</div>
<span class="duration"> <span class="duration">
${formatMilliseconds(t.TrackLength)} ${formatMilliseconds(t.TrackLength)}
</span> </span>