diff --git a/frontend/script.js b/frontend/script.js index 94f7b69..444f071 100644 --- a/frontend/script.js +++ b/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); diff --git a/frontend/style.css b/frontend/style.css index 557d28a..a29a54e 100644 --- a/frontend/style.css +++ b/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;