summaryrefslogtreecommitdiffstats
path: root/assets/js/watch.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js/watch.js')
-rw-r--r--assets/js/watch.js472
1 files changed, 100 insertions, 372 deletions
diff --git a/assets/js/watch.js b/assets/js/watch.js
index 3909edd4..26ad138f 100644
--- a/assets/js/watch.js
+++ b/assets/js/watch.js
@@ -1,32 +1,13 @@
-var video_data = JSON.parse(document.getElementById('video_data').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;
- });
-}
+'use strict';
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 = '[ - ]';
+ var body = target.parentNode.parentNode.children[1];
+ if (body.style.display === 'none') {
+ target.textContent = '[ − ]';
body.style.display = '';
- }
-}
-
-function toggle_comments(event) {
- var target = event.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 = '';
+ target.textContent = '[ + ]';
+ body.style.display = 'none';
}
}
@@ -40,36 +21,6 @@ function swap_comments(event) {
}
}
-function hide_youtube_replies(event) {
- var target = event.target;
-
- sub_text = target.getAttribute('data-inner-text');
- inner_text = target.getAttribute('data-sub-text');
-
- body = target.parentNode.parentNode.children[1];
- body.style.display = 'none';
-
- target.innerHTML = sub_text;
- target.onclick = show_youtube_replies;
- target.setAttribute('data-inner-text', inner_text);
- target.setAttribute('data-sub-text', sub_text);
-}
-
-function show_youtube_replies(event) {
- var target = event.target;
-
- sub_text = target.getAttribute('data-inner-text');
- inner_text = target.getAttribute('data-sub-text');
-
- body = target.parentNode.parentNode.children[1];
- body.style.display = '';
-
- target.innerHTML = sub_text;
- target.onclick = hide_youtube_replies;
- target.setAttribute('data-inner-text', inner_text);
- target.setAttribute('data-sub-text', sub_text);
-}
-
var continue_button = document.getElementById('continue');
if (continue_button) {
continue_button.onclick = continue_autoplay;
@@ -78,377 +29,154 @@ if (continue_button) {
function next_video() {
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
- if (video_data.params.autoplay || video_data.params.continue_autoplay) {
+ if (video_data.params.autoplay || video_data.params.continue_autoplay)
url.searchParams.set('autoplay', '1');
- }
-
- if (video_data.params.listen !== video_data.preferences.listen) {
+ if (video_data.params.listen !== video_data.preferences.listen)
url.searchParams.set('listen', video_data.params.listen);
- }
-
- if (video_data.params.speed !== video_data.preferences.speed) {
+ if (video_data.params.speed !== video_data.preferences.speed)
url.searchParams.set('speed', video_data.params.speed);
- }
-
- if (video_data.params.local !== video_data.preferences.local) {
+ if (video_data.params.local !== video_data.preferences.local)
url.searchParams.set('local', video_data.params.local);
- }
-
url.searchParams.set('continue', '1');
+
location.assign(url.pathname + url.search);
}
function continue_autoplay(event) {
if (event.target.checked) {
- player.on('ended', function () {
- next_video();
- });
+ player.on('ended', next_video);
} 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;
-}
-
-function get_playlist(plid, retries) {
- if (retries == undefined) retries = 5;
- playlist = document.getElementById('playlist');
-
- if (retries <= 0) {
- console.log('Failed to pull playlist');
- playlist.innerHTML = '';
- return;
- }
+function get_playlist(plid) {
+ var playlist = document.getElementById('playlist');
- playlist.innerHTML = ' \
- <h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3> \
- <hr>'
+ playlist.innerHTML = spinnerHTMLwithHR;
+ var plid_url;
if (plid.startsWith('RD')) {
- var plid_url = '/api/v1/mixes/' + plid +
+ plid_url = '/api/v1/mixes/' + plid +
'?continuation=' + video_data.id +
'&format=html&hl=' + video_data.preferences.locale;
} else {
- var plid_url = '/api/v1/playlists/' + plid +
+ plid_url = '/api/v1/playlists/' + plid +
'?index=' + video_data.index +
'&continuation=' + video_data.id +
'&format=html&hl=' + video_data.preferences.locale;
}
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('GET', plid_url, true);
-
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- playlist.innerHTML = xhr.response.playlistHtml;
-
- if (xhr.response.nextVideo) {
- player.on('ended', function () {
- var url = new URL('https://example.com/watch?v=' + xhr.response.nextVideo);
-
- url.searchParams.set('list', plid);
- if (!plid.startsWith('RD')) {
- url.searchParams.set('index', xhr.response.index);
- }
-
- if (video_data.params.autoplay || video_data.params.continue_autoplay) {
- url.searchParams.set('autoplay', '1');
- }
-
- if (video_data.params.listen !== video_data.preferences.listen) {
- url.searchParams.set('listen', video_data.params.listen);
- }
-
- if (video_data.params.speed !== video_data.preferences.speed) {
- url.searchParams.set('speed', video_data.params.speed);
- }
-
- if (video_data.params.local !== video_data.preferences.local) {
- url.searchParams.set('local', video_data.params.local);
- }
-
- location.assign(url.pathname + url.search);
- });
- }
- } else {
- playlist.innerHTML = '';
- document.getElementById('continue').style.display = '';
- }
+ helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, {
+ on200: function (response) {
+ playlist.innerHTML = response.playlistHtml;
+
+ if (!response.nextVideo) return;
+
+ var nextVideo = document.getElementById(response.nextVideo);
+ nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
+
+ player.on('ended', function () {
+ var url = new URL('https://example.com/watch?v=' + response.nextVideo);
+
+ url.searchParams.set('list', plid);
+ if (!plid.startsWith('RD'))
+ url.searchParams.set('index', response.index);
+ if (video_data.params.autoplay || video_data.params.continue_autoplay)
+ url.searchParams.set('autoplay', '1');
+ if (video_data.params.listen !== video_data.preferences.listen)
+ url.searchParams.set('listen', video_data.params.listen);
+ if (video_data.params.speed !== video_data.preferences.speed)
+ url.searchParams.set('speed', video_data.params.speed);
+ if (video_data.params.local !== video_data.preferences.local)
+ url.searchParams.set('local', video_data.params.local);
+
+ location.assign(url.pathname + url.search);
+ });
+ },
+ onNon200: function (xhr) {
+ playlist.innerHTML = '';
+ document.getElementById('continue').style.display = '';
+ },
+ onError: function (xhr) {
+ playlist.innerHTML = spinnerHTMLwithHR;
+ },
+ onTimeout: function (xhr) {
+ playlist.innerHTML = spinnerHTMLwithHR;
}
- }
-
- xhr.onerror = function () {
- playlist = document.getElementById('playlist');
- playlist.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
-
- console.log('Pulling playlist timed out... ' + retries + '/5');
- setTimeout(function () { get_playlist(plid, retries - 1) }, 1000);
- }
-
- xhr.ontimeout = function () {
- playlist = document.getElementById('playlist');
- playlist.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
-
- console.log('Pulling playlist timed out... ' + retries + '/5');
- get_playlist(plid, retries - 1);
- }
-
- xhr.send();
+ });
}
-function get_reddit_comments(retries) {
- if (retries == undefined) retries = 5;
- comments = document.getElementById('comments');
-
- if (retries <= 0) {
- console.log('Failed to pull comments');
- comments.innerHTML = '';
- return;
- }
+function get_reddit_comments() {
+ var comments = document.getElementById('comments');
var fallback = comments.innerHTML;
- comments.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+ comments.innerHTML = spinnerHTML;
var url = '/api/v1/comments/' + video_data.id +
'?source=reddit&format=html' +
'&hl=' + video_data.preferences.locale;
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('GET', url, true);
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- comments.innerHTML = ' \
- <div> \
- <h3> \
- <a href="javascript:void(0)">[ - ]</a> \
- {title} \
- </h3> \
- <p> \
- <b> \
- <a href="javascript:void(0)" data-comments="youtube"> \
- {youtubeCommentsText} \
- </a> \
- </b> \
- </p> \
+ var onNon200 = function (xhr) { comments.innerHTML = fallback; };
+ if (video_data.params.comments[1] === 'youtube')
+ onNon200 = function (xhr) {};
+
+ helpers.xhr('GET', url, {retries: 5, entity_name: ''}, {
+ on200: function (response) {
+ comments.innerHTML = ' \
+ <div> \
+ <h3> \
+ <a href="javascript:void(0)">[ − ]</a> \
+ {title} \
+ </h3> \
+ <p> \
<b> \
- <a rel="noopener" target="_blank" href="https://reddit.com{permalink}">{redditPermalinkText}</a> \
- </b> \
- </div> \
- <div>{contentHtml}</div> \
- <hr>'.supplant({
- title: xhr.response.title,
- youtubeCommentsText: video_data.youtube_comments_text,
- redditPermalinkText: video_data.reddit_permalink_text,
- permalink: xhr.response.permalink,
- contentHtml: xhr.response.contentHtml
- });
-
- comments.children[0].children[0].children[0].onclick = toggle_comments;
- comments.children[0].children[1].children[0].onclick = swap_comments;
- } else {
- if (video_data.params.comments[1] === 'youtube') {
- console.log('Pulling comments failed... ' + retries + '/5');
- setTimeout(function () { get_youtube_comments(retries - 1) }, 1000);
- } else {
- comments.innerHTML = fallback;
- }
- }
- }
- }
-
- xhr.onerror = function () {
- console.log('Pulling comments failed... ' + retries + '/5');
- setTimeout(function () { get_reddit_comments(retries - 1) }, 1000);
- }
-
- xhr.ontimeout = function () {
- console.log('Pulling comments failed... ' + retries + '/5');
- get_reddit_comments(retries - 1);
- }
-
- xhr.send();
-}
-
-function get_youtube_comments(retries) {
- if (retries == undefined) retries = 5;
- comments = document.getElementById('comments');
-
- if (retries <= 0) {
- 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_data.id +
- '?format=html' +
- '&hl=' + video_data.preferences.locale +
- '&thin_mode=' + video_data.preferences.thin_mode;
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('GET', url, true);
-
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- comments.innerHTML = ' \
- <div> \
- <h3> \
- <a href="javascript:void(0)">[ - ]</a> \
- {commentsText} \
- </h3> \
- <b> \
- <a href="javascript:void(0)" data-comments="reddit"> \
- {redditComments} \
+ <a href="javascript:void(0)" data-comments="youtube"> \
+ {youtubeCommentsText} \
</a> \
</b> \
- </div> \
- <div>{contentHtml}</div> \
- <hr>'.supplant({
- contentHtml: xhr.response.contentHtml,
- redditComments: video_data.reddit_comments_text,
- commentsText: video_data.comments_text.supplant(
- { commentCount: number_with_separator(xhr.response.commentCount) }
- )
- });
-
- comments.children[0].children[0].children[0].onclick = toggle_comments;
- comments.children[0].children[1].children[0].onclick = swap_comments;
- } else {
- if (video_data.params.comments[1] === 'youtube') {
- setTimeout(function () { get_youtube_comments(retries - 1) }, 1000);
- } else {
- comments.innerHTML = '';
- }
- }
- }
- }
-
- xhr.onerror = function () {
- comments.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
- console.log('Pulling comments failed... ' + retries + '/5');
- setTimeout(function () { get_youtube_comments(retries - 1) }, 1000);
- }
-
- xhr.ontimeout = function () {
- comments.innerHTML =
- '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
- console.log('Pulling comments failed... ' + retries + '/5');
- get_youtube_comments(retries - 1);
- }
-
- xhr.send();
-}
-
-function get_youtube_replies(target, load_more, load_replies) {
- 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_data.id +
- '?format=html' +
- '&hl=' + video_data.preferences.locale +
- '&thin_mode=' + video_data.preferences.thin_mode +
- '&continuation=' + continuation
- if (load_replies) {
- url += '&action=action_get_comment_replies';
- }
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('GET', url, true);
-
- 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.removeChild(body.lastElementChild);
-
- var p = document.createElement('p');
- var a = document.createElement('a');
- p.appendChild(a);
-
- a.href = 'javascript:void(0)';
- a.onclick = hide_youtube_replies;
- a.setAttribute('data-sub-text', video_data.hide_replies_text);
- a.setAttribute('data-inner-text', video_data.show_replies_text);
- a.innerText = video_data.hide_replies_text;
-
- var div = document.createElement('div');
- div.innerHTML = xhr.response.contentHtml;
-
- body.appendChild(p);
- body.appendChild(div);
- }
- } else {
- body.innerHTML = fallback;
- }
- }
- }
-
- xhr.ontimeout = function () {
- console.log('Pulling comments failed.');
- body.innerHTML = fallback;
- }
-
- xhr.send();
+ </p> \
+ <b> \
+ <a rel="noopener" target="_blank" href="https://reddit.com{permalink}">{redditPermalinkText}</a> \
+ </b> \
+ </div> \
+ <div>{contentHtml}</div> \
+ <hr>'.supplant({
+ title: response.title,
+ youtubeCommentsText: video_data.youtube_comments_text,
+ redditPermalinkText: video_data.reddit_permalink_text,
+ permalink: response.permalink,
+ contentHtml: response.contentHtml
+ });
+
+ comments.children[0].children[0].children[0].onclick = toggle_comments;
+ comments.children[0].children[1].children[0].onclick = swap_comments;
+ },
+ onNon200: onNon200, // declared above
+ });
}
if (video_data.play_next) {
player.on('ended', function () {
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
- if (video_data.params.autoplay || video_data.params.continue_autoplay) {
+ if (video_data.params.autoplay || video_data.params.continue_autoplay)
url.searchParams.set('autoplay', '1');
- }
-
- if (video_data.params.listen !== video_data.preferences.listen) {
+ if (video_data.params.listen !== video_data.preferences.listen)
url.searchParams.set('listen', video_data.params.listen);
- }
-
- if (video_data.params.speed !== video_data.preferences.speed) {
+ if (video_data.params.speed !== video_data.preferences.speed)
url.searchParams.set('speed', video_data.params.speed);
- }
-
- if (video_data.params.local !== video_data.preferences.local) {
+ if (video_data.params.local !== video_data.preferences.local)
url.searchParams.set('local', video_data.params.local);
- }
-
url.searchParams.set('continue', '1');
+
location.assign(url.pathname + url.search);
});
}
-window.addEventListener('load', function (e) {
- if (video_data.plid) {
+addEventListener('load', function (e) {
+ if (video_data.plid)
get_playlist(video_data.plid);
- }
if (video_data.params.comments[0] === 'youtube') {
get_youtube_comments();
@@ -459,7 +187,7 @@ window.addEventListener('load', function (e) {
} else if (video_data.params.comments[1] === 'reddit') {
get_reddit_comments();
} else {
- comments = document.getElementById('comments');
+ var comments = document.getElementById('comments');
comments.innerHTML = '';
}
});
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-17 18:24:59 +0000