@tialro2/rnbokit 1.0.15 → 1.0.18

package/dist/RNBOcomponents/MicIn.svelte

@@ -1,11 +1,11 @@
-<script>
-	//TODO: create a nice way to visualise the average volume!
-	import { onDestroy } from 'svelte';
-	
-
-	/** @type {MediaStream|null} */
-	let stream = $state();
-	
+<script>
+	//TODO: create a nice way to visualise the average volume!
+	import { onDestroy } from 'svelte';
+	
+
+	/** @type {MediaStream|null} */
+	let stream = $state();
+	
 	/**
 	 * @typedef {Object} Props
 	 * @property {AudioContext} context
@@ -14,75 +14,75 @@
 
 	/** @type {Props & { [key: string]: any }} */
 	let { context, audio = $bindable(), ...rest } = $props();
-
-	let volumeCallback = null;
-	/** @type {number|null} */
-	let averageVolume = $state(0);
-
-	/** @param {MediaStream} stream */
-	const handleSuccess = (stream) => {
-		const source = context.createMediaStreamSource(stream);
-		let analyser = context.createAnalyser();
-		analyser.fftSize = 512;
-		analyser.minDecibels = -127;
-		analyser.maxDecibels = 0;
-		analyser.smoothingTimeConstant = 0.4;
-		source.connect(analyser);
-		const volumes = new Uint8Array(analyser.frequencyBinCount);
-		//probe every 100ms for the average volume
-		volumeCallback = setInterval(() => {
-			analyser.getByteFrequencyData(volumes);
-			let volumeSum = 0;
-			for (const volume of volumes) volumeSum += volume;
-			averageVolume = volumeSum / volumes.length;
-			// console.log(`brightness-[${averageVolume / 100}]`);
-		}, 100);
-		source.connect(analyser);
-		audio = analyser;
-		// analyser.connect(device.node, inlet.index - 1);
-	};
-
-	async function connectMic() {
-		if (!stream) {
-			stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
-			handleSuccess(stream);
-		} else {
-			disconnectMic();
-		}
-	}
-	function disconnectMic() {
-		if (!stream) return;
-		clearInterval(volumeCallback);
-		volumeCallback = null;
-		averageVolume = 0;
-		stream.getTracks().forEach((track) => track.stop());
-		stream = null;
-	}
-	onDestroy(disconnectMic);
-</script>
-
-<div class="RNBOsubcomponent RNBOalign" {...rest}>
-	<button onclick={connectMic} type="button" class="RNBObutton">
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" class:RNBOfill={stream}>
-			<path
-				d="M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z"
-			/>
-		</svg>
-	</button>
-	<p>{averageVolume}</p>
-</div>
-
-<style>
-	.RNBOfill {
-		fill: rgb(var(--local-accent-color));
-		transition: var(--local-animation) var(--local-animation-duration);
-		transition-timing-function: var(--local-animation-function);
-	}
-	.RNBObutton {
-		width: 3rem;
-		border-style: none;
-		background-color: transparent;
-		transition: var(--local-animation) var(--local-animation-duration);
-		transition-timing-function: var(--local-animation-function);
-	}
-</style>
+
+	let volumeCallback = null;
+	/** @type {number|null} */
+	let averageVolume = $state(0);
+
+	/** @param {MediaStream} stream */
+	const handleSuccess = (stream) => {
+		const source = context.createMediaStreamSource(stream);
+		let analyser = context.createAnalyser();
+		analyser.fftSize = 512;
+		analyser.minDecibels = -127;
+		analyser.maxDecibels = 0;
+		analyser.smoothingTimeConstant = 0.4;
+		source.connect(analyser);
+		const volumes = new Uint8Array(analyser.frequencyBinCount);
+		//probe every 100ms for the average volume
+		volumeCallback = setInterval(() => {
+			analyser.getByteFrequencyData(volumes);
+			let volumeSum = 0;
+			for (const volume of volumes) volumeSum += volume;
+			averageVolume = volumeSum / volumes.length;
+			// console.log(`brightness-[${averageVolume / 100}]`);
+		}, 100);
+		source.connect(analyser);
+		audio = analyser;
+		// analyser.connect(device.node, inlet.index - 1);
+	};
+
+	async function connectMic() {
+		if (!stream) {
+			stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+			handleSuccess(stream);
+		} else {
+			disconnectMic();
+		}
+	}
+	function disconnectMic() {
+		if (!stream) return;
+		clearInterval(volumeCallback);
+		volumeCallback = null;
+		averageVolume = 0;
+		stream.getTracks().forEach((track) => track.stop());
+		stream = null;
+	}
+	onDestroy(disconnectMic);
+</script>
+
+<div class="RNBOsubcomponent RNBOalign" {...rest}>
+	<button onclick={connectMic} type="button" class="RNBObutton">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" class:RNBOfill={stream}>
+			<path
+				d="M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z"
+			/>
+		</svg>
+	</button>
+	<p>{averageVolume}</p>
+</div>
+
+<style>
+	.RNBOfill {
+		fill: rgb(var(--local-accent-color));
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+	.RNBObutton {
+		width: 3rem;
+		border-style: none;
+		background-color: transparent;
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+</style>

package/dist/RNBOcomponents/RNBOInlet.svelte

@@ -1,66 +1,66 @@
-<script>
-	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
-	import RadioItem from '../UIcomponents/RadioItem.svelte';
-	import AudioDropIn from './AudioDropIn.svelte';
-	import MicIn from './MicIn.svelte';
-
-	let context = device.context;
-
-	/** @typedef {object} inlet
-	 * @property {number} index - the port index
-	 * @property {string} tag - the tag
-	 * @property {'signal'} type - the type
-	 * @property {string} meta - the meta
-	 */
-
-	/** @type {AudioNode} */
-	let audio = $state();
-
-	/** @type {{default: 'default', mic: 'mic', dropIn: 'dropIn'}} */
-	let modes = { default: 'default', mic: 'mic', dropIn: 'dropIn' };
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {import ('@rnbo/js').Device} device
-	 * @property {inlet} [inlet]
-	 * @property {'default'|'mic'|'dropIn'} [mode]
-	 * @property {import('svelte').Snippet<[any]>} [children]
-	 */
-
-	/** @type {Props & { [key: string]: any }} */
-	let {
-		device,
-		inlet = { index: 1, tag: 'in1', type: 'signal', meta: 'something' },
-		mode = $bindable(modes.default),
-		children,
-		...rest
-	} = $props();
-	//set a defaultMode so the radio group only shows if no mode has been specified
-	/** @type {'default'|'mic'|'dropIn'} */
-	let defaultMode = mode;
-	//make sure the default mode is mic in the radio group
-	if (mode == modes.default) mode = modes.mic;
-
-	$effect(() => {
-		if (audio) {
-			audio.connect(device.node, inlet.index - 1);
-		}
-	});
-</script>
-
-<div class="RNBOcomponent RNBOsection" {...rest}>
-	{#if children}{@render children({ context, audio })}{:else}
-		<div class="RNBOtag">{inlet.tag}</div>
-		{#if defaultMode === modes.default}
-			<RadioGroup>
-				<RadioItem bind:group={mode} name="Mic" value={modes.mic}>Mic</RadioItem>
-				<RadioItem bind:group={mode} name="DropIn" value={modes.dropIn}>Drop-in</RadioItem>
-			</RadioGroup>
-		{/if}
-		{#if mode === modes.dropIn}
-			<AudioDropIn class="RNBOsubcomponent" bind:audio {context} />
-		{:else}
-			<MicIn bind:audio {context} />
-		{/if}
-	{/if}
-</div>
+<script>
+	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
+	import RadioItem from '../UIcomponents/RadioItem.svelte';
+	import AudioDropIn from './AudioDropIn.svelte';
+	import MicIn from './MicIn.svelte';
+
+	let context = device.context;
+
+	/** @typedef {object} inlet
+	 * @property {number} index - the port index
+	 * @property {string} tag - the tag
+	 * @property {'signal'} type - the type
+	 * @property {string} meta - the meta
+	 */
+
+	/** @type {AudioNode} */
+	let audio = $state();
+
+	/** @type {{default: 'default', mic: 'mic', dropIn: 'dropIn'}} */
+	let modes = { default: 'default', mic: 'mic', dropIn: 'dropIn' };
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import ('@rnbo/js').Device} device
+	 * @property {inlet} [inlet]
+	 * @property {'default'|'mic'|'dropIn'} [mode]
+	 * @property {import('svelte').Snippet<[any]>} [children]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let {
+		device,
+		inlet = { index: 1, tag: 'in1', type: 'signal', meta: 'something' },
+		mode = $bindable(modes.default),
+		children,
+		...rest
+	} = $props();
+	//set a defaultMode so the radio group only shows if no mode has been specified
+	/** @type {'default'|'mic'|'dropIn'} */
+	let defaultMode = mode;
+	//make sure the default mode is mic in the radio group
+	if (mode == modes.default) mode = modes.mic;
+
+	$effect(() => {
+		if (audio) {
+			audio.connect(device.node, inlet.index - 1);
+		}
+	});
+</script>
+
+<div class="RNBOcomponent RNBOsection" {...rest}>
+	{#if children}{@render children({ context, audio })}{:else}
+		<div class="RNBOtag">{inlet.tag}</div>
+		{#if defaultMode === modes.default}
+			<RadioGroup>
+				<RadioItem bind:group={mode} name="Mic" value={modes.mic}>Mic</RadioItem>
+				<RadioItem bind:group={mode} name="DropIn" value={modes.dropIn}>Drop-in</RadioItem>
+			</RadioGroup>
+		{/if}
+		{#if mode === modes.dropIn}
+			<AudioDropIn class="RNBOsubcomponent" bind:audio {context} />
+		{:else}
+			<MicIn bind:audio {context} />
+		{/if}
+	{/if}
+</div>

package/dist/RNBOcomponents/RNBOInport.svelte

@@ -1,21 +1,21 @@
-<script>
-	import Controls from '../UIcomponents/Controls.svelte';
-	import rnbo from '@rnbo/js';
-	const { TimeNow, MessageEvent } = rnbo;
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} tag
-	 * @property {import ('@rnbo/js').Device} device
-	 */
-
-	/** @type {Props} */
-	let { tag, device } = $props();
-
-	const sendMessage = () => {
-		const messageEvent = new MessageEvent(TimeNow, tag);
-		device.scheduleEvent(messageEvent);
-	};
-</script>
-
-<Controls {tag} {sendMessage} />
+<script>
+	import Controls from '../UIcomponents/Controls.svelte';
+	import rnbo from '@rnbo/js';
+	const { TimeNow, MessageEvent } = rnbo;
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} tag
+	 * @property {import ('@rnbo/js').Device} device
+	 */
+
+	/** @type {Props} */
+	let { tag, device } = $props();
+
+	const sendMessage = () => {
+		const messageEvent = new MessageEvent(TimeNow, tag);
+		device.scheduleEvent(messageEvent);
+	};
+</script>
+
+<Controls {tag} {sendMessage} />

package/dist/RNBOcomponents/RNBOMidiIn.svelte

@@ -1,63 +1,63 @@
-<script>
-	import rnbo from '@rnbo/js';
-	const { MIDIEvent, TimeNow } = rnbo;
-	import XyMidiIn from './XYMidiIn.svelte';
-	import ExtMidiIn from './ExtMidiIn.svelte';
-	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
-	import RadioItem from '../UIcomponents/RadioItem.svelte';
-
-	/** @type {{default: 'default', xy: 'xy', external: 'external'}} */
-	let modes = { default: 'default', xy: 'xy', external: 'external' };
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {number} [port] - type {number} - the MIDI port index
-	 * @property {import ('@rnbo/js').Device} device
-	 * @property {import('@rnbo/js').MIDIData|undefined} [midiMessage]
-	 * @property {number|undefined} [midiChannel]
-	 * @property {'default'|'xy'|'external'} [mode]
-	 * @property {import('svelte').Snippet<[any]>} [children]
-	 */
-
-	/** @type {Props & { [key: string]: any }} */
-	let {
-		port = 0,
-		device,
-		midiMessage = $bindable(undefined),
-		midiChannel = 0,
-		mode = $bindable(modes.default),
-		children,
-		...rest
-	} = $props();
-
-	//set a defaultMode so the radio group only shows if no mode has been specified
-	/** @type {'default'|'xy'|'external'} */
-	let defaultMode = mode;
-	//make sure the default mode is mic in the radio group
-	if (mode == modes.default) mode = modes.xy;
-
-	$effect(() => {
-		if (midiMessage && midiMessage.length > 0) {
-			console.log('from MidiIn', midiMessage);
-			device.scheduleEvent(new MIDIEvent(TimeNow, port, midiMessage));
-		}
-	});
-</script>
-
-<div class="RNBOcomponent RNBOsection" {...rest}>
-	{#if children}{@render children({ midiChannel })}{:else}
-		<div class="RNBOtag">in {port}</div>
-		{#if defaultMode === modes.default}
-			<RadioGroup>
-				<RadioItem bind:group={mode} name="xy" value={modes.xy}>XY-pad</RadioItem>
-				<RadioItem bind:group={mode} name="external" value={modes.external}>ext. MIDI</RadioItem>
-			</RadioGroup>
-		{/if}
-
-		{#if mode === modes.external}
-			<ExtMidiIn bind:midiMessage {midiChannel} />
-		{:else}
-			<XyMidiIn bind:midiMessage {midiChannel} />
-		{/if}
-	{/if}
-</div>
+<script>
+	import rnbo from '@rnbo/js';
+	const { MIDIEvent, TimeNow } = rnbo;
+	import XyMidiIn from './XYMidiIn.svelte';
+	import ExtMidiIn from './ExtMidiIn.svelte';
+	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
+	import RadioItem from '../UIcomponents/RadioItem.svelte';
+
+	/** @type {{default: 'default', xy: 'xy', external: 'external'}} */
+	let modes = { default: 'default', xy: 'xy', external: 'external' };
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [port] - type {number} - the MIDI port index
+	 * @property {import ('@rnbo/js').Device} device
+	 * @property {import('@rnbo/js').MIDIData|undefined} [midiMessage]
+	 * @property {number|undefined} [midiChannel]
+	 * @property {'default'|'xy'|'external'} [mode]
+	 * @property {import('svelte').Snippet<[any]>} [children]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let {
+		port = 0,
+		device,
+		midiMessage = $bindable(undefined),
+		midiChannel = 0,
+		mode = $bindable(modes.default),
+		children,
+		...rest
+	} = $props();
+
+	//set a defaultMode so the radio group only shows if no mode has been specified
+	/** @type {'default'|'xy'|'external'} */
+	let defaultMode = mode;
+	//make sure the default mode is mic in the radio group
+	if (mode == modes.default) mode = modes.xy;
+
+	$effect(() => {
+		if (midiMessage && midiMessage.length > 0) {
+			console.log('from MidiIn', midiMessage);
+			device.scheduleEvent(new MIDIEvent(TimeNow, port, midiMessage));
+		}
+	});
+</script>
+
+<div class="RNBOcomponent RNBOsection" {...rest}>
+	{#if children}{@render children({ midiChannel })}{:else}
+		<div class="RNBOtag">in {port}</div>
+		{#if defaultMode === modes.default}
+			<RadioGroup>
+				<RadioItem bind:group={mode} name="xy" value={modes.xy}>XY-pad</RadioItem>
+				<RadioItem bind:group={mode} name="external" value={modes.external}>ext. MIDI</RadioItem>
+			</RadioGroup>
+		{/if}
+
+		{#if mode === modes.external}
+			<ExtMidiIn bind:midiMessage {midiChannel} />
+		{:else}
+			<XyMidiIn bind:midiMessage {midiChannel} />
+		{/if}
+	{/if}
+</div>

package/dist/RNBOcomponents/RNBOMidiOut.svelte

@@ -1,9 +1,9 @@
-<script>
-	import { MIDIEvent, TimeNow } from '@rnbo/js';
-	// import ExtMidiOut from './ExtMidiOut.svelte';
-	
-	
-	
+<script>
+	import { MIDIEvent, TimeNow } from '@rnbo/js';
+	// import ExtMidiOut from './ExtMidiOut.svelte';
+	
+	
+	
 	/**
 	 * @typedef {Object} Props
 	 * @property {number} [port] - type {number} - the MIDI port index
@@ -20,19 +20,19 @@
 		children,
 		...rest
 	} = $props();
-	// /** @type {number|undefined} */
-	// export let midiChannel = 0;
-
-	//TODO: replace block below with a midiMessage receive from a Max Midi out, send to extMidiOut
-	device.midiEvent.subscribe((ev) => {
-		console.log(ev);
-	});
-</script>
-
-<div class="RNBOcomponent RNBOsection" {...rest}>
-	{#if children}{@render children({ port, })}{:else}
-		<div class="RNBOtag">in {port}</div>
-
-		<!-- <ExtMidiOut bind:midiMessage /> -->
-	{/if}
-</div>
+	// /** @type {number|undefined} */
+	// export let midiChannel = 0;
+
+	//TODO: replace block below with a midiMessage receive from a Max Midi out, send to extMidiOut
+	device.midiEvent.subscribe((ev) => {
+		console.log(ev);
+	});
+</script>
+
+<div class="RNBOcomponent RNBOsection" {...rest}>
+	{#if children}{@render children({ port, })}{:else}
+		<div class="RNBOtag">in {port}</div>
+
+		<!-- <ExtMidiOut bind:midiMessage /> -->
+	{/if}
+</div>

package/dist/RNBOcomponents/RNBOOutport.svelte

@@ -1,36 +1,36 @@
-<script>
-	import ProgressBar from '../UIcomponents/ProgressBar.svelte';
-
-	/** @type {import ('@rnbo/js').MessagePayload } */
-	let value = $state(0);
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {import ('@rnbo/js').MessageInfo} outport
-	 * @property {import ('@rnbo/js').Device} device
-	 * @property {number} [min]
-	 * @property {number} [max]
-	 */
-
-	/** @type {Props & { [key: string]: any }} */
-	let { outport, device, min = 0, max = 1, ...rest } = $props();
-
-	$effect(() => {
-		device.messageEvent.subscribe((ev) => {
-			if (ev.tag == outport.tag) {
-				value = ev.payload;
-			}
-		});
-	});
-</script>
-
-<div class="RNBOcomponent RNBOsection" {...rest}>
-	<div class="RNBOalign">
-		<div class="RNBOtag">{outport.tag}</div>
-		<!-- some hack to make the value max 2 decimal floats: -->
-		<div class="RNBOval">{+parseFloat(value).toFixed(2)}</div>
-	</div>
-
-	<p class="RNBOtext">{outport.meta.slice(1, -1)}</p>
-	<ProgressBar value={Array.isArray(value) ? value[0] : value} {max} {min} />
-</div>
+<script>
+	import ProgressBar from '../UIcomponents/ProgressBar.svelte';
+
+	/** @type {import ('@rnbo/js').MessagePayload } */
+	let value = $state(0);
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import ('@rnbo/js').MessageInfo} outport
+	 * @property {import ('@rnbo/js').Device} device
+	 * @property {number} [min]
+	 * @property {number} [max]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { outport, device, min = 0, max = 1, ...rest } = $props();
+
+	$effect(() => {
+		device.messageEvent.subscribe((ev) => {
+			if (ev.tag == outport.tag) {
+				value = ev.payload;
+			}
+		});
+	});
+</script>
+
+<div class="RNBOcomponent RNBOsection" {...rest}>
+	<div class="RNBOalign">
+		<div class="RNBOtag">{outport.tag}</div>
+		<!-- some hack to make the value max 2 decimal floats: -->
+		<div class="RNBOval">{+parseFloat(value).toFixed(2)}</div>
+	</div>
+
+	<p class="RNBOtext">{outport.meta.slice(1, -1)}</p>
+	<ProgressBar value={Array.isArray(value) ? value[0] : value} {max} {min} />
+</div>