spotifylookup/resultvisualizer.js

124 lines
2.6 KiB
JavaScript

const fs = require('fs/promises');
const path = require('path');
const stylesheet = `
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
background-color: #000922;
font-family: sans;
color: white;
}
.wrapper, .wrapper table {
width: 100%;
border-collapse: collapse;
}
table tr:nth-child(odd) {
background-color: #030a38;
}
.meta .file {
font-weight: bold;
}
.meta .title, .meta .artist {
font-size: .6rem;
}
`;
function createDocument(content) {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spotify results</title>
<style>${stylesheet}</style>
</head>
<body>
${content}
</body>
</html>
`;
}
function $(name, content, classList) {
return {
toString: () => `<${name}${classList && classList.length ? ` class="${classList.join(',')}"` : ''}>${content ? content.toString() : ''}</${name}>`,
append: function ($el) {
content = content ? content + $el.toString() : $el.toString();
return this;
},
html: function(text) {
content = text;
return this;
}
};
}
async function generate() {
const wrapper = $('div', null, ['wrapper']);
const table = $('table');
const header = $('thead', `
<thead>
<tr>
<th>Original File</th>
<th>Type</th>
<th>Album</th>
<th>Title</th>
<th>Artist</th>
<th>Meta</th>
</tr>
</thead>
`);
const tbody = $('tbody');
const spotify = JSON.parse(await fs.readFile('spotify.json'));
let rows = [];
for (const entry of spotify) {
let row = [];
for (const sfItem of entry.spotify) {
row.push([
'',
sfItem.album.album_type,
sfItem.album.name,
sfItem.name,
sfItem.artists.map((item) => item.name).join(', '),
`<a href="${sfItem.uri}" target="_blank">` +
`<img src="${sfItem.album.images[sfItem.album.images.length - 1].url}">` +
'</a>'
]);
}
row[0][0] = $('div',
$('span', path.basename(entry.file), ['file']) +
'<br>' +
$('span', `Title: ${entry.title}`, ['title']) +
`<br>` +
$('span', `Artist: ${entry.artist}`, ['artist']),
['meta']
);
rows.push(
row.map(
(rowItem) =>
'<tr>' +
rowItem.map(
(colItem) => `<td>${colItem}</td>`
).join('') +
'</tr>'
).join('')
);
}
rows.forEach((item) => tbody.append(item));
wrapper.append(table.append(header).append(tbody));
await fs.writeFile('test.html', createDocument(wrapper));
}
generate().catch(console.error);