v0.35.4

fix screenshot without a broken grid

Cargo.toml

@@ -3,7 +3,7 @@ name = "redsunlib"
 description = " Alternative private front-end to Reddit"
 license = "AGPL-3.0-only"
 repository = "https://git.stardust.wtf/iridium/redsunlib"
-version = "0.35.3"
+version = "0.35.4"
 authors = [
     "Matthew Esposito <matt+cargo@matthew.science>",
     "spikecodes <19519553+spikecodes@users.noreply.github.com>",

README.md

@@ -5,7 +5,7 @@
 
 <br>
 
-![screenshot](https://git.stardust.wtf/attachments/7667e4e2-a32c-4269-9b5f-1d29cb3baf20)
+![screenshot](https://git.stardust.wtf/attachments/ccf81f52-e653-4722-94b9-b370c58d6359)
 
 ### Disclaimer
 

static/style.css

@@ -525,22 +525,16 @@ aside {
     margin-bottom: 20px;
 }
 
+#user_actions,
 #sub_actions {
     display: grid;
-    grid-template-columns: auto 2fr 1fr; 
-    grid-template-rows: 1fr;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
+    grid-template-columns: auto 4fr 1fr;
 }
 
 #user_details,
-#sub_details,
-#user_actions {
+#sub_details {
     display: grid;
-    grid-template-columns: auto 2fr 1fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
+    grid-template-columns: repeat(2, 1fr);
 }
 @media screen and (max-width: 279px) {
     #sub_actions { display: unset; }
@@ -2300,8 +2294,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 +2312,10 @@ th {
 .download:active {
 	background-color: var(--background);
 }
+.rotate{
+    animation: spinner 1.5s linear infinite;
+    padding: 0px;
+}
+@keyframes spinner {
+    to { transform: rotate(360deg); }
+}

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 = `<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 () {
     if (Hls.isSupported()) {
 
@@ -13,7 +17,7 @@ let ffmpeg = null;
             var autoplay = oldVideo.classList.contains("hls_autoplay");
 
             // If HLS is supported natively then don't use hls.js
-            if (oldVideo.canPlayType(source.type) === "probably") {
+            if (oldVideo.canPlayType(source.type) === "probably" && !downloadsEnabled) {
                 if (autoplay) {
                     oldVideo.play();
                 }
@@ -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();
@@ -115,7 +119,7 @@ let ffmpeg = null;
     
                         var filename = toSlug(videoElement.parentNode.parentNode.id || document.title)
                         const data = await ffmpeg.readFile('output.mp4');
-                        saveAs(new Blob([data.buffer]),filename, {type: 'video/mp4'});
+                        saveAs(new Blob([data.buffer], {type: 'video/mp4'}),filename);
                         return
                     }
                     function saveAs(blob, filename) { // Yeah ok...
@@ -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);
                         });
                     }