diff options
Diffstat (limited to 'assets/js')
| -rw-r--r-- | assets/js/comments.js | 174 | ||||
| -rw-r--r-- | assets/js/handlers.js | 4 | ||||
| -rw-r--r-- | assets/js/notifications.js | 4 | ||||
| -rw-r--r-- | assets/js/player.js | 69 | ||||
| -rw-r--r-- | assets/js/playlist_widget.js | 6 | ||||
| -rw-r--r-- | assets/js/post.js | 3 | ||||
| -rw-r--r-- | assets/js/subscribe_widget.js | 4 | ||||
| -rw-r--r-- | assets/js/watch.js | 161 | ||||
| -rw-r--r-- | assets/js/watched_widget.js | 4 |
9 files changed, 257 insertions, 172 deletions
diff --git a/assets/js/comments.js b/assets/js/comments.js new file mode 100644 index 00000000..35ffa96e --- /dev/null +++ b/assets/js/comments.js @@ -0,0 +1,174 @@ +var video_data = JSON.parse(document.getElementById('video_data').textContent); + +var spinnerHTML = '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>'; +var spinnerHTMLwithHR = spinnerHTML + '<hr>'; + +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_comments(event) { + var target = event.target; + var body = target.parentNode.parentNode.parentNode.children[1]; + if (body.style.display === 'none') { + target.textContent = '[ − ]'; + body.style.display = ''; + } else { + target.textContent = '[ + ]'; + body.style.display = 'none'; + } +} + +function hide_youtube_replies(event) { + var target = event.target; + + var sub_text = target.getAttribute('data-inner-text'); + var inner_text = target.getAttribute('data-sub-text'); + + var body = target.parentNode.parentNode.children[1]; + body.style.display = 'none'; + + target.textContent = 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; + + var sub_text = target.getAttribute('data-inner-text'); + var inner_text = target.getAttribute('data-sub-text'); + + var body = target.parentNode.parentNode.children[1]; + body.style.display = ''; + + target.textContent = sub_text; + target.onclick = hide_youtube_replies; + target.setAttribute('data-inner-text', inner_text); + target.setAttribute('data-sub-text', sub_text); +} + +function get_youtube_comments() { + var comments = document.getElementById('comments'); + + var fallback = comments.innerHTML; + comments.innerHTML = spinnerHTML; + + var baseUrl = video_data.base_url || '/api/v1/comments/'+ video_data.id + var url = baseUrl + + '?format=html' + + '&hl=' + video_data.preferences.locale + + '&thin_mode=' + video_data.preferences.thin_mode; + + if (video_data.ucid) { + url += '&ucid=' + video_data.ucid + } + + 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: 'comments'}, { + on200: function (response) { + var commentInnerHtml = ' \ + <div> \ + <h3> \ + <a href="javascript:void(0)">[ − ]</a> \ + {commentsText} \ + </h3> \ + <b> \ + ' + if (video_data.support_reddit) { + commentInnerHtml += ' <a href="javascript:void(0)" data-comments="reddit"> \ + {redditComments} \ + </a> \ + ' + } + commentInnerHtml += ' </b> \ + </div> \ + <div>{contentHtml}</div> \ + <hr>' + commentInnerHtml = commentInnerHtml.supplant({ + contentHtml: response.contentHtml, + redditComments: video_data.reddit_comments_text, + commentsText: video_data.comments_text.supplant({ + // toLocaleString correctly splits number with local thousands separator. e.g.: + // '1,234,567.89' for user with English locale + // '1 234 567,89' for user with Russian locale + // '1.234.567,89' for user with Portuguese locale + commentCount: response.commentCount.toLocaleString() + }) + }); + comments.innerHTML = commentInnerHtml; + comments.children[0].children[0].children[0].onclick = toggle_comments; + if (video_data.support_reddit) { + comments.children[0].children[1].children[0].onclick = swap_comments; + } + }, + onNon200: onNon200, // declared above + onError: function (xhr) { + comments.innerHTML = spinnerHTML; + }, + onTimeout: function (xhr) { + comments.innerHTML = spinnerHTML; + } + }); +} + +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 = spinnerHTML; + var baseUrl = video_data.base_url || '/api/v1/comments/'+ video_data.id + var url = baseUrl + + '?format=html' + + '&hl=' + video_data.preferences.locale + + '&thin_mode=' + video_data.preferences.thin_mode + + '&continuation=' + continuation; + + if (video_data.ucid) { + url += '&ucid=' + video_data.ucid + } + if (load_replies) url += '&action=action_get_comment_replies'; + + helpers.xhr('GET', url, {}, { + on200: function (response) { + if (load_more) { + body = body.parentNode.parentNode; + body.removeChild(body.lastElementChild); + body.insertAdjacentHTML('beforeend', 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.textContent = video_data.hide_replies_text; + + var div = document.createElement('div'); + div.innerHTML = response.contentHtml; + + body.appendChild(p); + body.appendChild(div); + } + }, + onNon200: function (xhr) { + body.innerHTML = fallback; + }, + onTimeout: function (xhr) { + console.warn('Pulling comments failed'); + body.innerHTML = fallback; + } + }); +}
\ No newline at end of file diff --git a/assets/js/handlers.js b/assets/js/handlers.js index 539974fb..67cd9081 100644 --- a/assets/js/handlers.js +++ b/assets/js/handlers.js @@ -91,7 +91,7 @@ var count = document.getElementById('count'); count.textContent--; - var url = '/token_ajax?action_revoke_token=1&redirect=false' + + var url = '/token_ajax?action=revoke_token&redirect=false' + '&referer=' + encodeURIComponent(location.href) + '&session=' + target.getAttribute('data-session'); @@ -111,7 +111,7 @@ var count = document.getElementById('count'); count.textContent--; - var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' + + var url = '/subscription_ajax?action=remove_subscriptions&redirect=false' + '&referer=' + encodeURIComponent(location.href) + '&c=' + target.getAttribute('data-ucid'); diff --git a/assets/js/notifications.js b/assets/js/notifications.js index 058553d9..55b7a15c 100644 --- a/assets/js/notifications.js +++ b/assets/js/notifications.js @@ -10,7 +10,7 @@ var notifications, delivered; var notifications_mock = { close: function () { } }; function get_subscriptions() { - helpers.xhr('GET', '/api/v1/auth/subscriptions?fields=authorId', { + helpers.xhr('GET', '/api/v1/auth/subscriptions', { retries: 5, entity_name: 'subscriptions' }, { @@ -22,7 +22,7 @@ function create_notification_stream(subscriptions) { // sse.js can't be replaced to EventSource in place as it lack support of payload and headers // see https://developer.mozilla.org/en-US/docs/Web/API/EventSource/EventSource notifications = new SSE( - '/api/v1/auth/notifications?fields=videoId,title,author,authorId,publishedText,published,authorThumbnails,liveNow', { + '/api/v1/auth/notifications', { withCredentials: true, payload: 'topics=' + subscriptions.map(function (subscription) { return subscription.authorId; }).join(','), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } diff --git a/assets/js/player.js b/assets/js/player.js index bb53ac24..353a5296 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -3,7 +3,6 @@ var player_data = JSON.parse(document.getElementById('player_data').textContent) var video_data = JSON.parse(document.getElementById('video_data').textContent); var options = { - preload: 'auto', liveui: true, playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0], controlBar: { @@ -98,11 +97,13 @@ if (video_data.params.quality === 'dash') { /** * Function for add time argument to url + * * @param {String} url + * @param {String} [base] * @returns {URL} urlWithTimeArg */ -function addCurrentTimeToURL(url) { - var urlUsed = new URL(url); +function addCurrentTimeToURL(url, base) { + var urlUsed = new URL(url, base); urlUsed.searchParams.delete('start'); var currentTime = Math.ceil(player.currentTime()); if (currentTime > 0) @@ -112,6 +113,50 @@ function addCurrentTimeToURL(url) { return urlUsed; } +/** + * Global variable to save the last timestamp (in full seconds) at which the external + * links were updated by the 'timeupdate' callback below. + * + * It is initialized to 5s so that the video will always restart from the beginning + * if the user hasn't really started watching before switching to the other website. + */ +var timeupdate_last_ts = 5; + +/** + * Callback that updates the timestamp on all external links + */ +player.on('timeupdate', function () { + // Only update once every second + let current_ts = Math.floor(player.currentTime()); + if (current_ts > timeupdate_last_ts) timeupdate_last_ts = current_ts; + else return; + + // YouTube links + + let elem_yt_watch = document.getElementById('link-yt-watch'); + let elem_yt_embed = document.getElementById('link-yt-embed'); + + let base_url_yt_watch = elem_yt_watch.getAttribute('data-base-url'); + let base_url_yt_embed = elem_yt_embed.getAttribute('data-base-url'); + + elem_yt_watch.href = addCurrentTimeToURL(base_url_yt_watch); + elem_yt_embed.href = addCurrentTimeToURL(base_url_yt_embed); + + // Invidious links + + let domain = window.location.origin; + + let elem_iv_embed = document.getElementById('link-iv-embed'); + let elem_iv_other = document.getElementById('link-iv-other'); + + let base_url_iv_embed = elem_iv_embed.getAttribute('data-base-url'); + let base_url_iv_other = elem_iv_other.getAttribute('data-base-url'); + + elem_iv_embed.href = addCurrentTimeToURL(base_url_iv_embed, domain); + elem_iv_other.href = addCurrentTimeToURL(base_url_iv_other, domain); +}); + + var shareOptions = { socials: ['fbFeed', 'tw', 'reddit', 'email'], @@ -305,7 +350,12 @@ if (video_data.params.save_player_pos) { const rememberedTime = get_video_time(); let lastUpdated = 0; - if(!hasTimeParam) set_seconds_after_start(rememberedTime); + if(!hasTimeParam) { + if (rememberedTime >= video_data.length_seconds - 20) + set_seconds_after_start(0); + else + set_seconds_after_start(rememberedTime); + } player.on('timeupdate', function () { const raw = player.currentTime(); @@ -701,6 +751,17 @@ if (navigator.vendor === 'Apple Computer, Inc.' && video_data.params.listen) { }); } +// Safari screen timeout on looped video playback fix +if (navigator.vendor === 'Apple Computer, Inc.' && !video_data.params.listen && video_data.params.video_loop) { + player.loop(false); + player.ready(function () { + player.on('ended', function () { + player.currentTime(0); + player.play(); + }); + }); +} + // Watch on Invidious link if (location.pathname.startsWith('/embed/')) { const Button = videojs.getComponent('Button'); diff --git a/assets/js/playlist_widget.js b/assets/js/playlist_widget.js index c92592ac..96a51d70 100644 --- a/assets/js/playlist_widget.js +++ b/assets/js/playlist_widget.js @@ -6,7 +6,7 @@ function add_playlist_video(target) { var select = target.parentNode.children[0].children[1]; var option = select.children[select.selectedIndex]; - var url = '/playlist_ajax?action_add_video=1&redirect=false' + + var url = '/playlist_ajax?action=add_video&redirect=false' + '&video_id=' + target.getAttribute('data-id') + '&playlist_id=' + option.getAttribute('data-plid'); @@ -21,7 +21,7 @@ function add_playlist_item(target) { var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode; tile.style.display = 'none'; - var url = '/playlist_ajax?action_add_video=1&redirect=false' + + var url = '/playlist_ajax?action=add_video&redirect=false' + '&video_id=' + target.getAttribute('data-id') + '&playlist_id=' + target.getAttribute('data-plid'); @@ -36,7 +36,7 @@ function remove_playlist_item(target) { var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode; tile.style.display = 'none'; - var url = '/playlist_ajax?action_remove_video=1&redirect=false' + + var url = '/playlist_ajax?action=remove_video&redirect=false' + '&set_video_id=' + target.getAttribute('data-index') + '&playlist_id=' + target.getAttribute('data-plid'); diff --git a/assets/js/post.js b/assets/js/post.js new file mode 100644 index 00000000..fcbc9155 --- /dev/null +++ b/assets/js/post.js @@ -0,0 +1,3 @@ +addEventListener('load', function (e) { + get_youtube_comments(); +}); diff --git a/assets/js/subscribe_widget.js b/assets/js/subscribe_widget.js index 7665a00b..d462e848 100644 --- a/assets/js/subscribe_widget.js +++ b/assets/js/subscribe_widget.js @@ -16,7 +16,7 @@ function subscribe() { subscribe_button.onclick = unsubscribe; subscribe_button.innerHTML = '<b>' + subscribe_data.unsubscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>'; - var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' + + var url = '/subscription_ajax?action=create_subscription_to_channel&redirect=false' + '&c=' + subscribe_data.ucid; helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'subscribe request'}, { @@ -32,7 +32,7 @@ function unsubscribe() { subscribe_button.onclick = subscribe; subscribe_button.innerHTML = '<b>' + subscribe_data.subscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>'; - var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' + + var url = '/subscription_ajax?action=remove_subscriptions&redirect=false' + '&c=' + subscribe_data.ucid; helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'unsubscribe request'}, { diff --git a/assets/js/watch.js b/assets/js/watch.js index 36506abd..d869d40d 100644 --- a/assets/js/watch.js +++ b/assets/js/watch.js @@ -1,14 +1,4 @@ 'use strict'; -var video_data = JSON.parse(document.getElementById('video_data').textContent); -var spinnerHTML = '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>'; -var spinnerHTMLwithHR = spinnerHTML + '<hr>'; - -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) { var body = target.parentNode.parentNode.children[1]; @@ -21,18 +11,6 @@ function toggle_parent(target) { } } -function toggle_comments(event) { - var target = event.target; - var body = target.parentNode.parentNode.parentNode.children[1]; - if (body.style.display === 'none') { - target.textContent = '[ − ]'; - body.style.display = ''; - } else { - target.textContent = '[ + ]'; - body.style.display = 'none'; - } -} - function swap_comments(event) { var source = event.target.getAttribute('data-comments'); @@ -43,36 +21,6 @@ function swap_comments(event) { } } -function hide_youtube_replies(event) { - var target = event.target; - - var sub_text = target.getAttribute('data-inner-text'); - var inner_text = target.getAttribute('data-sub-text'); - - var body = target.parentNode.parentNode.children[1]; - body.style.display = 'none'; - - target.textContent = 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; - - var sub_text = target.getAttribute('data-inner-text'); - var inner_text = target.getAttribute('data-sub-text'); - - var body = target.parentNode.parentNode.children[1]; - body.style.display = ''; - - target.textContent = 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; @@ -119,6 +67,10 @@ function get_playlist(plid) { '&format=html&hl=' + video_data.preferences.locale; } + if (video_data.params.listen) { + plid_url += '&listen=1' + } + helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, { on200: function (response) { playlist.innerHTML = response.playlistHtml; @@ -208,111 +160,6 @@ function get_reddit_comments() { }); } -function get_youtube_comments() { - var comments = document.getElementById('comments'); - - var fallback = comments.innerHTML; - comments.innerHTML = spinnerHTML; - - var url = '/api/v1/comments/' + video_data.id + - '?format=html' + - '&hl=' + video_data.preferences.locale + - '&thin_mode=' + video_data.preferences.thin_mode; - - 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: 'comments'}, { - on200: function (response) { - comments.innerHTML = ' \ - <div> \ - <h3> \ - <a href="javascript:void(0)">[ − ]</a> \ - {commentsText} \ - </h3> \ - <b> \ - <a href="javascript:void(0)" data-comments="reddit"> \ - {redditComments} \ - </a> \ - </b> \ - </div> \ - <div>{contentHtml}</div> \ - <hr>'.supplant({ - contentHtml: response.contentHtml, - redditComments: video_data.reddit_comments_text, - commentsText: video_data.comments_text.supplant({ - // toLocaleString correctly splits number with local thousands separator. e.g.: - // '1,234,567.89' for user with English locale - // '1 234 567,89' for user with Russian locale - // '1.234.567,89' for user with Portuguese locale - commentCount: response.commentCount.toLocaleString() - }) - }); - - comments.children[0].children[0].children[0].onclick = toggle_comments; - comments.children[0].children[1].children[0].onclick = swap_comments; - }, - onNon200: onNon200, // declared above - onError: function (xhr) { - comments.innerHTML = spinnerHTML; - }, - onTimeout: function (xhr) { - comments.innerHTML = spinnerHTML; - } - }); -} - -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 = spinnerHTML; - - 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'; - - helpers.xhr('GET', url, {}, { - on200: function (response) { - if (load_more) { - body = body.parentNode.parentNode; - body.removeChild(body.lastElementChild); - body.insertAdjacentHTML('beforeend', 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.textContent = video_data.hide_replies_text; - - var div = document.createElement('div'); - div.innerHTML = response.contentHtml; - - body.appendChild(p); - body.appendChild(div); - } - }, - onNon200: function (xhr) { - body.innerHTML = fallback; - }, - onTimeout: function (xhr) { - console.warn('Pulling comments failed'); - body.innerHTML = fallback; - } - }); -} - if (video_data.play_next) { player.on('ended', function () { var url = new URL('https://example.com/watch?v=' + video_data.next_video); diff --git a/assets/js/watched_widget.js b/assets/js/watched_widget.js index f1ac9cb4..06af62cc 100644 --- a/assets/js/watched_widget.js +++ b/assets/js/watched_widget.js @@ -6,7 +6,7 @@ function mark_watched(target) { var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode; tile.style.display = 'none'; - var url = '/watch_ajax?action_mark_watched=1&redirect=false' + + var url = '/watch_ajax?action=mark_watched&redirect=false' + '&id=' + target.getAttribute('data-id'); helpers.xhr('POST', url, {payload: payload}, { @@ -22,7 +22,7 @@ function mark_unwatched(target) { var count = document.getElementById('count'); count.textContent--; - var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' + + var url = '/watch_ajax?action=mark_unwatched&redirect=false' + '&id=' + target.getAttribute('data-id'); helpers.xhr('POST', url, {payload: payload}, { |
