@tialro2/rnbokit 1.0.15 → 1.0.18

package/dist/RNBOcomponents/AudioDropIn.svelte

@@ -1,15 +1,15 @@
-<script>
-	//A file drop in/media player for audio
-	import { flip } from 'svelte/animate';
-	import { crossfade } from 'svelte/transition';
-	const [send, receive] = crossfade({
-		duration: (d) => Math.sqrt(d * 200)
-	});
-
-	import FileDropZone from '../UIcomponents/FileDropZone.svelte';
-
-	
-	
+<script>
+	//A file drop in/media player for audio
+	import { flip } from 'svelte/animate';
+	import { crossfade } from 'svelte/transition';
+	const [send, receive] = crossfade({
+		duration: (d) => Math.sqrt(d * 200)
+	});
+
+	import FileDropZone from '../UIcomponents/FileDropZone.svelte';
+
+	
+	
 	/**
 	 * @typedef {Object} Props
 	 * @property {AudioContext} context
@@ -18,116 +18,116 @@
 
 	/** @type {Props & { [key: string]: any }} */
 	let { context, audio = $bindable(), ...rest } = $props();
-
-	/** @type {Array<File>} */
-	let files = $state([]);
-	/** @type {HTMLMediaElement[]} */
-	let audioElements = $state([]);
-
-	/** @type {HTMLMediaElement|undefined} */
-	let current;
-
-	/**
-	 * pause other running audio and connect new playing source on play
-	 * @param {Event} e
-	 */
-	function onPlay(e) {
-		if (current === e.target) return;
-
-		for (const audioElement of audioElements) {
-			if (audioElement !== e.target) {
-				// console.log('pause');
-				audioElement.pause();
-				continue;
-			}
-			// console.log('connect');
-			current = audioElement;
-		}
-		try {
-			audio = context.createMediaElementSource(current);
-		} catch (e) {
-			//ignore DOMexception error, as the correct source will still be used,
-			// no easy way around arror (need to investigate)
-			console.log('failed to (re)connect MediaElementSource');
-		}
-	}
-
-	/**
-	 * put files in an array, so we can do array operations like splice. e.target.files is read-only
-	 * @param {Event} e
-	 */
-	function loadFiles(e) {
-		// @ts-expect-error - quick fix for: TS2339: Property 'files' does not exist on type 'Event'.
-		files = [...e.target.files];
-	}
-
-	/**
-	 * remove a file from the files array when we click the 'x'. If no more files,
-	 * show audio drop in again
-	 * @param {Number} index
-	 */
-	function removeFile(index) {
-		if (!files) return;
-		audioElements = [];
-
-		files.splice(index, 1);
-		files = files;
-		if (files.length === 0) {
-			files = [];
-			audioElements = [];
-		}
-	}
-</script>
-
-<div class="RNBOsubcomponent" {...rest}>
-	{#if files.length === 0}
-		<FileDropZone name="audio files" on:change={loadFiles} multiple accept="audio/*" />
-	{:else}
-		{#each files as file, i (file)}
-			<div
-				class="RNBOsection RNBOaudio"
-				in:receive={{ key: file }}
-				out:send={{ key: file }}
-				animate:flip={{ duration: 200 }}
-			>
-				<p class="RNBOtext">{file.name}</p>
-				<audio
-					src={URL.createObjectURL(file)}
-					bind:this={audioElements[i]}
-					onplay={onPlay}
-					controls
-				></audio>
-				<button
-					type="button"
-					class="RNBObtn RNBOclose"
-					onclick={() => removeFile(i)}
-					onkeydown={() => removeFile(i)}
-				>
-					x
-				</button>
-			</div>
-		{/each}
-	{/if}
-</div>
-
-<style>
-	.RNBOclose {
-		position: absolute;
-		top: -0.5rem;
-		right: -0.5rem;
-		padding-top: 0.2rem;
-		padding-bottom: 0.2rem;
-		padding-left: 0.5rem;
-		padding-right: 0.5rem;
-		cursor: pointer;
-		border-radius: var(--local-rounded-base);
-		border-style: none;
-		background-color: rgb(var(--local-accent-color));
-	}
-	.RNBOaudio {
-		position: relative;
-		display: inline-block;
-		padding: 0.5rem;
-		margin: 0.5rem;
-	}
-</style>
+
+	/** @type {Array<File>} */
+	let files = $state([]);
+	/** @type {HTMLMediaElement[]} */
+	let audioElements = $state([]);
+
+	/** @type {HTMLMediaElement|undefined} */
+	let current;
+
+	/**
+	 * pause other running audio and connect new playing source on play
+	 * @param {Event} e
+	 */
+	function onPlay(e) {
+		if (current === e.target) return;
+
+		for (const audioElement of audioElements) {
+			if (audioElement !== e.target) {
+				// console.log('pause');
+				audioElement.pause();
+				continue;
+			}
+			// console.log('connect');
+			current = audioElement;
+		}
+		try {
+			audio = context.createMediaElementSource(current);
+		} catch (e) {
+			//ignore DOMexception error, as the correct source will still be used,
+			// no easy way around arror (need to investigate)
+			console.log('failed to (re)connect MediaElementSource');
+		}
+	}
+
+	/**
+	 * put files in an array, so we can do array operations like splice. e.target.files is read-only
+	 * @param {Event} e
+	 */
+	function loadFiles(e) {
+		// @ts-expect-error - quick fix for: TS2339: Property 'files' does not exist on type 'Event'.
+		files = [...e.target.files];
+	}
+
+	/**
+	 * remove a file from the files array when we click the 'x'. If no more files,
+	 * show audio drop in again
+	 * @param {Number} index
+	 */
+	function removeFile(index) {
+		if (!files) return;
+		audioElements = [];
+
+		files.splice(index, 1);
+		files = files;
+		if (files.length === 0) {
+			files = [];
+			audioElements = [];
+		}
+	}
+</script>
+
+<div class="RNBOsubcomponent" {...rest}>
+	{#if files.length === 0}
+		<FileDropZone name="audio files" on:change={loadFiles} multiple accept="audio/*" />
+	{:else}
+		{#each files as file, i (file)}
+			<div
+				class="RNBOsection RNBOaudio"
+				in:receive={{ key: file }}
+				out:send={{ key: file }}
+				animate:flip={{ duration: 200 }}
+			>
+				<p class="RNBOtext">{file.name}</p>
+				<audio
+					src={URL.createObjectURL(file)}
+					bind:this={audioElements[i]}
+					onplay={onPlay}
+					controls
+				></audio>
+				<button
+					type="button"
+					class="RNBObtn RNBOclose"
+					onclick={() => removeFile(i)}
+					onkeydown={() => removeFile(i)}
+				>
+					x
+				</button>
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.RNBOclose {
+		position: absolute;
+		top: -0.5rem;
+		right: -0.5rem;
+		padding-top: 0.2rem;
+		padding-bottom: 0.2rem;
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+		cursor: pointer;
+		border-radius: var(--local-rounded-base);
+		border-style: none;
+		background-color: rgb(var(--local-accent-color));
+	}
+	.RNBOaudio {
+		position: relative;
+		display: inline-block;
+		padding: 0.5rem;
+		margin: 0.5rem;
+	}
+</style>

package/dist/RNBOcomponents/ExtMidiIn.svelte

@@ -1,17 +1,17 @@
-<script>
-	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
-	import RadioItem from '../UIcomponents/RadioItem.svelte';
-	/** @type {MIDIAccess|null|false} */
-	let midi = $state(null); // global MIDIAccess object
-	/**@type {MIDIInputMap|null} */
-	let inports = $state(null); // available MIDI inports
-
-	//TODO: choose port by name rather than index
-
-	
-	/** @type {MIDIInput|null} */
-	let inport = null;
-	
+<script>
+	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
+	import RadioItem from '../UIcomponents/RadioItem.svelte';
+	/** @type {MIDIAccess|null|false} */
+	let midi = $state(null); // global MIDIAccess object
+	/**@type {MIDIInputMap|null} */
+	let inports = $state(null); // available MIDI inports
+
+	//TODO: choose port by name rather than index
+
+	
+	/** @type {MIDIInput|null} */
+	let inport = null;
+	
 	/**
 	 * @typedef {Object} Props
 	 * @property {number|null} [port]
@@ -20,74 +20,74 @@
 
 	/** @type {Props} */
 	let { port = $bindable(null), midiMessage = $bindable() } = $props();
-
-	/**
-	 * set the midi access point and get the midi input port
-	 * @param {MIDIAccess} midiAccess
-	 */
-	function onMIDISuccess(midiAccess) {
-		midi = midiAccess;
-		inports = midi.inputs; // store in the global (in real usage, would probably keep in an object instance)
-		if (port) {
-			setPort();
-		}
-	}
-
-	/**
-	 * handle if external MIDI not available
-	 * @param {string} msg
-	 */
-	function onMIDIFailure(msg) {
-		console.error(`Failed to get MIDI access - ${msg}`);
-		midi = false;
-	}
-
-	/**
-	 * set the input port when selected
-	 */
-	function setPort() {
-		if (inports === null || port === null) return;
-
-		// @ts-ignore - ts getting their types wrong...
-		inport = [...inports][port];
-		console.log(
-			// @ts-ignore - because inports will always exist, since we use the #if block
-			'connecting to MIDI input port: %c' + inports.get(inport[0]).name,
-			'font-style:italic'
-		);
-		// @ts-ignore - see previous comment
-		inports.get(inport[0]).onmidimessage = onMIDIMessage;
-	}
-
-	/** @param {MIDIMessageEvent} event */
-	function onMIDIMessage(event) {
-		midiMessage = event.data;
-		console.log(
-			'MIDI message from %c' + event.target.name + ': ' + midiMessage,
-			'font-style:italic'
-		);
-	}
-
-	navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
-</script>
-
-<div class="RNBOsubcomponent">
-	<p class="RNBOtext">External MIDI inputs</p>
-
-	{#if midi && inports}
-		<!-- <slot {midi} {inports} {port}> -->
-		<RadioGroup>
-			{#each [...inports.entries()] as input, i}
-				<!-- first index of the input array is the id, second the object -->
-				<RadioItem bind:group={port} name="inports" value={i} on:change={setPort}
-					>{input[1].name}
-				</RadioItem>
-			{/each}
-		</RadioGroup>
-		<!-- </slot> -->
-	{:else if midi === false}
-		<p>MIDI access failed, please try in a different browser</p>
-	{:else}
-		<p>loading MIDI ports</p>
-	{/if}
-</div>
+
+	/**
+	 * set the midi access point and get the midi input port
+	 * @param {MIDIAccess} midiAccess
+	 */
+	function onMIDISuccess(midiAccess) {
+		midi = midiAccess;
+		inports = midi.inputs; // store in the global (in real usage, would probably keep in an object instance)
+		if (port) {
+			setPort();
+		}
+	}
+
+	/**
+	 * handle if external MIDI not available
+	 * @param {string} msg
+	 */
+	function onMIDIFailure(msg) {
+		console.error(`Failed to get MIDI access - ${msg}`);
+		midi = false;
+	}
+
+	/**
+	 * set the input port when selected
+	 */
+	function setPort() {
+		if (inports === null || port === null) return;
+
+		// @ts-ignore - ts getting their types wrong...
+		inport = [...inports][port];
+		console.log(
+			// @ts-ignore - because inports will always exist, since we use the #if block
+			'connecting to MIDI input port: %c' + inports.get(inport[0]).name,
+			'font-style:italic'
+		);
+		// @ts-ignore - see previous comment
+		inports.get(inport[0]).onmidimessage = onMIDIMessage;
+	}
+
+	/** @param {MIDIMessageEvent} event */
+	function onMIDIMessage(event) {
+		midiMessage = event.data;
+		console.log(
+			'MIDI message from %c' + event.target.name + ': ' + midiMessage,
+			'font-style:italic'
+		);
+	}
+
+	navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
+</script>
+
+<div class="RNBOsubcomponent">
+	<p class="RNBOtext">External MIDI inputs</p>
+
+	{#if midi && inports}
+		<!-- <slot {midi} {inports} {port}> -->
+		<RadioGroup>
+			{#each [...inports.entries()] as input, i}
+				<!-- first index of the input array is the id, second the object -->
+				<RadioItem bind:group={port} name="inports" value={i} on:change={setPort}
+					>{input[1].name}
+				</RadioItem>
+			{/each}
+		</RadioGroup>
+		<!-- </slot> -->
+	{:else if midi === false}
+		<p>MIDI access failed, please try in a different browser</p>
+	{:else}
+		<p>loading MIDI ports</p>
+	{/if}
+</div>

package/dist/RNBOcomponents/ExtMidiOut.svelte

@@ -1,17 +1,17 @@
-<script>
-	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
-	import RadioItem from '../UIcomponents/RadioItem.svelte';
-	/** @type {MIDIAccess|null|false} */
-	let midi = $state(null); // global MIDIAccess object
-	/**@type {MIDIInputMap|null} */
-	let outports = $state(null); // available MIDI outports
-
-	//TODO: choose port by name rather than index
-
-	
-	/** @type {MIDIInput|null} */
-	let outport = null;
-	
+<script>
+	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
+	import RadioItem from '../UIcomponents/RadioItem.svelte';
+	/** @type {MIDIAccess|null|false} */
+	let midi = $state(null); // global MIDIAccess object
+	/**@type {MIDIInputMap|null} */
+	let outports = $state(null); // available MIDI outports
+
+	//TODO: choose port by name rather than index
+
+	
+	/** @type {MIDIInput|null} */
+	let outport = null;
+	
 	/**
 	 * @typedef {Object} Props
 	 * @property {number|null} [port]
@@ -20,74 +20,74 @@
 
 	/** @type {Props} */
 	let { port = $bindable(null), midiMessage = $bindable() } = $props();
-
-	/**
-	 * set the midi access point and get the midi output port
-	 * @param {MIDIAccess} midiAccess
-	 */
-	function onMIDISuccess(midiAccess) {
-		midi = midiAccess;
-		outports = midi.outputs; // store in the global (in real usage, would probably keep in an object instance)
-		if (port) {
-			setPort();
-		}
-	}
-
-	/**
-	 * handle if external MIDI not available
-	 * @param {string} msg
-	 */
-	function onMIDIFailure(msg) {
-		console.error(`Failed to get MIDI access - ${msg}`);
-		midi = false;
-	}
-
-	/**
-	 * set the output port when selected
-	 */
-	function setPort() {
-		if (!outports || !port) return;
-
-		// @ts-ignore - ts getting their types wrong...
-		outport = [...outports][port];
-		console.log(
-			// @ts-ignore - because outports will always exist, since we use the #if block
-			'connecting to MIDI output port: %c' + outports.get(outport[0]).name,
-			'font-style:italic'
-		);
-		// @ts-ignore - see previous comment
-		outports.get(outport[0]).onmidimessage = onMIDIMessage;
-	}
-
-	/** @param {MIDIMessageEvent} event */
-	function onMIDIMessage(event) {
-		midiMessage = event.data;
-		console.log(
-			'MIDI message from %c' + event.target.name + ': ' + midiMessage,
-			'font-style:italic'
-		);
-	}
-
-	navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
-</script>
-
-<div class="RNBOsubcomponent">
-	<p class="RNBOtext">External MIDI outputs</p>
-
-	{#if midi && outports}
-		<!-- <slot {midi} {outports} {port}> -->
-		<RadioGroup>
-			{#each [...outports.entries()] as output, i}
-				<!-- first index of the output array is the id, second the object -->
-				<RadioItem bind:group={port} name="outports" value={i} on:change={setPort}
-					>{output[1].name}
-				</RadioItem>
-			{/each}
-		</RadioGroup>
-		<!-- </slot> -->
-	{:else if midi === false}
-		<p>MIDI access failed, please try in a different browser</p>
-	{:else}
-		<p>loading MIDI ports</p>
-	{/if}
-</div>
+
+	/**
+	 * set the midi access point and get the midi output port
+	 * @param {MIDIAccess} midiAccess
+	 */
+	function onMIDISuccess(midiAccess) {
+		midi = midiAccess;
+		outports = midi.outputs; // store in the global (in real usage, would probably keep in an object instance)
+		if (port) {
+			setPort();
+		}
+	}
+
+	/**
+	 * handle if external MIDI not available
+	 * @param {string} msg
+	 */
+	function onMIDIFailure(msg) {
+		console.error(`Failed to get MIDI access - ${msg}`);
+		midi = false;
+	}
+
+	/**
+	 * set the output port when selected
+	 */
+	function setPort() {
+		if (!outports || !port) return;
+
+		// @ts-ignore - ts getting their types wrong...
+		outport = [...outports][port];
+		console.log(
+			// @ts-ignore - because outports will always exist, since we use the #if block
+			'connecting to MIDI output port: %c' + outports.get(outport[0]).name,
+			'font-style:italic'
+		);
+		// @ts-ignore - see previous comment
+		outports.get(outport[0]).onmidimessage = onMIDIMessage;
+	}
+
+	/** @param {MIDIMessageEvent} event */
+	function onMIDIMessage(event) {
+		midiMessage = event.data;
+		console.log(
+			'MIDI message from %c' + event.target.name + ': ' + midiMessage,
+			'font-style:italic'
+		);
+	}
+
+	navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
+</script>
+
+<div class="RNBOsubcomponent">
+	<p class="RNBOtext">External MIDI outputs</p>
+
+	{#if midi && outports}
+		<!-- <slot {midi} {outports} {port}> -->
+		<RadioGroup>
+			{#each [...outports.entries()] as output, i}
+				<!-- first index of the output array is the id, second the object -->
+				<RadioItem bind:group={port} name="outports" value={i} on:change={setPort}
+					>{output[1].name}
+				</RadioItem>
+			{/each}
+		</RadioGroup>
+		<!-- </slot> -->
+	{:else if midi === false}
+		<p>MIDI access failed, please try in a different browser</p>
+	{:else}
+		<p>loading MIDI ports</p>
+	{/if}
+</div>