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

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)
+                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;

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;

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);
 });