ProjectSegfault/invidious-experimenting
4
0
Fork 0
forked from midou/invidious
Code Pull Requests Activity

JS fixes: recursion in themes, keys for frame walking, JSON XHR and details-summary in IE11

Browse Source
This commit is contained in:
meow 2022-05-16 13:13:00 +03:00
parent fd66084388
commit e18b10297b
3 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
assets/js/_helpers.js
View File

@ -23,6 +23,20 @@ Math.sign = Math.sign || function(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
window.helpers = window.helpers || {
@ -65,8 +79,13 @@ window.helpers = window.helpers || {
// better than onreadystatechange because of 404 codes https://stackoverflow.com/a/36182963
xhr.onloadend = function () {
if (xhr.status === 200) {
if (callbacks.on200)
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;

4
assets/js/player.js
View File

@ -623,8 +623,8 @@ addEventListener('keydown', function (e) {
// TODO: More precise step. Now FPS is taken equal to 29.97
// Common FPS: https://forum.videohelp.com/threads/81868#post323588
// Possible solution is new HTMLVideoElement.requestVideoFrameCallback() https://wicg.github.io/video-rvfc/
case '.': action = function () { pause(); skip_seconds(-1/29.97); }; break;
case ',': action = function () { pause(); skip_seconds( 1/29.97); }; break;
case ',': action = function () { pause(); skip_seconds(-1/29.97); }; break;
case '.': action = function () { pause(); skip_seconds( 1/29.97); }; break;
case '>': action = increase_playback_rate.bind(this, 1); break;
case '<': action = increase_playback_rate.bind(this, -1); break;

11
assets/js/themes.js
View File

@ -10,7 +10,9 @@ const THEME_SYSTEM = '';
// TODO: theme state controlled by system
toggle_theme.addEventListener('click', function () {
const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
setTheme(isDarkTheme ? THEME_LIGHT : 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', {}, {});
});
@ -26,9 +28,6 @@ systemDarkTheme.addListener(function () {
/** @param {THEME_DARK|THEME_LIGHT|THEME_SYSTEM} theme */
function setTheme(theme) {
if (theme !== THEME_SYSTEM)
helpers.storage.set(STORAGE_KEY_THEME, theme);
if (theme === THEME_DARK || (theme === THEME_SYSTEM && systemDarkTheme.matches)) {
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
document.body.classList.remove('no-theme');
@ -44,11 +43,13 @@ function setTheme(theme) {
// Handles theme change event caused by other tab
addEventListener('storage', function (e) {
if (e.key === STORAGE_KEY_THEME) setTheme(e.newValue);
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;
setTheme(prefTheme);
helpers.storage.set(STORAGE_KEY_THEME, prefTheme);
});