summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/carousel.css119
-rw-r--r--assets/css/default.css73
-rw-r--r--assets/css/player.css1
-rw-r--r--assets/js/comments.js174
-rw-r--r--assets/js/handlers.js4
-rw-r--r--assets/js/notifications.js4
-rw-r--r--assets/js/player.js69
-rw-r--r--assets/js/playlist_widget.js6
-rw-r--r--assets/js/post.js3
-rw-r--r--assets/js/subscribe_widget.js4
-rw-r--r--assets/js/watch.js161
-rw-r--r--assets/js/watched_widget.js4
-rw-r--r--assets/site.webmanifest4
13 files changed, 445 insertions, 181 deletions
diff --git a/assets/css/carousel.css b/assets/css/carousel.css
new file mode 100644
index 00000000..4bae92e5
--- /dev/null
+++ b/assets/css/carousel.css
@@ -0,0 +1,119 @@
+/*
+Copyright (c) 2024 by Jennifer (https://codepen.io/jwjertzoch/pen/JjyGeRy)
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without restriction,
+ including without limitation the rights to use, copy, modify,
+merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall
+be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.
+*/
+
+.carousel {
+ margin: 0 auto;
+ overflow: hidden;
+ text-align: center;
+}
+
+.slides {
+ width: 100%;
+ display: flex;
+ overflow-x: scroll;
+ scrollbar-width: none;
+ scroll-snap-type: x mandatory;
+ scroll-behavior: smooth;
+}
+
+.slides::-webkit-scrollbar {
+ display: none;
+}
+
+.slides-item {
+ align-items: center;
+ border-radius: 10px;
+ display: flex;
+ flex-shrink: 0;
+ font-size: 100px;
+ height: 600px;
+ justify-content: center;
+ margin: 0 1rem;
+ position: relative;
+ scroll-snap-align: start;
+ transform: scale(1);
+ transform-origin: center center;
+ transition: transform .5s;
+ width: 100%;
+}
+
+.carousel__nav {
+ padding: 1.25rem .5rem;
+}
+
+.slider-nav {
+ align-items: center;
+ background-color: #ddd;
+ border-radius: 50%;
+ color: #000;
+ display: inline-flex;
+ height: 1.5rem;
+ justify-content: center;
+ padding: .5rem;
+ position: relative;
+ text-decoration: none;
+ width: 1.5rem;
+}
+
+.skip-link {
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ top: auto;
+ width: 1px;
+}
+
+.skip-link:focus {
+ align-items: center;
+ background-color: #000;
+ color: #fff;
+ display: flex;
+ font-size: 30px;
+ height: 30px;
+ justify-content: center;
+ opacity: .8;
+ text-decoration: none;
+ width: 50%;
+ z-index: 1;
+}
+
+.light-theme .slider-nav {
+ background-color: #ddd;
+}
+
+.dark-theme .slider-nav {
+ background-color: #0005;
+}
+
+@media (prefers-color-scheme: light) {
+ .no-theme .slider-nav {
+ background-color: #ddd;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .no-theme .slider-nav {
+ background-color: #0005;
+ }
+}
diff --git a/assets/css/default.css b/assets/css/default.css
index c31b24e5..2cedcf0c 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -13,6 +13,7 @@ body {
display: flex;
flex-direction: column;
min-height: 100vh;
+ margin: auto;
}
.h-box {
@@ -197,6 +198,7 @@ img.thumbnail {
display: block; /* See: https://stackoverflow.com/a/11635197 */
width: 100%;
object-fit: cover;
+ aspect-ratio: 16 / 9;
}
.thumbnail-placeholder {
@@ -276,7 +278,14 @@ div.thumbnail > .bottom-right-overlay {
display: inline;
}
-.searchbar .pure-form fieldset { padding: 0; }
+.searchbar .pure-form {
+ display: flex;
+}
+
+.searchbar .pure-form fieldset {
+ padding: 0;
+ flex: 1;
+}
.searchbar input[type="search"] {
width: 100%;
@@ -308,6 +317,16 @@ input[type="search"]::-webkit-search-cancel-button {
background-size: 14px;
}
+.searchbar #searchbutton {
+ border: none;
+ background: none;
+ margin-top: 0;
+}
+
+.searchbar #searchbutton:hover {
+ color: rgb(0, 182, 240);
+}
+
.user-field {
display: flex;
flex-direction: row;
@@ -392,11 +411,19 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; }
* Comments & community posts
*/
-#comments {
+.comments {
max-width: 800px;
margin: auto;
}
+/*
+ * We don't want the top and bottom margin on the post page.
+ */
+.comments.post-comments {
+ margin-bottom: 0;
+ margin-top: 0;
+}
+
.video-iframe-wrapper {
position: relative;
height: 0;
@@ -433,16 +460,26 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; }
*/
footer {
- color: #919191;
margin-top: auto;
padding: 1.5em 0;
text-align: center;
max-height: 30vh;
}
-footer a {
- color: #919191 !important;
- text-decoration: underline;
+.light-theme footer {
+ color: #7c7c7c;
+}
+
+.dark-theme footer {
+ color: #adadad;
+}
+
+.light-theme footer a {
+ color: #7c7c7c !important;
+}
+
+.dark-theme footer a {
+ color: #adadad !important;
}
footer span {
@@ -548,6 +585,14 @@ span > select {
color: #303030;
}
+ .no-theme footer {
+ color: #7c7c7c;
+ }
+
+ .no-theme footer a {
+ color: #7c7c7c !important;
+ }
+
.light-theme .pure-menu-heading {
color: #565d64;
}
@@ -581,7 +626,7 @@ span > select {
}
.dark-theme a {
- color: #a0a0a0;
+ color: #adadad;
text-decoration: none;
}
@@ -635,7 +680,7 @@ body.dark-theme {
}
.no-theme a {
- color: #a0a0a0;
+ color: #adadad;
text-decoration: none;
}
@@ -666,6 +711,14 @@ body.dark-theme {
background-color: inherit;
color: inherit;
}
+
+ .no-theme footer {
+ color: #adadad;
+ }
+
+ .no-theme footer a {
+ color: #adadad !important;
+ }
}
@@ -759,3 +812,7 @@ h1, h2, h3, h4, h5, p,
.channel-emoji {
margin: 0 2px;
}
+
+#download_widget {
+ width: 100%;
+}
diff --git a/assets/css/player.css b/assets/css/player.css
index 50c7a748..9cb400ad 100644
--- a/assets/css/player.css
+++ b/assets/css/player.css
@@ -68,6 +68,7 @@
.video-js.player-style-youtube .vjs-menu-button-popup .vjs-menu {
margin-bottom: 2em;
+ padding-top: 2em
}
.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {height: 5px;
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}, {
diff --git a/assets/site.webmanifest b/assets/site.webmanifest
index af9432d7..2db6ed9e 100644
--- a/assets/site.webmanifest
+++ b/assets/site.webmanifest
@@ -15,5 +15,7 @@
],
"theme_color": "#575757",
"background_color": "#575757",
- "display": "standalone"
+ "display": "standalone",
+ "description": "An alternative front-end to YouTube",
+ "start_url": "/"
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-16 14:13:22 +0000