add download url

frontend/script.js

@@ -22,6 +22,11 @@
         source.type = info.ctype;
         source.src = info.upstream;
         player.src(source);
+
+        const dl = document.createElement("a");
+        dl.href = info.upstream;
+        dl.setAttribute("download", true);
+
         const canPlayTypeRaw = player.canPlayType(info.ctype);
         const canPlayType = (canPlayTypeRaw === "maybe") || (canPlayTypeRaw === "probably");
         if(canPlayType) {
@@ -32,24 +37,56 @@
             }
             cbutton.text = "Chromecast";
 
+            const dbutton = {};
+            dbutton.clickHandler = (ev) => {
+                document.body.appendChild(dl);
+                dl.click();
+                document.body.removeChild(dl);
+            }
+
+            dbutton.text = "Download";
+
             const bigCastButtonWrapper = new Button(player, cbutton);
+            const bigDownloadButtonWrapper = new Button(player, dbutton);
+            
             const bigCastButton = bigCastButtonWrapper.el();
+            const bigDownloadButton = bigDownloadButtonWrapper.el();
             for(const elem of bigCastButton.children) {
                 bigCastButton.removeChild(elem);
             }
+
+            for(const elem of bigDownloadButton.children) {
+                bigDownloadButton.removeChild(elem);
+            }
+
             bigCastButton.classList.add("vjs-control");
             bigCastButton.classList.add("vjs-button");
             bigCastButton.classList.add("fab");
             bigCastButton.classList.add("fa-chromecast");
             bigCastButton.classList.add("vjs-big-chromecast");
             player.addChild(bigCastButtonWrapper);
-            
+ 
+            if(!info.ctype.toLowerCase().includes("mpegurl")) {
+                bigDownloadButton.classList.add("vjs-control");
+                bigDownloadButton.classList.add("vjs-button");
+                bigDownloadButton.classList.add("fas");
+                bigDownloadButton.classList.add("fa-download");
+                bigDownloadButton.classList.add("vjs-big-download");
+                player.addChild(bigDownloadButtonWrapper);
+            }
+
             player.one("error", () => {
                 player.removeChild(bigCastButtonWrapper);
+                if(!info.ctype.toLowerCase().includes("mpegurl")) {
+                    player.removeChild(bigDownloadButtonWrapper);
+                }
             });
 
             player.one("play", () => {
                 player.removeChild(bigCastButtonWrapper);
+                if(!info.ctype.toLowerCase().includes("mpegurl")) {
+                    player.removeChild(bigDownloadButtonWrapper);
+                }
             });
 
             const smallCastButtonWrapper = new Button(player, cbutton);

frontend/style.css

@@ -4,6 +4,14 @@ body {
 .vjs-button {
     cursor:pointer;
 }
+.vjs-big-download {
+    position: absolute !important;
+    font-size: 3rem !important;
+    height: 4rem !important;
+    width: 4rem !important; 
+    top: 5rem !important;
+    right: 1rem !important;
+}
 .vjs-big-chromecast {
     position: absolute !important;
     font-size: 3rem !important;