fix: fix unloader

This commit is contained in:
JellyBrick
2023-11-28 11:48:09 +09:00
parent 8f7933c111
commit 75ae9f4fad
3 changed files with 69 additions and 64 deletions

View File

@ -21,6 +21,8 @@ const createContext = (id: string): PreloadContext<PluginConfig> => ({
}); });
export const forceUnloadPreloadPlugin = (id: string) => { export const forceUnloadPreloadPlugin = (id: string) => {
if (!loadedPluginMap[id]) return;
const hasStopped = stopPlugin(id, loadedPluginMap[id], { const hasStopped = stopPlugin(id, loadedPluginMap[id], {
ctx: 'preload', ctx: 'preload',
context: createContext(id), context: createContext(id),
@ -73,7 +75,7 @@ export const loadAllPreloadPlugins = () => {
const pluginConfigs = config.plugins.getPlugins(); const pluginConfigs = config.plugins.getPlugins();
for (const [pluginId, pluginDef] of Object.entries(preloadPlugins)) { for (const [pluginId, pluginDef] of Object.entries(preloadPlugins)) {
const config = deepmerge(pluginDef.config, pluginConfigs[pluginId] ?? {}) ; const config = deepmerge(pluginDef.config ?? { enable: false }, pluginConfigs[pluginId] ?? {}) ;
if (config.enabled) { if (config.enabled) {
forceLoadPreloadPlugin(pluginId); forceLoadPreloadPlugin(pluginId);

View File

@ -145,77 +145,79 @@ export default createPlugin({
]; ];
}, },
async renderer({ getConfig }) { renderer: {
const config = await getConfig(); async onPlayerApiReady(_, { getConfig }) {
const config = await getConfig();
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
let visualizerType: { new(...args: any[]): Visualizer<unknown> } = vudio; let visualizerType: { new(...args: any[]): Visualizer<unknown> } = vudio;
if (config.type === 'wave') { if (config.type === 'wave') {
visualizerType = wave; visualizerType = wave;
} else if (config.type === 'butterchurn') { } else if (config.type === 'butterchurn') {
visualizerType = butterchurn; visualizerType = butterchurn;
} }
document.addEventListener( document.addEventListener(
'audioCanPlay', 'audioCanPlay',
(e) => { (e) => {
const video = document.querySelector<HTMLVideoElement & { captureStream(): MediaStream; }>('video'); const video = document.querySelector<HTMLVideoElement & { captureStream(): MediaStream; }>('video');
if (!video) { if (!video) {
return; return;
}
const visualizerContainer = document.querySelector<HTMLElement>('#player');
if (!visualizerContainer) {
return;
}
let canvas = document.querySelector<HTMLCanvasElement>('#visualizer');
if (!canvas) {
canvas = document.createElement('canvas');
canvas.id = 'visualizer';
visualizerContainer?.prepend(canvas);
}
const resizeCanvas = () => {
if (canvas) {
canvas.width = visualizerContainer.clientWidth;
canvas.height = visualizerContainer.clientHeight;
} }
};
resizeCanvas(); const visualizerContainer = document.querySelector<HTMLElement>('#player');
if (!visualizerContainer) {
return;
}
const gainNode = e.detail.audioContext.createGain(); let canvas = document.querySelector<HTMLCanvasElement>('#visualizer');
gainNode.gain.value = 1.25; if (!canvas) {
e.detail.audioSource.connect(gainNode); canvas = document.createElement('canvas');
canvas.id = 'visualizer';
visualizerContainer?.prepend(canvas);
}
const visualizer = new visualizerType( const resizeCanvas = () => {
e.detail.audioContext, if (canvas) {
e.detail.audioSource, canvas.width = visualizerContainer.clientWidth;
visualizerContainer, canvas.height = visualizerContainer.clientHeight;
canvas, }
gainNode, };
video.captureStream(),
config,
);
const resizeVisualizer = (width: number, height: number) => {
resizeCanvas(); resizeCanvas();
visualizer.resize(width, height);
};
resizeVisualizer(canvas.width, canvas.height); const gainNode = e.detail.audioContext.createGain();
const visualizerContainerObserver = new ResizeObserver((entries) => { gainNode.gain.value = 1.25;
for (const entry of entries) { e.detail.audioSource.connect(gainNode);
resizeVisualizer(entry.contentRect.width, entry.contentRect.height);
}
});
visualizerContainerObserver.observe(visualizerContainer);
visualizer.render(); const visualizer = new visualizerType(
}, e.detail.audioContext,
{ passive: true }, e.detail.audioSource,
); visualizerContainer,
canvas,
gainNode,
video.captureStream(),
config,
);
const resizeVisualizer = (width: number, height: number) => {
resizeCanvas();
visualizer.resize(width, height);
};
resizeVisualizer(canvas.width, canvas.height);
const visualizerContainerObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
resizeVisualizer(entry.contentRect.width, entry.contentRect.height);
}
});
visualizerContainerObserver.observe(visualizerContainer);
visualizer.render();
},
{ passive: true },
);
},
}, },
}); });

View File

@ -126,10 +126,11 @@ export const stopPlugin = <Config extends PluginConfig>(
if (!def || !def[options.ctx]) return false; if (!def || !def[options.ctx]) return false;
if (typeof def[options.ctx] === 'function') return false; if (typeof def[options.ctx] === 'function') return false;
const stop = def[options.ctx] as PluginLifecycleSimple<Config, unknown>; const defCtx = def[options.ctx] as { stop: PluginLifecycleSimple<Config, unknown> } | undefined;
if (!stop) return null; if (!defCtx?.stop) return null;
try { try {
const stop = defCtx.stop;
const start = performance.now(); const start = performance.now();
stop.bind(def[options.ctx])( stop.bind(def[options.ctx])(
options.context as Config & typeof options.context, options.context as Config & typeof options.context,