lug/invidious
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add download widget

Browse Source
This commit is contained in:
Omar Roth 2019-01-23 19:05:24 -06:00
parent 15efac520e
commit fb535ad6bb
3 changed files with 96 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/default.css
View File

@ -267,3 +267,19 @@ img.thumbnail {
margin-right: 2em;
height: 0;
}
#progress-container {
width: 100%;
border-radius: 2px;
background: #aaa;
display: none;
}
#download-progress {
width: 0%;
border-radius: 2px;
height: 10px;
background-color: #0078e7;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

52
assets/js/watch.js
View File

@ -50,3 +50,55 @@ function hide_youtube_replies(target) {
target.innerHTML = "Show replies";
target.setAttribute("onclick", "show_youtube_replies(this)");
}
function download_video(title) {
var children = document.getElementById("download_widget").children;
var progress = document.getElementById("download-progress");
var url = "";
document.getElementById("progress-container").style.display = "";
for (i = 0; i < children.length; i++) {
if (children[i].selected) {
url = children[i].getAttribute("data-url");
}
}
url = "/videoplayback" + url.split("/videoplayback")[1];
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "arraybuffer";
xhr.onprogress = function(event) {
if (event.lengthComputable) {
progress.style.width = "" + (event.loaded / event.total)*100 + "%";
}
};
xhr.onload = function(event) {
if (event.currentTarget.status != 200) {
console.log("Downloading " + title + " failed.")
return;
}
var data = new Blob([xhr.response], {'type' : 'video/mp4'});
var videoFile = window.URL.createObjectURL(data);
var link = document.createElement('a');
link.href = videoFile;
link.setAttribute('download', title);
document.body.appendChild(link);
window.requestAnimationFrame(function() {
var event = new MouseEvent('click');
link.dispatchEvent(event);
document.body.removeChild(link);
});
document.getElementById("progress-container").style.display = "none";
progress.style.width = "0%";
};
xhr.send(null);
}

28
src/invidious/views/watch.ecr
View File

@ -53,6 +53,34 @@
<div class="pure-u-1 pure-u-md-1-5">
<div class="h-box">
<p><a href="https://www.youtube.com/watch?v=<%= video.id %>"><%= translate(locale, "Watch video on Youtube") %></a></p>
<form class="pure-form pure-form-stacked">
<div class="pure-control-group">
<label for="download_widget"><%= translate(locale, "Download as: ") %></label>
<select style="width:100%" name="download_widget" id="download_widget">
<% video_streams.each do |option| %>
<option data-url="<%= option["url"] %>"><%= option["quality_label"] %> - <%= option["type"].split(";")[0] %> @ <%= option["fps"] %>fps - video only</option>
<% end %>
<% audio_streams.each do |option| %>
<option data-url="<%= option["url"] %>"><%= option["type"].split(";")[0] %> @ <%= option["bitrate"] %>k - audio only</option>
<% end %>
<% fmt_stream.each do |option| %>
<option data-url="<%= option["url"] %>"><%= itag_to_metadata?(option["itag"]).try &.["height"]? || "~240" %>p - <%= option["type"].split(";")[0] %></option>
<% end %>
</select>
</div>
<div id="progress-container" style="width:100%; display:none">
<div id="download-progress">
</div>
</div>
<button type="button" onclick='download_video("<%= video.title.dump_unquoted %>-<%= video.id %>.mp4")'
class="pure-button pure-button-primary">
<%= translate(locale, "Download") %>
</button>
</form>
<p><i class="icon ion-ios-eye"></i> <%= number_with_separator(video.views) %></p>
<p><i class="icon ion-ios-thumbs-up"></i> <%= number_with_separator(video.likes) %></p>
<p><i class="icon ion-ios-thumbs-down"></i> <%= number_with_separator(video.dislikes) %></p>