diff --git a/static/style.css b/static/style.css
index 8cd1f4b..70db044 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2300,8 +2300,10 @@ th {
max-width: 20em;
}
.download {
- padding-left: 8px;
- padding-right: 8px;
+ padding-left: 8px;
+ padding-right: 8px;
+ padding-top: 3px;
+ padding-bottom: 1px;
font-size: 20px;
font-weight: 900;
color: var(--accent);
@@ -2316,3 +2318,10 @@ th {
.download:active {
background-color: var(--background);
}
+.rotate{
+ animation: spinner 1.5s linear infinite;
+ padding: 0px;
+}
+@keyframes spinner {
+ to { transform: rotate(360deg); }
+}
\ No newline at end of file
diff --git a/static/videoUtils.js b/static/videoUtils.js
index 6f3cd17..4815054 100644
--- a/static/videoUtils.js
+++ b/static/videoUtils.js
@@ -1,5 +1,9 @@
// @license http://www.gnu.org/licenses/agpl-3.0.html AGPL-3.0
let ffmpeg = null;
+
+let loadingsvg = ``;
+let downloadsvg = ``;
+
(function () {
if (Hls.isSupported()) {
@@ -82,7 +86,7 @@ let ffmpeg = null;
var mediaStream = [];
var downloadButton = document.createElement('button');
downloadButton.classList.add('video-options','download');
- downloadButton.innerText = "⏳"
+ downloadButton.innerHTML = loadingsvg
const mergeStreams = async () => {
if (ffmpeg === null) {
ffmpeg = new FFmpeg();
@@ -157,11 +161,11 @@ let ffmpeg = null;
var isDownloading = false
function startDownload() {
if (!isDownloading) { isDownloading = true } else { return }
- downloadButton.innerText = "⏳"
+ downloadButton.innerHTML = loadingsvg
mergeStreams()
.then(_ => {
isDownloading = false
- downloadButton.innerText = "⭳"
+ downloadButton.innerHTML = downloadsvg
});
}
@@ -178,7 +182,7 @@ let ffmpeg = null;
waitForLoad(_ => flag === true)
.then(_ => {
- downloadButton.innerText = "⭳"
+ downloadButton.innerHTML = downloadsvg
downloadButton.addEventListener('click', startDownload);
});
}