summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/invidious/views/components/player.ecr6
-rw-r--r--src/invidious/views/embed.ecr4
-rw-r--r--src/invidious/views/watch.ecr328
3 files changed, 19 insertions, 319 deletions
diff --git a/src/invidious/views/components/player.ecr b/src/invidious/views/components/player.ecr
index 3afa2af8..69699a1e 100644
--- a/src/invidious/views/components/player.ecr
+++ b/src/invidious/views/components/player.ecr
@@ -61,7 +61,7 @@ var options = {
"fullscreenToggle"
]
}
-};
+}
var shareOptions = {
socials: ["fbFeed", "tw", "reddit", "email"],
@@ -72,7 +72,7 @@ var shareOptions = {
image: "<%= thumbnail %>",
embedCode: "<iframe id='ivplayer' type='text/html' width='640' height='360' \
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>"
-};
+}
var player = videojs("player", options, function() {
this.hotkeys({
@@ -242,7 +242,7 @@ xhr.onreadystatechange = function () {
}
}
}
-};
+}
window.addEventListener('__ar_annotation_click', e => {
const { url, target, seconds } = e.detail;
diff --git a/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr
index e08bad02..eb2b55eb 100644
--- a/src/invidious/views/embed.ecr
+++ b/src/invidious/views/embed.ecr
@@ -71,12 +71,12 @@ function get_playlist(plid, timeouts = 0) {
}
}
}
- };
+ }
xhr.ontimeout = function() {
console.log('Pulling playlist timed out.');
get_playlist(plid, timeouts + 1);
- };
+ }
}
get_playlist('<%= plid %>');
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index be594556..26f19e3d 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -22,7 +22,6 @@
<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 %>
@@ -227,318 +226,19 @@
</div>
<script>
-<% if !rvs.empty? && !plid && params.continue %>
-player.on('ended', function() {
- location.assign('/watch?v=' +
- '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>' +
- '&continue=1' +
- <% if params.listen != preferences.listen %>
- '&listen=<%= params.listen %>' +
- <% end %>
- <% if params.autoplay || params.continue_autoplay %>
- '&autoplay=1' +
- <% end %>
- <% if params.speed != preferences.speed %>
- '&speed=<%= params.speed %>' +
- <% end %>
- ''
- );
-});
-<% end %>
-
-function continue_autoplay(target) {
- if (target.checked) {
- player.on('ended', function() {
- location.assign('/watch?v=' +
- '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>' +
- '&continue=1' +
- <% if params.listen != preferences.listen %>
- '&listen=<%= params.listen %>' +
- <% end %>
- <% if params.autoplay || params.continue_autoplay %>
- '&autoplay=1' +
- <% end %>
- <% if params.speed != preferences.speed %>
- '&speed=<%= params.speed %>' +
- <% end %>
- ''
- );
- });
- } else {
- player.off('ended');
- }
-}
-
-function number_with_separator(val) {
- while (/(\d+)(\d{3})/.test(val.toString())) {
- val = val.toString().replace(/(\d+)(\d{3})/, "$1" + "," + "$2");
- }
- return val;
-}
-
-<% if plid %>
-function get_playlist(plid, timeouts = 0) {
- playlist = document.getElementById('playlist');
-
- if (timeouts > 10) {
- console.log('Failed to pull playlist');
- playlist.innerHTML = '';
- return;
- }
-
- playlist.innerHTML = ' \
- <h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3> \
- <hr>'
-
- if (plid.startsWith('RD')) {
- var plid_url = '/api/v1/mixes/' + plid +
- '?continuation=<%= video.id %>' +
- '&format=html&hl=<%= env.get("preferences").as(Preferences).locale %>';
- } else {
- var plid_url = '/api/v1/playlists/' + plid +
- '?continuation=<%= video.id %>' +
- '&format=html&hl=<%= env.get("preferences").as(Preferences).locale %>';
- }
-
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 20000;
- xhr.open('GET', plid_url, true);
- xhr.send();
-
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- playlist.innerHTML = xhr.response.playlistHtml;
-
- if (xhr.response.nextVideo) {
- player.on('ended', function() {
- location.assign('/watch?v=' + xhr.response.nextVideo +
- '&list=' + plid +
- <% if params.listen != preferences.listen %>
- '&listen=<%= params.listen %>' +
- <% end %>
- <% if params.autoplay || params.continue_autoplay %>
- '&autoplay=1' +
- <% end %>
- <% if params.speed != preferences.speed %>
- '&speed=<%= params.speed %>' +
- <% end %>
- ''
- );
- });
- }
- } else {
- playlist.innerHTML = '';
- document.getElementById('continue').style.display = '';
- }
- }
- };
-
- xhr.ontimeout = function() {
- console.log('Pulling playlist timed out.');
- playlist = document.getElementById('playlist');
- playlist.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
- get_playlist(plid, timeouts + 1);
- };
+var watch_data = {
+ id: '<%= video.id %>',
+ plid: '<%= plid %>',
+ play_next: <%= !rvs.empty? && !plid && params.continue %>,
+ next_video: '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>',
+ youtube_comments_text: '<%= translate(locale, "View YouTube comments") %>',
+ reddit_comments_text: '<%= translate(locale, "View Reddit comments") %>',
+ reddit_permalink_text: '<%= translate(locale, "View more comments on Reddit") %>',
+ comments_text: '<%= translate(locale, "View `x` comments", "{commentCount}") %>',
+ hide_replies_text: '<%= translate(locale, "Hide replies") %>',
+ show_replies_text: '<%= translate(locale, "Show replies") %>',
+ params: <%= params.to_json %>,
+ preferences: <%= preferences.to_json %>
}
-
-get_playlist('<%= plid %>');
-<% end %>
-
-function get_reddit_comments(timeouts = 0) {
- comments = document.getElementById('comments');
-
- if (timeouts > 10) {
- console.log('Failed to pull comments');
- comments.innerHTML = '';
- return;
- }
-
- var fallback = comments.innerHTML;
- comments.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-
- var url = '/api/v1/comments/<%= video.id %>' +
- '?source=reddit&format=html' +
- '&hl=<%= env.get("preferences").as(Preferences).locale %>';
- 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.innerHTML = ' \
- <div> \
- <h3> \
- <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
- {title} \
- </h3> \
- <p> \
- <b> \
- <a href="javascript:void(0)" onclick="swap_comments(\'youtube\')"> \
- <%= translate(locale, "View YouTube comments") %> \
- </a> \
- </b> \
- </p> \
- <b> \
- <a rel="noopener" target="_blank" href="https://reddit.com{permalink}"><%= translate(locale, "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(timeouts + 1);
- <% else %>
- comments.innerHTML = fallback;
- <% end %>
- }
- }
- };
-
- xhr.ontimeout = function() {
- console.log('Pulling comments timed out.');
- get_reddit_comments(timeouts + 1);
- };
-}
-
-function get_youtube_comments(timeouts = 0) {
- comments = document.getElementById('comments');
-
- if (timeouts > 10) {
- console.log('Failed to pull comments');
- comments.innerHTML = '';
- return;
- }
-
- var fallback = comments.innerHTML;
- comments.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-
- var url = '/api/v1/comments/<%= video.id %>' +
- '?format=html' +
- '&hl=<%= env.get("preferences").as(Preferences).locale %>' +
- '&thin_mode=<%= env.get("preferences").as(Preferences).thin_mode %>';
- 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) {
- if (xhr.response.commentCount > 0) {
- comments.innerHTML = ' \
- <div> \
- <h3> \
- <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
- <%= translate(locale, "View `x` comments", "{commentCount}") %> \
- </h3> \
- <b> \
- <a href="javascript:void(0)" onclick="swap_comments(\'reddit\')"> \
- <%= translate(locale, "View Reddit comments") %> \
- </a> \
- </b> \
- </div> \
- <div>{contentHtml}</div> \
- <hr>'.supplant({
- contentHtml: xhr.response.contentHtml,
- commentCount: number_with_separator(xhr.response.commentCount)
- });
- } else {
- comments.innerHTML = "";
- }
- } else {
- <% if preferences && preferences.comments[1] == "youtube" %>
- get_youtube_comments(timeouts + 1);
- <% else %>
- comments.innerHTML = '';
- <% end %>
- }
- }
- };
-
- xhr.ontimeout = function() {
- console.log('Pulling comments timed out.');
- comments.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
- get_youtube_comments(timeouts + 1);
- };
-}
-
-function get_youtube_replies(target, load_more) {
- var continuation = target.getAttribute('data-continuation');
-
- var body = target.parentNode.parentNode;
- var fallback = body.innerHTML;
- body.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-
- var url = '/api/v1/comments/<%= video.id %>' +
- '?format=html' +
- '&hl=<%= env.get("preferences").as(Preferences).locale %>' +
- '&thin_mode=<%= env.get("preferences").as(Preferences).thin_mode %>' +
- '&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) {
- if (load_more) {
- body = body.parentNode.parentNode;
- body.removeChild(body.lastElementChild);
- body.innerHTML += xhr.response.contentHtml;
- } else {
- body.innerHTML = ' \
- <p><a href="javascript:void(0)" \
- onclick="hide_youtube_replies(this, \'<%= translate(locale, "Hide replies") %>\', \'<%= translate(locale, "Show replies") %>\')"><%= translate(locale, "Hide replies") %> \
- </a></p> \
- <div>{contentHtml}</div>'.supplant({
- contentHtml: xhr.response.contentHtml,
- });
- }
- } else {
- body.innerHTML = fallback;
- }
- }
- };
-
- xhr.ontimeout = function() {
- console.log('Pulling comments timed out.');
- body.innerHTML = fallback;
- };
-}
-
-<% 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>
+<script src="/js/watch.js"></script>