Merge pull request #953 from th-ch/visualizer-plugin

[New plugin] Music visualizers

plugins/visualizer/back.js

@@ -0,0 +1,6 @@
+const { injectCSS } = require("../utils");
+const path = require("path");
+
+module.exports = (win, options) => {
+	injectCSS(win.webContents, path.join(__dirname, "empty-player.css"));
+};

plugins/visualizer/empty-player.css

@@ -0,0 +1,9 @@
+#player {
+	margin: 0 !important;
+	background: black;
+}
+
+#song-image,
+#song-video {
+	display: none !important;
+}

plugins/visualizer/front.js

@@ -0,0 +1,61 @@
+const defaultConfig = require("../../config/defaults");
+
+module.exports = (options) => {
+	const optionsWithDefaults = {
+		...defaultConfig.plugins.visualizer,
+		...options,
+	};
+	const VisualizerType = require(`./visualizers/${optionsWithDefaults.type}`);
+
+	document.addEventListener(
+		"audioCanPlay",
+		(e) => {
+			const video = document.querySelector("video");
+			const visualizerContainer = document.querySelector("#player");
+
+			let canvas = document.getElementById("visualizer");
+			if (!canvas) {
+				canvas = document.createElement("canvas");
+				canvas.id = "visualizer";
+				canvas.style.position = "absolute";
+				canvas.style.background = "black";
+				visualizerContainer.append(canvas);
+			}
+
+			const resizeCanvas = () => {
+				canvas.width = visualizerContainer.clientWidth;
+				canvas.height = visualizerContainer.clientHeight;
+			};
+			resizeCanvas();
+
+			const gainNode = e.detail.audioContext.createGain();
+			gainNode.gain.value = 1.25;
+			e.detail.audioSource.connect(gainNode);
+
+			const visualizer = new VisualizerType(
+				e.detail.audioContext,
+				e.detail.audioSource,
+				visualizerContainer,
+				canvas,
+				gainNode,
+				video.captureStream(),
+				optionsWithDefaults[optionsWithDefaults.type]
+			);
+
+			const resizeVisualizer = (width, height) => {
+				resizeCanvas();
+				visualizer.resize(width, height);
+			};
+			resizeVisualizer(canvas.width, canvas.height);
+			const visualizerContainerObserver = new ResizeObserver((entries) => {
+				entries.forEach((entry) => {
+					resizeVisualizer(entry.contentRect.width, entry.contentRect.height);
+				});
+			});
+			visualizerContainerObserver.observe(visualizerContainer);
+
+			visualizer.render();
+		},
+		{ passive: true }
+	);
+};

plugins/visualizer/menu.js

@@ -0,0 +1,23 @@
+const { readdirSync } = require("fs");
+const path = require("path");
+
+const { setMenuOptions } = require("../../config/plugins");
+
+const visualizerTypes = readdirSync(path.join(__dirname, "visualizers")).map(
+	(filename) => path.parse(filename).name
+);
+
+module.exports = (win, options) => [
+	{
+		label: "Type",
+		submenu: visualizerTypes.map((visualizerType) => ({
+			label: visualizerType,
+			type: "radio",
+			checked: options.type === visualizerType,
+			click: () => {
+				options.type = visualizerType;
+				setMenuOptions("visualizer", options);
+			},
+		})),
+	},
+];

plugins/visualizer/visualizers/butterchurn.js

@@ -0,0 +1,46 @@
+const butterchurn = require("butterchurn");
+const butterchurnPresets = require("butterchurn-presets");
+
+const presets = butterchurnPresets.getPresets();
+
+class ButterchurnVisualizer {
+	constructor(
+		audioContext,
+		audioSource,
+		visualizerContainer,
+		canvas,
+		audioNode,
+		stream,
+		options
+	) {
+		this.visualizer = butterchurn.default.createVisualizer(
+			audioContext,
+			canvas,
+			{
+				width: canvas.width,
+				height: canvas.height,
+			}
+		);
+
+		const preset = presets[options.preset];
+		this.visualizer.loadPreset(preset, options.blendTimeInSeconds);
+
+		this.visualizer.connectAudio(audioNode);
+
+		this.renderingFrequencyInMs = options.renderingFrequencyInMs;
+	}
+
+	resize(width, height) {
+		this.visualizer.setRendererSize(width, height);
+	}
+
+	render() {
+		const renderVisualizer = () => {
+			requestAnimationFrame(() => renderVisualizer());
+			this.visualizer.render();
+		};
+		setTimeout(renderVisualizer(), this.renderingFrequencyInMs);
+	}
+}
+
+module.exports = ButterchurnVisualizer;

plugins/visualizer/visualizers/vudio.js

@@ -0,0 +1,33 @@
+const Vudio = require("vudio/umd/vudio");
+
+class VudioVisualizer {
+	constructor(
+		audioContext,
+		audioSource,
+		visualizerContainer,
+		canvas,
+		audioNode,
+		stream,
+		options
+	) {
+		this.visualizer = new Vudio(stream, canvas, {
+			width: canvas.width,
+			height: canvas.height,
+			// Visualizer config
+			...options,
+		});
+	}
+
+	resize(width, height) {
+		this.visualizer.setOption({
+			width: width,
+			height: height,
+		});
+	}
+
+	render() {
+		this.visualizer.dance();
+	}
+}
+
+module.exports = VudioVisualizer;

plugins/visualizer/visualizers/wave.js

@@ -0,0 +1,31 @@
+const { Wave } = require("@foobar404/wave");
+
+class WaveVisualizer {
+	constructor(
+		audioContext,
+		audioSource,
+		visualizerContainer,
+		canvas,
+		audioNode,
+		stream,
+		options
+	) {
+		this.visualizer = new Wave(
+			{ context: audioContext, source: audioSource },
+			canvas
+		);
+		options.animations.forEach((animation) => {
+			this.visualizer.addAnimation(
+				eval(`new this.visualizer.animations.${animation.type}(
+					${JSON.stringify(animation.config)}
+				)`)
+			);
+		});
+	}
+
+	resize(width, height) {}
+
+	render() {}
+}
+
+module.exports = WaveVisualizer;