Move watch page JS into seperate file

assets/js/watch.js

@@ -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;
+  });
+};

src/invidious/comments.cr

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

src/invidious/views/watch.ecr

@@ -22,6 +22,7 @@
 <meta name="twitter:player" content="<%= host_url %>/embed/<%= video.id %>">
 <meta name="twitter:player:width" content="1280">
 <meta name="twitter:player:height" content="720">
+<script src="/js/watch.js"></script>
 <%= rendered "components/player_sources" %>
 <title><%= HTML.escape(video.title) %> - Invidious</title>
 <% end %>
@@ -144,61 +145,6 @@
 </div>
 
 <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() {
   var url = "/api/v1/comments/<%= video.id %>?source=reddit&format=html";
   var xhr = new XMLHttpRequest();
@@ -304,33 +250,39 @@ 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>';
 
-    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();
 
-function commaSeparateNumber(val){
+  xhr.onreadystatechange = function() {
-  while (/(\d+)(\d{3})/.test(val.toString())){
+    if (xhr.readyState == 4) {
-    val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
+      if (xhr.status == 200) {
+        body.innerHTML = xhr.response.contentHtml;
+      } else {
+        body.innerHTML = fallback;
       }
-  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;
-  });
   };
 
+  xhr.ontimeout = function() {
+    console.log('Pulling comments timed out.');
+
+    body.innerHTML = fallback;
+  };
+}
+
 <% if preferences %>
     <% if preferences.comments[0] == "youtube" %>
     get_youtube_comments();