Soundpill bugfix and Systemwide default device

Author: ruohki

apps/frontend/src/app/actions/playsound/audio.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from "events";
+import { settingsLabels } from '@lunchpad/types';
 
 export class Sound extends EventEmitter {
   public audioContext: AudioContext;
@@ -59,7 +60,10 @@ export class Sound extends EventEmitter {
       this.audioElement.play();
       this.bufferSource.start(0, begin, duration);
       //@ts-ignore //IT DOES EXIST
-      this.audioElement.setSinkId(this.sinkId);
+      console.log(this.sinkId);
+      if (this.sinkId === "inherit") {
+        this.audioElement.setSinkId(localStorage.getItem(settingsLabels.soundOutput) || "default")
+      } else this.audioElement.setSinkId(this.sinkId);
     })
   }
 

apps/frontend/src/app/actions/playsound/classes.ts

@@ -37,23 +37,29 @@ export class PlaySound extends Action {
     this.start = 0;
     this.end = 1;
     this.outputDevice = outputDevice;
-  }
 
+    this.InitSound();
+  }
+  private async InitSound() {
+    if (!this.soundfile) return;
+    try {
+      const response = await fetch(this.soundfile);
+      const arrayBuffer = await response.arrayBuffer();
+      const buffer = await this.audioContext.decodeAudioData(arrayBuffer);
+      this.duration = buffer.duration
+      this.sound = new Sound(
+        this.soundfile,
+        this.outputDevice,
+        this.volume,
+        this.start,
+        this.end
+        )
+        this.sound.audioContext = this.audioContext;
+    } catch (ex) {}
+  }
   public setAudioContext = (audio: AudioContext) => this.audioContext = audio;
   public async Run(): Promise<unknown> {
-    console.log("Running")
-    const response = await fetch(this.soundfile);
-    const arrayBuffer = await response.arrayBuffer();
-    const buffer = await this.audioContext.decodeAudioData(arrayBuffer);
-    this.duration = buffer.duration
-    this.sound = new Sound(
-      this.soundfile,
-      this.outputDevice,
-      this.volume,
-      this.start,
-      this.end
-    )
-    this.sound.audioContext = this.audioContext;
+    await this.InitSound();
     await this.sound.Init()
     if (this.sound) {
       return this.sound.Play();

apps/frontend/src/app/actions/playsound/component.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import lodash from 'lodash';
 
-import { IMediaDevice } from '@lunchpad/types';
-import { useAnimationFrame } from '@lunchpad/hooks';
+import { IMediaDevice, settingsLabels } from '@lunchpad/types';
+import { useAnimationFrame, useLocalStorage } from '@lunchpad/hooks';
 import { Icon, TriangleRight, Rectangle, Sound } from '@lunchpad/icons';
 import { FileURI } from '@lunchpad/types';
 
@@ -33,6 +33,7 @@ interface AudioBufferSourceNodeExtra extends AudioBufferSourceNode {
 export const PlaySoundPill: React.SFC<IPlaySoundPill> = (props) => {
   const [ showBody, setExpanded ] = React.useState<boolean>(props.expanded);
   const { audio } = React.useContext(AudioContext.Context);
+  const [ defaultOutput ] = useLocalStorage<string>(settingsLabels.soundOutput, "default");
 
   const [ audioBuffer, setAudioBuffer ] = React.useState<AudioBuffer>();
   const [ player, setPlayer ] = React.useState<AudioBufferSourceNodeExtra>();
@@ -160,6 +161,7 @@ export const PlaySoundPill: React.SFC<IPlaySoundPill> = (props) => {
             value={props.action.outputDevice}
             onChange={e => setProp({ outputDevice: e.target.value })}
           >
+            <option value="inherit">Lunchpad Default ({props.outputDevices.find(d => d.deviceId === defaultOutput)?.label})</option>
             {props.outputDevices.map(e => <option key={e.deviceId} value={e.deviceId}>{e.label}</option>)}
           </Select>
         </Row>

apps/frontend/src/app/components/Controller/index.tsx

@@ -17,7 +17,7 @@ import * as Devices from '../../controller';
 import { Playground } from '../../contexts/playground';
 import { MacroContext } from '../../contexts/macro/index';
 import { LayoutContext } from '../../contexts/layout';
-import { LaunchpadButton, LaunchpadButtonLookText, LaunchpadButtonLookType, LaunchpadSolidButtonColor } from '../../contexts/layout/classes';
+import { LaunchpadButton, LaunchpadButtonLookText, LaunchpadButtonLookType, LaunchpadSolidButtonColor, Page } from '../../contexts/layout/classes';
 import { PushToTalkEnd, PushToTalkStart } from '../../actions/pushtotalk';
 import { ActionType } from '../../actions';
 import { PlaySound } from '../../actions/playsound';
@@ -86,7 +86,9 @@ export default () => {
   const editButton = (x: number, y: number, limitedColor = false) => {
     const pageId = activePage.id
 
-    const button = lodash.get(activePage, `buttons.${x}.${y}`, new LaunchpadButton());
+    const button: LaunchpadButton = lodash.get<Page, any, LaunchpadButton>(activePage, `buttons.${x}.${y}`, new LaunchpadButton());
+    button.look = new LaunchpadButtonLookText("New");
+    
     stopSpecific(x, y);
     showConfigDialog(
       <ConfigDialog

libs/contexts/src/audio/useMediaDevices.ts

@@ -2,6 +2,11 @@ import { useEffect, useState } from 'react';
 
 const noop = () => {};
 
+const updateName = (device: Partial<MediaDeviceInfo>) => {
+  if (device.deviceId === "default" || device.deviceId === "communications") {
+    return `System ${device.label}`
+  } else return device.label
+}
 const useMediaDevices = (filter: 'all' | 'audiooutput' | 'audioinput' = "all") => {
   const [state, setState] = useState([]);
 
@@ -13,7 +18,7 @@ const useMediaDevices = (filter: 'all' | 'audiooutput' | 'audioinput' = "all") =
         .enumerateDevices()
         .then(devices => {
           if (mounted) {
-            let dev = devices.map(({ deviceId, groupId, kind, label }) => ({ deviceId, groupId, kind, label }))
+            let dev = devices.map(({ deviceId, groupId, kind, label }) => ({ deviceId, groupId, kind, label: updateName({ deviceId, groupId, kind, label }) }))
             if (filter !== "all") {
               dev = [...dev].filter(({ kind }) => kind === filter);
             }