lug/invidious
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js code rewrite. Created _helpers.js with XHR and storage wrapper

Browse Source
This commit is contained in:
meow 2022-05-06 04:46:59 +03:00
parent ef8c7184de
commit 7dd699370f
23 changed files with 735 additions and 901 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
assets/js/_helpers.js Normal file
View File

@ -0,0 +1,218 @@
'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;
};
// Monstrous global variable for handy code
helpers = 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');
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200)
if (callbacks.on200)
callbacks.on200(xhr.response);
else
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(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(method, url, options, callbacks) {
if (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 = 1;
const retries_total = options.retries;
const retry = function () {
console.warn('Pulling ' + options.entity_name + ' failed... ' + options.retries + '/' + retries_total);
setTimeout(function () {
options.retries--;
helpers._xhrRetry(method, url, options, callbacks);
}, options.retry_timeout);
};
if (callbacks.onError)
callbacks._onError = callbacks.onError;
callbacks.onError = function (xhr) {
if (callbacks._onError)
callbacks._onError();
retry();
};
if (callbacks.onTimeout)
callbacks._onTimeout = callbacks.onTimeout;
callbacks.onTimeout = function (xhr) {
if (callbacks._onTimeout)
callbacks._onTimeout();
retry();
};
helpers._xhrRetry(method, url, options, callbacks);
},
/**
* @typedef {Object} invidiousStorage
* @property {(key:String) => Object|null} get
* @property {(key:String, value:Object) => null} set
* @property {(key:String) => null} remove
*/
/**
* Universal storage proxy. 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) { return localStorage[key]; },
set: function (key, value) { localStorage[key] = value; },
remove: function (key) { localStorage.removeItem(key); }
};
}
console.info('Storage: localStorage is disabled or unaccessible trying cookies');
return {
get: function (key) {
const cookiePrefix = key + '=';
function findCallback(cookie) {return cookie.startsWith(cookiePrefix);}
const matchedCookie = document.cookie.split(';').find(findCallback);
if (matchedCookie)
return matchedCookie.replace(cookiePrefix, '');
return null;
},
set: function (key, value) {
const cookie_data = encodeURIComponent(JSON.stringify(value));
// Set expiration in 2 year
const date = new Date();
date.setTime(date.getTime() + 2*365.25*24*60*60);
const ip_regex = /^((\d+\.){3}\d+|[A-Fa-f0-9]*:[A-Fa-f0-9:]*:[A-Fa-f0-9:]+)$/;
let domain_used = location.hostname;
// Fix for a bug in FF where the leading dot in the FQDN is not ignored
if (domain_used.charAt(0) !== '.' && !ip_regex.test(domain_used) && domain_used !== 'localhost')
domain_used = '.' + location.hostname;
document.cookie = key + '=' + cookie_data + '; SameSite=Strict; path=/; domain=' +
domain_used + '; expires=' + date.toGMTString() + ';';
},
remove: function (key) {
document.cookie = key + '=; Max-Age=0';
}
};
})()
};

44
assets/js/community.js
View File

@ -1,13 +1,6 @@
'use strict'; 'use strict';
var community_data = JSON.parse(document.getElementById('community_data').textContent); 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) { function hide_youtube_replies(event) {
var target = event.target; var target = event.target;
@ -38,13 +31,6 @@ function show_youtube_replies(event) {
target.setAttribute('data-sub-text', sub_text); 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) { function get_youtube_replies(target, load_more) {
var continuation = target.getAttribute('data-continuation'); var continuation = target.getAttribute('data-continuation');
@ -58,18 +44,13 @@ function get_youtube_replies(target, load_more) {
'&hl=' + community_data.preferences.locale + '&hl=' + community_data.preferences.locale +
'&thin_mode=' + community_data.preferences.thin_mode + '&thin_mode=' + community_data.preferences.thin_mode +
'&continuation=' + continuation; '&continuation=' + continuation;
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.timeout = 10000;
xhr.open('GET', url, true);
xhr.onreadystatechange = function () { helpers.xhr('GET', url, {}, {
if (xhr.readyState === 4) { on200: function (response) {
if (xhr.status === 200) {
if (load_more) { if (load_more) {
body = body.parentNode.parentNode; body = body.parentNode.parentNode;
body.removeChild(body.lastElementChild); body.removeChild(body.lastElementChild);
body.innerHTML += xhr.response.contentHtml; body.innerHTML += response.contentHtml;
} else { } else {
body.removeChild(body.lastElementChild); body.removeChild(body.lastElementChild);
@ -84,21 +65,18 @@ function get_youtube_replies(target, load_more) {
a.innerText = community_data.hide_replies_text; a.innerText = community_data.hide_replies_text;
var div = document.createElement('div'); var div = document.createElement('div');
div.innerHTML = xhr.response.contentHtml; div.innerHTML = response.contentHtml;
body.appendChild(p); body.appendChild(p);
body.appendChild(div); body.appendChild(div);
} }
} else { },
onNon200: function (xhr) {
body.innerHTML = fallback;
},
onTimeout: function (xhr) {
console.warn('Pulling comments failed');
body.innerHTML = fallback; body.innerHTML = fallback;
} }
} });
};
xhr.ontimeout = function () {
console.warn('Pulling comments failed.');
body.innerHTML = fallback;
};
xhr.send();
} }

81
assets/js/embed.js
View File

@ -1,14 +1,7 @@
'use strict'; 'use strict';
var video_data = JSON.parse(document.getElementById('video_data').textContent); var video_data = JSON.parse(document.getElementById('video_data').textContent);
function get_playlist(plid, retries) { function get_playlist(plid) {
if (retries === undefined) retries = 5;
if (retries <= 0) {
console.warn('Failed to pull playlist');
return;
}
var plid_url; var plid_url;
if (plid.startsWith('RD')) { if (plid.startsWith('RD')) {
plid_url = '/api/v1/mixes/' + plid + plid_url = '/api/v1/mixes/' + plid +
@ -21,85 +14,49 @@ function get_playlist(plid, retries) {
'&format=html&hl=' + video_data.preferences.locale; '&format=html&hl=' + video_data.preferences.locale;
} }
var xhr = new XMLHttpRequest(); helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, {
xhr.responseType = 'json'; on200: function (response) {
xhr.timeout = 10000; if (!response.nextVideo)
xhr.open('GET', plid_url, true); return;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (xhr.response.nextVideo) {
player.on('ended', function () { player.on('ended', function () {
var url = new URL('https://example.com/embed/' + xhr.response.nextVideo); var url = new URL('https://example.com/embed/' + response.nextVideo);
url.searchParams.set('list', plid); url.searchParams.set('list', plid);
if (!plid.startsWith('RD')) { if (!plid.startsWith('RD'))
url.searchParams.set('index', xhr.response.index); url.searchParams.set('index', response.index);
} 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'); 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); 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); 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('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) { if (video_data.plid) {
get_playlist(video_data.plid); get_playlist(video_data.plid);
} else if (video_data.video_series) { } else if (video_data.video_series) {
player.on('ended', function () { player.on('ended', function () {
var url = new URL('https://example.com/embed/' + video_data.video_series.shift()); 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'); 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); 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); 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('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(',')); url.searchParams.set('playlist', video_data.video_series.join(','));
}
location.assign(url.pathname + url.search); location.assign(url.pathname + url.search);
}); });

153
assets/js/handlers.js
View File

@ -1,8 +1,6 @@
'use strict'; 'use strict';
(function () { (function () {
var n2a = function (n) { return Array.prototype.slice.call(n); };
var video_player = document.getElementById('player_html5_api'); var video_player = document.getElementById('player_html5_api');
if (video_player) { if (video_player) {
video_player.onmouseenter = function () { video_player['data-title'] = video_player['title']; video_player['title'] = ''; }; video_player.onmouseenter = function () { video_player['data-title'] = video_player['title']; video_player['title'] = ''; };
@ -11,8 +9,8 @@
} }
// For dynamically inserted elements // For dynamically inserted elements
document.addEventListener('click', function (e) { addEventListener('click', function (e) {
if (!e || !e.target) { return; } if (!e || !e.target) return;
var t = e.target; var t = e.target;
var handler_name = t.getAttribute('data-onclick'); var handler_name = t.getAttribute('data-onclick');
@ -29,6 +27,7 @@
get_youtube_replies(t, load_more, load_replies); get_youtube_replies(t, load_more, load_replies);
break; break;
case 'toggle_parent': case 'toggle_parent':
e.preventDefault();
toggle_parent(t); toggle_parent(t);
break; break;
default: default:
@ -36,118 +35,98 @@
} }
}); });
n2a(document.querySelectorAll('[data-mouse="switch_classes"]')).forEach(function (e) { document.querySelectorAll('[data-mouse="switch_classes"]').forEach(function (el) {
var classes = e.getAttribute('data-switch-classes').split(','); var classes = el.getAttribute('data-switch-classes').split(',');
var ec = classes[0]; var classOnEnter = classes[0];
var lc = classes[1]; var classOnLeave = classes[1];
var onoff = function (on, off) { function toggle_classes(toAdd, toRemove) {
var cs = e.getAttribute('class'); el.classList.add(toAdd);
cs = cs.split(off).join(on); el.classList.remove(toRemove);
e.setAttribute('class', cs);
};
e.onmouseenter = function () { onoff(ec, lc); };
e.onmouseleave = function () { onoff(lc, ec); };
});
n2a(document.querySelectorAll('[data-onsubmit="return_false"]')).forEach(function (e) {
e.onsubmit = function () { return false; };
});
n2a(document.querySelectorAll('[data-onclick="mark_watched"]')).forEach(function (e) {
e.onclick = function () { mark_watched(e); };
});
n2a(document.querySelectorAll('[data-onclick="mark_unwatched"]')).forEach(function (e) {
e.onclick = function () { mark_unwatched(e); };
});
n2a(document.querySelectorAll('[data-onclick="add_playlist_video"]')).forEach(function (e) {
e.onclick = function () { add_playlist_video(e); };
});
n2a(document.querySelectorAll('[data-onclick="add_playlist_item"]')).forEach(function (e) {
e.onclick = function () { add_playlist_item(e); };
});
n2a(document.querySelectorAll('[data-onclick="remove_playlist_item"]')).forEach(function (e) {
e.onclick = function () { remove_playlist_item(e); };
});
n2a(document.querySelectorAll('[data-onclick="revoke_token"]')).forEach(function (e) {
e.onclick = function () { revoke_token(e); };
});
n2a(document.querySelectorAll('[data-onclick="remove_subscription"]')).forEach(function (e) {
e.onclick = function () { remove_subscription(e); };
});
n2a(document.querySelectorAll('[data-onclick="notification_requestPermission"]')).forEach(function (e) {
e.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;
});
function update_volume_value(element) {
document.getElementById('volume-value').innerText = element.value;
} }
el.onmouseenter = function () { toggle_classes(classOnEnter, classOnLeave); };
el.onmouseleave = function () { toggle_classes(classOnLeave, classOnEnter); };
});
document.querySelectorAll('[data-onsubmit="return_false"]').forEach(function (el) {
el.onsubmit = function () { return false; };
});
document.querySelectorAll('[data-onclick="mark_watched"]').forEach(function (el) {
el.onclick = function () { mark_watched(el); };
});
document.querySelectorAll('[data-onclick="mark_unwatched"]').forEach(function (el) {
el.onclick = function () { mark_unwatched(el); };
});
document.querySelectorAll('[data-onclick="add_playlist_video"]').forEach(function (el) {
el.onclick = function () { add_playlist_video(el); };
});
document.querySelectorAll('[data-onclick="add_playlist_item"]').forEach(function (el) {
el.onclick = function () { add_playlist_item(el); };
});
document.querySelectorAll('[data-onclick="remove_playlist_item"]').forEach(function (el) {
el.onclick = function () { remove_playlist_item(el); };
});
document.querySelectorAll('[data-onclick="revoke_token"]').forEach(function (el) {
el.onclick = function () { revoke_token(el); };
});
document.querySelectorAll('[data-onclick="remove_subscription"]').forEach(function (el) {
el.onclick = function () { remove_subscription(el); };
});
document.querySelectorAll('[data-onclick="notification_requestPermission"]').forEach(function (el) {
el.onclick = function () { Notification.requestPermission(); };
});
document.querySelectorAll('[data-onrange="update_volume_value"]').forEach(function (el) {
function update_volume_value() {
document.getElementById('volume-value').innerText = el.value;
}
el.oninput = update_volume_value;
el.onchange = update_volume_value;
});
function revoke_token(target) { function revoke_token(target) {
var row = target.parentNode.parentNode.parentNode.parentNode.parentNode; var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
row.style.display = 'none'; row.style.display = 'none';
var count = document.getElementById('count'); var count = document.getElementById('count');
count.innerText = count.innerText - 1; count.innerText = parseInt(count.innerText) - 1;
var referer = window.encodeURIComponent(document.location.href);
var url = '/token_ajax?action_revoke_token=1&redirect=false' + var url = '/token_ajax?action_revoke_token=1&redirect=false' +
'&referer=' + referer + '&referer=' + encodeURIComponent(location.href) +
'&session=' + target.getAttribute('data-session'); '&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 () { var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
if (xhr.readyState === 4) {
if (xhr.status !== 200) { helpers.xhr('POST', url, {payload: payload}, {
onNon200: function (xhr) {
count.innerText = parseInt(count.innerText) + 1; count.innerText = parseInt(count.innerText) + 1;
row.style.display = ''; row.style.display = '';
} }
} });
};
var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
xhr.send('csrf_token=' + csrf_token);
} }
function remove_subscription(target) { function remove_subscription(target) {
var row = target.parentNode.parentNode.parentNode.parentNode.parentNode; var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
row.style.display = 'none'; row.style.display = 'none';
var count = document.getElementById('count'); var count = document.getElementById('count');
count.innerText = count.innerText - 1; count.innerText = parseInt(count.innerText) - 1;
var referer = window.encodeURIComponent(document.location.href);
var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' + var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
'&referer=' + referer + '&referer=' + encodeURIComponent(location.href) +
'&c=' + target.getAttribute('data-ucid'); '&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 () { var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
if (xhr.readyState === 4) {
if (xhr.status !== 200) { helpers.xhr('POST', url, {payload: payload}, {
onNon200: function (xhr) {
count.innerText = parseInt(count.innerText) + 1; count.innerText = parseInt(count.innerText) + 1;
row.style.display = ''; row.style.display = '';
} }
} });
};
var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
xhr.send('csrf_token=' + csrf_token);
} }
// Handle keypresses // Handle keypresses
window.addEventListener('keydown', function (event) { addEventListener('keydown', function (event) {
// Ignore modifier keys // Ignore modifier keys
if (event.ctrlKey || event.metaKey) return; if (event.ctrlKey || event.metaKey) return;

92
assets/js/notifications.js
View File

@ -2,42 +2,20 @@
var notification_data = JSON.parse(document.getElementById('notification_data').textContent); var notification_data = JSON.parse(document.getElementById('notification_data').textContent);
var notifications, delivered; var notifications, delivered;
var notifications_substitution = { close: function () { } };
function get_subscriptions(callback, retries) { function get_subscriptions() {
if (retries === undefined) retries = 5; helpers.xhr('GET', '/api/v1/auth/subscriptions?fields=authorId', {
retries: 5,
if (retries <= 0) { entity_name: 'subscriptions'
return; }, {
} on200: create_notification_stream
});
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 create_notification_stream(subscriptions) { 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( notifications = new SSE(
'/api/v1/auth/notifications?fields=videoId,title,author,authorId,publishedText,published,authorThumbnails,liveNow', { '/api/v1/auth/notifications?fields=videoId,title,author,authorId,publishedText,published,authorThumbnails,liveNow', {
withCredentials: true, withCredentials: true,
@ -49,9 +27,7 @@ function create_notification_stream(subscriptions) {
var start_time = Math.round(new Date() / 1000); var start_time = Math.round(new Date() / 1000);
notifications.onmessage = function (event) { notifications.onmessage = function (event) {
if (!event.id) { if (!event.id) return;
return;
}
var notification = JSON.parse(event.data); var notification = JSON.parse(event.data);
console.info('Got notification:', notification); console.info('Got notification:', notification);
@ -67,17 +43,17 @@ function create_notification_stream(subscriptions) {
}); });
system_notification.onclick = function (event) { system_notification.onclick = function (event) {
window.open('/watch?v=' + event.currentTarget.tag, '_blank'); 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); helpers.storage.set('notification_count', parseInt(helpers.storage.get('notification_count') || '0') + 1);
var notification_ticker = document.getElementById('notification_ticker'); var notification_ticker = document.getElementById('notification_ticker');
if (parseInt(localStorage.getItem('notification_count')) > 0) { if (parseInt(helpers.storage.get('notification_count')) > 0) {
notification_ticker.innerHTML = notification_ticker.innerHTML =
'<span id="notification_count">' + localStorage.getItem('notification_count') + '</span> <i class="icon ion-ios-notifications"></i>'; '<span id="notification_count">' + helpers.storage.get('notification_count') + '</span> <i class="icon ion-ios-notifications"></i>';
} else { } else {
notification_ticker.innerHTML = notification_ticker.innerHTML =
'<i class="icon ion-ios-notifications-outline"></i>'; '<i class="icon ion-ios-notifications-outline"></i>';
@ -91,35 +67,35 @@ function create_notification_stream(subscriptions) {
function handle_notification_error(event) { function handle_notification_error(event) {
console.warn('Something went wrong with notifications, trying to reconnect...'); console.warn('Something went wrong with notifications, trying to reconnect...');
notifications = { close: function () { } }; notifications = notifications_substitution;
setTimeout(function () { get_subscriptions(create_notification_stream); }, 1000); setTimeout(get_subscriptions, 1000);
} }
window.addEventListener('load', function (e) { addEventListener('load', function (e) {
localStorage.setItem('notification_count', document.getElementById('notification_count') ? document.getElementById('notification_count').innerText : '0'); helpers.storage.set('notification_count', document.getElementById('notification_count') ? document.getElementById('notification_count').innerText : '0');
if (localStorage.getItem('stream')) { if (helpers.storage.get('stream')) {
localStorage.removeItem('stream'); helpers.storage.remove('stream');
} else { } else {
setTimeout(function () { setTimeout(function () {
if (!localStorage.getItem('stream')) { if (!helpers.storage.get('stream')) {
notifications = { close: function () { } }; notifications = notifications_substitution;
localStorage.setItem('stream', true); helpers.storage.set('stream', true);
get_subscriptions(create_notification_stream); get_subscriptions();
} }
}, Math.random() * 1000 + 50); }, Math.random() * 1000 + 50);
} }
window.addEventListener('storage', function (e) { addEventListener('storage', function (e) {
if (e.key === 'stream' && !e.newValue) { if (e.key === 'stream' && !e.newValue) {
if (notifications) { if (notifications) {
localStorage.setItem('stream', true); helpers.storage.set('stream', true);
} else { } else {
setTimeout(function () { setTimeout(function () {
if (!localStorage.getItem('stream')) { if (!helpers.storage.get('stream')) {
notifications = { close: function () { } }; notifications = notifications_substitution;
localStorage.setItem('stream', true); helpers.storage.set('stream', true);
get_subscriptions(create_notification_stream); get_subscriptions();
} }
}, Math.random() * 1000 + 50); }, Math.random() * 1000 + 50);
} }
@ -137,8 +113,6 @@ window.addEventListener('load', function (e) {
}); });
}); });
window.addEventListener('unload', function (e) { addEventListener('unload', function (e) {
if (notifications) { if (notifications) helpers.storage.remove('stream');
localStorage.removeItem('stream');
}
}); });

260
assets/js/player.js
View File

@ -42,7 +42,7 @@ embed_url = location.origin + '/embed/' + video_data.id + embed_url.search;
var save_player_pos_key = 'save_player_pos'; var save_player_pos_key = 'save_player_pos';
videojs.Vhs.xhr.beforeRequest = function(options) { videojs.Vhs.xhr.beforeRequest = function(options) {
if (options.uri.indexOf('videoplayback') === -1 && options.uri.indexOf('local=true') === -1) { if (options.uri.includes('videoplayback') && options.uri.includes('local=true')) {
options.uri = options.uri + '?local=true'; options.uri = options.uri + '?local=true';
} }
return options; return options;
@ -50,16 +50,18 @@ videojs.Vhs.xhr.beforeRequest = function(options) {
var player = videojs('player', options); var player = videojs('player', options);
player.on('error', () => { player.on('error', function () {
if (video_data.params.quality !== 'dash') { if (video_data.params.quality === 'dash') return;
if (!player.currentSrc().includes("local=true") && !video_data.local_disabled) {
var currentSources = player.currentSources(); var localNotDisabled = !player.currentSrc().includes('local=true') && !video_data.local_disabled;
for (var i = 0; i < currentSources.length; i++) { var reloadMakesSense = player.error().code === MediaError.MEDIA_ERR_NETWORK || player.error().code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED;
currentSources[i]["src"] += "&local=true"
} if (localNotDisabled) {
player.src(currentSources) // add local=true to all current sources
} player.src(player.currentSources().map(function (source) {
else if (player.error().code === 2 || player.error().code === 4) { source.src += '&local=true';
}));
} else if (reloadMakesSense) {
setTimeout(function (event) { setTimeout(function (event) {
console.log('An error occurred in the player, reloading...'); console.log('An error occurred in the player, reloading...');
@ -77,10 +79,9 @@ player.on('error', () => {
if (!paused) player.play(); if (!paused) player.play();
}, 10000); }, 10000);
} }
}
}); });
if (video_data.params.quality == 'dash') { if (video_data.params.quality === 'dash') {
player.reloadSourceOnError({ player.reloadSourceOnError({
errorInterval: 10 errorInterval: 10
}); });
@ -89,7 +90,7 @@ if (video_data.params.quality == 'dash') {
/** /**
* Function for add time argument to url * Function for add time argument to url
* @param {String} url * @param {String} url
* @returns urlWithTimeArg * @returns {URL} urlWithTimeArg
*/ */
function addCurrentTimeToURL(url) { function addCurrentTimeToURL(url) {
var urlUsed = new URL(url); var urlUsed = new URL(url);
@ -117,13 +118,6 @@ var shareOptions = {
} }
}; };
const storage = (function () {
try { if (localStorage.length !== -1) return localStorage; }
catch (e) { console.info('No storage available: ' + e); }
return undefined;
})();
if (location.pathname.startsWith('/embed/')) { if (location.pathname.startsWith('/embed/')) {
var overlay_content = '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>'; var overlay_content = '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>';
player.overlay({ player.overlay({
@ -162,7 +156,7 @@ if (isMobile()) {
buttons.forEach(function (child) {primary_control_bar.removeChild(child);}); buttons.forEach(function (child) {primary_control_bar.removeChild(child);});
var operations_bar_element = operations_bar.el(); var operations_bar_element = operations_bar.el();
operations_bar_element.className += ' mobile-operations-bar'; operations_bar_element.classList.add('mobile-operations-bar');
player.addChild(operations_bar); player.addChild(operations_bar);
// Playback menu doesn't work when it's initialized outside of the primary control bar // Playback menu doesn't work when it's initialized outside of the primary control bar
@ -220,14 +214,14 @@ player.playbackRate(video_data.params.speed);
* Method for getting the contents of a cookie * Method for getting the contents of a cookie
* *
* @param {String} name Name of cookie * @param {String} name Name of cookie
* @returns cookieValue * @returns {String|null} cookieValue
*/ */
function getCookieValue(name) { function getCookieValue(name) {
var value = document.cookie.split(';').filter(function (item) {return item.includes(name + '=');}); var cookiePrefix = name + '=';
var matchedCookie = document.cookie.split(';').find(function (item) {return item.includes(cookiePrefix);});
return (value.length >= 1) if (matchedCookie)
? value[0].substring((name + '=').length, value[0].length) return matchedCookie.replace(cookiePrefix, '');
: null; return null;
} }
/** /**
@ -257,11 +251,11 @@ function updateCookie(newVolume, newSpeed) {
date.setTime(date.getTime() + 63115200); date.setTime(date.getTime() + 63115200);
var ipRegex = /^((\d+\.){3}\d+|[A-Fa-f0-9]*:[A-Fa-f0-9:]*:[A-Fa-f0-9:]+)$/; var ipRegex = /^((\d+\.){3}\d+|[A-Fa-f0-9]*:[A-Fa-f0-9:]*:[A-Fa-f0-9:]+)$/;
var domainUsed = window.location.hostname; var domainUsed = location.hostname;
// Fix for a bug in FF where the leading dot in the FQDN is not ignored // Fix for a bug in FF where the leading dot in the FQDN is not ignored
if (domainUsed.charAt(0) !== '.' && !ipRegex.test(domainUsed) && domainUsed !== 'localhost') if (domainUsed.charAt(0) !== '.' && !ipRegex.test(domainUsed) && domainUsed !== 'localhost')
domainUsed = '.' + window.location.hostname; domainUsed = '.' + location.hostname;
document.cookie = 'PREFS=' + cookieData + '; SameSite=Strict; path=/; domain=' + document.cookie = 'PREFS=' + cookieData + '; SameSite=Strict; path=/; domain=' +
domainUsed + '; expires=' + date.toGMTString() + ';'; domainUsed + '; expires=' + date.toGMTString() + ';';
@ -280,7 +274,7 @@ player.on('volumechange', function () {
player.on('waiting', function () { player.on('waiting', function () {
if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) { if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) {
console.info('Player has caught up to source, resetting playbackRate.'); console.info('Player has caught up to source, resetting playbackRate');
player.playbackRate(1); player.playbackRate(1);
} }
}); });
@ -292,12 +286,12 @@ if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data.
if (video_data.params.save_player_pos) { if (video_data.params.save_player_pos) {
const url = new URL(location); const url = new URL(location);
const hasTimeParam = url.searchParams.has('t'); const hasTimeParam = url.searchParams.has('t');
const remeberedTime = get_video_time(); const rememberedTime = get_video_time();
let lastUpdated = 0; let lastUpdated = 0;
if(!hasTimeParam) set_seconds_after_start(remeberedTime); if(!hasTimeParam) set_seconds_after_start(rememberedTime);
const updateTime = function () { player.on('timeupdate', function () {
const raw = player.currentTime(); const raw = player.currentTime();
const time = Math.floor(raw); const time = Math.floor(raw);
@ -305,9 +299,7 @@ if (video_data.params.save_player_pos) {
save_video_time(time); save_video_time(time);
lastUpdated = time; lastUpdated = time;
} }
}; });
player.on('timeupdate', updateTime);
} }
else remove_all_video_times(); else remove_all_video_times();
@ -347,53 +339,31 @@ if (!video_data.params.listen && video_data.params.quality === 'dash') {
targetQualityLevel = 0; targetQualityLevel = 0;
break; break;
default: default:
const targetHeight = Number.parseInt(video_data.params.quality_dash, 10); const targetHeight = parseInt(video_data.params.quality_dash, 10);
for (let i = 0; i < qualityLevels.length; i++) { for (let i = 0; i < qualityLevels.length; i++) {
if (qualityLevels[i].height <= targetHeight) { if (qualityLevels[i].height <= targetHeight)
targetQualityLevel = i; targetQualityLevel = i;
} else { else
break; break;
} }
} }
} qualityLevels.forEach(function (level, index) {
for (let i = 0; i < qualityLevels.length; i++) { level.enabled = (index === targetQualityLevel);
qualityLevels[i].enabled = (i === targetQualityLevel); });
}
}); });
}); });
} }
} }
player.vttThumbnails({ player.vttThumbnails({
src: location.origin + '/api/v1/storyboards/' + video_data.id + '?height=90', src: '/api/v1/storyboards/' + video_data.id + '?height=90',
showTimestamp: true showTimestamp: true
}); });
// Enable annotations // Enable annotations
if (!video_data.params.listen && video_data.params.annotations) { if (!video_data.params.listen && video_data.params.annotations) {
window.addEventListener('load', function (e) { addEventListener('load', function (e) {
var video_container = document.getElementById('player'); addEventListener('__ar_annotation_click', function (e) {
let xhr = new XMLHttpRequest();
xhr.responseType = 'text';
xhr.timeout = 60000;
xhr.open('GET', '/api/v1/annotations/' + video_data.id, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
if (!player.paused()) {
player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
} else {
player.one('play', function (event) {
player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
});
}
}
}
};
window.addEventListener('__ar_annotation_click', function (e) {
const url = e.detail.url, const url = e.detail.url,
target = e.detail.target, target = e.detail.target,
seconds = e.detail.seconds; seconds = e.detail.seconds;
@ -406,41 +376,48 @@ if (!video_data.params.listen && video_data.params.annotations) {
path = path.pathname + path.search; path = path.pathname + path.search;
if (target === 'current') { if (target === 'current') {
window.location.href = path; location.href = path;
} else if (target === 'new') { } else if (target === 'new') {
window.open(path, '_blank'); open(path, '_blank');
}
});
helpers.xhr('GET', '/api/v1/annotations/' + video_data.id, {
responseType: 'text',
timeout: 60000
}, {
on200: function (response) {
var video_container = document.getElementById('player');
videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
if (player.paused()) {
player.one('play', function (event) {
player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container });
});
} else {
player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container });
}
} }
}); });
xhr.send();
}); });
} }
function increase_volume(delta) { function increase_volume(delta) {
const curVolume = player.volume(); const curVolume = player.volume();
let newVolume = curVolume + delta; const newVolume = curVolume + delta;
if (newVolume > 1) { helpers.clamp(newVolume, 0, 1);
newVolume = 1;
} else if (newVolume < 0) {
newVolume = 0;
}
player.volume(newVolume); player.volume(newVolume);
} }
function toggle_muted() { function toggle_muted() {
const isMuted = player.muted(); player.muted(!player.muted());
player.muted(!isMuted);
} }
function skip_seconds(delta) { function skip_seconds(delta) {
const duration = player.duration(); const duration = player.duration();
const curTime = player.currentTime(); const curTime = player.currentTime();
let newTime = curTime + delta; const newTime = curTime + delta;
if (newTime > duration) { helpers.clamp(newTime, 0, duration);
newTime = duration;
} else if (newTime < 0) {
newTime = 0;
}
player.currentTime(newTime); player.currentTime(newTime);
} }
@ -455,52 +432,24 @@ function save_video_time(seconds) {
all_video_times[videoId] = seconds; all_video_times[videoId] = seconds;
set_all_video_times(all_video_times); helpers.storage.set(save_player_pos_key, JSON.stringify(all_video_times));
} }
function get_video_time() { function get_video_time() {
try {
const videoId = video_data.id; const videoId = video_data.id;
const all_video_times = get_all_video_times(); const all_video_times = get_all_video_times();
const timestamp = all_video_times[videoId]; const timestamp = all_video_times[videoId];
return timestamp || 0; return timestamp || 0;
} }
catch (e) {
return 0;
}
}
function set_all_video_times(times) {
if (storage) {
if (times) {
try {
storage.setItem(save_player_pos_key, JSON.stringify(times));
} catch (e) {
console.warn('set_all_video_times: ' + e);
}
} else {
storage.removeItem(save_player_pos_key);
}
}
}
function get_all_video_times() { function get_all_video_times() {
if (storage) { const raw = helpers.storage.get(save_player_pos_key);
const raw = storage.getItem(save_player_pos_key); return raw ? JSON.parse(raw) : {};
if (raw !== null) {
try {
return JSON.parse(raw);
} catch (e) {
console.warn('get_all_video_times: ' + e);
}
}
}
return {};
} }
function remove_all_video_times() { function remove_all_video_times() {
set_all_video_times(null); helpers.storage.remove(save_player_pos_key);
} }
function set_time_percent(percent) { function set_time_percent(percent) {
@ -516,21 +465,23 @@ function toggle_play() { player.paused() ? play() : pause(); }
const toggle_captions = (function () { const toggle_captions = (function () {
let toggledTrack = null; let toggledTrack = null;
const onChange = function (e) {
function bindChange(onOrOff) {
player.textTracks()[onOrOff]('change', function (e) {
toggledTrack = null; toggledTrack = null;
}; });
const bindChange = function (onOrOff) { }
player.textTracks()[onOrOff]('change', onChange);
};
// Wrapper function to ignore our own emitted events and only listen // Wrapper function to ignore our own emitted events and only listen
// to events emitted by Video.js on click on the captions menu items. // to events emitted by Video.js on click on the captions menu items.
const setMode = function (track, mode) { function setMode(track, mode) {
bindChange('off'); bindChange('off');
track.mode = mode; track.mode = mode;
window.setTimeout(function () { setTimeout(function () {
bindChange('on'); bindChange('on');
}, 0); }, 0);
}; }
bindChange('on'); bindChange('on');
return function () { return function () {
if (toggledTrack !== null) { if (toggledTrack !== null) {
@ -577,16 +528,12 @@ function toggle_fullscreen() {
function increase_playback_rate(steps) { function increase_playback_rate(steps) {
const maxIndex = options.playbackRates.length - 1; const maxIndex = options.playbackRates.length - 1;
const curIndex = options.playbackRates.indexOf(player.playbackRate()); const curIndex = options.playbackRates.indexOf(player.playbackRate());
let newIndex = curIndex + steps; const newIndex = curIndex + steps;
if (newIndex > maxIndex) { helpers.clamp(newIndex, 0, maxIndex);
newIndex = maxIndex;
} else if (newIndex < 0) {
newIndex = 0;
}
player.playbackRate(options.playbackRates[newIndex]); player.playbackRate(options.playbackRates[newIndex]);
} }
window.addEventListener('keydown', function (e) { addEventListener('keydown', function (e) {
if (e.target.tagName.toLowerCase() === 'input') { if (e.target.tagName.toLowerCase() === 'input') {
// Ignore input when focus is on certain elements, e.g. form fields. // Ignore input when focus is on certain elements, e.g. form fields.
return; return;
@ -673,12 +620,11 @@ window.addEventListener('keydown', function (e) {
// TODO: Add support to play back previous video. // TODO: Add support to play back previous video.
break; break;
case '.': // TODO: More precise step. Now FPS is taken equal to 29.97
// TODO: Add support for next-frame-stepping. // Common FPS: https://forum.videohelp.com/threads/81868#post323588
break; // Possible solution is new HTMLVideoElement.requestVideoFrameCallback() https://wicg.github.io/video-rvfc/
case ',': case '.': action = function () { pause(); skip_seconds(-1/29.97); }; break;
// TODO: Add support for previous-frame-stepping. case ',': action = function () { pause(); skip_seconds( 1/29.97); }; break;
break;
case '>': action = increase_playback_rate.bind(this, 1); break; case '>': action = increase_playback_rate.bind(this, 1); break;
case '<': action = increase_playback_rate.bind(this, -1); break; case '<': action = increase_playback_rate.bind(this, -1); break;
@ -697,10 +643,6 @@ window.addEventListener('keydown', function (e) {
// Add support for controlling the player volume by scrolling over it. Adapted from // Add support for controlling the player volume by scrolling over it. Adapted from
// https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L292-L328 // https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L292-L328
(function () { (function () {
const volumeStep = 0.05;
const enableVolumeScroll = true;
const enableHoverScroll = true;
const doc = document;
const pEl = document.getElementById('player'); const pEl = document.getElementById('player');
var volumeHover = false; var volumeHover = false;
@ -710,39 +652,23 @@ window.addEventListener('keydown', function (e) {
volumeSelector.onmouseout = function () { volumeHover = false; }; volumeSelector.onmouseout = function () { volumeHover = false; };
} }
var mouseScroll = function mouseScroll(event) { function mouseScroll(event) {
var activeEl = doc.activeElement;
if (enableHoverScroll) {
// If we leave this undefined then it can match non-existent elements below
activeEl = 0;
}
// When controls are disabled, hotkeys will be disabled as well // When controls are disabled, hotkeys will be disabled as well
if (player.controls()) { if (!player.controls() || !volumeHover) return;
if (volumeHover) {
if (enableVolumeScroll) {
event = window.event || event;
var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
event.preventDefault();
if (delta === 1) { event.preventDefault();
increase_volume(volumeStep); var wheelMove = event.wheelDelta || -event.detail;
} else if (delta === -1) { var volumeSign = Math.sign(wheelMove);
increase_volume(-volumeStep);
increase_volume(volumeSign * 0.05); // decrease/increase by 5%
} }
}
}
}
};
player.on('mousewheel', mouseScroll); player.on('mousewheel', mouseScroll);
player.on('DOMMouseScroll', mouseScroll); player.on('DOMMouseScroll', mouseScroll);
}()); }());
// Since videojs-share can sometimes be blocked, we defer it until last // Since videojs-share can sometimes be blocked, we defer it until last
if (player.share) { if (player.share) player.share(shareOptions);
player.share(shareOptions);
}
// show the preferred caption by default // show the preferred caption by default
if (player_data.preferred_caption_found) { if (player_data.preferred_caption_found) {
@ -763,7 +689,7 @@ if (navigator.vendor === 'Apple Computer, Inc.' && video_data.params.listen) {
} }
// Watch on Invidious link // Watch on Invidious link
if (window.location.pathname.startsWith('/embed/')) { if (location.pathname.startsWith('/embed/')) {
const Button = videojs.getComponent('Button'); const Button = videojs.getComponent('Button');
let watch_on_invidious_button = new Button(player); let watch_on_invidious_button = new Button(player);

46
assets/js/playlist_widget.js
View File

@ -1,5 +1,6 @@
'use strict'; 'use strict';
var playlist_data = JSON.parse(document.getElementById('playlist_data').textContent); var playlist_data = JSON.parse(document.getElementById('playlist_data').textContent);
var payload = 'csrf_token=' + playlist_data.csrf_token;
function add_playlist_video(target) { function add_playlist_video(target) {
var select = target.parentNode.children[0].children[1]; var select = target.parentNode.children[0].children[1];
@ -8,21 +9,12 @@ function add_playlist_video(target) {
var url = '/playlist_ajax?action_add_video=1&redirect=false' + var url = '/playlist_ajax?action_add_video=1&redirect=false' +
'&video_id=' + target.getAttribute('data-id') + '&video_id=' + target.getAttribute('data-id') +
'&playlist_id=' + option.getAttribute('data-plid'); '&playlist_id=' + option.getAttribute('data-plid');
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 () { helpers.xhr('POST', url, {payload: payload}, {
if (xhr.readyState === 4) { on200: function (response) {
if (xhr.status === 200) {
option.innerText = '✓' + option.innerText; option.innerText = '✓' + option.innerText;
} }
} });
};
xhr.send('csrf_token=' + playlist_data.csrf_token);
} }
function add_playlist_item(target) { function add_playlist_item(target) {
@ -32,21 +24,12 @@ function add_playlist_item(target) {
var url = '/playlist_ajax?action_add_video=1&redirect=false' + var url = '/playlist_ajax?action_add_video=1&redirect=false' +
'&video_id=' + target.getAttribute('data-id') + '&video_id=' + target.getAttribute('data-id') +
'&playlist_id=' + target.getAttribute('data-plid'); '&playlist_id=' + target.getAttribute('data-plid');
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 () { helpers.xhr('POST', url, {payload: payload}, {
if (xhr.readyState === 4) { onNon200: function (xhr) {
if (xhr.status !== 200) {
tile.style.display = ''; tile.style.display = '';
} }
} });
};
xhr.send('csrf_token=' + playlist_data.csrf_token);
} }
function remove_playlist_item(target) { function remove_playlist_item(target) {
@ -56,19 +39,10 @@ function remove_playlist_item(target) {
var url = '/playlist_ajax?action_remove_video=1&redirect=false' + var url = '/playlist_ajax?action_remove_video=1&redirect=false' +
'&set_video_id=' + target.getAttribute('data-index') + '&set_video_id=' + target.getAttribute('data-index') +
'&playlist_id=' + target.getAttribute('data-plid'); '&playlist_id=' + target.getAttribute('data-plid');
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 () { helpers.xhr('POST', url, {payload: payload}, {
if (xhr.readyState === 4) { onNon200: function (xhr) {
if (xhr.status !== 200) {
tile.style.display = ''; tile.style.display = '';
} }
} });
};
xhr.send('csrf_token=' + playlist_data.csrf_token);
} }

84
assets/js/subscribe_widget.js
View File

@ -1,8 +1,9 @@
'use strict'; 'use strict';
var subscribe_data = JSON.parse(document.getElementById('subscribe_data').textContent); var subscribe_data = JSON.parse(document.getElementById('subscribe_data').textContent);
var payload = 'csrf_token=' + subscribe_data.csrf_token;
var subscribe_button = document.getElementById('subscribe'); var subscribe_button = document.getElementById('subscribe');
subscribe_button.parentNode['action'] = 'javascript:void(0)'; subscribe_button.parentNode.action = 'javascript:void(0)';
if (subscribe_button.getAttribute('data-type') === 'subscribe') { if (subscribe_button.getAttribute('data-type') === 'subscribe') {
subscribe_button.onclick = subscribe; subscribe_button.onclick = subscribe;
@ -10,87 +11,34 @@ if (subscribe_button.getAttribute('data-type') === 'subscribe') {
subscribe_button.onclick = unsubscribe; subscribe_button.onclick = unsubscribe;
} }
function subscribe(retries) { function subscribe() {
if (retries === undefined) retries = 5;
if (retries <= 0) {
console.warn('Failed to subscribe.');
return;
}
var url = '/subscription_ajax?action_create_subscription_to_channel=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');
var fallback = subscribe_button.innerHTML; var fallback = subscribe_button.innerHTML;
subscribe_button.onclick = unsubscribe; subscribe_button.onclick = unsubscribe;
subscribe_button.innerHTML = '<b>' + subscribe_data.unsubscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>'; subscribe_button.innerHTML = '<b>' + subscribe_data.unsubscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
xhr.onreadystatechange = function () { var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' +
if (xhr.readyState === 4) { '&c=' + subscribe_data.ucid;
if (xhr.status !== 200) {
helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'subscribe request'}, {
onNon200: function (xhr) {
subscribe_button.onclick = subscribe; subscribe_button.onclick = subscribe;
subscribe_button.innerHTML = fallback; 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) { function unsubscribe() {
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');
var fallback = subscribe_button.innerHTML; var fallback = subscribe_button.innerHTML;
subscribe_button.onclick = subscribe; subscribe_button.onclick = subscribe;
subscribe_button.innerHTML = '<b>' + subscribe_data.subscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>'; subscribe_button.innerHTML = '<b>' + subscribe_data.subscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
xhr.onreadystatechange = function () { var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
if (xhr.readyState === 4) { '&c=' + subscribe_data.ucid;
if (xhr.status !== 200) {
helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'unsubscribe request'}, {
onNon200: function (xhr) {
subscribe_button.onclick = unsubscribe; subscribe_button.onclick = unsubscribe;
subscribe_button.innerHTML = fallback; 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);
} }

42
assets/js/themes.js
View File

@ -1,61 +1,49 @@
'use strict'; 'use strict';
var toggle_theme = document.getElementById('toggle_theme'); var toggle_theme = document.getElementById('toggle_theme');
toggle_theme.href = 'javascript:void(0);'; toggle_theme.href = 'javascript:void(0)';
toggle_theme.addEventListener('click', function () { toggle_theme.addEventListener('click', function () {
var dark_mode = document.body.classList.contains('light-theme'); 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); set_mode(dark_mode);
try { helpers.storage.set('dark_mode', dark_mode ? 'dark' : 'light');
window.localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light');
} catch (e) {}
xhr.send(); helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
}); });
window.addEventListener('storage', function (e) { // Handles theme change event caused by other tab
addEventListener('storage', function (e) {
if (e.key === 'dark_mode') { if (e.key === 'dark_mode') {
update_mode(e.newValue); update_mode(e.newValue);
} }
}); });
window.addEventListener('DOMContentLoaded', function () { addEventListener('DOMContentLoaded', function () {
const dark_mode = document.getElementById('dark_mode_pref').textContent; const dark_mode = document.getElementById('dark_mode_pref').textContent;
try { // Update storage if dark mode preference changed on preferences page
// Update localStorage if dark mode preference changed on preferences page helpers.storage.set('dark_mode', dark_mode);
window.localStorage.setItem('dark_mode', dark_mode);
} catch (e) {}
update_mode(dark_mode); update_mode(dark_mode);
}); });
var darkScheme = window.matchMedia('(prefers-color-scheme: dark)'); var darkScheme = matchMedia('(prefers-color-scheme: dark)');
var lightScheme = window.matchMedia('(prefers-color-scheme: light)'); var lightScheme = matchMedia('(prefers-color-scheme: light)');
darkScheme.addListener(scheme_switch); darkScheme.addListener(scheme_switch);
lightScheme.addListener(scheme_switch); lightScheme.addListener(scheme_switch);
function scheme_switch (e) { function scheme_switch (e) {
// ignore this method if we have a preference set // ignore this method if we have a preference set
try { if (helpers.storage.get('dark_mode')) return;
if (localStorage.getItem('dark_mode')) {
return; if (!e.matches) return;
}
} catch (exception) {}
if (e.matches) {
if (e.media.includes('dark')) { if (e.media.includes('dark')) {
set_mode(true); set_mode(true);
} else if (e.media.includes('light')) { } else if (e.media.includes('light')) {
set_mode(false); set_mode(false);
} }
} }
}
function set_mode (bool) { function set_mode (bool) {
if (bool) { if (bool) {
@ -82,7 +70,7 @@ function update_mode (mode) {
// If preference for light mode indicated // If preference for light mode indicated
set_mode(false); set_mode(false);
} }
else if (document.getElementById('dark_mode_pref').textContent === '' && window.matchMedia('(prefers-color-scheme: dark)').matches) { else if (document.getElementById('dark_mode_pref').textContent === '' && 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 // 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); set_mode(true);
} }

300
assets/js/watch.js
View File

@ -1,5 +1,7 @@
'use strict'; 'use strict';
var video_data = JSON.parse(document.getElementById('video_data').textContent); 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) { String.prototype.supplant = function (o) {
return this.replace(/{([^{}]*)}/g, function (a, b) { return this.replace(/{([^{}]*)}/g, function (a, b) {
@ -10,24 +12,24 @@ String.prototype.supplant = function (o) {
function toggle_parent(target) { function toggle_parent(target) {
var body = target.parentNode.parentNode.children[1]; var body = target.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === '') { if (body.style.display === 'none') {
target.textContent = '[ + ]';
body.style.display = 'none';
} else {
target.textContent = '[ − ]'; target.textContent = '[ − ]';
body.style.display = ''; body.style.display = '';
} else {
target.textContent = '[ + ]';
body.style.display = 'none';
} }
} }
function toggle_comments(event) { function toggle_comments(event) {
var target = event.target; var target = event.target;
var body = target.parentNode.parentNode.parentNode.children[1]; var body = target.parentNode.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === '') { if (body.style.display === 'none') {
target.textContent = '[ + ]';
body.style.display = 'none';
} else {
target.textContent = '[ − ]'; target.textContent = '[ − ]';
body.style.display = ''; body.style.display = '';
} else {
target.textContent = '[ + ]';
body.style.display = 'none';
} }
} }
@ -79,31 +81,22 @@ if (continue_button) {
function next_video() { function next_video() {
var url = new URL('https://example.com/watch?v=' + video_data.next_video); var url = new URL('https://example.com/watch?v=' + video_data.next_video);
if (video_data.params.autoplay || video_data.params.continue_autoplay) { if (video_data.params.autoplay || video_data.params.continue_autoplay)
url.searchParams.set('autoplay', '1'); 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); 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); 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('local', video_data.params.local);
}
url.searchParams.set('continue', '1'); url.searchParams.set('continue', '1');
location.assign(url.pathname + url.search); location.assign(url.pathname + url.search);
} }
function continue_autoplay(event) { function continue_autoplay(event) {
if (event.target.checked) { if (event.target.checked) {
player.on('ended', function () { player.on('ended', next_video);
next_video();
});
} else { } else {
player.off('ended'); player.off('ended');
} }
@ -116,19 +109,10 @@ function number_with_separator(val) {
return val; return val;
} }
function get_playlist(plid, retries) { function get_playlist(plid) {
if (retries === undefined) retries = 5;
var playlist = document.getElementById('playlist'); var playlist = document.getElementById('playlist');
if (retries <= 0) { playlist.innerHTML = spinnerHTMLwithHR;
console.warn('Failed to pull playlist');
playlist.innerHTML = '';
return;
}
playlist.innerHTML = ' \
<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3> \
<hr>';
var plid_url; var plid_url;
if (plid.startsWith('RD')) { if (plid.startsWith('RD')) {
@ -142,99 +126,62 @@ function get_playlist(plid, retries) {
'&format=html&hl=' + video_data.preferences.locale; '&format=html&hl=' + video_data.preferences.locale;
} }
var xhr = new XMLHttpRequest(); helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, {
xhr.responseType = 'json'; on200: function (response) {
xhr.timeout = 10000; playlist.innerHTML = response.playlistHtml;
xhr.open('GET', plid_url, true);
xhr.onreadystatechange = function () { if (!response.nextVideo) return;
if (xhr.readyState === 4) {
if (xhr.status === 200) { var nextVideo = document.getElementById(response.nextVideo);
playlist.innerHTML = xhr.response.playlistHtml;
var nextVideo = document.getElementById(xhr.response.nextVideo);
nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop; nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
if (xhr.response.nextVideo) {
player.on('ended', function () { player.on('ended', function () {
var url = new URL('https://example.com/watch?v=' + xhr.response.nextVideo); var url = new URL('https://example.com/watch?v=' + response.nextVideo);
url.searchParams.set('list', plid); url.searchParams.set('list', plid);
if (!plid.startsWith('RD')) { if (!plid.startsWith('RD'))
url.searchParams.set('index', xhr.response.index); url.searchParams.set('index', response.index);
} 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'); 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); 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); 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('local', video_data.params.local);
}
location.assign(url.pathname + url.search); location.assign(url.pathname + url.search);
}); });
} },
} else { onNon200: function (xhr) {
playlist.innerHTML = ''; playlist.innerHTML = '';
document.getElementById('continue').style.display = ''; document.getElementById('continue').style.display = '';
},
onError: function (xhr) {
playlist.innerHTML = spinnerHTMLwithHR;
},
onTimeout: function (xhr) {
playlist.innerHTML = spinnerHTMLwithHR;
} }
} });
};
xhr.onerror = function () {
playlist = document.getElementById('playlist');
playlist.innerHTML =
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
console.warn('Pulling playlist timed out... ' + retries + '/5');
setTimeout(function () { get_playlist(plid, retries - 1); }, 1000);
};
xhr.ontimeout = function () {
playlist = document.getElementById('playlist');
playlist.innerHTML =
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
console.warn('Pulling playlist timed out... ' + retries + '/5');
get_playlist(plid, retries - 1);
};
xhr.send();
} }
function get_reddit_comments(retries) { function get_reddit_comments() {
if (retries === undefined) retries = 5;
var comments = document.getElementById('comments'); var comments = document.getElementById('comments');
if (retries <= 0) {
console.warn('Failed to pull comments');
comments.innerHTML = '';
return;
}
var fallback = comments.innerHTML; var fallback = comments.innerHTML;
comments.innerHTML = comments.innerHTML = spinnerHTML;
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
var url = '/api/v1/comments/' + video_data.id + var url = '/api/v1/comments/' + video_data.id +
'?source=reddit&format=html' + '?source=reddit&format=html' +
'&hl=' + video_data.preferences.locale; '&hl=' + video_data.preferences.locale;
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.timeout = 10000;
xhr.open('GET', url, true);
xhr.onreadystatechange = function () { var onNon200 = function (xhr) { comments.innerHTML = fallback; };
if (xhr.readyState === 4) { if (video_data.params.comments[1] === 'youtube')
if (xhr.status === 200) { onNon200 = function (xhr) {};
helpers.xhr('GET', url, {retries: 5, entity_name: ''}, {
on200: function (response) {
comments.innerHTML = ' \ comments.innerHTML = ' \
<div> \ <div> \
<h3> \ <h3> \
@ -254,65 +201,37 @@ function get_reddit_comments(retries) {
</div> \ </div> \
<div>{contentHtml}</div> \ <div>{contentHtml}</div> \
<hr>'.supplant({ <hr>'.supplant({
title: xhr.response.title, title: response.title,
youtubeCommentsText: video_data.youtube_comments_text, youtubeCommentsText: video_data.youtube_comments_text,
redditPermalinkText: video_data.reddit_permalink_text, redditPermalinkText: video_data.reddit_permalink_text,
permalink: xhr.response.permalink, permalink: response.permalink,
contentHtml: xhr.response.contentHtml contentHtml: response.contentHtml
}); });
comments.children[0].children[0].children[0].onclick = toggle_comments; comments.children[0].children[0].children[0].onclick = toggle_comments;
comments.children[0].children[1].children[0].onclick = swap_comments; comments.children[0].children[1].children[0].onclick = swap_comments;
} else { },
if (video_data.params.comments[1] === 'youtube') { onNon200: onNon200, // declared above
console.warn('Pulling comments failed... ' + retries + '/5'); });
setTimeout(function () { get_youtube_comments(retries - 1); }, 1000);
} else {
comments.innerHTML = fallback;
}
}
}
};
xhr.onerror = function () {
console.warn('Pulling comments failed... ' + retries + '/5');
setTimeout(function () { get_reddit_comments(retries - 1); }, 1000);
};
xhr.ontimeout = function () {
console.warn('Pulling comments failed... ' + retries + '/5');
get_reddit_comments(retries - 1);
};
xhr.send();
} }
function get_youtube_comments(retries) { function get_youtube_comments() {
if (retries === undefined) retries = 5;
var comments = document.getElementById('comments'); var comments = document.getElementById('comments');
if (retries <= 0) {
console.warn('Failed to pull comments');
comments.innerHTML = '';
return;
}
var fallback = comments.innerHTML; var fallback = comments.innerHTML;
comments.innerHTML = comments.innerHTML = spinnerHTML;
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
var url = '/api/v1/comments/' + video_data.id + var url = '/api/v1/comments/' + video_data.id +
'?format=html' + '?format=html' +
'&hl=' + video_data.preferences.locale + '&hl=' + video_data.preferences.locale +
'&thin_mode=' + video_data.preferences.thin_mode; '&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 () { var onNon200 = function (xhr) { comments.innerHTML = fallback; };
if (xhr.readyState === 4) { if (video_data.params.comments[1] === 'youtube')
if (xhr.status === 200) { onNon200 = function (xhr) {};
helpers.xhr('GET', url, {retries: 5, entity_name: 'comments'}, {
on200: function (response) {
comments.innerHTML = ' \ comments.innerHTML = ' \
<div> \ <div> \
<h3> \ <h3> \
@ -327,40 +246,24 @@ function get_youtube_comments(retries) {
</div> \ </div> \
<div>{contentHtml}</div> \ <div>{contentHtml}</div> \
<hr>'.supplant({ <hr>'.supplant({
contentHtml: xhr.response.contentHtml, contentHtml: response.contentHtml,
redditComments: video_data.reddit_comments_text, redditComments: video_data.reddit_comments_text,
commentsText: video_data.comments_text.supplant( commentsText: video_data.comments_text.supplant(
{ commentCount: number_with_separator(xhr.response.commentCount) } { commentCount: number_with_separator(response.commentCount) }
) )
}); });
comments.children[0].children[0].children[0].onclick = toggle_comments; comments.children[0].children[0].children[0].onclick = toggle_comments;
comments.children[0].children[1].children[0].onclick = swap_comments; comments.children[0].children[1].children[0].onclick = swap_comments;
} else { },
if (video_data.params.comments[1] === 'youtube') { onNon200: onNon200, // declared above
setTimeout(function () { get_youtube_comments(retries - 1); }, 1000); onError: function (xhr) {
} else { comments.innerHTML = spinnerHTML;
comments.innerHTML = ''; },
onTimeout: function (xhr) {
comments.innerHTML = spinnerHTML;
} }
} });
}
};
xhr.onerror = function () {
comments.innerHTML =
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
console.warn('Pulling comments failed... ' + retries + '/5');
setTimeout(function () { get_youtube_comments(retries - 1); }, 1000);
};
xhr.ontimeout = function () {
comments.innerHTML =
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
console.warn('Pulling comments failed... ' + retries + '/5');
get_youtube_comments(retries - 1);
};
xhr.send();
} }
function get_youtube_replies(target, load_more, load_replies) { function get_youtube_replies(target, load_more, load_replies) {
@ -368,29 +271,21 @@ function get_youtube_replies(target, load_more, load_replies) {
var body = target.parentNode.parentNode; var body = target.parentNode.parentNode;
var fallback = body.innerHTML; var fallback = body.innerHTML;
body.innerHTML = body.innerHTML = spinnerHTML;
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
var url = '/api/v1/comments/' + video_data.id + var url = '/api/v1/comments/' + video_data.id +
'?format=html' + '?format=html' +
'&hl=' + video_data.preferences.locale + '&hl=' + video_data.preferences.locale +
'&thin_mode=' + video_data.preferences.thin_mode + '&thin_mode=' + video_data.preferences.thin_mode +
'&continuation=' + continuation; '&continuation=' + continuation;
if (load_replies) { if (load_replies) url += '&action=action_get_comment_replies';
url += '&action=action_get_comment_replies';
}
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.timeout = 10000;
xhr.open('GET', url, true);
xhr.onreadystatechange = function () { helpers.xhr('GET', url, {}, {
if (xhr.readyState === 4) { on200: function (response) {
if (xhr.status === 200) {
if (load_more) { if (load_more) {
body = body.parentNode.parentNode; body = body.parentNode.parentNode;
body.removeChild(body.lastElementChild); body.removeChild(body.lastElementChild);
body.innerHTML += xhr.response.contentHtml; body.innerHTML += response.contentHtml;
} else { } else {
body.removeChild(body.lastElementChild); body.removeChild(body.lastElementChild);
@ -405,54 +300,43 @@ function get_youtube_replies(target, load_more, load_replies) {
a.innerText = video_data.hide_replies_text; a.innerText = video_data.hide_replies_text;
var div = document.createElement('div'); var div = document.createElement('div');
div.innerHTML = xhr.response.contentHtml; div.innerHTML = response.contentHtml;
body.appendChild(p); body.appendChild(p);
body.appendChild(div); body.appendChild(div);
} }
} else { },
onNon200: function (xhr) {
body.innerHTML = fallback;
},
onTimeout: function (xhr) {
console.warn('Pulling comments failed');
body.innerHTML = fallback; body.innerHTML = fallback;
} }
} });
};
xhr.ontimeout = function () {
console.warn('Pulling comments failed.');
body.innerHTML = fallback;
};
xhr.send();
} }
if (video_data.play_next) { if (video_data.play_next) {
player.on('ended', function () { player.on('ended', function () {
var url = new URL('https://example.com/watch?v=' + video_data.next_video); var url = new URL('https://example.com/watch?v=' + video_data.next_video);
if (video_data.params.autoplay || video_data.params.continue_autoplay) { if (video_data.params.autoplay || video_data.params.continue_autoplay)
url.searchParams.set('autoplay', '1'); 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); 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); 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('local', video_data.params.local);
}
url.searchParams.set('continue', '1'); url.searchParams.set('continue', '1');
location.assign(url.pathname + url.search); location.assign(url.pathname + url.search);
}); });
} }
window.addEventListener('load', function (e) { addEventListener('load', function (e) {
if (video_data.plid) { if (video_data.plid)
get_playlist(video_data.plid); get_playlist(video_data.plid);
}
if (video_data.params.comments[0] === 'youtube') { if (video_data.params.comments[0] === 'youtube') {
get_youtube_comments(); get_youtube_comments();

35
assets/js/watched_widget.js
View File

@ -1,5 +1,6 @@
'use strict'; 'use strict';
var watched_data = JSON.parse(document.getElementById('watched_data').textContent); var watched_data = JSON.parse(document.getElementById('watched_data').textContent);
var payload = 'csrf_token=' + watched_data.csrf_token;
function mark_watched(target) { function mark_watched(target) {
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode; 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' + var url = '/watch_ajax?action_mark_watched=1&redirect=false' +
'&id=' + target.getAttribute('data-id'); '&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 () { helpers.xhr('POST', url, {payload: payload}, {
if (xhr.readyState === 4) { onNon200: function (xhr) {
if (xhr.status !== 200) {
tile.style.display = ''; tile.style.display = '';
} }
} });
};
xhr.send('csrf_token=' + watched_data.csrf_token);
} }
function mark_unwatched(target) { function mark_unwatched(target) {
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode; var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
tile.style.display = 'none'; tile.style.display = 'none';
var count = document.getElementById('count'); var count = document.getElementById('count');
count.innerText = count.innerText - 1; count.innerText = parseInt(count.innerText) - 1;
var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' + var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' +
'&id=' + target.getAttribute('data-id'); '&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 () { helpers.xhr('POST', url, {payload: payload}, {
if (xhr.readyState === 4) { onNon200: function (xhr) {
if (xhr.status !== 200) { count.innerText = parseInt(count.innerText) + 1;
count.innerText = count.innerText - 1 + 2;
tile.style.display = ''; tile.style.display = '';
} }
} });
};
xhr.send('csrf_token=' + watched_data.csrf_token);
} }

2
src/invidious/comments.cr
View File

@ -481,7 +481,7 @@ def template_reddit_comments(root, locale)
html << <<-END_HTML html << <<-END_HTML
<p> <p>
<a href="javascript:void(0)" data-onclick="toggle_parent">[ - ]</a> <a href="javascript:void(0)" data-onclick="toggle_parent">[ − ]</a>
<b><a href="https://www.reddit.com/user/#{child.author}">#{child.author}</a></b> <b><a href="https://www.reddit.com/user/#{child.author}">#{child.author}</a></b>
#{translate_count(locale, "comments_points_count", child.score, NumberFormatting::Separator)} #{translate_count(locale, "comments_points_count", child.score, NumberFormatting::Separator)}
<span title="#{child.created_utc.to_s(translate(locale, "%a %B %-d %T %Y UTC"))}">#{translate(locale, "`x` ago", recode_date(child.created_utc, locale))}</span> <span title="#{child.created_utc.to_s(translate(locale, "%a %B %-d %T %Y UTC"))}">#{translate(locale, "`x` ago", recode_date(child.created_utc, locale))}</span>

1
src/invidious/views/add_playlist_items.ecr
View File

@ -29,6 +29,7 @@
}.to_pretty_json }.to_pretty_json
%> %>
</script> </script>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
<div class="pure-g"> <div class="pure-g">

1
src/invidious/views/community.ecr
View File

@ -93,4 +93,5 @@
}.to_pretty_json }.to_pretty_json
%> %>
</script> </script>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/community.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/community.js?v=<%= ASSET_COMMIT %>"></script>

1
src/invidious/views/components/player.ecr
View File

@ -66,4 +66,5 @@
}.to_pretty_json }.to_pretty_json
%> %>
</script> </script>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/player.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/player.js?v=<%= ASSET_COMMIT %>"></script>

1
src/invidious/views/components/subscribe_widget.ecr
View File

@ -31,6 +31,7 @@
}.to_pretty_json }.to_pretty_json
%> %>
</script> </script>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script>
<% else %> <% else %>
<p> <p>

1
src/invidious/views/embed.ecr
View File

@ -31,6 +31,7 @@
</script> </script>
<%= rendered "components/player" %> <%= rendered "components/player" %>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/embed.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/embed.js?v=<%= ASSET_COMMIT %>"></script>
</body> </body>
</html> </html>

1
src/invidious/views/feeds/history.ecr
View File

@ -25,6 +25,7 @@
}.to_pretty_json }.to_pretty_json
%> %>
</script> </script>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/watched_widget.js"></script> <script src="/js/watched_widget.js"></script>
<div class="pure-g"> <div class="pure-g">

1
src/invidious/views/feeds/subscriptions.ecr
View File

@ -50,6 +50,7 @@
}.to_pretty_json }.to_pretty_json
%> %>
</script> </script>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/watched_widget.js"></script> <script src="/js/watched_widget.js"></script>
<div class="pure-g"> <div class="pure-g">

14
src/invidious/views/licenses.ecr
View File

@ -9,6 +9,20 @@
<body> <body>
<h1><%= translate(locale, "JavaScript license information") %></h1> <h1><%= translate(locale, "JavaScript license information") %></h1>
<table id="jslicense-labels1"> <table id="jslicense-labels1">
<tr>
<td>
<a href="/js/_helpers.js?v=<%= ASSET_COMMIT %>">_helpers.js</a>
</td>
<td>
<a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0</a>
</td>
<td>
<a href="/js/_helpers.js?v=<%= ASSET_COMMIT %>"><%= translate(locale, "source") %></a>
</td>
</tr>
<tr> <tr>
<td> <td>
<a href="/js/community.js?v=<%= ASSET_COMMIT %>">community.js</a> <a href="/js/community.js?v=<%= ASSET_COMMIT %>">community.js</a>

1
src/invidious/views/playlist.ecr
View File

@ -97,6 +97,7 @@
}.to_pretty_json }.to_pretty_json
%> %>
</script> </script>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
<% end %> <% end %>

1
src/invidious/views/template.ecr
View File

@ -157,6 +157,7 @@
</div> </div>
<div class="pure-u-1 pure-u-md-2-24"></div> <div class="pure-u-1 pure-u-md-2-24"></div>
</div> </div>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>
<% if env.get? "user" %> <% if env.get? "user" %>

2
src/invidious/views/watch.ecr
View File

@ -165,6 +165,7 @@ we're going to need to do it here in order to allow for translations.
}.to_pretty_json }.to_pretty_json
%> %>
</script> </script>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/playlist_widget.js?v=<%= Time.utc.to_unix_ms %>"></script> <script src="/js/playlist_widget.js?v=<%= Time.utc.to_unix_ms %>"></script>
<% end %> <% end %>
<% end %> <% end %>
@ -303,4 +304,5 @@ we're going to need to do it here in order to allow for translations.
</div> </div>
<% end %> <% end %>
</div> </div>
<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/watch.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/watch.js?v=<%= ASSET_COMMIT %>"></script>