fix UI bug

src/background/CaptureManager.ts

@@ -322,8 +322,6 @@ class AudioEffect {
   input: GainNode
   output: GainNode
 
-  compNode?: DynamicsCompressorNode
-  compGainNode?: GainNode
   filterNodes?: BiquadFilterNode[]
   jungle?: Jungle
   soundTouchNode?: SoundTouchNode
@@ -430,30 +428,6 @@ class AudioEffect {
       delete this.filterNodes
     }
 
-    // compressor
-    if (enabled && audioFx.comp?.enabled) {
-      const { comp } = audioFx
-      this.compNode = this.compNode ?? this.ctx.createDynamicsCompressor()
-      this.compNode.threshold.value = comp.threshold
-      this.compNode.knee.value = comp.knee
-      this.compNode.ratio.value = comp.ratio
-      this.compNode.attack.value = comp.attack
-      this.compNode.release.value = comp.release
-
-      head.connect(this.compNode)
-      head = this.compNode
-
-      if (comp.gain !== 1) {
-        this.compGainNode = this.compGainNode ?? this.ctx.createGain()
-        this.compGainNode.gain.value = comp.gain * comp.gain
-        head.connect(this.compGainNode) 
-        head = this.compGainNode
-      }
-    } else {
-      delete this.compNode;
-      delete this.compGainNode;
-    }
-
     // delay
     let secondHead: AudioNode;
     if (enabled && audioFx.delay > 0) {
@@ -485,8 +459,6 @@ class AudioEffect {
   }
   estrange = () => {
     this.input.disconnect()
-    this.compNode?.disconnect()
-    this.compGainNode?.disconnect()
     this.delayNode?.disconnect()
     this.filterNodes?.forEach(f => {
       f.disconnect()

src/defaults/index.ts

@@ -33,22 +33,10 @@ export function getDefaultAudioFx(): AudioFx {
     pitch: 0,
     volume: 1,
     delay: 0,
-    eq: getDefaultEq(),
-    comp: getDefaultComp()
+    eq: getDefaultEq()
   }
 }
 
-export function getDefaultComp(): AudioFx["comp"] {
-  return {
-    enabled: false,
-    threshold: -24,
-    knee: 30,
-    ratio: 12,
-    attack: 0.003,
-    release: 0.25,
-    gain: 1
-  }
-}
 
 export function getDefaultEq(): AudioFx["eq"] {
   return {
@@ -58,162 +46,6 @@ export function getDefaultEq(): AudioFx["eq"] {
   }
 }
 
-
-// Presets from Audio Audition. 
-// I don't think these presets make sense for dynamic compressor. 
-export const COMP_PRESETS: readonly AudioFx["comp"][] = Object.freeze([
-  {
-    name: "Blissful Bass",
-    enabled: true,
-    threshold: -12.9,
-    gain: Math.sqrt(Math.pow(Math.E, 3 / 10)),
-    ratio: 4.6,
-    attack: 13.4 / 1000,
-    release: 200 / 1000,
-    knee: 30
-  },
-  {
-    name: "Brickwall Limiter",
-    enabled: true,
-    threshold: -10,
-    gain: Math.sqrt(Math.pow(Math.E, 10 / 10)),
-    ratio: 20,
-    attack: 3.3 / 1000,
-    release: 24 / 1000,
-    knee: 30
-  },
-  {
-    name: "Generous Allowance",
-    enabled: true,
-    threshold: -20,
-    gain: 1,
-    ratio: 2,
-    attack: 13 / 1000,
-    release: 360 / 1000,
-    knee: 30
-  },
-  {
-    name: "Guitar Charmer",
-    enabled: true,
-    threshold: -17,
-    gain: 1,
-    ratio: 3,
-    attack: 26 / 1000,
-    release: 220 / 1000,
-    knee: 30
-  },
-  {
-    name: "Light Mastering",
-    enabled: true,
-    threshold: -3.6,
-    gain: Math.sqrt(Math.pow(Math.E, 2 / 10)),
-    ratio: 2.5,
-    attack: 3.3 / 1000,
-    release: 24 / 1000,
-    knee: 30
-  },
-  {
-    name: "Low-Mid Enhancer",
-    enabled: true,
-    threshold: -9.8,
-    gain: Math.sqrt(Math.pow(Math.E, 9 / 10)),
-    ratio: 9.2,
-    attack: 87 / 1000,
-    release: 1,
-    knee: 30
-  },
-  {
-    name: "More Punch",
-    enabled: true,
-    threshold: -22.7,
-    gain: Math.sqrt(Math.pow(Math.E, 4.2 / 10)),
-    ratio: 18.9,
-    attack: 56.5 / 1000,
-    release: 1,
-    knee: 30
-  },{
-    name: "Pad Treatment",
-    enabled: true,
-    threshold: -25,
-    gain: Math.sqrt(Math.pow(Math.E, 15 / 10)),
-    ratio: 5,
-    attack: 50 / 1000,
-    release: 1,
-    knee: 30
-  },
-  {
-    name: "Pancake Better",
-    enabled: true,
-    threshold: -25,
-    gain: Math.sqrt(Math.pow(Math.E, 5 / 10)),
-    ratio: 5,
-    attack: 1 / 1000,
-    release: 500 / 1000,
-    knee: 30
-  },
-  {
-    name: "Radio Leveler",
-    enabled: true,
-    threshold: -12.5,
-    gain: Math.sqrt(Math.pow(Math.E, 4.9 / 10)),
-    ratio: 4.9,
-    attack: 62.2 / 1000,
-    release: 1,
-    knee: 30
-  },
-  {
-    name: "Vocal Attacker",
-    enabled: true,
-    threshold: -27.1,
-    gain: Math.sqrt(Math.pow(Math.E, 18 / 10)),
-    ratio: 20,
-    attack: 0 / 1000,
-    release: 1,
-    knee: 30
-  },
-  {
-    name: "Vocal Booster",
-    enabled: true,
-    threshold: -10.8,
-    gain: Math.sqrt(Math.pow(Math.E, 10.3 / 10)),
-    ratio: 11.8,
-    attack: 93.2 / 1000,
-    release: 1,
-    knee: 30
-  },
-  {
-    name: "Voice Leveler",
-    enabled: true,
-    threshold: -10,
-    gain: 1,
-    ratio: 12,
-    attack: 0,
-    release: 100 / 1000,
-    knee: 30
-  },
-  {
-    name: "Voice Over",
-    enabled: true,
-    threshold: -16,
-    gain: Math.sqrt(Math.pow(Math.E, 4 / 10)),
-    ratio: 8,
-    attack: 5 / 1000,
-    release: 100 / 1000,
-    knee: 30
-  },
-  {
-    name: "Voice Thickener",
-    enabled: true,
-    threshold: -25,
-    gain: Math.sqrt(Math.pow(Math.E, 12 / 10)),
-    ratio: 4,
-    attack: 0 / 1000,
-    release: 200 / 1000,
-    knee: 30
-  }
-])
-
-
 const EQ_10_PRESETS: readonly {name: string, values: number[]}[] = Object.freeze([
   {name: "1965", values: [-6, -17.2, -6, 0, -3.6, 9.2, 1.2, 9.2, 3.6, -5.2]},
   {name: "1965 - Part 2", values: [-18, -14.4, 0, 0, -3.6, 9.2, 1.2, 9.2, 3.6, -5.2]},

src/options/KeyBindControl.scss

@@ -1,7 +1,8 @@
 
 .KeybindControl {
   display: grid;
-  grid-template-columns: repeat(2, max-content) minmax(200px, 1.5fr) max-content 150px 200px repeat(3, max-content);
+  grid-template-columns: repeat(2, max-content) minmax(200px, 1.5fr) max-content 175px 200px repeat(3, max-content);
+
   grid-column-gap: 10px;
   align-items: center;
   border: 1px solid var(--border-color);
@@ -108,4 +109,10 @@
       }
     }
   }
+
+  & > .globalPicker {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    column-gap: 10px;
+  }
 }

src/options/KeyBindControl.tsx

@@ -276,7 +276,7 @@ export const KeybindControl = (props: KeybindControlProps) => {
       }}>{value.global ? <FaGlobe size="1.05em"/> : <FaFile size="1.05em"/>}</button>
     )}
     {value.global ? (
-      <>
+      <div className="globalPicker">
         <select value={value.globalKey || "commandA"} onChange={e => {
           props.onChange(value.id, produce(value, d => {
             d.globalKey = e.target.value 
@@ -289,7 +289,7 @@ export const KeybindControl = (props: KeybindControlProps) => {
         <button className={`icon`} onClick={() => {
           requestCreateTab(isFirefox() ? `https://support.mozilla.org/kb/manage-extension-shortcuts-firefox` :`chrome://extensions/shortcuts`)
         }}><FaLink size={17}/></button>
-      </>
+      </div>
     ) : (
       <KeyPicker value={value.key} onChange={newKey => {
         props.onChange(value.id, produce(value, d => {

src/popup/AudioPanel.tsx

@@ -1,7 +1,6 @@
 import { useState, useRef } from "react"
 import { SliderPlus } from "../comps/SliderPlus";
 import { FaVolumeUp, FaMusic, FaArrowsAltH } from "react-icons/fa";
-import { CompressorControl } from "./CompressorControl";
 import { EqualizerControl } from "./EqualizerControl";
 import { useStateView } from "../hooks/useStateView";
 import { useCaptureStatus } from "../hooks/useCaptureStatus";
@@ -15,7 +14,6 @@ import "./AudioPanel.scss"
 export function AudioPanel(props: {}) {
   const [view, setView] = useStateView({audioFx: true, audioFxAlt: true, monoOutput: true, audioPan: true})
   const env = useRef({viaButton: true}).current
-  const [compTab, setCompTab] = useState(false)
   let [rightTab, setRightTab] = useState(false)
   const status = useCaptureStatus()
 
@@ -150,29 +148,11 @@ export function AudioPanel(props: {}) {
       }}
     />
     {<ReverseButton onActivate={ensureCaptured}/>}
-    <div className="tabs">
-      <button className={`${!compTab ? "open" : ""} ${starAudioFx.eq.enabled ? "active" : ""}`} onClick={e => {
-        setCompTab(false)
-      }}>{window.gsm.audio.equalizer}</button>
-      <button className={`${compTab ? "open" : ""} ${starAudioFx.comp.enabled ? "active" : ""}`} onClick={e => {
-        setCompTab(true)
-      }}>{window.gsm.audio.compressor}</button>
-    </div>
-    {compTab && (
-      <CompressorControl value={starAudioFx.comp} onChange={newValue => {
-        setView(produce(view, d => {
-          d[starKey].comp = newValue 
-        }))
-        newValue.enabled && ensureCaptured()
-      }}/>
-    )}
-    {!compTab && (
-      <EqualizerControl value={starAudioFx.eq} onChange={newValue => {
-        setView(produce(view, d => {
-          d[starKey].eq = newValue
-        }))
-        newValue.enabled && ensureCaptured()
-      }}/>
-    )}
+    <EqualizerControl value={starAudioFx.eq} onChange={newValue => {
+      setView(produce(view, d => {
+        d[starKey].eq = newValue
+      }))
+      newValue.enabled && ensureCaptured()
+    }}/>
   </div>
 }