Use theme-aware SVGs for download and offline actions

This commit is contained in:
Jonathan Sykes
2026-10-09 14:28:23 +08:00
parent 66bbda51c7
commit 2001e77cee
13 changed files with 122 additions and 62 deletions

View File

@@ -71,7 +71,7 @@
const url = URL.createObjectURL(gifBlob);
const name = `${(meta.title || meta.id).replace(/[^\w\- ]+/g, '').trim().slice(0, 40) || meta.id}-${Math.floor(cur())}s.gif`;
out.innerHTML = `<img class="sm-preview" alt="GIF preview" src="${url}" />
<div class="sm-gif-actions"><a class="np-btn" href="${url}" download="${escapeHtml(name)}">⤓ Download</a>
<div class="sm-gif-actions"><a class="np-btn" href="${url}" download="${escapeHtml(name)}">${MediaIcons.svg('download')} Download</a>
${navigator.canShare && navigator.canShare({ files: [new File([gifBlob], name, { type: 'image/gif' })] }) ? '<button class="np-btn" type="button" data-act="sharegif">↗ Share GIF</button>' : ''}</div>`;
out.dataset.name = name;
} catch (err) {
@@ -98,7 +98,7 @@
out.dataset.name = name;
out.dataset.type = fmt === 'mp3' ? 'audio/mpeg' : 'audio/mp4';
out.innerHTML = `<audio controls src="${url}" class="sm-audio"></audio>
<div class="sm-gif-actions"><a class="np-btn" href="${url}" download="${escapeHtml(name)}">⤓ Download</a>
<div class="sm-gif-actions"><a class="np-btn" href="${url}" download="${escapeHtml(name)}">${MediaIcons.svg('download')} Download</a>
${navigator.canShare && navigator.canShare({ files: [new File([biteBlob], name, { type: out.dataset.type })] }) ? '<button class="np-btn" type="button" data-act="sharebite">↗ Share</button>' : ''}</div>
${fmt === 'm4r' ? '<p class="sp-note">iPhone: share it to GarageBand (or drag into Finder with the phone connected) to set it as a ringtone.</p>' : ''}`;
} catch (err) {
@@ -176,7 +176,7 @@
showModal('📺 Open in another player', body, [{ label: 'Close', primary: true, onClick: closeModal }]);
const ok = await cached(meta.id);
if (!ok) {
body.innerHTML = `<p class="modal-text">The server hasn't finished caching this video yet, and other players need that single-file copy. Keep it playing for a minute (or tap ⬇ Save), then try again.</p>`;
body.innerHTML = `<p class="modal-text">The server hasn't finished caching this video yet, and other players need that single-file copy. Keep it playing for a minute (or tap ${MediaIcons.svg('download')} Save), then try again.</p>`;
return;
}
const url = streamUrl(meta.id);
@@ -193,8 +193,8 @@
<a class="np-btn" href="vlc-x-callback://x-callback-url/stream?url=${encodeURIComponent(url)}">▶ VLC</a>
<a class="np-btn" href="infuse://x-callback-url/play?url=${encodeURIComponent(url)}">▶ Infuse</a>`
: `<a class="np-btn" href="vlc://${escapeHtml(url)}">▶ VLC</a>`}
<button class="np-btn" type="button" data-act="m3u">⤓ .m3u (this video)</button>
${inList ? '<button class="np-btn" type="button" data-act="m3u-list">⤓ .m3u (whole list)</button>' : ''}
<button class="np-btn" type="button" data-act="m3u">${MediaIcons.svg('download')} .m3u (this video)</button>
${inList ? `<button class="np-btn" type="button" data-act="m3u-list">${MediaIcons.svg('download')} .m3u (whole list)</button>` : ''}
</div>
<p class="sp-note">${isAndroid ? 'VLC / MX Player must be installed; “Open with…” shows every video app.'
: isIOS ? 'Needs the VLC (or Infuse) app. The link streams from your server; nothing is downloaded first.'