summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/invidious.cr37
-rw-r--r--src/invidious/helpers.cr63
-rw-r--r--src/invidious/views/preferences.ecr9
-rw-r--r--src/invidious/views/watch.ecr149
4 files changed, 206 insertions, 52 deletions
diff --git a/src/invidious.cr b/src/invidious.cr
index 6ad63d18..9f971482 100644
--- a/src/invidious.cr
+++ b/src/invidious.cr
@@ -504,7 +504,7 @@ get "/api/v1/comments/:id" do |env|
source ||= "youtube"
format = env.params.query["format"]?
- format ||= "html"
+ format ||= "json"
if source == "youtube"
client = make_client(YT_URL)
@@ -627,13 +627,20 @@ get "/api/v1/comments/:id" do |env|
end
env.response.content_type = "application/json"
- next comments
+ if format == "json"
+ next comments
+ else
+ comments = JSON.parse(comments)
+ content_html = template_youtube_comments(comments)
+
+ {"content_html" => content_html}.to_json
+ end
elsif source == "reddit"
client = make_client(REDDIT_URL)
headers = HTTP::Headers{"User-Agent" => "web:invidio.us:v0.1.0 (by /u/omarroth)"}
begin
comments, reddit_thread = get_reddit_comments(id, client, headers)
- content_html = template_comments(comments)
+ content_html = template_reddit_comments(comments)
content_html = fill_links(content_html, "https", "www.reddit.com")
content_html = add_alt_links(content_html)
@@ -1661,6 +1668,9 @@ post "/preferences" do |env|
volume = env.params.body["volume"]?.try &.as(String).to_i
volume ||= 100
+ comments = env.params.body["comments"]?
+ comments ||= "youtube"
+
dark_mode = env.params.body["dark_mode"]?.try &.as(String)
dark_mode ||= "off"
dark_mode = dark_mode == "on"
@@ -1685,6 +1695,7 @@ post "/preferences" do |env|
"speed" => speed,
"quality" => quality,
"volume" => volume,
+ "comments" => comments,
"dark_mode" => dark_mode,
"thin_mode" => thin_mode,
"max_results" => max_results,
@@ -2383,10 +2394,22 @@ get "/videoplayback*" do |env|
end
end
-# get "/:id" do |env|
-# id = env.params.url["id"]
-# env.redirect "/watch?v=#{id}"
-# end
+get "/:id" do |env|
+ id = env.params.url["id"]
+
+ params = [] of String
+ env.params.query.each do |k, v|
+ params << "#{k}=#{v}"
+ end
+ params = params.join("&")
+
+ url = "/watch?v=#{id}"
+ if params
+ url += "&#{params}"
+ end
+
+ env.redirect url
+end
error 404 do |env|
error_message = "404 Page not found"
diff --git a/src/invidious/helpers.cr b/src/invidious/helpers.cr
index 5d0437ba..a091d1e2 100644
--- a/src/invidious/helpers.cr
+++ b/src/invidious/helpers.cr
@@ -23,6 +23,7 @@ DEFAULT_USER_PREFERENCES = Preferences.from_json({
"speed" => 1.0,
"quality" => "hd720",
"volume" => 100,
+ "comments" => "youtube",
"dark_mode" => false,
"thin_mode " => false,
"max_results" => 40,
@@ -157,8 +158,13 @@ class Preferences
speed: Float32,
quality: String,
volume: Int32,
- dark_mode: Bool,
- thin_mode: {
+ comments: {
+ type: String,
+ nilable: true,
+ default: "youtube",
+ },
+ dark_mode: Bool,
+ thin_mode: {
type: Bool,
nilable: true,
default: false,
@@ -500,7 +506,56 @@ def get_reddit_comments(id, client, headers)
return comments, thread
end
-def template_comments(root)
+def template_youtube_comments(comments)
+ html = ""
+
+ root = comments["comments"].as_a
+ root.each do |child|
+ if child["replies"]?
+ replies_html = <<-END_HTML
+ <div id="replies" class="pure-g">
+ <div class="pure-u-md-1-24"></div>
+ <div class="pure-u-md-23-24">
+ <p>
+ <a href="javascript:void(0)" data-continuation="#{child["replies"]["continuation"]}"
+ onclick="load_comments(this)">View #{child["replies"]["replyCount"]} replies</a>
+ </p>
+ </div>
+ END_HTML
+ end
+
+ html += <<-END_HTML
+ <div class="pure-g">
+ <div class="pure-u-1">
+ <p>
+ <a href="javascript:void(0)" onclick="toggle(this)">[ - ]</a> #{child["likeCount"]} <b>#{child["author"]}</b>
+ </p>
+ <div>
+ #{child["content"]}
+ #{replies_html}
+ </div>
+ </div>
+ </div>
+ END_HTML
+ end
+
+ if comments["continuation"]?
+ html += <<-END_HTML
+ <div class="pure-g">
+ <div class="pure-u-1">
+ <p>
+ <a href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
+ onclick="load_comments(this)">Load more</a>
+ </p>
+ </div>
+ </div>
+ END_HTML
+ end
+
+ return html
+end
+
+def template_reddit_comments(root)
html = ""
root.each do |child|
if child.data.is_a?(RedditComment)
@@ -512,7 +567,7 @@ def template_comments(root)
replies_html = ""
if child.replies.is_a?(RedditThing)
replies = child.replies.as(RedditThing)
- replies_html = template_comments(replies.data.as(RedditListing).children)
+ replies_html = template_reddit_comments(replies.data.as(RedditListing).children)
end
content = <<-END_HTML
diff --git a/src/invidious/views/preferences.ecr b/src/invidious/views/preferences.ecr
index 50e8b0e9..9fd42d03 100644
--- a/src/invidious/views/preferences.ecr
+++ b/src/invidious/views/preferences.ecr
@@ -47,6 +47,15 @@ function update_value(element) {
<span class="pure-form-message-inline" id="volume-value"><%= user.preferences.volume %></span>
</div>
+ <div class="pure-control-group">
+ <label for="comments">Pull comments from: </label>
+ <select name="comments" id="comments">
+ <% ["youtube", "reddit"].each do |option| %>
+ <option <% if user.preferences.comments == option %> selected <% end %>><%= option %></option>
+ <% end %>
+ </select>
+ </div>
+
<legend>Visual preferences</legend>
<div class="pure-control-group">
<label for="dark_mode">Dark mode: </label>
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 962c3235..810a43e7 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -124,28 +124,6 @@ player.offset({
end: <%= video_end %>
});
-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 = '';
- }
-};
-
<% if !listen %>
var currentSources = player.currentSources();
for ( var i = 0; i < currentSources.length; i++ ) {
@@ -158,12 +136,74 @@ for ( var i = 0; i < currentSources.length; i++ ) {
player.src(currentSources);
<% end %>
-fetch("/api/v1/comments/<%= video.id %>?source=reddit")
+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 timeout(ms, promise) {
+ return new Promise(function(resolve, reject) {
+ setTimeout(function() {
+ reject(new Error("timeout"));
+ }, ms);
+ promise.then(resolve, reject);
+ });
+}
+
+function load_comments(target) {
+ var continuation = target.getAttribute("data-continuation");
+
+ var body = target.parentNode.parentNode;
+ var fallback = body.innerHTML;
+ body.innerHTML =
+ '<h3><center><i class="loading fas fa-spinner"></i></center></h3>';
+
+ var url =
+ "/api/v1/comments/<%= video.id %>?format=html&continuation=" + continuation;
+ timeout(5000, fetch(url))
.then(function(response) {
- return response.json();
+ return response.json();
})
- .then(function(jsonResponse) {
- comments = document.getElementById('comments');
+ .then(
+ function(jsonResponse) {
+ body.innerHTML = jsonResponse.content_html;
+ },
+ function(error) {
+ body.innerHTML = fallback;
+ console.log(response);
+ }
+ )
+ .catch(function(error) {
+ body.innerHTML = fallback;
+ console.log(error);
+ });
+}
+
+function get_reddit_comments() {
+ fetch("/api/v1/comments/<%= video.id %>?source=reddit")
+ .then(function(response) {
+ return response.json();
+ })
+ .then(
+ function(jsonResponse) {
+ comments = document.getElementById("comments");
comments.innerHTML = `
<div>
<h3>
@@ -175,25 +215,52 @@ fetch("/api/v1/comments/<%= video.id %>?source=reddit")
</b>
</div>
<div>{content_html}</div>
- </div>
- <hr style="margin-left:1em; margin-right:1em;">`.supplant({
- title: jsonResponse.title,
- permalink: jsonResponse.permalink,
- content_html: jsonResponse.content_html
- })
- }, function(response){
- comments.innerHTML = "";
- });
-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;
- }
+ <hr style="margin-left:1em; margin-right:1em;">`.supplant({
+ title: jsonResponse.title,
+ permalink: jsonResponse.permalink,
+ content_html: jsonResponse.content_html
+ });
+ },
+ function(response) {
+ get_youtube_comments();
+ }
+ );
+}
+
+function get_youtube_comments() {
+ fetch("/api/v1/comments/<%= video.id %>?format=html")
+ .then(function(response) {
+ return response.json();
+ })
+ .then(
+ function(jsonResponse) {
+ comments = document.getElementById("comments");
+ comments.innerHTML = `
+ <div>{content_html}</div>
+ <hr style="margin-left:1em; margin-right:1em;">`.supplant({
+ content_html: jsonResponse.content_html
+ });
+ },
+ function(response) {
+ comments.innerHTML = "";
+ }
);
+}
+
+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;
+ });
};
+<% if preferences && preferences.comments == "reddit" %>
+get_reddit_comments();
+<% else %>
+get_youtube_comments();
+<% end %>
+
</script>
<div class="h-box">
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-18 23:25:09 +0000