Add comments fallback

This commit is contained in:
Omar Roth 2018-08-25 18:33:15 -05:00
parent 41a04e7c67
commit 23aaf7f1b7
4 changed files with 221 additions and 168 deletions

View file

@ -761,8 +761,10 @@ post "/preferences" do |env|
volume = env.params.body["volume"]?.try &.as(String).to_i? volume = env.params.body["volume"]?.try &.as(String).to_i?
volume ||= 100 volume ||= 100
comments = env.params.body["comments"]? puts env.params.body
comments ||= "youtube" comments_0 = env.params.body["comments_0"]?.try &.as(String) || "youtube"
comments_1 = env.params.body["comments_1"]?.try &.as(String) || ""
comments = [comments_0, comments_1]
captions_0 = env.params.body["captions_0"]?.try &.as(String) || "" captions_0 = env.params.body["captions_0"]?.try &.as(String) || ""
captions_1 = env.params.body["captions_1"]?.try &.as(String) || "" captions_1 = env.params.body["captions_1"]?.try &.as(String) || ""

View file

@ -32,7 +32,7 @@ DEFAULT_USER_PREFERENCES = Preferences.from_json({
"speed" => 1.0, "speed" => 1.0,
"quality" => "hd720", "quality" => "hd720",
"volume" => 100, "volume" => 100,
"comments" => "youtube", "comments" => ["youtube", ""],
"captions" => ["", "", ""], "captions" => ["", "", ""],
"dark_mode" => false, "dark_mode" => false,
"thin_mode " => false, "thin_mode " => false,
@ -43,6 +43,25 @@ DEFAULT_USER_PREFERENCES = Preferences.from_json({
}.to_json) }.to_json)
class Preferences class Preferences
module StringToArray
def self.to_json(value : Array(String), json : JSON::Builder)
return value.to_json
end
def self.from_json(value : JSON::PullParser) : Array(String)
begin
result = [] of String
value.read_array do
result << value.read_string
end
rescue ex
result = [value.read_string, ""]
end
result
end
end
JSON.mapping({ JSON.mapping({
video_loop: Bool, video_loop: Bool,
autoplay: Bool, autoplay: Bool,
@ -50,8 +69,9 @@ class Preferences
quality: String, quality: String,
volume: Int32, volume: Int32,
comments: { comments: {
type: String, type: Array(String),
default: "youtube", default: ["youtube", ""],
converter: StringToArray,
}, },
captions: { captions: {
type: Array(String), type: Array(String),

View file

@ -48,10 +48,19 @@ function update_value(element) {
</div> </div>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="comments">Pull comments from: </label> <label for="comments_0">Default comments: </label>
<select name="comments" id="comments"> <select name="comments_0" id="comments_0">
<% {"youtube", "reddit"}.each do |option| %> <% {"", "youtube", "reddit"}.each do |option| %>
<option <% if user.preferences.comments == option %> selected <% end %>><%= option %></option> <option <% if user.preferences.comments[0] == option %> selected <% end %>><%= option %></option>
<% end %>
</select>
</div>
<div class="pure-control-group">
<label for="comments_1">Fallback comments: </label>
<select name="comments_1" id="comments_1">
<% {"", "youtube", "reddit"}.each do |option| %>
<option <% if user.preferences.comments[1] == option %> selected <% end %>><%= option %></option>
<% end %> <% end %>
</select> </select>
</div> </div>

View file

@ -30,165 +30,6 @@
<%= rendered "components/player" %> <%= rendered "components/player" %>
</div> </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";
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) {
comments = document.getElementById("comments");
comments.innerHTML = `
<div>
<h3>
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
{title}
</h3>
<b>
<a target="_blank" href="https://reddit.com{permalink}">View more comments on Reddit</a>
</b>
</div>
<div>{contentHtml}</div>
<hr>`.supplant({
title: xhr.response.title,
permalink: xhr.response.permalink,
contentHtml: xhr.response.contentHtml
});
} else {
get_youtube_comments();
}
};
xhr.ontimeout = function() {
console.log("Pulling comments timed out.");
get_reddit_comments();
};
}
function get_youtube_comments() {
var url = "/api/v1/comments/<%= video.id %>?format=html";
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) {
comments = document.getElementById("comments");
comments.innerHTML = `
<div>
<h3>
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
View {commentCount} comments
</h3>
</div>
<div>{contentHtml}</div>
<hr>`.supplant({
contentHtml: xhr.response.contentHtml,
commentCount: commaSeparateNumber(xhr.response.commentCount)
});
} else {
comments = document.getElementById("comments");
comments.innerHTML = "";
}
};
xhr.ontimeout = function() {
console.log("Pulling comments timed out.");
comments = document.getElementById("comments");
comments.innerHTML =
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
get_youtube_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;
});
};
<% if preferences && preferences.comments == "reddit" %>
get_reddit_comments();
<% else %>
get_youtube_comments();
<% end %>
</script>
<div class="h-box"> <div class="h-box">
<h1> <h1>
<%= HTML.escape(video.title) %> <%= HTML.escape(video.title) %>
@ -290,3 +131,184 @@ get_youtube_comments();
</div> </div>
</div> </div>
</div> </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";
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) {
comments = document.getElementById("comments");
comments.innerHTML = `
<div>
<h3>
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
{title}
</h3>
<b>
<a target="_blank" href="https://reddit.com{permalink}">View more comments on Reddit</a>
</b>
</div>
<div>{contentHtml}</div>
<hr>`.supplant({
title: xhr.response.title,
permalink: xhr.response.permalink,
contentHtml: xhr.response.contentHtml
});
} else {
<% if preferences && preferences.comments[1] == "youtube" %>
get_youtube_comments();
<% else %>
comments = document.getElementById("comments");
comments.innerHTML = "";
<% end %>
}
};
xhr.ontimeout = function() {
console.log("Pulling comments timed out.");
get_reddit_comments();
};
}
function get_youtube_comments() {
var url = "/api/v1/comments/<%= video.id %>?format=html";
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) {
comments = document.getElementById("comments");
comments.innerHTML = `
<div>
<h3>
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
View {commentCount} comments
</h3>
</div>
<div>{contentHtml}</div>
<hr>`.supplant({
contentHtml: xhr.response.contentHtml,
commentCount: commaSeparateNumber(xhr.response.commentCount)
});
} else {
<% if preferences && preferences.comments[1] == "youtube" %>
get_youtube_comments();
<% else %>
comments = document.getElementById("comments");
comments.innerHTML = "";
<% end %>
}
};
xhr.ontimeout = function() {
console.log("Pulling comments timed out.");
comments = document.getElementById("comments");
comments.innerHTML =
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
get_youtube_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;
});
};
<% if preferences %>
<% if preferences.comments[0] == "youtube" %>
get_youtube_comments();
<% elsif preferences.comments[0] == "reddit" %>
get_reddit_comments();
<% else %>
<% if preferences.comments[1] == "youtube" %>
get_youtube_comments();
<% elsif preferences.comments[1] == "reddit" %>
get_reddit_comments();
<% else %>
comments = document.getElementById("comments");
comments.innerHTML = "";
<% end %>
<% end %>
<% else %>
get_youtube_comments();
<% end %>
</script>