smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-13 11:21:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: typescript part 1

Browse Source 
Co-authored-by: Su-Yong <simssy2205@gmail.com>
This commit is contained in:
JellyBrick
2023-09-03 00:25:48 +09:00
parent 3e3fdb3c3f
commit 82bcadcd64
57 changed files with 3958 additions and 968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
config/defaults.js → config/defaults.ts
View File

@ -1,22 +1,38 @@
export interface WindowSizeConfig {
width: number;
height: number;
}
const defaultConfig = {
'window-size': {
width: 1100,
height: 550,
},
'window-maximized': false,
'window-position': {
x: -1,
y: -1,
},
'url': 'https://music.youtube.com',
'options': {
tray: false,
appVisible: true,
autoUpdates: true,
alwaysOnTop: false,
hideMenu: false,
hideMenuWarned: false,
startAtLogin: false,
disableHardwareAcceleration: false,
removeUpgradeButton: false,
restartOnConfigChanges: false,
trayClickPlayPause: false,
autoResetAppCache: false,
resumeOnStart: true,
likeButtons: '',
proxy: '',
startingPage: '',
overrideUserAgent: false,
themes: {} as string[],
},
'plugins': {
// Enabled plugins
@ -26,7 +42,9 @@ const defaultConfig = {
'adblocker': {
enabled: true,
cache: true,
blocker: 'In player',
additionalBlockLists: [], // Additional list of filters, e.g "https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt"
disableDefaultLists: [],
},
// Disabled plugins
'shortcuts': {
@ -92,11 +110,14 @@ const defaultConfig = {
forceHide: false,
},
'picture-in-picture': {
enabled: false,
alwaysOnTop: true,
savePosition: true,
saveSize: false,
hotkey: 'P',
'enabled': false,
'alwaysOnTop': true,
'savePosition': true,
'saveSize': false,
'hotkey': 'P',
'pip-position': [10, 10],
'pip-size': [450, 275],
'isInPiP': false,
},
'captions-selector': {
enabled: false,
@ -181,4 +202,4 @@ const defaultConfig = {
},
};
module.exports = defaultConfig;
export default defaultConfig;

214
config/dynamic.js
View File

@ -1,214 +0,0 @@
const { ipcRenderer, ipcMain } = require('electron');
const defaultConfig = require('./defaults');
const { getOptions, setOptions, setMenuOptions } = require('./plugins');
const { sendToFront } = require('../providers/app-controls');
const activePlugins = {};
/**
* [!IMPORTANT!]
* The method is **sync** in the main process and **async** in the renderer process.
*/
module.exports.getActivePlugins
= process.type === 'renderer'
? async () => ipcRenderer.invoke('get-active-plugins')
: () => activePlugins;
if (process.type === 'browser') {
ipcMain.handle('get-active-plugins', this.getActivePlugins);
}
/**
* [!IMPORTANT!]
* The method is **sync** in the main process and **async** in the renderer process.
*/
module.exports.isActive
= process.type === 'renderer'
? async (plugin) =>
plugin in (await ipcRenderer.invoke('get-active-plugins'))
: (plugin) => plugin in activePlugins;
/**
* This class is used to create a dynamic synced config for plugins.
*
* [!IMPORTANT!]
* The methods are **sync** in the main process and **async** in the renderer process.
*
* @param {string} name - The name of the plugin.
* @param {boolean} [options.enableFront] - Whether the config should be available in front.js. Default: false.
* @param {object} [options.initialOptions] - The initial options for the plugin. Default: loaded from store.
*
* @example
* const { PluginConfig } = require("../../config/dynamic");
* const config = new PluginConfig("plugin-name", { enableFront: true });
* module.exports = { ...config };
*
* // or
*
* module.exports = (win, options) => {
* const config = new PluginConfig("plugin-name", {
* enableFront: true,
* initialOptions: options,
* });
* setupMyPlugin(win, config);
* };
*/
module.exports.PluginConfig = class PluginConfig {
#name;
#config;
#defaultConfig;
#enableFront;
#subscribers = {};
#allSubscribers = [];
constructor(name, { enableFront = false, initialOptions = undefined } = {}) {
const pluginDefaultConfig = defaultConfig.plugins[name] || {};
const pluginConfig = initialOptions || getOptions(name) || {};
this.#name = name;
this.#enableFront = enableFront;
this.#defaultConfig = pluginDefaultConfig;
this.#config = { ...pluginDefaultConfig, ...pluginConfig };
if (this.#enableFront) {
this.#setupFront();
}
activePlugins[name] = this;
}
get = (option) => this.#config[option];
set = (option, value) => {
this.#config[option] = value;
this.#onChange(option);
this.#save();
};
toggle = (option) => {
this.#config[option] = !this.#config[option];
this.#onChange(option);
this.#save();
};
getAll = () => ({ ...this.#config });
setAll = (options) => {
if (!options || typeof options !== 'object') {
throw new Error('Options must be an object.');
}
let changed = false;
for (const [key, value] of Object.entries(options)) {
if (this.#config[key] !== value) {
this.#config[key] = value;
this.#onChange(key, false);
changed = true;
}
}
if (changed) {
for (const fn of this.#allSubscribers) {
fn(this.#config);
}
}
this.#save();
};
getDefaultConfig = () => this.#defaultConfig;
/**
* Use this method to set an option and restart the app if `appConfig.restartOnConfigChange === true`
*
* Used for options that require a restart to take effect.
*/
setAndMaybeRestart = (option, value) => {
this.#config[option] = value;
setMenuOptions(this.#name, this.#config);
this.#onChange(option);
};
subscribe = (valueName, fn) => {
this.#subscribers[valueName] = fn;
};
subscribeAll = (fn) => {
this.#allSubscribers.push(fn);
};
/** Called only from back */
#save() {
setOptions(this.#name, this.#config);
}
#onChange(valueName, single = true) {
this.#subscribers[valueName]?.(this.#config[valueName]);
if (single) {
for (const fn of this.#allSubscribers) {
fn(this.#config);
}
}
}
#setupFront() {
const ignoredMethods = ['subscribe', 'subscribeAll'];
if (process.type === 'renderer') {
for (const [fnName, fn] of Object.entries(this)) {
if (typeof fn !== 'function' || fn.name in ignoredMethods) {
return;
}
this[fnName] = async (...args) => await ipcRenderer.invoke(
`${this.#name}-config-${fnName}`,
...args,
);
this.subscribe = (valueName, fn) => {
if (valueName in this.#subscribers) {
console.error(`Already subscribed to ${valueName}`);
}
this.#subscribers[valueName] = fn;
ipcRenderer.on(
`${this.#name}-config-changed-${valueName}`,
(_, value) => {
fn(value);
},
);
ipcRenderer.send(`${this.#name}-config-subscribe`, valueName);
};
this.subscribeAll = (fn) => {
ipcRenderer.on(`${this.#name}-config-changed`, (_, value) => {
fn(value);
});
ipcRenderer.send(`${this.#name}-config-subscribe-all`);
};
}
} else if (process.type === 'browser') {
for (const [fnName, fn] of Object.entries(this)) {
if (typeof fn !== 'function' || fn.name in ignoredMethods) {
return;
}
ipcMain.handle(`${this.#name}-config-${fnName}`, (_, ...args) => fn(...args));
}
ipcMain.on(`${this.#name}-config-subscribe`, (_, valueName) => {
this.subscribe(valueName, (value) => {
sendToFront(`${this.#name}-config-changed-${valueName}`, value);
});
});
ipcMain.on(`${this.#name}-config-subscribe-all`, () => {
this.subscribeAll((value) => {
sendToFront(`${this.#name}-config-changed`, value);
});
});
}
}
};

240
config/dynamic.ts Normal file
View File

@ -0,0 +1,240 @@
/* eslint-disable @typescript-eslint/require-await */
import { ipcMain, ipcRenderer } from 'electron';
import defaultConfig from './defaults';
import { getOptions, setMenuOptions, setOptions } from './plugins';
import { sendToFront } from '../providers/app-controls';
import { Entries } from '../utils/type-utils';
type DefaultPluginsConfig = typeof defaultConfig.plugins;
type OneOfDefaultConfigKey = keyof DefaultPluginsConfig;
type OneOfDefaultConfig = typeof defaultConfig.plugins[OneOfDefaultConfigKey];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const activePlugins: { [key in OneOfDefaultConfigKey]?: PluginConfig<any> } = {};
/**
* [!IMPORTANT!]
* The method is **sync** in the main process and **async** in the renderer process.
*/
export const getActivePlugins
= process.type === 'renderer'
? async () => ipcRenderer.invoke('get-active-plugins')
: () => activePlugins;
if (process.type === 'browser') {
ipcMain.handle('get-active-plugins', getActivePlugins);
}
/**
* [!IMPORTANT!]
* The method is **sync** in the main process and **async** in the renderer process.
*/
export const isActive
= process.type === 'renderer'
? async (plugin: string) =>
plugin in (await ipcRenderer.invoke('get-active-plugins'))
: (plugin: string): boolean => plugin in activePlugins;
interface PluginConfigOptions {
enableFront: boolean;
initialOptions?: OneOfDefaultConfig;
}
/**
* This class is used to create a dynamic synced config for plugins.
*
* [!IMPORTANT!]
* The methods are **sync** in the main process and **async** in the renderer process.
*
* @param {string} name - The name of the plugin.
* @param {boolean} [options.enableFront] - Whether the config should be available in front.js. Default: false.
* @param {object} [options.initialOptions] - The initial options for the plugin. Default: loaded from store.
*
* @example
* const { PluginConfig } = require("../../config/dynamic");
* const config = new PluginConfig("plugin-name", { enableFront: true });
* module.exports = { ...config };
*
* // or
*
* module.exports = (win, options) => {
* const config = new PluginConfig("plugin-name", {
* enableFront: true,
* initialOptions: options,
* });
* setupMyPlugin(win, config);
* };
*/
type ConfigType<T extends OneOfDefaultConfigKey> = typeof defaultConfig.plugins[T];
type ValueOf<T> = T[keyof T];
export class PluginConfig<T extends OneOfDefaultConfigKey> {
private name: string;
private config: ConfigType<T>;
private defaultConfig: ConfigType<T>;
private enableFront: boolean;
private subscribers: { [key in keyof ConfigType<T>]?: (config: ConfigType<T>) => void } = {};
private allSubscribers: ((config: ConfigType<T>) => void)[] = [];
constructor(
name: T,
options: PluginConfigOptions = {
enableFront: false,
},
) {
const pluginDefaultConfig = defaultConfig.plugins[name] ?? {};
const pluginConfig = options.initialOptions || getOptions(name) || {};
this.name = name;
this.enableFront = options.enableFront;
this.defaultConfig = pluginDefaultConfig;
this.config = { ...pluginDefaultConfig, ...pluginConfig };
if (this.enableFront) {
this.#setupFront();
}
activePlugins[name] = this;
}
async get(key: keyof ConfigType<T>): Promise<ValueOf<ConfigType<T>>> {
return this.config[key];
}
set(key: keyof ConfigType<T>, value: ValueOf<ConfigType<T>>) {
this.config[key] = value;
this.#onChange(key);
this.#save();
}
getAll() {
return { ...this.config };
}
setAll(options: ConfigType<T>) {
if (!options || typeof options !== 'object') {
throw new Error('Options must be an object.');
}
let changed = false;
for (const [key, value] of Object.entries(options) as Entries<typeof options>) {
if (this.config[key] !== value) {
this.config[key] = value;
this.#onChange(key, false);
changed = true;
}
}
if (changed) {
for (const fn of this.allSubscribers) {
fn(this.config);
}
}
this.#save();
}
getDefaultConfig() {
return this.defaultConfig;
}
/**
* Use this method to set an option and restart the app if `appConfig.restartOnConfigChange === true`
*
* Used for options that require a restart to take effect.
*/
setAndMaybeRestart(key: keyof ConfigType<T>, value: ValueOf<ConfigType<T>>) {
this.config[key] = value;
setMenuOptions(this.name, this.config);
this.#onChange(key);
}
subscribe(valueName: keyof ConfigType<T>, fn: (config: ConfigType<T>) => void) {
this.subscribers[valueName] = fn;
}
subscribeAll(fn: (config: ConfigType<T>) => void) {
this.allSubscribers.push(fn);
}
/** Called only from back */
#save() {
setOptions(this.name, this.config);
}
#onChange(valueName: keyof ConfigType<T>, single: boolean = true) {
this.subscribers[valueName]?.(this.config[valueName] as ConfigType<T>);
if (single) {
for (const fn of this.allSubscribers) {
fn(this.config);
}
}
}
#setupFront() {
const ignoredMethods = ['subscribe', 'subscribeAll'];
if (process.type === 'renderer') {
for (const [fnName, fn] of Object.entries(this) as Entries<this>) {
if (typeof fn !== 'function' || fn.name in ignoredMethods) {
return;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-return
this[fnName] = (async (...args: any) => await ipcRenderer.invoke(
`${this.name}-config-${String(fnName)}`,
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
...args,
)) as typeof this[keyof this];
this.subscribe = (valueName, fn: (config: ConfigType<T>) => void) => {
if (valueName in this.subscribers) {
console.error(`Already subscribed to ${String(valueName)}`);
}
this.subscribers[valueName] = fn;
ipcRenderer.on(
`${this.name}-config-changed-${String(valueName)}`,
(_, value: ConfigType<T>) => {
fn(value);
},
);
ipcRenderer.send(`${this.name}-config-subscribe`, valueName);
};
this.subscribeAll = (fn: (config: ConfigType<T>) => void) => {
ipcRenderer.on(`${this.name}-config-changed`, (_, value: ConfigType<T>) => {
fn(value);
});
ipcRenderer.send(`${this.name}-config-subscribe-all`);
};
}
} else if (process.type === 'browser') {
for (const [fnName, fn] of Object.entries(this) as Entries<this>) {
if (typeof fn !== 'function' || fn.name in ignoredMethods) {
return;
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-return
ipcMain.handle(`${this.name}-config-${String(fnName)}`, (_, ...args) => fn(...args));
}
ipcMain.on(`${this.name}-config-subscribe`, (_, valueName: keyof ConfigType<T>) => {
this.subscribe(valueName, (value) => {
sendToFront(`${this.name}-config-changed-${String(valueName)}`, value);
});
});
ipcMain.on(`${this.name}-config-subscribe-all`, () => {
this.subscribeAll((value) => {
sendToFront(`${this.name}-config-changed`, value);
});
});
}
}
}

31
config/index.js
View File

@ -1,31 +0,0 @@
const defaultConfig = require('./defaults');
const plugins = require('./plugins');
const store = require('./store');
const { restart } = require('../providers/app-controls');
const set = (key, value) => {
store.set(key, value);
};
function setMenuOption(key, value) {
set(key, value);
if (store.get('options.restartOnConfigChanges')) {
restart();
}
}
const get = (key) => store.get(key);
module.exports = {
defaultConfig,
get,
set,
setMenuOption,
edit: () => store.openInEditor(),
watch(cb) {
store.onDidChange('options', cb);
store.onDidChange('plugins', cb);
},
plugins,
};

57
config/index.ts Normal file
View File

@ -0,0 +1,57 @@
import Store from 'electron-store';
import defaultConfig from './defaults';
import plugins from './plugins';
import store from './store';
import { restart } from '../providers/app-controls';
const set = (key: string, value: unknown) => {
store.set(key, value);
};
function setMenuOption(key: string, value: unknown) {
set(key, value);
if (store.get('options.restartOnConfigChanges')) {
restart();
}
}
// MAGIC OF TYPESCRIPT
type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]]
type Join<K, P> = K extends string | number ?
P extends string | number ?
`${K}${'' extends P ? '' : '.'}${P}`
: never : never;
type Paths<T, D extends number = 10> = [D] extends [never] ? never : T extends object ?
{ [K in keyof T]-?: K extends string | number ?
`${K}` | Join<K, Paths<T[K], Prev[D]>>
: never
}[keyof T] : ''
type FirstKey<T extends string> = T extends `${infer K}.${string}` ? K : T;
type NextKey<T extends string> = T extends `${string}.${infer K}` ? K : T;
type PathValue<T, Key extends string> = (
T extends object
? FirstKey<Key> extends keyof T
? PathValue<T[FirstKey<Key>], NextKey<Key>>
: T
: T
);
const get = <Key extends Paths<typeof defaultConfig>>(key: Key) => store.get(key) as PathValue<typeof defaultConfig, typeof key>;
export default {
defaultConfig,
get,
set,
setMenuOption,
edit: () => store.openInEditor(),
watch(cb: Parameters<Store['onDidChange']>[1]) {
store.onDidChange('options', cb);
store.onDidChange('plugins', cb);
},
plugins,
};

55
config/plugins.js
View File

@ -1,55 +0,0 @@
const store = require('./store');
const { restart } = require('../providers/app-controls');
function getEnabled() {
const plugins = store.get('plugins');
return Object.entries(plugins).filter(([plugin]) =>
isEnabled(plugin),
);
}
function isEnabled(plugin) {
const pluginConfig = store.get('plugins')[plugin];
return pluginConfig !== undefined && pluginConfig.enabled;
}
function setOptions(plugin, options) {
const plugins = store.get('plugins');
store.set('plugins', {
...plugins,
[plugin]: {
...plugins[plugin],
...options,
},
});
}
function setMenuOptions(plugin, options) {
setOptions(plugin, options);
if (store.get('options.restartOnConfigChanges')) {
restart();
}
}
function getOptions(plugin) {
return store.get('plugins')[plugin];
}
function enable(plugin) {
setMenuOptions(plugin, { enabled: true });
}
function disable(plugin) {
setMenuOptions(plugin, { enabled: false });
}
module.exports = {
isEnabled,
getEnabled,
enable,
disable,
setOptions,
setMenuOptions,
getOptions,
};

63
config/plugins.ts Normal file
View File

@ -0,0 +1,63 @@
import store from './store';
import defaultConfig from './defaults';
import { restart } from '../providers/app-controls';
import { Entries } from '../utils/type-utils';
interface Plugin {
enabled: boolean;
}
type DefaultPluginsConfig = typeof defaultConfig.plugins;
export function getEnabled() {
const plugins = store.get('plugins') as DefaultPluginsConfig;
return (Object.entries(plugins) as Entries<DefaultPluginsConfig>).filter(([plugin]) =>
isEnabled(plugin),
);
}
export function isEnabled(plugin: string) {
const pluginConfig = (store.get('plugins') as Record<string, Plugin>)[plugin];
return pluginConfig !== undefined && pluginConfig.enabled;
}
export function setOptions<T>(plugin: string, options: T) {
const plugins = store.get('plugins') as Record<string, T>;
store.set('plugins', {
...plugins,
[plugin]: {
...plugins[plugin],
...options,
},
});
}
export function setMenuOptions<T>(plugin: string, options: T) {
setOptions(plugin, options);
if (store.get('options.restartOnConfigChanges')) {
restart();
}
}
export function getOptions<T>(plugin: string): T {
return (store.get('plugins') as Record<string, T>)[plugin];
}
export function enable(plugin: string) {
setMenuOptions(plugin, { enabled: true });
}
export function disable(plugin: string) {
setMenuOptions(plugin, { enabled: false });
}
export default {
isEnabled,
getEnabled,
enable,
disable,
setOptions,
setMenuOptions,
getOptions,
};

43
config/store.js → config/store.ts
View File

@ -1,15 +1,16 @@
const Store = require('electron-store');
import Store from 'electron-store';
import Conf from 'conf';
const defaults = require('./defaults');
import defaults from './defaults';
const setDefaultPluginOptions = (store, plugin) => {
const setDefaultPluginOptions = (store: Conf<Record<string, unknown>>, plugin: keyof typeof defaults.plugins) => {
if (!store.get(`plugins.${plugin}`)) {
store.set(`plugins.${plugin}`, defaults.plugins[plugin]);
}
};
const migrations = {
'>=1.20.0'(store) {
'>=1.20.0'(store: Conf<Record<string, unknown>>) {
setDefaultPluginOptions(store, 'visualizer');
if (store.get('plugins.notifications.toastStyle') === undefined) {
@ -25,14 +26,14 @@ const migrations = {
store.set('options.likeButtons', 'force');
}
},
'>=1.17.0'(store) {
'>=1.17.0'(store: Conf<Record<string, unknown>>) {
setDefaultPluginOptions(store, 'picture-in-picture');
if (store.get('plugins.video-toggle.mode') === undefined) {
store.set('plugins.video-toggle.mode', 'custom');
}
},
'>=1.14.0'(store) {
'>=1.14.0'(store: Conf<Record<string, unknown>>) {
if (
typeof store.get('plugins.precise-volume.globalShortcuts') !== 'object'
) {
@ -44,18 +45,25 @@ const migrations = {
store.set('plugins.video-toggle.enabled', true);
}
},
'>=1.13.0'(store) {
'>=1.13.0'(store: Conf<Record<string, unknown>>) {
if (store.get('plugins.discord.listenAlong') === undefined) {
store.set('plugins.discord.listenAlong', true);
}
},
'>=1.12.0'(store) {
const options = store.get('plugins.shortcuts');
'>=1.12.0'(store: Conf<Record<string, unknown>>) {
const options = store.get('plugins.shortcuts') as Record<string, {
action: string;
shortcut: unknown;
}[] | Record<string, unknown>>;
let updated = false;
for (const optionType of ['global', 'local']) {
if (Array.isArray(options[optionType])) {
const updatedOptions = {};
for (const optionObject of options[optionType]) {
const optionsArray = options[optionType] as {
action: string;
shortcut: unknown;
}[];
const updatedOptions: Record<string, unknown> = {};
for (const optionObject of optionsArray) {
if (optionObject.action && optionObject.shortcut) {
updatedOptions[optionObject.action] = optionObject.shortcut;
}
@ -70,20 +78,21 @@ const migrations = {
store.set('plugins.shortcuts', options);
}
},
'>=1.11.0'(store) {
'>=1.11.0'(store: Conf<Record<string, unknown>>) {
if (store.get('options.resumeOnStart') === undefined) {
store.set('options.resumeOnStart', true);
}
},
'>=1.7.0'(store) {
const enabledPlugins = store.get('plugins');
'>=1.7.0'(store: Conf<Record<string, unknown>>) {
const enabledPlugins = store.get('plugins') as string[];
if (!Array.isArray(enabledPlugins)) {
console.warn('Plugins are not in array format, cannot migrate');
return;
}
// Include custom options
const plugins = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const plugins: Record<string, any> = {
adblocker: {
enabled: true,
cache: true,
@ -95,7 +104,9 @@ const migrations = {
downloadFolder: undefined, // Custom download folder (absolute path)
},
};
for (const enabledPlugin of enabledPlugins) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
plugins[enabledPlugin] = {
...plugins[enabledPlugin],
enabled: true,
@ -106,7 +117,7 @@ const migrations = {
},
};
module.exports = new Store({
export default new Store({
defaults,
clearInvalidConfig: false,
migrations,