forked from CWAD/relibre
First commit
This commit is contained in:
470
ui/generator.js
Normal file
470
ui/generator.js
Normal file
@@ -0,0 +1,470 @@
|
||||
/* @licstart The following is the entire license notice for the JavaScript code in this file.
|
||||
Relibre
|
||||
Copyleft (🄯) 2025 James Osborne
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
This file is free software: you can redistribute it and/or modify it under the terms of the
|
||||
GNU Affero General Public License as published by the Free Software Foundation, either version 3
|
||||
of the License, or (at your option) any later version.
|
||||
|
||||
This file is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
|
||||
without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
||||
See the GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License along with this program.
|
||||
If not, see <https://www.gnu.org/licenses/>.
|
||||
@licend The above is the entire license notice for the JavaScript code in this file. */
|
||||
|
||||
'use strict';
|
||||
|
||||
// Single source of truth for icons. Anything provided by icons.js (window.RELIBRE_ICON)
|
||||
// will override these defaults. Leave defaults empty so missing icons simply render
|
||||
// without an <img>.
|
||||
const ICONS = Object.assign({
|
||||
website: '', bluesky: '', mastodon: '', pixelfed: '', peertube: '',
|
||||
lemmy: '', owncast: '', applemusic: '', spotify: '', bandcamp: '',
|
||||
youtube: '', reddit: '', facebook: '', instagram: '', tiktok: '',
|
||||
threads: '', friendica: '', 'diaspora*': '', x: '', blog: '', email: '',
|
||||
soundcloud: '', tidal: ''
|
||||
}, (window.RELIBRE_ICON || {}));
|
||||
|
||||
(function () {
|
||||
|
||||
const STYLE_CSS = `
|
||||
:root{color-scheme:dark;--bg:#0b0b0c;--panel:#121214;--fg:#eaeaea;--muted:#9aa0a6;--acc:#e53935;--acc2:#ff7aa5;--br:18px;--input:#1a1b1e;--input-br:#2a2c30}
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
|
||||
a{color:#9bd1ff}
|
||||
|
||||
.hf-container{max-width:860px;margin:40px auto;padding:0 18px}
|
||||
.hf-card{background:var(--panel);border:1px solid #1d1f21;border-radius:var(--br);padding:22px;margin:16px 0;box-shadow:0 12px 38px rgba(0,0,0,.45)}
|
||||
|
||||
.hf-hero{display:block}
|
||||
.hf-cover{display:block;width:100%;height:auto;border-radius:14px;margin:4px 0 16px}
|
||||
.hf-title{font-size:clamp(28px,4.6vw,42px);line-height:1.1;margin:0 0 4px;font-weight:800}
|
||||
.hf-subtitle{color:var(--muted);margin:0 0 14px}
|
||||
.hf-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
|
||||
|
||||
.btn{display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border-radius:999px;text-decoration:none;font-weight:700}
|
||||
.btn-ghost{background:#1b1c1f;border:1px solid #2a2c30;color:var(--fg)}
|
||||
.btn-red{background:var(--acc);color:#fff;border:0}
|
||||
|
||||
.hf-embed{margin-top:16px}
|
||||
.hf-desc{margin-top:10px;white-space:pre-wrap}
|
||||
|
||||
.hf-section-title{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#ddd;margin:0 0 10px;font-weight:800}
|
||||
.hf-link-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:12px}
|
||||
.hf-link{display:flex;gap:10px;align-items:center;padding:14px 16px;border-radius:12px;background:#191a1d;border:1px solid #2a2c30;text-decoration:none;color:var(--fg)}
|
||||
.hf-link img{display:block;width:24px;height:24px}
|
||||
.hf-video, video{width:100%;border-radius:12px}
|
||||
|
||||
.hf-title,
|
||||
.hf-subtitle { text-align: center; }
|
||||
.hf-cta-row { justify-content: center; }
|
||||
|
||||
.hf-footer{margin:12px 0 28px;text-align:center;color:var(--muted);font-size:13px}
|
||||
.hf-footer a{text-decoration:none}
|
||||
.hf-footer a:hover{filter:brightness(1.1)}
|
||||
|
||||
/* ---- Embeds ---- */
|
||||
|
||||
/* Clip corners on embeds and give consistent radius */
|
||||
.hf-embed{overflow:hidden;border-radius:12px}
|
||||
|
||||
/* Bandcamp: center and match inner fixed width to avoid right-gutter */
|
||||
.bc-wrap{display:flex;justify-content:center}
|
||||
.bc-iframe{display:block;border:0;width:700px;max-width:100%}
|
||||
|
||||
/* YouTube: responsive 16:9 */
|
||||
.hf-video{aspect-ratio:16/9}
|
||||
.hf-video iframe{width:100%;height:100%;display:block;border:0}
|
||||
|
||||
/* Consistent tile hover for all services (no brand tints) */
|
||||
.hf-link{
|
||||
transition: background .2s ease, border-color .2s ease, color .2s ease,
|
||||
transform .06s ease-out, box-shadow .2s ease;
|
||||
}
|
||||
.hf-link:hover{
|
||||
background:#24262a;
|
||||
border-color:#3a3c40;
|
||||
color:#fff;
|
||||
transform:translateY(-1px);
|
||||
box-shadow:0 0 0 3px rgba(255,255,255,.02), inset 0 0 0 1px rgba(255,255,255,.04);
|
||||
}
|
||||
.hf-link:hover span{ color:inherit }
|
||||
.hf-link:focus-visible{ outline:2px solid var(--acc2); outline-offset:3px }
|
||||
.hf-link:active{ transform:translateY(0) }
|
||||
|
||||
@media (max-width:720px){
|
||||
.hf-link-grid{grid-template-columns:1fr}
|
||||
}
|
||||
`;
|
||||
|
||||
const SCRIPT_JS = '';
|
||||
|
||||
const CREDIT_FOOTER = `<footer class="hf-footer">
|
||||
Generated with <a href="https://circlewithadot.net/relibre" target="_blank" rel="noopener">Relibre</a>
|
||||
</footer>`;
|
||||
|
||||
const TEMPLATE_HTML = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{TITLE}} — {{ARTIST}}</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="description" content="{{TITLE}} by {{ARTIST}}">
|
||||
<style>{{INLINE_STYLE}}</style>
|
||||
<meta property="og:type" content="music.album">
|
||||
<meta property="og:title" content="{{TITLE}} — {{ARTIST}}">
|
||||
<meta property="og:image" content="{{COVER_PATH}}">
|
||||
</head>
|
||||
<body>
|
||||
<main class="hf-container">
|
||||
<article class="hf-card hf-hero">
|
||||
<img class="hf-cover" src="{{COVER_PATH}}" alt="{{TITLE}} cover art">
|
||||
<h1 class="hf-title">{{TITLE}}</h1>
|
||||
<p class="hf-subtitle">{{ARTIST}}</p>
|
||||
<div class="hf-cta-row">
|
||||
{{BUY_BUTTON_HTML}}
|
||||
{{STREAM_MAIN_BUTTON_HTML}}
|
||||
</div>
|
||||
{{AUDIO_EMBED_HTML}}
|
||||
{{DESCRIPTION_HTML}}
|
||||
</article>
|
||||
{{WATCH_HTML}}
|
||||
{{SUPPORT_SECTION_HTML}}
|
||||
{{STREAM_SECTION_HTML}}
|
||||
{{FOLLOW_SECTION_HTML}}
|
||||
{{CREDIT_FOOTER}}
|
||||
</main>
|
||||
<script>{{INLINE_SCRIPT}}</script>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
const $ = (sel, root=document) => root.querySelector(sel);
|
||||
const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));
|
||||
|
||||
const FOLLOW_SERVICES = [
|
||||
'blog','website','mastodon','pixelfed','bluesky','peertube','owncast','lemmy','friendica','diaspora*','email'
|
||||
];
|
||||
|
||||
function setEnvStatus(){
|
||||
const proto = location.protocol.replace(':','');
|
||||
const el = $('#envStatus');
|
||||
if (el) el.textContent = `Protocol: ${proto}. Relibre generator works directly from file:// — no server required.`;
|
||||
}
|
||||
|
||||
function createServiceRow(serviceKey, container){
|
||||
const row = document.createElement('div');
|
||||
row.className = 'grid2';
|
||||
row.innerHTML = `
|
||||
<label>${serviceKey} URL
|
||||
<input type="url" data-svc="${serviceKey}" placeholder="https://..." aria-label="${serviceKey} URL">
|
||||
</label>
|
||||
<div></div>`;
|
||||
container.appendChild(row);
|
||||
}
|
||||
|
||||
// Add a custom row with different presets per section and a free-text label for [Custom]
|
||||
function addCustomRow(container, type){
|
||||
const opts = (type === 'stream')
|
||||
? ['[Custom]', 'SoundCloud', 'YouTube', 'Tidal']
|
||||
: ['[Custom]', 'X', 'Instagram', 'Facebook', 'TikTok', 'Twitch', 'Threads', 'YouTube', 'Reddit'];
|
||||
|
||||
const optionsHtml = opts.map(v => `<option value="${v}">${v}</option>`).join('');
|
||||
|
||||
const row = document.createElement('div');
|
||||
row.className = 'grid2';
|
||||
row.innerHTML = `
|
||||
<label>Label
|
||||
<select data-svc="custom-label" aria-label="Custom ${type} label">
|
||||
${optionsHtml}
|
||||
</select>
|
||||
<input type="text" data-svc="custom-label-text"
|
||||
placeholder="Enter label…" class="hidden"
|
||||
aria-label="Custom ${type} label text">
|
||||
</label>
|
||||
<label>URL
|
||||
<input type="url" data-svc="custom-url" placeholder="https://..." aria-label="Custom ${type} URL">
|
||||
</label>`;
|
||||
|
||||
const sel = row.querySelector('[data-svc="custom-label"]');
|
||||
const txt = row.querySelector('[data-svc="custom-label-text"]');
|
||||
const update = () => txt.classList.toggle('hidden', sel.value !== '[Custom]');
|
||||
sel.addEventListener('change', update);
|
||||
update();
|
||||
|
||||
container.appendChild(row);
|
||||
}
|
||||
|
||||
function toggleRadios(name,map){
|
||||
const inputs = $$(`input[name="${name}"]`);
|
||||
const update = () => {
|
||||
const val = inputs.find(i=>i.checked)?.value;
|
||||
Object.entries(map).forEach(([key,el]) => el.classList.toggle('hidden', key !== val));
|
||||
};
|
||||
inputs.forEach(r=>r.addEventListener('change', update));
|
||||
update();
|
||||
}
|
||||
|
||||
function mdToHtml(md){
|
||||
if(!md) return '';
|
||||
let html = md.replace(/[&<>]/g,c=>({'&':'&','<':'<','>':'>'}[c]))
|
||||
.replace(/\*\*([^*]+)\*\*/g,'<strong>$1</strong>')
|
||||
.replace(/\*([^*]+)\*/g,'<em>$1</em>')
|
||||
.replace(/`([^`]+)`/g,'<code>$1</code>')
|
||||
.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g,'<a href="$2" rel="noopener" target="_blank">$1</a>');
|
||||
const lines = html.split(/\r?\n/);
|
||||
let out = '', inOl=false, inUl=false;
|
||||
for(const line of lines){
|
||||
if(/^\s*\d+\.\s+/.test(line)){ if(!inOl){out+='<ol>'; inOl=true;} out+='<li>'+line.replace(/^\s*\d+\.\s+/,'')+'</li>'; continue; }
|
||||
if(/^\s*[-*]\s+/.test(line)){ if(!inUl){out+='<ul>'; inUl=true;} out+='<li>'+line.replace(/^\s*[-*]\s+/,'')+'</li>'; continue; }
|
||||
if(inOl){out+='</ol>'; inOl=false;} if(inUl){out+='</ul>'; inUl=false;}
|
||||
if(line.trim()) out+='<p>'+line+'</p>';
|
||||
}
|
||||
if(inOl) out+='</ol>'; if(inUl) out+='</ul>';
|
||||
return out;
|
||||
}
|
||||
|
||||
function fileToDataURL(file){
|
||||
return new Promise((resolve,reject)=>{
|
||||
const fr = new FileReader();
|
||||
fr.onload = () => resolve(fr.result);
|
||||
fr.onerror = reject;
|
||||
fr.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
const LABELS = {
|
||||
applemusic: 'Apple Music',
|
||||
amazonmusic: 'Amazon Music',
|
||||
soundcloud: 'SoundCloud',
|
||||
tidal: 'Tidal',
|
||||
tiktok: 'TikTok',
|
||||
'diaspora*': 'diaspora*',
|
||||
x: 'X'
|
||||
};
|
||||
|
||||
function pretty(k){
|
||||
return LABELS[k] || k.charAt(0).toUpperCase() + k.slice(1);
|
||||
}
|
||||
|
||||
function escapeHtml(s){ return (s||'').replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c])); }
|
||||
|
||||
// Map normalized key -> icon key
|
||||
function getServiceIcon(key){
|
||||
const map = {
|
||||
spotify:'spotify', applemusic:'apple', bandcamp:'bandcamp',
|
||||
soundcloud:'soundcloud', tidal:'tidal',
|
||||
mastodon:'mastodon', pixelfed:'pixelfed', peertube:'peertube', lemmy:'lemmy', owncast:'owncast',
|
||||
bluesky:'bluesky', facebook:'facebook', instagram:'instagram', twitter:'x', threads:'threads', tiktok:'tiktok',
|
||||
email:'email', youtube:'youtube', reddit:'reddit', website:'website', blog:'blog',
|
||||
friendica:'friendica', 'diaspora*':'diaspora', x:'x'
|
||||
};
|
||||
const iconKey = map[key] || 'website';
|
||||
return ICONS[iconKey] || '';
|
||||
}
|
||||
|
||||
// Normalize a display label to a lookup key (e.g., "Apple Music" -> "applemusic")
|
||||
function labelToKey(label){
|
||||
return String(label || '').toLowerCase().replace(/[^a-z0-9]+/g,'');
|
||||
}
|
||||
|
||||
function renderButtonsGrid(title, buttons, id){
|
||||
if(!buttons.length) return '';
|
||||
const items = buttons.map(b => {
|
||||
const key = labelToKey(b.label);
|
||||
const icon = getServiceIcon(key);
|
||||
const img = icon ? `<img src="${icon}" alt="" width="24" height="24" loading="lazy">` : '';
|
||||
return `<a class="hf-link" href="${b.url}" target="_blank" rel="noopener">${img}<span>${escapeHtml(b.label)}</span></a>`;
|
||||
}).join('');
|
||||
const idAttr = id ? ` id="${id}"` : '';
|
||||
return `<section class="hf-card"${idAttr}><h3 class="hf-section-title">${escapeHtml(title)}</h3><div class="hf-link-grid">${items}</div></section>`;
|
||||
}
|
||||
|
||||
// ---- Embeds normalizers ----
|
||||
|
||||
// Bandcamp: force dark, clamp to inner fixed width, and center
|
||||
function normalizeBandcampEmbed(rawHtml){
|
||||
if(!rawHtml) return '';
|
||||
const wrap = document.createElement('div');
|
||||
wrap.innerHTML = rawHtml.trim();
|
||||
const iframe = wrap.querySelector('iframe');
|
||||
if(!iframe) return rawHtml;
|
||||
|
||||
let src = iframe.getAttribute('src') || '';
|
||||
const setSeg = (name, val) => {
|
||||
const re = new RegExp(`${name}=[^/]+`);
|
||||
if (re.test(src)) src = src.replace(re, `${name}=${val}`);
|
||||
else src += (src.endsWith('/') ? '' : '/') + `${name}=${val}/`;
|
||||
};
|
||||
setSeg('bgcol', '121214'); // matches --panel
|
||||
setSeg('linkcol', 'eaeaea'); // matches --fg
|
||||
setSeg('transparent', 'true');
|
||||
iframe.setAttribute('src', src);
|
||||
|
||||
const size = (src.match(/size=([^/]+)/)?.[1] || 'large').toLowerCase();
|
||||
const innerW = size === 'small' ? 350 : 700;
|
||||
|
||||
iframe.classList.add('bc-iframe');
|
||||
iframe.removeAttribute('width');
|
||||
iframe.removeAttribute('height');
|
||||
iframe.style.width = innerW + 'px';
|
||||
|
||||
return `<div class="bc-wrap">${iframe.outerHTML}</div>`;
|
||||
}
|
||||
|
||||
// YouTube: strip fixed w/h so CSS controls aspect-ratio
|
||||
function normalizeYouTubeEmbed(rawHtml){
|
||||
if(!rawHtml) return '';
|
||||
const wrap = document.createElement('div');
|
||||
wrap.innerHTML = rawHtml.trim();
|
||||
const iframe = wrap.querySelector('iframe');
|
||||
if(!iframe) return rawHtml;
|
||||
iframe.removeAttribute('width');
|
||||
iframe.removeAttribute('height');
|
||||
return iframe.outerHTML;
|
||||
}
|
||||
|
||||
// ---- App ----
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
setEnvStatus();
|
||||
|
||||
const streamList = $('#streamList');
|
||||
const followList = $('#followList');
|
||||
|
||||
['spotify','applemusic','bandcamp'].forEach(s => createServiceRow(s, streamList));
|
||||
$('#addCustomStream').addEventListener('click', () => addCustomRow(streamList, 'stream'));
|
||||
|
||||
FOLLOW_SERVICES.forEach(s => createServiceRow(s, followList));
|
||||
$('#addCustomFollow').addEventListener('click', () => addCustomRow(followList, 'follow'));
|
||||
|
||||
toggleRadios('audioType', { bandcamp: $('#bandcampBox'), self: $('#selfAudioBox') });
|
||||
toggleRadios('watchType', { youtube: $('#watchIframeBox'), self: $('#watchSelfBox') });
|
||||
|
||||
$('#generate').addEventListener('click', async () => {
|
||||
try{
|
||||
$('#status').textContent='';
|
||||
const artwork = $('#artwork').files[0];
|
||||
const title = $('#title').value.trim();
|
||||
const artist = $('#artist').value.trim();
|
||||
const buyLabel = $('#buyLabel').value.trim() || 'Buy on Bandcamp';
|
||||
const buyUrl = $('#buyUrl').value.trim();
|
||||
const audioType = $('input[name="audioType"]:checked').value;
|
||||
const bandcampIframe = $('#bandcampIframe').value.trim();
|
||||
const audioMp3Url = $('#audioMp3Url')?.value.trim() || '';
|
||||
const audioOggUrl = $('#audioOggUrl')?.value.trim() || '';
|
||||
const descHtml = mdToHtml($('#desc').value);
|
||||
const watchType = $('input[name="watchType"]:checked').value;
|
||||
const watchIframe = $('#watchIframe').value.trim();
|
||||
const videoMp4Url = $('#videoMp4Url')?.value.trim() || '';
|
||||
const videoWebmUrl = $('#videoWebmUrl')?.value.trim() || '';
|
||||
const videoPosterUrl = $('#videoPosterUrl')?.value.trim() || '';
|
||||
const supportBandcamp = $('#supportBandcamp').value.trim();
|
||||
|
||||
// Streams
|
||||
const streamButtons = [];
|
||||
streamList.querySelectorAll('input[type="url"]:not([data-svc="custom-url"])')
|
||||
.forEach(inp => {
|
||||
if (inp.value.trim()) streamButtons.push({ label: pretty(inp.dataset.svc), url: inp.value.trim() });
|
||||
});
|
||||
streamList.querySelectorAll('input[data-svc="custom-url"]').forEach(inp => {
|
||||
const row = inp.closest('.grid2');
|
||||
const sel = row.querySelector('[data-svc="custom-label"]');
|
||||
let lbl = sel.value.trim();
|
||||
if (lbl === '[Custom]') lbl = row.querySelector('[data-svc="custom-label-text"]').value.trim();
|
||||
if (inp.value.trim() && lbl) streamButtons.push({ label: lbl, url: inp.value.trim() });
|
||||
});
|
||||
|
||||
// Follows
|
||||
const followButtons = [];
|
||||
followList.querySelectorAll('input[type="url"]:not([data-svc="custom-url"])')
|
||||
.forEach(inp => {
|
||||
if (inp.value.trim()) followButtons.push({ label: pretty(inp.dataset.svc), url: inp.value.trim() });
|
||||
});
|
||||
followList.querySelectorAll('input[data-svc="custom-url"]').forEach(inp => {
|
||||
const row = inp.closest('.grid2');
|
||||
const sel = row.querySelector('[data-svc="custom-label"]');
|
||||
let lbl = sel.value.trim();
|
||||
if (lbl === '[Custom]') lbl = row.querySelector('[data-svc="custom-label-text"]').value.trim();
|
||||
if (inp.value.trim() && lbl) followButtons.push({ label: lbl, url: inp.value.trim() });
|
||||
});
|
||||
|
||||
if(!artwork || !title || !artist){
|
||||
alert('Artwork, title, and artist are required.');
|
||||
return;
|
||||
}
|
||||
if(!buyUrl && streamButtons.length===0){
|
||||
if(!confirm('No Buy URL and no Stream buttons provided. Continue anyway?')) return;
|
||||
}
|
||||
|
||||
const coverDataURL = await fileToDataURL(artwork);
|
||||
const BUY_BUTTON_HTML = buyUrl ? `<a class="btn btn-red" href="${buyUrl}" target="_blank" rel="noopener">${escapeHtml(buyLabel)}</a>` : '';
|
||||
const STREAM_MAIN_BUTTON_HTML = streamButtons.length ? `<a class="btn btn-ghost" href="#stream-section">Stream</a>` : '';
|
||||
|
||||
let AUDIO_EMBED_HTML = '';
|
||||
if (audioType === 'bandcamp' && bandcampIframe) {
|
||||
const fixed = normalizeBandcampEmbed(bandcampIframe);
|
||||
AUDIO_EMBED_HTML = `<section class="hf-embed">${fixed}</section>`;
|
||||
} else if (audioType === 'self' && (audioMp3Url || audioOggUrl)) {
|
||||
const sources = [
|
||||
audioMp3Url ? `<source src="${audioMp3Url}" type="audio/mpeg">` : '',
|
||||
audioOggUrl ? `<source src="${audioOggUrl}" type="audio/ogg">` : ''
|
||||
].join('');
|
||||
AUDIO_EMBED_HTML = `<section class="hf-embed"><audio controls preload="metadata">${sources}Your browser does not support the audio element.</audio></section>`;
|
||||
}
|
||||
|
||||
const DESCRIPTION_HTML = descHtml ? `<section class="hf-card"><div class="hf-desc">${descHtml}</div></section>` : '';
|
||||
|
||||
let WATCH_HTML = '';
|
||||
if (watchType === 'youtube' && watchIframe){
|
||||
const yt = normalizeYouTubeEmbed(watchIframe);
|
||||
WATCH_HTML = `<section class="hf-card"><div class="hf-video">${yt}</div></section>`;
|
||||
} else if (watchType === 'self' && (videoMp4Url || videoWebmUrl)){
|
||||
const posterAttr = videoPosterUrl ? ` poster="${videoPosterUrl}"` : '';
|
||||
const sources = [
|
||||
videoMp4Url ? `<source src="${videoMp4Url}" type="video/mp4">` : '',
|
||||
videoWebmUrl ? `<source src="${videoWebmUrl}" type="video/webm">` : ''
|
||||
].join('');
|
||||
WATCH_HTML = `<section class="hf-card"><video controls preload="metadata"${posterAttr}>${sources}</video></section>`;
|
||||
}
|
||||
|
||||
const STREAM_SECTION_HTML = streamButtons.length
|
||||
? renderButtonsGrid(`Stream ${title}`, streamButtons, 'stream-section')
|
||||
: '';
|
||||
|
||||
const SUPPORT_SECTION_HTML = supportBandcamp ? renderButtonsGrid('Buy / Support', [{label:'Bandcamp', url:supportBandcamp}]) : '';
|
||||
const FOLLOW_SECTION_HTML = renderButtonsGrid('Follow', followButtons);
|
||||
|
||||
let html = TEMPLATE_HTML
|
||||
.replaceAll('{{INLINE_STYLE}}', STYLE_CSS)
|
||||
.replaceAll('{{INLINE_SCRIPT}}', SCRIPT_JS)
|
||||
.replaceAll('{{TITLE}}', escapeHtml(title))
|
||||
.replaceAll('{{ARTIST}}', escapeHtml(artist))
|
||||
.replaceAll('{{COVER_PATH}}', coverDataURL)
|
||||
.replaceAll('{{BUY_BUTTON_HTML}}', BUY_BUTTON_HTML)
|
||||
.replaceAll('{{STREAM_MAIN_BUTTON_HTML}}', STREAM_MAIN_BUTTON_HTML)
|
||||
.replaceAll('{{AUDIO_EMBED_HTML}}', AUDIO_EMBED_HTML)
|
||||
.replaceAll('{{DESCRIPTION_HTML}}', DESCRIPTION_HTML)
|
||||
.replaceAll('{{WATCH_HTML}}', WATCH_HTML)
|
||||
.replaceAll('{{SUPPORT_SECTION_HTML}}', SUPPORT_SECTION_HTML)
|
||||
.replaceAll('{{STREAM_SECTION_HTML}}', STREAM_SECTION_HTML)
|
||||
.replaceAll('{{FOLLOW_SECTION_HTML}}', FOLLOW_SECTION_HTML)
|
||||
.replaceAll('{{CREDIT_FOOTER}}', CREDIT_FOOTER);
|
||||
|
||||
const blob = new Blob([html], {type:'text/html;charset=utf-8'});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
const slug = (title || 'release').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'');
|
||||
a.href = url; a.download = `${slug}.html`;
|
||||
document.body.appendChild(a); a.click(); a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
$('#status').textContent = `Downloaded → ${slug}.html`;
|
||||
}catch(err){
|
||||
console.error(err);
|
||||
$('#status').textContent = 'Generation failed (see console).';
|
||||
alert('Generation failed. See console for details.');
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user