mirror of
https://github.com/iv-org/invidious.git
synced 2024-12-18 04:04:25 -05:00
js code rewrite. Themes rewritten, bugs fixed
This commit is contained in:
parent
f06d5b973b
commit
fd66084388
@ -145,16 +145,14 @@ window.helpers = window.helpers || {
|
|||||||
}, options.retry_timeout);
|
}, options.retry_timeout);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (callbacks.onError)
|
callbacks._onError = callbacks.onError;
|
||||||
callbacks._onError = callbacks.onError;
|
|
||||||
callbacks.onError = function (xhr) {
|
callbacks.onError = function (xhr) {
|
||||||
if (callbacks._onError)
|
if (callbacks._onError)
|
||||||
callbacks._onError();
|
callbacks._onError();
|
||||||
retry();
|
retry();
|
||||||
};
|
};
|
||||||
|
|
||||||
if (callbacks.onTimeout)
|
callbacks._onTimeout = callbacks.onTimeout;
|
||||||
callbacks._onTimeout = callbacks.onTimeout;
|
|
||||||
callbacks.onTimeout = function (xhr) {
|
callbacks.onTimeout = function (xhr) {
|
||||||
if (callbacks._onTimeout)
|
if (callbacks._onTimeout)
|
||||||
callbacks._onTimeout();
|
callbacks._onTimeout();
|
||||||
|
@ -42,9 +42,10 @@ 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.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;
|
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 curVolume = player.volume();
|
||||||
const newVolume = curVolume + delta;
|
const newVolume = curVolume + delta;
|
||||||
helpers.clamp(newVolume, 0, 1);
|
helpers.clamp(newVolume, 0, 1);
|
||||||
@ -565,10 +566,10 @@ addEventListener('keydown', function (e) {
|
|||||||
case 'MediaStop': action = stop; break;
|
case 'MediaStop': action = stop; break;
|
||||||
|
|
||||||
case 'ArrowUp':
|
case 'ArrowUp':
|
||||||
if (isPlayerFocused) action = increase_volume.bind(this, 0.1);
|
if (isPlayerFocused) action = change_volume.bind(this, 0.1);
|
||||||
break;
|
break;
|
||||||
case 'ArrowDown':
|
case 'ArrowDown':
|
||||||
if (isPlayerFocused) action = increase_volume.bind(this, -0.1);
|
if (isPlayerFocused) action = change_volume.bind(this, -0.1);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'm':
|
case 'm':
|
||||||
@ -659,7 +660,7 @@ addEventListener('keydown', function (e) {
|
|||||||
var wheelMove = event.wheelDelta || -event.detail;
|
var wheelMove = event.wheelDelta || -event.detail;
|
||||||
var volumeSign = Math.sign(wheelMove);
|
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);
|
player.on('mousewheel', mouseScroll);
|
||||||
|
@ -2,58 +2,39 @@
|
|||||||
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)';
|
||||||
|
|
||||||
|
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 () {
|
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', {}, {});
|
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');
|
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
|
||||||
document.body.classList.remove('no-theme');
|
document.body.classList.remove('no-theme');
|
||||||
document.body.classList.remove('light-theme');
|
document.body.classList.remove('light-theme');
|
||||||
document.body.classList.add('dark-theme');
|
document.body.classList.add('dark-theme');
|
||||||
} else {
|
} else {
|
||||||
// light
|
|
||||||
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
|
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
|
||||||
document.body.classList.remove('no-theme');
|
document.body.classList.remove('no-theme');
|
||||||
document.body.classList.remove('dark-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)
|
|
||||||
}
|
|
||||||
|
@ -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) {
|
function get_playlist(plid) {
|
||||||
var playlist = document.getElementById('playlist');
|
var playlist = document.getElementById('playlist');
|
||||||
|
|
||||||
@ -248,9 +241,13 @@ function get_youtube_comments() {
|
|||||||
<hr>'.supplant({
|
<hr>'.supplant({
|
||||||
contentHtml: 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(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;
|
comments.children[0].children[0].children[0].onclick = toggle_comments;
|
||||||
|
Loading…
Reference in New Issue
Block a user