sounds, better files

src/components/Audio/Soundboard.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="soundboard">
+    <div class="soundboard__controls">
+      <DeviceVolume />
+    </div>
+    <div class="soundboard__sounds" style="--color-theme: var(--color-lime)">
+      <template v-for="node in nodes" :key="node">
+        <Playlist
+          v-if="node.type === 'playlist'"
+          :node="node"
+        />
+        <Sfx 
+          v-else-if="node.type === 'sfx'"
+          :node="node"
+        />
+        <TabSource
+          v-else-if="node.type === 'tabSource'"
+          :node="node"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {inject, reactive, ref, watch} from 'vue';
+import Playlist from './Playlist.vue';
+import {PlaylistGroupNode} from '../../model/Audio/PlaylistGroupNode';
+import {AudioContextSymbol, MountedFsSymbol, RemoteDeviceManagerSymbol} from '../../model/injectionSymbols';
+import {SfxGroupNode} from '../../model/Audio/SfxGroupNode';
+import Sfx from './Sfx.vue';
+import Modal from './modal.vue';
+import {TabSourceNode} from '../../model/Audio/TabSourceNode';
+import TabSource from './TabSource.vue';
+import DeviceVolume from './DeviceVolume.vue';
+import {AudioNodeManager} from '../../model/Audio/AudioNodesManager';
+import {debounce} from '../../utils/debounce';
+
+const fs = inject(MountedFsSymbol)!;
+const audioContext = inject(AudioContextSymbol) as AudioContext;
+const deviceManager = inject(RemoteDeviceManagerSymbol)!;
+
+const nodesDefinition = JSON.parse(localStorage.getItem('soundboard') ?? '[]');
+const audioNodesManager = new AudioNodeManager();
+
+// const playlist = reactive(new PlaylistGroupNode({
+//   currentTrack: 0,
+//   currentTrackTime: 0,
+//   volume: 100,
+//   isMuted: false,
+//   sounds: [],
+// }, {
+//   fs,
+//   audioContext,
+// }))
+
+// const sfx = reactive(new SfxGroupNode({
+//   isMuted: false,
+//   volume: 100,
+//   sounds: [],
+// }, {
+//   fs,
+//   audioContext,
+// }))
+
+// const tabSource = reactive(new TabSourceNode({
+//   isMuted: false,
+//   volume: 100,
+//   sounds: [],
+// }, {
+//   fs,
+//   audioContext,
+// }))
+
+const nodes = reactive(audioNodesManager.restore({fs, audioContext}));
+
+watch(() => nodes, debounce((newNodes) => {
+  console.log('NEW_NODES', newNodes);
+  audioNodesManager.store(newNodes);
+}, 500), {
+  deep: true,
+})
+
+const dest = audioContext.createGain();
+
+// for (const node of nodes) {
+//   // node.connect(audioContext.destination);
+//   node.connect(dest);
+// }
+
+
+watch(() => deviceManager.audioDevices.length, () => {
+  console.log('DEVICE_MANAGER', deviceManager)
+  for(const device of deviceManager.audioDevices) {
+    dest.connect(device.audioSink);
+    console.log('DEVICES', device, device.audioSink);
+  }
+}, {immediate: true})
+
+</script>
+<style>
+.soundboard {
+  
+}
+
+
+.soundboard__controls {
+  display: flex;
+  flex-direction: row;
+  padding: 0 1rem 2rem 1rem;
+  gap: 1rem;
+}
+
+.soundboard__sounds {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 3rem 1rem;
+  padding: 1rem;
+}
+</style>
+