diff --git a/packages/web/src/lib/mercury-wrapper.ts b/packages/web/src/lib/mercury-wrapper.ts index 8f301091..9f69d876 100644 --- a/packages/web/src/lib/mercury-wrapper.ts +++ b/packages/web/src/lib/mercury-wrapper.ts @@ -1,12 +1,5 @@ import { Mercury } from "mercury-engine"; -// global variable m for the main output sound from Mercury -declare global { - interface Window { - m: number; - } -} - export type ErrorHandler = (error: string) => void; export class MercuryWrapper { @@ -16,8 +9,6 @@ export class MercuryWrapper { protected _onWarning: ErrorHandler; protected _repl: any; protected _code: any; - protected _meter: any; - // protected _docPatterns: any; constructor({ onError, @@ -26,7 +17,6 @@ export class MercuryWrapper { onError?: ErrorHandler; onWarning?: ErrorHandler; }) { - // this._docPatterns = {}; this._onError = onError || (() => {}); this._onWarning = onWarning || (() => {}); } @@ -47,8 +37,6 @@ export class MercuryWrapper { // initialize the meter this._repl.addMeter(); - // update the value every 16ms for 60fps - this._meter = setInterval(() => (window.m = this._repl.getMeter()), 16); }, onmidi: () => { console.log("MIDI devices ready"); @@ -84,4 +72,9 @@ export class MercuryWrapper { } } } + + getMeter() { + if (!this.initialized) return 0; + return this._repl.getMeter(); + } } diff --git a/packages/web/src/routes/frames/hydra.tsx b/packages/web/src/routes/frames/hydra.tsx index 5f29dacf..df08c3fe 100644 --- a/packages/web/src/routes/frames/hydra.tsx +++ b/packages/web/src/routes/frames/hydra.tsx @@ -1,10 +1,17 @@ import HydraCanvas from "@/components/hydra-canvas"; +import { useAnimationFrame } from "@/hooks/use-animation-frame"; import { useEvalHandler } from "@/hooks/use-eval-handler"; import { HydraWrapper } from "@/lib/hydra-wrapper"; import { sendToast } from "@/lib/utils"; import { isWebglSupported } from "@/lib/webgl-detector"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +declare global { + interface Window { + m: number; // meter value from Mercury + } +} + export function Component() { const canvasRef = useRef(null); const hasWebGl = useMemo(() => isWebglSupported(), []); @@ -37,9 +44,18 @@ export function Component() { await hydra.initialize(); setInstance(hydra); + + window.parent.hydra = window; })(); }, []); + // Update global value `m` for Mercury RMS meter (see src/routes/frames/mercury-web.tsx) + useAnimationFrame( + useCallback(() => { + window.m = window.parent?.mercury?.m; + }, []) + ); + useEvalHandler( useCallback( (msg) => { diff --git a/packages/web/src/routes/frames/mercury-web.tsx b/packages/web/src/routes/frames/mercury-web.tsx index b2371332..c5fb0fb5 100644 --- a/packages/web/src/routes/frames/mercury-web.tsx +++ b/packages/web/src/routes/frames/mercury-web.tsx @@ -4,6 +4,12 @@ import { sendToast } from "@/lib/utils"; import { type EvalMessage } from "@flok-editor/session"; import { useCallback, useEffect, useState } from "react"; +declare global { + interface Window { + m: number; // meter value + } +} + export function Component() { const [instance, setInstance] = useState(null); @@ -19,6 +25,8 @@ export function Component() { }); setInstance(instance); + + window.parent.mercury = window; })(); }, []); @@ -32,5 +40,15 @@ export function Component() { ) ); + useEffect(() => { + // update the value every 16ms for 60fps + const meter = setInterval(() => { + if (!instance) return; + window.m = instance.getMeter(); + }, 16); + + return () => clearInterval(meter); + }); + return null; } diff --git a/packages/web/src/routes/frames/strudel.tsx b/packages/web/src/routes/frames/strudel.tsx index 434bdb10..796f82ba 100644 --- a/packages/web/src/routes/frames/strudel.tsx +++ b/packages/web/src/routes/frames/strudel.tsx @@ -20,6 +20,8 @@ export function Component() { await instance.importModules(); setInstance(instance); + + window.parent.strudel = window; })(); }, []); diff --git a/packages/web/src/routes/session.tsx b/packages/web/src/routes/session.tsx index 8eb9eb58..e3fa0f56 100644 --- a/packages/web/src/routes/session.tsx +++ b/packages/web/src/routes/session.tsx @@ -45,6 +45,9 @@ import { declare global { interface Window { documentsContext: { [docId: string]: any }; + hydra: any; + mercury: any; + strudel: any; } }