Move watch page JS into seperate file

This commit is contained in:
Omar Roth 2018-10-06 22:20:40 -05:00
parent 6f9056fd84
commit f7125c1204
3 changed files with 78 additions and 78 deletions

48
assets/js/watch.js Normal file
View file

@ -0,0 +1,48 @@
function toggle_parent(target) {
body = target.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === "") {
target.innerHTML = "[ + ]";
body.style.display = "none";
} else {
target.innerHTML = "[ - ]";
body.style.display = "";
}
}
function toggle_comments(target) {
body = target.parentNode.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === "") {
target.innerHTML = "[ + ]";
body.style.display = "none";
} else {
target.innerHTML = "[ - ]";
body.style.display = "";
}
}
function swap_comments(source) {
comments = document.getElementById("comments");
var fallback = comments.innerHTML;
comments.innerHTML =
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
if (source == "youtube") {
get_youtube_comments();
} else if (source == "reddit") {
get_reddit_comments();
}
}
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, "$1" + "," + "$2");
}
return val;
}
String.prototype.supplant = function(o) {
return this.replace(/{([^{}]*)}/g, function(a, b) {
var r = o[b];
return typeof r === "string" || typeof r === "number" ? r : a;
});
};

View file

@ -109,7 +109,7 @@ def template_youtube_comments(comments)
</div> </div>
<div class="pure-u-20-24 pure-u-md-22-24"> <div class="pure-u-20-24 pure-u-md-22-24">
<p> <p>
<a href="javascript:void(0)" onclick="toggle(this)">[ - ]</a> <a href="javascript:void(0)" onclick="toggle_parent(this)">[ - ]</a>
<b> <b>
<a href="#{child["authorUrl"]}">#{child["author"]}</a> <a href="#{child["authorUrl"]}">#{child["author"]}</a>
</b> </b>
@ -158,7 +158,7 @@ def template_reddit_comments(root)
content = <<-END_HTML content = <<-END_HTML
<p> <p>
<a href="javascript:void(0)" onclick="toggle(this)">[ - ]</a> <a href="javascript:void(0)" onclick="toggle_parent(this)">[ - ]</a>
<b><a href="https://www.reddit.com/user/#{author}">#{author}</a></b> <b><a href="https://www.reddit.com/user/#{author}">#{author}</a></b>
#{score} points #{score} points
#{recode_date(child.created_utc)} ago #{recode_date(child.created_utc)} ago

View file

@ -22,6 +22,7 @@
<meta name="twitter:player" content="<%= host_url %>/embed/<%= video.id %>"> <meta name="twitter:player" content="<%= host_url %>/embed/<%= video.id %>">
<meta name="twitter:player:width" content="1280"> <meta name="twitter:player:width" content="1280">
<meta name="twitter:player:height" content="720"> <meta name="twitter:player:height" content="720">
<script src="/js/watch.js"></script>
<%= rendered "components/player_sources" %> <%= rendered "components/player_sources" %>
<title><%= HTML.escape(video.title) %> - Invidious</title> <title><%= HTML.escape(video.title) %> - Invidious</title>
<% end %> <% end %>
@ -144,61 +145,6 @@
</div> </div>
<script> <script>
function toggle(target) {
body = target.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === "") {
target.innerHTML = "[ + ]";
body.style.display = "none";
} else {
target.innerHTML = "[ - ]";
body.style.display = "";
}
}
function toggle_comments(target) {
body = target.parentNode.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === "") {
target.innerHTML = "[ + ]";
body.style.display = "none";
} else {
target.innerHTML = "[ - ]";
body.style.display = "";
}
}
function get_youtube_replies(target) {
var continuation = target.getAttribute("data-continuation");
var body = target.parentNode.parentNode;
var fallback = body.innerHTML;
body.innerHTML =
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
var url =
"/api/v1/comments/<%= video.id %>?format=html&continuation=" + continuation;
var xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.timeout = 20000;
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
body.innerHTML = xhr.response.contentHtml;
} else {
body.innerHTML = fallback;
}
}
};
xhr.ontimeout = function() {
console.log("Pulling comments timed out.");
body.innerHTML = fallback;
};
}
function get_reddit_comments() { function get_reddit_comments() {
var url = "/api/v1/comments/<%= video.id %>?source=reddit&format=html"; var url = "/api/v1/comments/<%= video.id %>?source=reddit&format=html";
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
@ -304,32 +250,38 @@ function get_youtube_comments() {
}; };
} }
function swap_comments(source) { function get_youtube_replies(target) {
comments = document.getElementById("comments"); var continuation = target.getAttribute('data-continuation');
var fallback = comments.innerHTML;
comments.innerHTML = var body = target.parentNode.parentNode;
var fallback = body.innerHTML;
body.innerHTML =
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>'; '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
if (source == "youtube") { var url = '/api/v1/comments/<%= video.id %>?format=html&continuation=' +
get_youtube_comments(); continuation;
} else if (source == "reddit") { var xhr = new XMLHttpRequest();
get_reddit_comments(); xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
body.innerHTML = xhr.response.contentHtml;
} else {
body.innerHTML = fallback;
}
} }
} };
function commaSeparateNumber(val){ xhr.ontimeout = function() {
while (/(\d+)(\d{3})/.test(val.toString())){ console.log('Pulling comments timed out.');
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return val;
}
String.prototype.supplant = function(o) { body.innerHTML = fallback;
return this.replace(/{([^{}]*)}/g, function(a, b) { };
var r = o[b]; }
return typeof r === "string" || typeof r === "number" ? r : a;
});
};
<% if preferences %> <% if preferences %>
<% if preferences.comments[0] == "youtube" %> <% if preferences.comments[0] == "youtube" %>