diff --git a/assets/js/_helpers.js b/assets/js/_helpers.js
new file mode 100644
index 000000000..7c50670ea
--- /dev/null
+++ b/assets/js/_helpers.js
@@ -0,0 +1,249 @@
+'use strict';
+// Contains only auxiliary methods
+// May be included and executed unlimited number of times without any consequences
+
+// Polyfills for IE11
+Array.prototype.find = Array.prototype.find || function (condition) {
+ return this.filter(condition)[0];
+};
+Array.from = Array.from || function (source) {
+ return Array.prototype.slice.call(source);
+};
+NodeList.prototype.forEach = NodeList.prototype.forEach || function (callback) {
+ Array.from(this).forEach(callback);
+};
+String.prototype.includes = String.prototype.includes || function (searchString) {
+ return this.indexOf(searchString) >= 0;
+};
+String.prototype.startsWith = String.prototype.startsWith || function (prefix) {
+ return this.substr(0, prefix.length) === prefix;
+};
+Math.sign = Math.sign || function(x) {
+ x = +x;
+ if (!x) return x; // 0 and NaN
+ return x > 0 ? 1 : -1;
+};
+if (!window.hasOwnProperty('HTMLDetailsElement') && !window.hasOwnProperty('mockHTMLDetailsElement')) {
+ window.mockHTMLDetailsElement = true;
+ const style = 'details:not([open]) > :not(summary) {display: none}';
+ document.head.appendChild(document.createElement('style')).textContent = style;
+
+ addEventListener('click', function (e) {
+ if (e.target.nodeName !== 'SUMMARY') return;
+ const details = e.target.parentElement;
+ if (details.hasAttribute('open'))
+ details.removeAttribute('open');
+ else
+ details.setAttribute('open', '');
+ });
+}
+
+// Monstrous global variable for handy code
+// Includes: clamp, xhr, storage.{get,set,remove}
+window.helpers = window.helpers || {
+ /**
+ * https://en.wikipedia.org/wiki/Clamping_(graphics)
+ * @param {Number} num Source number
+ * @param {Number} min Low border
+ * @param {Number} max High border
+ * @returns {Number} Clamped value
+ */
+ clamp: function (num, min, max) {
+ if (max < min) {
+ var t = max; max = min; min = t; // swap max and min
+ }
+
+ if (max < num)
+ return max;
+ if (min > num)
+ return min;
+ return num;
+ },
+
+ /** @private */
+ _xhr: function (method, url, options, callbacks) {
+ const xhr = new XMLHttpRequest();
+ xhr.open(method, url);
+
+ // Default options
+ xhr.responseType = 'json';
+ xhr.timeout = 10000;
+ // Default options redefining
+ if (options.responseType)
+ xhr.responseType = options.responseType;
+ if (options.timeout)
+ xhr.timeout = options.timeout;
+
+ if (method === 'POST')
+ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ // better than onreadystatechange because of 404 codes https://stackoverflow.com/a/36182963
+ xhr.onloadend = function () {
+ if (xhr.status === 200) {
+ if (callbacks.on200) {
+ // fix for IE11. It doesn't convert response to JSON
+ if (xhr.responseType === '' && typeof(xhr.response) === 'string')
+ callbacks.on200(JSON.parse(xhr.response));
+ else
+ callbacks.on200(xhr.response);
+ }
+ } else {
+ // handled by onerror
+ if (xhr.status === 0) return;
+
+ if (callbacks.onNon200)
+ callbacks.onNon200(xhr);
+ }
+ };
+
+ xhr.ontimeout = function () {
+ if (callbacks.onTimeout)
+ callbacks.onTimeout(xhr);
+ };
+
+ xhr.onerror = function () {
+ if (callbacks.onError)
+ callbacks.onError(xhr);
+ };
+
+ if (options.payload)
+ xhr.send(options.payload);
+ else
+ xhr.send();
+ },
+ /** @private */
+ _xhrRetry: function(method, url, options, callbacks) {
+ if (options.retries <= 0) {
+ console.warn('Failed to pull', options.entity_name);
+ if (callbacks.onTotalFail)
+ callbacks.onTotalFail();
+ return;
+ }
+ helpers._xhr(method, url, options, callbacks);
+ },
+ /**
+ * @callback callbackXhrOn200
+ * @param {Object} response - xhr.response
+ */
+ /**
+ * @callback callbackXhrError
+ * @param {XMLHttpRequest} xhr
+ */
+ /**
+ * @param {'GET'|'POST'} method - 'GET' or 'POST'
+ * @param {String} url - URL to send request to
+ * @param {Object} options - other XHR options
+ * @param {XMLHttpRequestBodyInit} [options.payload=null] - payload for POST-requests
+ * @param {'arraybuffer'|'blob'|'document'|'json'|'text'} [options.responseType=json]
+ * @param {Number} [options.timeout=10000]
+ * @param {Number} [options.retries=1]
+ * @param {String} [options.entity_name='unknown'] - string to log
+ * @param {Number} [options.retry_timeout=1000]
+ * @param {Object} callbacks - functions to execute on events fired
+ * @param {callbackXhrOn200} [callbacks.on200]
+ * @param {callbackXhrError} [callbacks.onNon200]
+ * @param {callbackXhrError} [callbacks.onTimeout]
+ * @param {callbackXhrError} [callbacks.onError]
+ * @param {callbackXhrError} [callbacks.onTotalFail] - if failed after all retries
+ */
+ xhr: function(method, url, options, callbacks) {
+ if (!options.retries || options.retries <= 1) {
+ helpers._xhr(method, url, options, callbacks);
+ return;
+ }
+
+ if (!options.entity_name) options.entity_name = 'unknown';
+ if (!options.retry_timeout) options.retry_timeout = 1000;
+ const retries_total = options.retries;
+ let currentTry = 1;
+
+ const retry = function () {
+ console.warn('Pulling ' + options.entity_name + ' failed... ' + (currentTry++) + '/' + retries_total);
+ setTimeout(function () {
+ options.retries--;
+ helpers._xhrRetry(method, url, options, callbacks);
+ }, options.retry_timeout);
+ };
+
+ // Pack retry() call into error handlers
+ callbacks._onError = callbacks.onError;
+ callbacks.onError = function (xhr) {
+ if (callbacks._onError)
+ callbacks._onError(xhr);
+ retry();
+ };
+ callbacks._onTimeout = callbacks.onTimeout;
+ callbacks.onTimeout = function (xhr) {
+ if (callbacks._onTimeout)
+ callbacks._onTimeout(xhr);
+ retry();
+ };
+
+ helpers._xhrRetry(method, url, options, callbacks);
+ },
+
+ /**
+ * @typedef {Object} invidiousStorage
+ * @property {(key:String) => Object} get
+ * @property {(key:String, value:Object)} set
+ * @property {(key:String)} remove
+ */
+
+ /**
+ * Universal storage, stores and returns JS objects. Uses inside localStorage or cookies
+ * @type {invidiousStorage}
+ */
+ storage: (function () {
+ // access to localStorage throws exception in Tor Browser, so try is needed
+ let localStorageIsUsable = false;
+ try{localStorageIsUsable = !!localStorage.setItem;}catch(e){}
+
+ if (localStorageIsUsable) {
+ return {
+ get: function (key) {
+ if (!localStorage[key]) return;
+ try {
+ return JSON.parse(decodeURIComponent(localStorage[key]));
+ } catch(e) {
+ // Erase non parsable value
+ helpers.storage.remove(key);
+ }
+ },
+ set: function (key, value) { localStorage[key] = encodeURIComponent(JSON.stringify(value)); },
+ remove: function (key) { localStorage.removeItem(key); }
+ };
+ }
+
+ // TODO: fire 'storage' event for cookies
+ console.info('Storage: localStorage is disabled or unaccessible. Cookies used as fallback');
+ return {
+ get: function (key) {
+ const cookiePrefix = key + '=';
+ function findCallback(cookie) {return cookie.startsWith(cookiePrefix);}
+ const matchedCookie = document.cookie.split('; ').find(findCallback);
+ if (matchedCookie) {
+ const cookieBody = matchedCookie.replace(cookiePrefix, '');
+ if (cookieBody.length === 0) return;
+ try {
+ return JSON.parse(decodeURIComponent(cookieBody));
+ } catch(e) {
+ // Erase non parsable value
+ helpers.storage.remove(key);
+ }
+ }
+ },
+ set: function (key, value) {
+ const cookie_data = encodeURIComponent(JSON.stringify(value));
+
+ // Set expiration in 2 year
+ const date = new Date();
+ date.setFullYear(date.getFullYear()+2);
+
+ document.cookie = key + '=' + cookie_data + '; expires=' + date.toGMTString();
+ },
+ remove: function (key) {
+ document.cookie = key + '=; Max-Age=0';
+ }
+ };
+ })()
+};
diff --git a/assets/js/community.js b/assets/js/community.js
index 44066a585..32fe4ebc3 100644
--- a/assets/js/community.js
+++ b/assets/js/community.js
@@ -1,13 +1,6 @@
'use strict';
var community_data = JSON.parse(document.getElementById('community_data').textContent);
-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 hide_youtube_replies(event) {
var target = event.target;
@@ -38,13 +31,6 @@ function show_youtube_replies(event) {
target.setAttribute('data-sub-text', sub_text);
}
-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_youtube_replies(target, load_more) {
var continuation = target.getAttribute('data-continuation');
@@ -58,47 +44,39 @@ function get_youtube_replies(target, load_more) {
'&hl=' + community_data.preferences.locale +
'&thin_mode=' + community_data.preferences.thin_mode +
'&continuation=' + continuation;
- 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', community_data.hide_replies_text);
- a.setAttribute('data-inner-text', community_data.show_replies_text);
- a.innerText = community_data.hide_replies_text;
-
- var div = document.createElement('div');
- div.innerHTML = xhr.response.contentHtml;
-
- body.appendChild(p);
- body.appendChild(div);
- }
+ helpers.xhr('GET', url, {}, {
+ on200: function (response) {
+ if (load_more) {
+ body = body.parentNode.parentNode;
+ body.removeChild(body.lastElementChild);
+ body.innerHTML += response.contentHtml;
} else {
- body.innerHTML = fallback;
+ 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', community_data.hide_replies_text);
+ a.setAttribute('data-inner-text', community_data.show_replies_text);
+ a.textContent = community_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;
}
- };
-
- xhr.ontimeout = function () {
- console.warn('Pulling comments failed.');
- body.innerHTML = fallback;
- };
-
- xhr.send();
+ });
}
diff --git a/assets/js/embed.js b/assets/js/embed.js
index 7e9ac6051..b11b5e5a6 100644
--- a/assets/js/embed.js
+++ b/assets/js/embed.js
@@ -1,14 +1,7 @@
'use strict';
var video_data = JSON.parse(document.getElementById('video_data').textContent);
-function get_playlist(plid, retries) {
- if (retries === undefined) retries = 5;
-
- if (retries <= 0) {
- console.warn('Failed to pull playlist');
- return;
- }
-
+function get_playlist(plid) {
var plid_url;
if (plid.startsWith('RD')) {
plid_url = '/api/v1/mixes/' + plid +
@@ -21,85 +14,49 @@ function get_playlist(plid, retries) {
'&format=html&hl=' + video_data.preferences.locale;
}
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('GET', plid_url, true);
+ helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, {
+ on200: function (response) {
+ if (!response.nextVideo)
+ return;
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4) {
- if (xhr.status === 200) {
- if (xhr.response.nextVideo) {
- player.on('ended', function () {
- var url = new URL('https://example.com/embed/' + xhr.response.nextVideo);
+ player.on('ended', function () {
+ var url = new URL('https://example.com/embed/' + response.nextVideo);
- url.searchParams.set('list', plid);
- if (!plid.startsWith('RD')) {
- url.searchParams.set('index', xhr.response.index);
- }
+ 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);
- 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);
- });
- }
- }
+ location.assign(url.pathname + url.search);
+ });
}
- };
-
- xhr.onerror = function () {
- console.warn('Pulling playlist failed... ' + retries + '/5');
- setTimeout(function () { get_playlist(plid, retries - 1); }, 1000);
- };
-
- xhr.ontimeout = function () {
- console.warn('Pulling playlist failed... ' + retries + '/5');
- get_playlist(plid, retries - 1);
- };
-
- xhr.send();
+ });
}
-window.addEventListener('load', function (e) {
+addEventListener('load', function (e) {
if (video_data.plid) {
get_playlist(video_data.plid);
} else if (video_data.video_series) {
player.on('ended', function () {
var url = new URL('https://example.com/embed/' + video_data.video_series.shift());
- 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);
- }
-
- if (video_data.video_series.length !== 0) {
+ if (video_data.video_series.length !== 0)
url.searchParams.set('playlist', video_data.video_series.join(','));
- }
location.assign(url.pathname + url.search);
});
diff --git a/assets/js/handlers.js b/assets/js/handlers.js
index f6617b608..29810e724 100644
--- a/assets/js/handlers.js
+++ b/assets/js/handlers.js
@@ -1,8 +1,6 @@
'use strict';
(function () {
- var n2a = function (n) { return Array.prototype.slice.call(n); };
-
var video_player = document.getElementById('player_html5_api');
if (video_player) {
video_player.onmouseenter = function () { video_player['data-title'] = video_player['title']; video_player['title'] = ''; };
@@ -11,8 +9,8 @@
}
// For dynamically inserted elements
- document.addEventListener('click', function (e) {
- if (!e || !e.target) { return; }
+ addEventListener('click', function (e) {
+ if (!e || !e.target) return;
var t = e.target;
var handler_name = t.getAttribute('data-onclick');
@@ -29,6 +27,7 @@
get_youtube_replies(t, load_more, load_replies);
break;
case 'toggle_parent':
+ e.preventDefault();
toggle_parent(t);
break;
default:
@@ -36,118 +35,98 @@
}
});
- n2a(document.querySelectorAll('[data-mouse="switch_classes"]')).forEach(function (e) {
- var classes = e.getAttribute('data-switch-classes').split(',');
- var ec = classes[0];
- var lc = classes[1];
- var onoff = function (on, off) {
- var cs = e.getAttribute('class');
- cs = cs.split(off).join(on);
- e.setAttribute('class', cs);
- };
- e.onmouseenter = function () { onoff(ec, lc); };
- e.onmouseleave = function () { onoff(lc, ec); };
+ document.querySelectorAll('[data-mouse="switch_classes"]').forEach(function (el) {
+ var classes = el.getAttribute('data-switch-classes').split(',');
+ var classOnEnter = classes[0];
+ var classOnLeave = classes[1];
+ function toggle_classes(toAdd, toRemove) {
+ el.classList.add(toAdd);
+ el.classList.remove(toRemove);
+ }
+ el.onmouseenter = function () { toggle_classes(classOnEnter, classOnLeave); };
+ el.onmouseleave = function () { toggle_classes(classOnLeave, classOnEnter); };
});
- n2a(document.querySelectorAll('[data-onsubmit="return_false"]')).forEach(function (e) {
- e.onsubmit = function () { return false; };
+ document.querySelectorAll('[data-onsubmit="return_false"]').forEach(function (el) {
+ el.onsubmit = function () { return false; };
});
- n2a(document.querySelectorAll('[data-onclick="mark_watched"]')).forEach(function (e) {
- e.onclick = function () { mark_watched(e); };
+ document.querySelectorAll('[data-onclick="mark_watched"]').forEach(function (el) {
+ el.onclick = function () { mark_watched(el); };
});
- n2a(document.querySelectorAll('[data-onclick="mark_unwatched"]')).forEach(function (e) {
- e.onclick = function () { mark_unwatched(e); };
+ document.querySelectorAll('[data-onclick="mark_unwatched"]').forEach(function (el) {
+ el.onclick = function () { mark_unwatched(el); };
});
- n2a(document.querySelectorAll('[data-onclick="add_playlist_video"]')).forEach(function (e) {
- e.onclick = function () { add_playlist_video(e); };
+ document.querySelectorAll('[data-onclick="add_playlist_video"]').forEach(function (el) {
+ el.onclick = function () { add_playlist_video(el); };
});
- n2a(document.querySelectorAll('[data-onclick="add_playlist_item"]')).forEach(function (e) {
- e.onclick = function () { add_playlist_item(e); };
+ document.querySelectorAll('[data-onclick="add_playlist_item"]').forEach(function (el) {
+ el.onclick = function () { add_playlist_item(el); };
});
- n2a(document.querySelectorAll('[data-onclick="remove_playlist_item"]')).forEach(function (e) {
- e.onclick = function () { remove_playlist_item(e); };
+ document.querySelectorAll('[data-onclick="remove_playlist_item"]').forEach(function (el) {
+ el.onclick = function () { remove_playlist_item(el); };
});
- n2a(document.querySelectorAll('[data-onclick="revoke_token"]')).forEach(function (e) {
- e.onclick = function () { revoke_token(e); };
+ document.querySelectorAll('[data-onclick="revoke_token"]').forEach(function (el) {
+ el.onclick = function () { revoke_token(el); };
});
- n2a(document.querySelectorAll('[data-onclick="remove_subscription"]')).forEach(function (e) {
- e.onclick = function () { remove_subscription(e); };
+ document.querySelectorAll('[data-onclick="remove_subscription"]').forEach(function (el) {
+ el.onclick = function () { remove_subscription(el); };
});
- n2a(document.querySelectorAll('[data-onclick="notification_requestPermission"]')).forEach(function (e) {
- e.onclick = function () { Notification.requestPermission(); };
+ document.querySelectorAll('[data-onclick="notification_requestPermission"]').forEach(function (el) {
+ el.onclick = function () { Notification.requestPermission(); };
});
- n2a(document.querySelectorAll('[data-onrange="update_volume_value"]')).forEach(function (e) {
- var cb = function () { update_volume_value(e); };
- e.oninput = cb;
- e.onchange = cb;
+ document.querySelectorAll('[data-onrange="update_volume_value"]').forEach(function (el) {
+ function update_volume_value() {
+ document.getElementById('volume-value').textContent = el.value;
+ }
+ el.oninput = update_volume_value;
+ el.onchange = update_volume_value;
});
- function update_volume_value(element) {
- document.getElementById('volume-value').innerText = element.value;
- }
function revoke_token(target) {
var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
row.style.display = 'none';
var count = document.getElementById('count');
- count.innerText = count.innerText - 1;
+ count.textContent--;
- var referer = window.encodeURIComponent(document.location.href);
var url = '/token_ajax?action_revoke_token=1&redirect=false' +
- '&referer=' + referer +
+ '&referer=' + encodeURIComponent(location.href) +
'&session=' + target.getAttribute('data-session');
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('POST', url, true);
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4) {
- if (xhr.status !== 200) {
- count.innerText = parseInt(count.innerText) + 1;
- row.style.display = '';
- }
+ var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
+
+ helpers.xhr('POST', url, {payload: payload}, {
+ onNon200: function (xhr) {
+ count.textContent++;
+ row.style.display = '';
}
- };
-
- var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
- xhr.send('csrf_token=' + csrf_token);
+ });
}
function remove_subscription(target) {
var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
row.style.display = 'none';
var count = document.getElementById('count');
- count.innerText = count.innerText - 1;
+ count.textContent--;
- var referer = window.encodeURIComponent(document.location.href);
var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
- '&referer=' + referer +
+ '&referer=' + encodeURIComponent(location.href) +
'&c=' + target.getAttribute('data-ucid');
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('POST', url, true);
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4) {
- if (xhr.status !== 200) {
- count.innerText = parseInt(count.innerText) + 1;
- row.style.display = '';
- }
+ var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
+
+ helpers.xhr('POST', url, {payload: payload}, {
+ onNon200: function (xhr) {
+ count.textContent++;
+ row.style.display = '';
}
- };
-
- var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
- xhr.send('csrf_token=' + csrf_token);
+ });
}
// Handle keypresses
- window.addEventListener('keydown', function (event) {
+ addEventListener('keydown', function (event) {
// Ignore modifier keys
if (event.ctrlKey || event.metaKey) return;
diff --git a/assets/js/notifications.js b/assets/js/notifications.js
index ec5f6dd30..058553d9d 100644
--- a/assets/js/notifications.js
+++ b/assets/js/notifications.js
@@ -1,43 +1,26 @@
'use strict';
var notification_data = JSON.parse(document.getElementById('notification_data').textContent);
+/** Boolean meaning 'some tab have stream' */
+const STORAGE_KEY_STREAM = 'stream';
+/** Number of notifications. May be increased or reset */
+const STORAGE_KEY_NOTIF_COUNT = 'notification_count';
+
var notifications, delivered;
+var notifications_mock = { close: function () { } };
-function get_subscriptions(callback, retries) {
- if (retries === undefined) retries = 5;
-
- if (retries <= 0) {
- return;
- }
-
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('GET', '/api/v1/auth/subscriptions?fields=authorId', true);
-
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4) {
- if (xhr.status === 200) {
- var subscriptions = xhr.response;
- callback(subscriptions);
- }
- }
- };
-
- xhr.onerror = function () {
- console.warn('Pulling subscriptions failed... ' + retries + '/5');
- setTimeout(function () { get_subscriptions(callback, retries - 1); }, 1000);
- };
-
- xhr.ontimeout = function () {
- console.warn('Pulling subscriptions failed... ' + retries + '/5');
- get_subscriptions(callback, retries - 1);
- };
-
- xhr.send();
+function get_subscriptions() {
+ helpers.xhr('GET', '/api/v1/auth/subscriptions?fields=authorId', {
+ retries: 5,
+ entity_name: 'subscriptions'
+ }, {
+ on200: create_notification_stream
+ });
}
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', {
withCredentials: true,
@@ -49,96 +32,100 @@ function create_notification_stream(subscriptions) {
var start_time = Math.round(new Date() / 1000);
notifications.onmessage = function (event) {
- if (!event.id) {
- return;
- }
+ if (!event.id) return;
var notification = JSON.parse(event.data);
console.info('Got notification:', notification);
- if (start_time < notification.published && !delivered.includes(notification.videoId)) {
- if (Notification.permission === 'granted') {
- var system_notification =
- new Notification((notification.liveNow ? notification_data.live_now_text : notification_data.upload_text).replace('`x`', notification.author), {
- body: notification.title,
- icon: '/ggpht' + new URL(notification.authorThumbnails[2].url).pathname,
- img: '/ggpht' + new URL(notification.authorThumbnails[4].url).pathname,
- tag: notification.videoId
- });
+ // Ignore not actual and delivered notifications
+ if (start_time > notification.published || delivered.includes(notification.videoId)) return;
- system_notification.onclick = function (event) {
- window.open('/watch?v=' + event.currentTarget.tag, '_blank');
- };
- }
+ delivered.push(notification.videoId);
- delivered.push(notification.videoId);
- localStorage.setItem('notification_count', parseInt(localStorage.getItem('notification_count') || '0') + 1);
- var notification_ticker = document.getElementById('notification_ticker');
+ let notification_count = helpers.storage.get(STORAGE_KEY_NOTIF_COUNT) || 0;
+ notification_count++;
+ helpers.storage.set(STORAGE_KEY_NOTIF_COUNT, notification_count);
- if (parseInt(localStorage.getItem('notification_count')) > 0) {
- notification_ticker.innerHTML =
- '' + localStorage.getItem('notification_count') + ' ' + notification_count + ' ' + e.newValue + ' ' + subscribe_data.unsubscribe_text + ' | ' + subscribe_data.sub_count_text + ' ';
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4) {
- if (xhr.status !== 200) {
- subscribe_button.onclick = subscribe;
- subscribe_button.innerHTML = fallback;
- }
+ var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' +
+ '&c=' + subscribe_data.ucid;
+
+ helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'subscribe request'}, {
+ onNon200: function (xhr) {
+ subscribe_button.onclick = subscribe;
+ subscribe_button.innerHTML = fallback;
}
- };
-
- xhr.onerror = function () {
- console.warn('Subscribing failed... ' + retries + '/5');
- setTimeout(function () { subscribe(retries - 1); }, 1000);
- };
-
- xhr.ontimeout = function () {
- console.warn('Subscribing failed... ' + retries + '/5');
- subscribe(retries - 1);
- };
-
- xhr.send('csrf_token=' + subscribe_data.csrf_token);
+ });
}
-function unsubscribe(retries) {
- if (retries === undefined)
- retries = 5;
-
- if (retries <= 0) {
- console.warn('Failed to subscribe');
- return;
- }
-
- var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
- '&c=' + subscribe_data.ucid;
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('POST', url, true);
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
+function unsubscribe() {
var fallback = subscribe_button.innerHTML;
subscribe_button.onclick = subscribe;
subscribe_button.innerHTML = '' + subscribe_data.subscribe_text + ' | ' + subscribe_data.sub_count_text + ' ';
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4) {
- if (xhr.status !== 200) {
- subscribe_button.onclick = unsubscribe;
- subscribe_button.innerHTML = fallback;
- }
+ var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
+ '&c=' + subscribe_data.ucid;
+
+ helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'unsubscribe request'}, {
+ onNon200: function (xhr) {
+ subscribe_button.onclick = unsubscribe;
+ subscribe_button.innerHTML = fallback;
}
- };
-
- xhr.onerror = function () {
- console.warn('Unsubscribing failed... ' + retries + '/5');
- setTimeout(function () { unsubscribe(retries - 1); }, 1000);
- };
-
- xhr.ontimeout = function () {
- console.warn('Unsubscribing failed... ' + retries + '/5');
- unsubscribe(retries - 1);
- };
-
- xhr.send('csrf_token=' + subscribe_data.csrf_token);
+ });
}
diff --git a/assets/js/themes.js b/assets/js/themes.js
index 3f503b385..76767d5f3 100644
--- a/assets/js/themes.js
+++ b/assets/js/themes.js
@@ -1,90 +1,44 @@
'use strict';
var toggle_theme = document.getElementById('toggle_theme');
-toggle_theme.href = 'javascript:void(0);';
+toggle_theme.href = 'javascript:void(0)';
+const STORAGE_KEY_THEME = 'dark_mode';
+const THEME_DARK = 'dark';
+const THEME_LIGHT = 'light';
+
+// TODO: theme state controlled by system
toggle_theme.addEventListener('click', function () {
- var dark_mode = document.body.classList.contains('light-theme');
-
- var url = '/toggle_theme?redirect=false';
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('GET', url, true);
-
- set_mode(dark_mode);
- try {
- window.localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light');
- } catch (e) {}
-
- xhr.send();
+ const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
+ const newTheme = isDarkTheme ? THEME_LIGHT : THEME_DARK;
+ setTheme(newTheme);
+ helpers.storage.set(STORAGE_KEY_THEME, newTheme);
+ helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
});
-window.addEventListener('storage', function (e) {
- if (e.key === 'dark_mode') {
- update_mode(e.newValue);
- }
-});
-
-window.addEventListener('DOMContentLoaded', function () {
- const dark_mode = document.getElementById('dark_mode_pref').textContent;
- try {
- // Update localStorage if dark mode preference changed on preferences page
- window.localStorage.setItem('dark_mode', dark_mode);
- } catch (e) {}
- update_mode(dark_mode);
-});
-
-
-var darkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-var lightScheme = window.matchMedia('(prefers-color-scheme: light)');
-
-darkScheme.addListener(scheme_switch);
-lightScheme.addListener(scheme_switch);
-
-function scheme_switch (e) {
- // ignore this method if we have a preference set
- try {
- if (localStorage.getItem('dark_mode')) {
- return;
- }
- } catch (exception) {}
- if (e.matches) {
- if (e.media.includes('dark')) {
- set_mode(true);
- } else if (e.media.includes('light')) {
- set_mode(false);
- }
- }
-}
-
-function set_mode (bool) {
- if (bool) {
- // dark
- toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
- document.body.classList.remove('no-theme');
- document.body.classList.remove('light-theme');
- document.body.classList.add('dark-theme');
+/** @param {THEME_DARK|THEME_LIGHT} theme */
+function setTheme(theme) {
+ // By default body element has .no-theme class that uses OS theme via CSS @media rules
+ // It rewrites using hard className below
+ if (theme === THEME_DARK) {
+ toggle_theme.children[0].className = 'icon ion-ios-sunny';
+ document.body.className = 'dark-theme';
} else {
- // light
- toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
- document.body.classList.remove('no-theme');
- document.body.classList.remove('dark-theme');
- document.body.classList.add('light-theme');
+ toggle_theme.children[0].className = 'icon ion-ios-moon';
+ document.body.className = 'light-theme';
}
}
-function update_mode (mode) {
- if (mode === 'true' /* for backwards compatibility */ || mode === 'dark') {
- // If preference for dark mode indicated
- set_mode(true);
+// Handles theme change event caused by other tab
+addEventListener('storage', function (e) {
+ if (e.key === STORAGE_KEY_THEME)
+ setTheme(helpers.storage.get(STORAGE_KEY_THEME));
+});
+
+// Set theme from preferences on page load
+addEventListener('DOMContentLoaded', function () {
+ const prefTheme = document.getElementById('dark_mode_pref').textContent;
+ if (prefTheme) {
+ setTheme(prefTheme);
+ helpers.storage.set(STORAGE_KEY_THEME, prefTheme);
}
- else if (mode === 'false' /* for backwards compatibility */ || mode === 'light') {
- // If preference for light mode indicated
- set_mode(false);
- }
- else if (document.getElementById('dark_mode_pref').textContent === '' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
- // If no preference indicated here and no preference indicated on the preferences page (backend), but the browser tells us that the operating system has a dark theme
- set_mode(true);
- }
- // else do nothing, falling back to the mode defined by the `dark_mode` preference on the preferences page (backend)
-}
+});
diff --git a/assets/js/watch.js b/assets/js/watch.js
index 29d58be52..cff84e4d2 100644
--- a/assets/js/watch.js
+++ b/assets/js/watch.js
@@ -1,5 +1,7 @@
'use strict';
var video_data = JSON.parse(document.getElementById('video_data').textContent);
+var spinnerHTML = '
';
+var spinnerHTMLwithHR = spinnerHTML + '
\
-
';
+ 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 = ' \
- \
-
\
- [ − ] \
- {title} \
- \
-
\
- \
- \
- {youtubeCommentsText} \
- \
- \
-
\
+ 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 = ' \
+
\
-
{contentHtml}
\
-
'.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
- });
+ \
+
\
+ {redditPermalinkText} \
+ \
+
{contentHtml}
\
+
';
+ 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 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 = ' \
- \
- {contentHtml}
\
- {contentHtml}
\
+
';
- console.warn('Pulling comments failed... ' + retries + '/5');
- setTimeout(function () { get_youtube_comments(retries - 1); }, 1000);
- };
-
- xhr.ontimeout = function () {
- comments.innerHTML =
- '
';
- console.warn('Pulling comments failed... ' + retries + '/5');
- get_youtube_comments(retries - 1);
- };
-
- xhr.send();
+ });
}
function get_youtube_replies(target, load_more, load_replies) {
@@ -368,91 +268,72 @@ function get_youtube_replies(target, load_more, load_replies) {
var body = target.parentNode.parentNode;
var fallback = body.innerHTML;
- 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';
- }
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('GET', url, true);
+ if (load_replies) url += '&action=action_get_comment_replies';
- 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);
- }
+ helpers.xhr('GET', url, {}, {
+ on200: function (response) {
+ if (load_more) {
+ body = body.parentNode.parentNode;
+ body.removeChild(body.lastElementChild);
+ body.innerHTML += response.contentHtml;
} else {
- body.innerHTML = fallback;
+ 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;
}
- };
-
- xhr.ontimeout = function () {
- console.warn('Pulling comments failed.');
- body.innerHTML = fallback;
- };
-
- xhr.send();
+ });
}
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();
diff --git a/assets/js/watched_widget.js b/assets/js/watched_widget.js
index 87989a795..f1ac9cb47 100644
--- a/assets/js/watched_widget.js
+++ b/assets/js/watched_widget.js
@@ -1,5 +1,6 @@
'use strict';
var watched_data = JSON.parse(document.getElementById('watched_data').textContent);
+var payload = 'csrf_token=' + watched_data.csrf_token;
function mark_watched(target) {
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
@@ -7,45 +8,27 @@ function mark_watched(target) {
var url = '/watch_ajax?action_mark_watched=1&redirect=false' +
'&id=' + target.getAttribute('data-id');
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('POST', url, true);
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4) {
- if (xhr.status !== 200) {
- tile.style.display = '';
- }
+ helpers.xhr('POST', url, {payload: payload}, {
+ onNon200: function (xhr) {
+ tile.style.display = '';
}
- };
-
- xhr.send('csrf_token=' + watched_data.csrf_token);
+ });
}
function mark_unwatched(target) {
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
tile.style.display = 'none';
var count = document.getElementById('count');
- count.innerText = count.innerText - 1;
+ count.textContent--;
var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' +
'&id=' + target.getAttribute('data-id');
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'json';
- xhr.timeout = 10000;
- xhr.open('POST', url, true);
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- xhr.onreadystatechange = function () {
- if (xhr.readyState === 4) {
- if (xhr.status !== 200) {
- count.innerText = count.innerText - 1 + 2;
- tile.style.display = '';
- }
+ helpers.xhr('POST', url, {payload: payload}, {
+ onNon200: function (xhr) {
+ count.textContent++;
+ tile.style.display = '';
}
- };
-
- xhr.send('csrf_token=' + watched_data.csrf_token);
+ });
}
diff --git a/src/invidious/comments.cr b/src/invidious/comments.cr
index d84969784..15a15224f 100644
--- a/src/invidious/comments.cr
+++ b/src/invidious/comments.cr
@@ -481,7 +481,7 @@ def template_reddit_comments(root, locale)
html << <<-END_HTML
- [ - ]
+ [ − ]
#{child.author} #{translate(locale, "`x` ago", recode_date(child.created_utc, locale))}
diff --git a/src/invidious/views/licenses.ecr b/src/invidious/views/licenses.ecr
index 861913d04..25b24ed48 100644
--- a/src/invidious/views/licenses.ecr
+++ b/src/invidious/views/licenses.ecr
@@ -9,6 +9,20 @@
<%= translate(locale, "JavaScript license information") %>
+
+
+ _helpers.js
+
+
+
+ AGPL-3.0
+
+
+
+ <%= translate(locale, "source") %>
+
+
+
community.js
diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr
index bd908dd68..4e2b29f08 100644
--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@@ -17,6 +17,7 @@
<%= rv["title"] %>
-
-
-
-
- <%=
- views = rv["view_count"]?.try &.to_i?
- views ||= rv["view_count_short"]?.try { |x| short_text_to_number(x) }
- translate_count(locale, "generic_views_count", views || 0, NumberFormatting::Short)
- %>
-
-
+
+
+
+
+ <%=
+ views = rv["view_count"]?.try &.to_i?
+ views ||= rv["view_count_short"]?.try { |x| short_text_to_number(x) }
+ translate_count(locale, "generic_views_count", views || 0, NumberFormatting::Short)
+ %>
+
+
<% end %>
<% end %>