js code rewrite. Themes rewritten, bugs fixed

assets/js/_helpers.js

@@ -145,16 +145,14 @@ window.helpers = window.helpers || {
             }, options.retry_timeout);
         };
         
-        if (callbacks.onError)
+        callbacks._onError = 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 = callbacks.onTimeout;
         callbacks.onTimeout = function (xhr) {
             if (callbacks._onTimeout)
                 callbacks._onTimeout();

assets/js/player.js

@@ -42,9 +42,10 @@ embed_url = location.origin + '/embed/' + video_data.id + embed_url.search;
 var save_player_pos_key = 'save_player_pos';
 
 videojs.Vhs.xhr.beforeRequest = function(options) {
-    if (options.uri.includes('videoplayback') && options.uri.includes('local=true')) {
+    // set local if requested not videoplayback
-        options.uri = options.uri + '?local=true';
+    if (!options.uri.includes('videoplayback'))
-    }
+        if (!options.uri.includes('local=true'))
+            options.uri += '?local=true';
     return options;
 };
 
@@ -402,7 +403,7 @@ if (!video_data.params.listen && video_data.params.annotations) {
     });
 }
 
-function increase_volume(delta) {
+function change_volume(delta) {
     const curVolume = player.volume();
     const newVolume = curVolume + delta;
     helpers.clamp(newVolume, 0, 1);
@@ -565,10 +566,10 @@ addEventListener('keydown', function (e) {
         case 'MediaStop':  action = stop; break;
 
         case 'ArrowUp':
-            if (isPlayerFocused) action = increase_volume.bind(this, 0.1);
+            if (isPlayerFocused) action = change_volume.bind(this, 0.1);
             break;
         case 'ArrowDown':
-            if (isPlayerFocused) action = increase_volume.bind(this, -0.1);
+            if (isPlayerFocused) action = change_volume.bind(this, -0.1);
             break;
 
         case 'm':
@@ -659,7 +660,7 @@ addEventListener('keydown', function (e) {
         var wheelMove = event.wheelDelta || -event.detail;
         var volumeSign = Math.sign(wheelMove);
 
-        increase_volume(volumeSign * 0.05); // decrease/increase by 5%
+        change_volume(volumeSign * 0.05); // decrease/increase by 5%
     }
 
     player.on('mousewheel', mouseScroll);

assets/js/themes.js

@@ -2,58 +2,39 @@
 var toggle_theme = document.getElementById('toggle_theme');
 toggle_theme.href = 'javascript:void(0)';
 
+const STORAGE_KEY_THEME = 'dark_mode';
+const THEME_DARK = 'dark';
+const THEME_LIGHT = 'light';
+const THEME_SYSTEM = '';
+
+// TODO: theme state controlled by system
 toggle_theme.addEventListener('click', function () {
-    var dark_mode = document.body.classList.contains('light-theme');
+    const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
-
+    setTheme(isDarkTheme ? THEME_LIGHT : THEME_DARK);
-    set_mode(dark_mode);
-    helpers.storage.set('dark_mode', dark_mode ? 'dark' : 'light');
-
     helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
 });
 
-// Handles theme change event caused by other tab
-addEventListener('storage', function (e) {
-    if (e.key === 'dark_mode') {
-        update_mode(e.newValue);
-    }
-});
 
-addEventListener('DOMContentLoaded', function () {
+// Ask system about dark theme
-    const dark_mode = document.getElementById('dark_mode_pref').textContent;
+var systemDarkTheme = matchMedia('(prefers-color-scheme: dark)');
-    // Update storage if dark mode preference changed on preferences page
+systemDarkTheme.addListener(function () {
-    helpers.storage.set('dark_mode', dark_mode);
+    // Ignore system events if theme set manually
-    update_mode(dark_mode);
+    if (!helpers.storage.get(STORAGE_KEY_THEME))
+        setTheme(THEME_SYSTEM);
 });
 
 
-var darkScheme = matchMedia('(prefers-color-scheme: dark)');
+/** @param {THEME_DARK|THEME_LIGHT|THEME_SYSTEM} theme */
-var lightScheme = matchMedia('(prefers-color-scheme: light)');
+function setTheme(theme) {
+    if (theme !== THEME_SYSTEM)
+        helpers.storage.set(STORAGE_KEY_THEME, theme);
 
-darkScheme.addListener(scheme_switch);
+    if (theme === THEME_DARK || (theme === THEME_SYSTEM && systemDarkTheme.matches)) {
-lightScheme.addListener(scheme_switch);
-
-function scheme_switch (e) {
-    // ignore this method if we have a preference set
-    if (helpers.storage.get('dark_mode')) return;
-
-    if (!e.matches) return;
-
-    if (e.media.includes('dark')) {
-        set_mode(true);
-    } else if (e.media.includes('light')) {
-        set_mode(false);
-    }
-}
-
-function set_mode (bool) {
-    if (bool) {
-        // dark
         toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
         document.body.classList.remove('no-theme');
         document.body.classList.remove('light-theme');
         document.body.classList.add('dark-theme');
     } else {
-        // light
         toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
         document.body.classList.remove('no-theme');
         document.body.classList.remove('dark-theme');
@@ -61,18 +42,13 @@ function set_mode (bool) {
     }
 }
 
-function update_mode (mode) {
+// Handles theme change event caused by other tab
-    if (mode === 'true' /* for backwards compatibility */ || mode === 'dark') {
+addEventListener('storage', function (e) {
-        // If preference for dark mode indicated
+    if (e.key === STORAGE_KEY_THEME) setTheme(e.newValue);
-        set_mode(true);
+});
-    }
+
-    else if (mode === 'false' /* for backwards compatibility */ || mode === 'light') {
+// Set theme from preferences on page load
-        // If preference for light mode indicated
+addEventListener('DOMContentLoaded', function () {
-        set_mode(false);
+    const prefTheme = document.getElementById('dark_mode_pref').textContent;
-    }
+    setTheme(prefTheme);
-    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
-        set_mode(true);
-    }
-    // else do nothing, falling back to the mode defined by the `dark_mode` preference on the preferences page (backend)
-}

assets/js/watch.js

@@ -102,13 +102,6 @@ function continue_autoplay(event) {
     }
 }
 
-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_playlist(plid) {
     var playlist = document.getElementById('playlist');
 
@@ -248,9 +241,13 @@ function get_youtube_comments() {
             <hr>'.supplant({
                 contentHtml: response.contentHtml,
                 redditComments: video_data.reddit_comments_text,
-                commentsText: video_data.comments_text.supplant(
+                commentsText: video_data.comments_text.supplant({
-                    { commentCount: number_with_separator(response.commentCount) }
+                    // toLocaleString correctly splits number with local thousands separator. e.g.:
-                )
+                    // '1,234,567.89' for user with English locale
+                    // '1 234 567,89' for user with Russian locale
+                    // '1.234.567,89' for user with Portuguese locale
+                    commentCount: response.commentCount.toLocaleString()
+                })
             });
 
             comments.children[0].children[0].children[0].onclick = toggle_comments;