From e18b10297b259460a3219edfeb9ccd0fabc34270 Mon Sep 17 00:00:00 2001 From: meow Date: Mon, 16 May 2022 13:13:00 +0300 Subject: [PATCH] JS fixes: recursion in themes, keys for frame walking, JSON XHR and details-summary in IE11 --- assets/js/_helpers.js | 23 +++++++++++++++++++++-- assets/js/player.js | 4 ++-- assets/js/themes.js | 11 ++++++----- 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/assets/js/_helpers.js b/assets/js/_helpers.js index 3f79bf54..448e95d1 100644 --- a/assets/js/_helpers.js +++ b/assets/js/_helpers.js @@ -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) - callbacks.on200(xhr.response); + 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; diff --git a/assets/js/player.js b/assets/js/player.js index 832c7d0e..e2bd2df1 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -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; diff --git a/assets/js/themes.js b/assets/js/themes.js index eedf63a4..029d7c5d 100644 --- a/assets/js/themes.js +++ b/assets/js/themes.js @@ -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); });