iridium/redsunlib
iridium/redsunlib
2
2
Fork 0
Code Issues 3 Pull Requests 1 Packages Projects Releases 5 Wiki Activity

video download style change

Browse Source
This commit is contained in:
ayaka 2025-01-06 14:37:55 +13:00
parent b6d828727c
commit 482b528f49
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
static/style.css
View File

@ -2302,6 +2302,8 @@ th {
.download { .download {
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
padding-top: 3px;
padding-bottom: 1px;
font-size: 20px; font-size: 20px;
font-weight: 900; font-weight: 900;
color: var(--accent); color: var(--accent);
@ -2316,3 +2318,10 @@ th {
.download:active { .download:active {
background-color: var(--background); background-color: var(--background);
} }
.rotate{
animation: spinner 1.5s linear infinite;
padding: 0px;
}
@keyframes spinner {
to { transform: rotate(360deg); }
}

12
static/videoUtils.js
View File

@ -1,5 +1,9 @@
// @license http://www.gnu.org/licenses/agpl-3.0.html AGPL-3.0 // @license http://www.gnu.org/licenses/agpl-3.0.html AGPL-3.0
let ffmpeg = null; let ffmpeg = null;
let loadingsvg = `<svg class="rotate" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 4.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 0 0 0-15M1.5 12C1.5 6.201 6.201 1.5 12 1.5S22.5 6.201 22.5 12S17.799 22.5 12 22.5S1.5 17.799 1.5 12" opacity="0.1"/><path fill="currentColor" d="M12 4.5a7.46 7.46 0 0 0-5.187 2.083a1.5 1.5 0 0 1-2.075-2.166A10.46 10.46 0 0 1 12 1.5a1.5 1.5 0 0 1 0 3"/></g></svg>`;
let downloadsvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M20 15a1 1 0 0 1 1 1v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4a1 1 0 1 1 2 0v4h14v-4a1 1 0 0 1 1-1M12 2a1 1 0 0 1 1 1v10.243l2.536-2.536a1 1 0 1 1 1.414 1.414l-4.066 4.066a1.25 1.25 0 0 1-1.768 0L7.05 12.121a1 1 0 1 1 1.414-1.414L11 13.243V3a1 1 0 0 1 1-1"/></g></svg>`;
(function () { (function () {
if (Hls.isSupported()) { if (Hls.isSupported()) {
@ -82,7 +86,7 @@ let ffmpeg = null;
var mediaStream = []; var mediaStream = [];
var downloadButton = document.createElement('button'); var downloadButton = document.createElement('button');
downloadButton.classList.add('video-options','download'); downloadButton.classList.add('video-options','download');
downloadButton.innerText = "⏳" downloadButton.innerHTML = loadingsvg
const mergeStreams = async () => { const mergeStreams = async () => {
if (ffmpeg === null) { if (ffmpeg === null) {
ffmpeg = new FFmpeg(); ffmpeg = new FFmpeg();
@ -157,11 +161,11 @@ let ffmpeg = null;
var isDownloading = false var isDownloading = false
function startDownload() { function startDownload() {
if (!isDownloading) { isDownloading = true } else { return } if (!isDownloading) { isDownloading = true } else { return }
downloadButton.innerText = "⏳" downloadButton.innerHTML = loadingsvg
mergeStreams() mergeStreams()
.then(_ => { .then(_ => {
isDownloading = false isDownloading = false
downloadButton.innerText = "⭳" downloadButton.innerHTML = downloadsvg
}); });
} }
@ -178,7 +182,7 @@ let ffmpeg = null;
waitForLoad(_ => flag === true) waitForLoad(_ => flag === true)
.then(_ => { .then(_ => {
downloadButton.innerText = "⭳" downloadButton.innerHTML = downloadsvg
downloadButton.addEventListener('click', startDownload); downloadButton.addEventListener('click', startDownload);
}); });
} }