Scan and render mp3 metadata #27

Merged
savanni merged 2 commits from savanni/music-file-types into main 2023-03-02 15:44:15 +00:00
6 changed files with 159 additions and 152 deletions
Showing only changes of commit 7fe9a68062 - Show all commits

View File

@ -0,0 +1,9 @@
export class DataCard extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.classList.add("card");
}
}

View File

@ -0,0 +1,23 @@
export class TextField extends HTMLElement {
static get observedAttributes() {
return ["text"];
}
constructor() {
super();
}
get text(): string | null {
return this.getAttribute("text");
}
set text(text: string | null) {
if (text) {
this.setAttribute("text", text);
this.innerHTML = text;
} else {
this.removeAttribute("text");
this.innerHTML = "";
}
}
}

View File

@ -0,0 +1,101 @@
import { TextField } from "./TextField";
import { DataCard } from "./DataCard";
export class TrackCard extends HTMLElement {
trackNumberContainer: TextField;
nameContainer: TextField;
albumContainer: TextField;
artistContainer: TextField;
durationContainer: TextField;
static get observedAttributes() {
return ["id", "trackNumber", "name", "album", "artist", "duration"];
}
constructor() {
super();
this.trackNumberContainer = document.createElement("text-field");
this.nameContainer = document.createElement("text-field");
this.nameContainer.classList.add("track-card__name");
this.albumContainer = document.createElement("text-field");
this.albumContainer.classList.add("track-card__album");
this.artistContainer = document.createElement("text-field");
this.artistContainer.classList.add("track-card__artist");
this.durationContainer = document.createElement("text-field");
this.durationContainer.classList.add("track-card__duration");
}
get name(): string | null {
return this.getAttribute("name");
}
set name(name: string | null) {
if (name) {
this.setAttribute("name", name);
this.nameContainer.text = name;
} else {
this.removeAttribute("open");
this.nameContainer.text = null;
}
}
get artist(): string | null {
return this.getAttribute("artist");
}
set artist(artist: string | null) {
if (artist) {
this.setAttribute("artist", artist);
this.artistContainer.text = artist;
} else {
this.removeAttribute("open");
this.artistContainer.text = null;
}
}
get album(): string | null {
return this.getAttribute("album");
}
set album(album: string | null) {
if (album) {
this.setAttribute("album", album);
this.albumContainer.text = album;
} else {
this.removeAttribute("open");
this.albumContainer.text = null;
}
}
get duration(): string | null {
return this.getAttribute("duration");
}
set duration(duration: string | null) {
if (duration) {
this.setAttribute("duration", duration);
this.durationContainer.text = duration;
} else {
this.removeAttribute("open");
this.durationContainer.text = null;
}
}
connectedCallback() {
const container = document.createElement("data-card");
container.classList.add("track-card");
// this.appendChild(this.trackNumberContainer);
container.appendChild(this.nameContainer);
container.appendChild(this.albumContainer);
container.appendChild(this.artistContainer);
container.appendChild(this.durationContainer);
this.appendChild(container);
}
}

View File

@ -1,137 +0,0 @@
import { TrackInfo } from "../client";
export class TrackName extends HTMLElement {
container: HTMLElement;
static get observedAttributes() {
return ["name"];
}
constructor() {
super();
this.container = document.createElement("div");
}
get name(): string | null {
return this.getAttribute("name");
}
set name(name: string | null) {
while (this.container.lastChild) {
this.container.removeChild(this.container.lastChild);
}
if (name) {
this.setAttribute("name", name);
this.container.appendChild(document.createTextNode(name));
} else {
this.removeAttribute("name");
}
}
connectedCallback() {
this.appendChild(this.container);
}
}
export class TrackCard extends HTMLElement {
static get observedAttributes() {
return ["id", "trackNumber", "name", "album", "artist", "duration"];
}
constructor() {
super();
}
attributeChangeCallback(
attrName: string,
oldValue: string,
newValue: string
): void {
if (newValue !== oldValue) {
this.updateContent();
}
}
get name(): string | null {
return this.getAttribute("name");
}
set name(name: string | null) {
if (name) {
this.setAttribute("name", name);
} else {
this.removeAttribute("open");
}
this.updateContent();
}
get artist(): string | null {
return this.getAttribute("artist");
}
set artist(artist: string | null) {
if (artist) {
this.setAttribute("artist", artist);
} else {
this.removeAttribute("open");
}
this.updateContent();
}
get album(): string | null {
return this.getAttribute("album");
}
set album(album: string | null) {
if (album) {
this.setAttribute("album", album);
} else {
this.removeAttribute("open");
}
this.updateContent();
}
get length(): string | null {
return this.getAttribute("length");
}
set length(length: string | null) {
if (length) {
this.setAttribute("length", length);
} else {
this.removeAttribute("open");
}
this.updateContent();
}
connectedCallback() {
this.updateContent();
}
updateContent() {
const container = document.createElement("div");
container.classList.add("track-card");
this.innerHTML = "";
this.appendChild(container);
while (container.lastChild) {
container.removeChild(container.lastChild);
}
if (this["name"]) {
const trackName = document.createElement("track-name");
trackName.name = this["name"];
container.appendChild(trackName);
}
if (this["length"]) {
container.appendChild(document.createTextNode(this["length"]));
}
if (this["album"]) {
container.appendChild(document.createTextNode(this["album"]));
}
if (this["artist"]) {
container.appendChild(document.createTextNode(this["artist"]));
}
}
}

View File

@ -1,13 +1,17 @@
import * as _ from "lodash"; import * as _ from "lodash";
import { TrackInfo, getTracks } from "./client"; import { TrackInfo, getTracks } from "./client";
import { TrackName, TrackCard } from "./components/track"; import { DataCard } from "./components/DataCard";
import { TextField } from "./components/TextField";
import { TrackCard } from "./components/TrackCard";
window.customElements.define("track-name", TrackName); window.customElements.define("data-card", DataCard);
window.customElements.define("text-field", TextField);
window.customElements.define("track-card", TrackCard); window.customElements.define("track-card", TrackCard);
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"track-name": TrackName; "data-card": DataCard;
"text-field": TextField;
"track-card": TrackCard; "track-card": TrackCard;
} }
} }
@ -20,7 +24,7 @@ const updateTrackList = (tracks: TrackInfo[]) => {
card.name = info.name || null; card.name = info.name || null;
card.album = info.album || null; card.album = info.album || null;
card.artist = info.artist || null; card.artist = info.artist || null;
card.length = (info.duration && `${info.duration}`) || null; card.duration = (info.duration && `${info.duration}`) || null;
return card; return card;
}); });
_.map(track_formats, (trackCard) => { _.map(track_formats, (trackCard) => {

View File

@ -29,17 +29,7 @@ body {
margin-top: 32px; margin-top: 32px;
} }
/* .card {
.track-list__row:nth-child(even) {
background-color: rgb(255, 255, 255);
}
.track-list__row:nth-child(odd) {
background-color: rgb(200, 200, 200);
}
*/
.track-card {
border: 1px solid black; border: 1px solid black;
border-radius: 5px; border-radius: 5px;
padding: 8px; padding: 8px;
@ -47,15 +37,32 @@ body {
height: 100px; height: 100px;
} }
.track-card {
display: grid;
gap: 4px 4px;
}
.track-card__name { .track-card__name {
display: block;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
} }
.track-card__length { .track-card__length {
display: block;
grid-column: 1 / span 1;
grid-row: 2 / span 1;
} }
.track-card__album { .track-card__album {
display: block;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
} }
.track-card__artist { .track-card__artist {
display: block;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
} }