From 2faa2ed1f44134bd0e73e3aaa1a645ea2e109fad Mon Sep 17 00:00:00 2001 From: Omar Roth Date: Mon, 6 May 2019 09:48:33 -0500 Subject: [PATCH] Refactor watch.js --- assets/js/subscribe_widget.js | 4 +- assets/js/watch.js | 369 ++++++++++++++++++++-- src/invidious/views/components/player.ecr | 6 +- src/invidious/views/embed.ecr | 4 +- src/invidious/views/watch.ecr | 328 +------------------ 5 files changed, 367 insertions(+), 344 deletions(-) diff --git a/assets/js/subscribe_widget.js b/assets/js/subscribe_widget.js index 64e3e55f6..73beeb984 100644 --- a/assets/js/subscribe_widget.js +++ b/assets/js/subscribe_widget.js @@ -39,7 +39,7 @@ function subscribe(timeouts = 0) { xhr.ontimeout = function () { console.log('Subscribing timed out.'); subscribe(timeouts + 1); - }; + } } function unsubscribe(timeouts = 0) { @@ -74,5 +74,5 @@ function unsubscribe(timeouts = 0) { xhr.ontimeout = function () { console.log('Unsubscribing timed out.'); unsubscribe(timeouts + 1); - }; + } } diff --git a/assets/js/watch.js b/assets/js/watch.js index 799d6af9f..c5a29313c 100644 --- a/assets/js/watch.js +++ b/assets/js/watch.js @@ -1,52 +1,375 @@ +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; + }); +} + function toggle_parent(target) { body = target.parentNode.parentNode.children[1]; - if (body.style.display === null || body.style.display === "") { - target.innerHTML = "[ + ]"; - body.style.display = "none"; + if (body.style.display === null || body.style.display === '') { + target.innerHTML = '[ + ]'; + body.style.display = 'none'; } else { - target.innerHTML = "[ - ]"; - body.style.display = ""; + 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"; + if (body.style.display === null || body.style.display === '') { + target.innerHTML = '[ + ]'; + body.style.display = 'none'; } else { - target.innerHTML = "[ - ]"; - body.style.display = ""; + target.innerHTML = '[ - ]'; + body.style.display = ''; } } function swap_comments(source) { - if (source == "youtube") { + if (source == 'youtube') { get_youtube_comments(); - } else if (source == "reddit") { + } else if (source == 'reddit') { get_reddit_comments(); } } -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; - }); -}; - function show_youtube_replies(target, inner_text, sub_text) { body = target.parentNode.parentNode.children[1]; - body.style.display = ""; + body.style.display = ''; target.innerHTML = inner_text; - target.setAttribute("onclick", "hide_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')"); + target.setAttribute('onclick', "hide_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')"); } function hide_youtube_replies(target, inner_text, sub_text) { body = target.parentNode.parentNode.children[1]; - body.style.display = "none"; + body.style.display = 'none'; target.innerHTML = sub_text; - target.setAttribute("onclick", "show_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')"); + target.setAttribute('onclick', "show_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')"); +} + +function continue_autoplay(target) { + if (target.checked) { + player.on('ended', function () { + var url = new URL('https://example.com/watch?v=' + watch_data.next_video); + + if (watch_data.params.autoplay || watch_data.params.continue_autoplay) { + url.searchParams.set('autoplay', '1'); + } + + if (watch_data.params.listen !== watch_data.preferences.listen) { + url.searchParams.set('listen', watch_data.params.listen); + } + + if (watch_data.params.speed !== watch_data.preferences.speed) { + url.searchParams.set('speed', watch_data.params.speed); + } + + url.searchParams.set('continue', '1'); + location.assign(url.pathname + url.search); + }); + } 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, timeouts = 0) { + playlist = document.getElementById('playlist'); + + if (timeouts > 10) { + console.log('Failed to pull playlist'); + playlist.innerHTML = ''; + return; + } + + playlist.innerHTML = ' \ +

\ +
' + + if (plid.startsWith('RD')) { + var plid_url = '/api/v1/mixes/' + plid + + '?continuation=' + watch_data.id + + '&format=html&hl=' + watch_data.preferences.locale; + } else { + var plid_url = '/api/v1/playlists/' + plid + + '?continuation=' + watch_data.id + + '&format=html&hl=' + watch_data.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 () { + var url = new URL('https://example.com/watch?v=' + watch_data.next_video); + + if (watch_data.params.autoplay || watch_data.params.continue_autoplay) { + url.searchParams.set('autoplay', '1'); + } + + if (watch_data.params.listen !== watch_data.preferences.listen) { + url.searchParams.set('listen', watch_data.params.listen); + } + + if (watch_data.params.speed !== watch_data.preferences.speed) { + url.searchParams.set('speed', watch_data.params.speed); + } + + url.searchParams.set('list', plid); + location.assign(url.pathname + url.search); + }); + } + } else { + playlist.innerHTML = ''; + document.getElementById('continue').style.display = ''; + } + } + } + + xhr.ontimeout = function () { + console.log('Pulling playlist timed out.'); + playlist = document.getElementById('playlist'); + playlist.innerHTML = + '

'; + get_playlist(plid, timeouts + 1); + } +} + +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 = + '

'; + + var url = '/api/v1/comments/' + watch_data.id + + '?source=reddit&format=html' + + '&hl=' + watch_data.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 = ' \ +
\ +

\ + [ - ] \ + {title} \ +

\ +

\ + \ + \ + {youtubeCommentsText} \ + \ + \ +

\ + \ + {redditPermalinkText} \ + \ +
\ +
{contentHtml}
\ +
'.supplant({ + title: xhr.response.title, + youtubeCommentsText: watch_data.youtube_comments_text, + redditPermalinkText: watch_data.reddit_permalink_text, + permalink: xhr.response.permalink, + contentHtml: xhr.response.contentHtml + }); + } else { + if (watch_data.preferences.comments[1] === 'youtube') { + get_youtube_comments(timeouts + 1); + } else { + comments.innerHTML = fallback; + } + } + } + } + + 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 = + '

'; + + var url = '/api/v1/comments/' + watch_data.id + + '?format=html' + + '&hl=' + watch_data.preferences.locale + + '&thin_mode=' + watch_data.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 = ' \ +
\ +

\ + [ - ] \ + {commentsText} \ +

\ + \ + \ + {redditComments} \ + \ + \ +
\ +
{contentHtml}
\ +
'.supplant({ + contentHtml: xhr.response.contentHtml, + redditComments: watch_data.reddit_comments_text, + commentsText: watch_data.comments_text.supplant( + { commentCount: number_with_separator(xhr.response.commentCount) } + ) + }); + } else { + comments.innerHTML = ''; + } + } else { + if (watch_data.preferences[1] === 'youtube') { + get_youtube_comments(timeouts + 1); + } else { + comments.innerHTML = ''; + } + } + } + } + + xhr.ontimeout = function () { + console.log('Pulling comments timed out.'); + comments.innerHTML = + '

'; + 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 = + '

'; + + var url = '/api/v1/comments/' + watch_data.id + + '?format=html' + + '&hl=' + watch_data.preferences.locale + + '&thin_mode=' + watch_data.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 = ' \ +

{hideRepliesText} \ +

\ +
{contentHtml}
'.supplant({ + hideRepliesText: watch_data.hide_replies_text, + showRepliesText: watch_data.show_replies_text, + contentHtml: xhr.response.contentHtml + }); + } + } else { + body.innerHTML = fallback; + } + } + } + + xhr.ontimeout = function () { + console.log('Pulling comments timed out.'); + body.innerHTML = fallback; + } +} + +if (watch_data.play_next) { + player.on('ended', function () { + var url = new URL('https://example.com/watch?v=' + watch_data.next_video); + + if (watch_data.params.autoplay || watch_data.params.continue_autoplay) { + url.searchParams.set('autoplay', '1'); + } + + if (watch_data.params.listen !== watch_data.preferences.listen) { + url.searchParams.set('listen', watch_data.params.listen); + } + + if (watch_data.params.speed !== watch_data.preferences.speed) { + url.searchParams.set('speed', watch_data.params.speed); + } + + url.searchParams.set('continue', '1'); + location.assign(url.pathname + url.search); + }); +} + +if (watch_data.plid) { + get_playlist(watch_data.plid); +} + +if (watch_data.preferences.comments[0] === 'youtube') { + get_youtube_comments(); +} else if (watch_data.preferences.comments[0] === 'reddit') { + get_reddit_comments(); +} else if (watch_data.preferences.comments[1] === 'youtube') { + get_youtube_comments(); +} else if (watch_data.preferences.comments[1] === 'reddit') { + get_reddit_comments(); +} else { + comments = document.getElementById('comments'); + comments.innerHTML = ''; } diff --git a/src/invidious/views/components/player.ecr b/src/invidious/views/components/player.ecr index 3afa2af88..69699a1e9 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: "" -}; +} 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 e08bad02c..eb2b55eb6 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 be594556c..26f19e3d5 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -22,7 +22,6 @@ - <%= rendered "components/player_sources" %> <%= HTML.escape(video.title) %> - Invidious <% end %> @@ -227,318 +226,19 @@ +