added mono audio mode; added static mode to indicator animation

src/background/CaptureManager.ts

@@ -228,6 +228,14 @@ export class CaptureManager {
       delete info.delayNode
       head.connect(info.outputNode)
     }
+
+    if (audioFx.mono) {
+      info.outputNode.channelCount = 1 
+      info.outputNode.channelCountMode = "clamped-max"
+    } else {
+      info.outputNode.channelCount = info.streamSrc?.channelCount ?? 2
+      info.outputNode.channelCountMode = "max"
+    }
   }
 }
 

src/contentScript/Overlay.ts

@@ -6,6 +6,7 @@ const BASE_FONT_SIZE = 30
 const BASE_PADDING = 10 
 const BASE_BORDER_RADIUS = 10
 const SMALL_SCALING = 0.83
+const BASE_OFFSET = 30 
 
 export class Overlay {
   wrapper = document.createElement("div")
@@ -20,11 +21,11 @@ export class Overlay {
   root = document.documentElement as Element
   scaling = 1
   duration = 1 
+  static = false 
   constructor(fixedOverlay: boolean) {
     this.indicator.setAttribute("style", `
+      box-sizing: border-box; 
       position: fixed;
-      left: 30px;
-      top: 30px;
       font-family: Courier, monospace;
       color: white;
       background-color: black;
@@ -33,6 +34,7 @@ export class Overlay {
       display: grid;
       grid-auto-flow: column;
       align-items: center;
+      border: none;
     `)
 
     this.backdrop.setAttribute("style", `
@@ -67,16 +69,20 @@ export class Overlay {
     this.setInit({})
   }
   setInit = (init: IndicatorInit) => {
-    this.indicator.style.backgroundColor = init?.backgroundColor || INDICATOR_INIT.backgroundColor
-    this.indicator.style.color = init?.textColor || INDICATOR_INIT.textColor
+    init = init || {}
+    this.indicator.style.backgroundColor = init.backgroundColor || INDICATOR_INIT.backgroundColor
+    this.indicator.style.color = init.textColor || INDICATOR_INIT.textColor
 
-    this.duration = init?.duration ?? 1
-    this.scaling = init?.scaling ?? INDICATOR_INIT.scaling
-    const rounding = (init?.rounding ?? INDICATOR_INIT.rounding) * this.scaling
+    this.static = init.static
+    this.duration = init.duration ?? 1
+    this.scaling = init.scaling ?? INDICATOR_INIT.scaling
+    const rounding = (init.rounding ?? INDICATOR_INIT.rounding) * this.scaling
 
     this.indicator.style.padding = `${BASE_PADDING * (this.scaling + rounding * 0.12)}px`
     this.indicator.style.fontSize = `${BASE_FONT_SIZE * this.scaling}px`
-    this.indicator.style.borderRadius = `${BASE_BORDER_RADIUS * rounding}px`
+    this.indicator.style.borderRadius = rounding ? `${BASE_BORDER_RADIUS * rounding}px` : "none"
+    this.indicator.style.left = `${BASE_OFFSET * (init.offset ?? 1)}px`
+    this.indicator.style.top = `${BASE_OFFSET * (init.offset ?? 1)}px`
   }
   release = () => {
     if (this.released) return 
@@ -100,7 +106,7 @@ export class Overlay {
     const duration = (opts.duration ?? 900) * this.duration
 
     this.indicator.style.fontSize = `${(opts.small ? BASE_FONT_SIZE * SMALL_SCALING : BASE_FONT_SIZE) * this.scaling}px`
-    this.indicator.style.animation = opts.static ? "" : `gsScale ${duration}ms ease-out forwards`
+    this.indicator.style.animation = (opts.static || this.static) ? "" : `gsScale ${duration}ms ease-out forwards`
     this.indicator.remove()
     this.shadowRoot.appendChild(this.indicator)
 

src/defaults/index.ts

@@ -291,5 +291,6 @@ export const INDICATOR_INIT: IndicatorInit = {
   textColor: "#ffffff",
   scaling: 1,
   rounding: 0,
-  duration: 1
+  duration: 1,
+  offset: 1
 }

src/options/SectionFlags.scss

@@ -14,6 +14,13 @@
       &.indent {
         margin-left: 20px;
       }
+
+      & > .col {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: max-content;
+        grid-column-gap: 20px;
+      }
     }
   }
 }

src/options/SectionFlags.tsx

@@ -183,28 +183,54 @@ function IndicatorFlags(props: {}) {
       />
     </div>
     <div className="field indent">
-      <span>{window.gsm.token.duration}</span>
+      <span>{window.gsm.token.offset}</span>
       <SliderMicro 
-        value={init?.duration ?? INDICATOR_INIT.duration} 
+        value={init?.offset ?? INDICATOR_INIT.offset} 
         onChange={v => {
           const indicatorInit = produce(init ?? {}, d => {
-            d.duration = v
+            d.offset = v
           })
+          showIndicator(indicatorInit)
           pushView({override: {indicatorInit}})
         }}
-        default={INDICATOR_INIT.duration}
-        sliderMin={0.1}
-        sliderMax={1.9}
+        default={INDICATOR_INIT.offset}
+        sliderMin={0}
+        sliderMax={4}
         sliderStep={0.01}
-        pass={{onMouseUp: v => showIndicator(init, true)}}
       />
     </div>
+    <div className="field indent">
+      <span>{window.gsm.token.duration}</span>
+      <div className="col" style={{gridColumnGap: "10px"}}>
+        <SliderMicro 
+          value={init?.duration ?? INDICATOR_INIT.duration} 
+          onChange={v => {
+            const indicatorInit = produce(init ?? {}, d => {
+              d.duration = v
+            })
+            pushView({override: {indicatorInit}})
+          }}
+          default={INDICATOR_INIT.duration}
+          sliderMin={0.1}
+          sliderMax={1.9}
+          sliderStep={0.01}
+          pass={{onMouseUp: v => showIndicator(init, true)}}
+        />
+        <button title="static" className={`toggle ${init?.static ? "active" : ""}`} onClick={e => {
+          const indicatorInit = produce(init ?? {}, d => {
+            d.static = !d.static
+          })
+          showIndicator(indicatorInit, true)
+          pushView({override: {indicatorInit}})
+        }}>S</button>
+      </div>
+    </div>
   </>
 }
 
 
 function showIndicator(init: IndicatorInit, realDuration?: boolean) {
   window.overlay = window.overlay || new Overlay(true)
   window.overlay.setInit({...init, duration: realDuration ? init?.duration : 3})
-  window.overlay.show({text: "1.00", static: !realDuration})
+  window.overlay.show({text: "1.00", static: realDuration ? init.static : true})
 }

src/popup/AudioPanel.tsx

@@ -51,6 +51,12 @@ export function AudioPanel(props: {}) {
       label={<div>
         <FaVolumeUp size="17px"/>
         <span style={{marginLeft: "10px"}}>{window.gsm.command.adjustGain}</span>
+        <button title={"mono"} style={{marginLeft: "10px"}} className={`toggle ${audioFx.mono ? "active" : ""}`} onClick={e => {
+          setView(produce(view, d => {
+            d.audioFx.mono = !d.audioFx.mono 
+            d.audioFx.mono && ensureCaptured()
+          }))
+        }}>M</button>
       </div>}
       value={audioFx.volume ?? 1}
       sliderMin={0}

src/types.ts

@@ -54,7 +54,9 @@ export type IndicatorInit = {
   textColor?: string,
   scaling?: number,
   rounding?: number,
-  duration?: number 
+  duration?: number,
+  offset?: number,
+  static?: boolean
 }
 
 export type MediaPath = {
@@ -76,6 +78,7 @@ export type Context = {
 export type AudioFx = {
   pitch: number,
   volume: number,
+  mono?: boolean,
   delay: number,
   delayMerge?: boolean,
   eq: {
@@ -223,7 +226,8 @@ export type Gsm = {
     color: string,
     size: string,
     rounding: string,
-    duration: string
+    duration: string,
+    offset: string
   },
   filter: {
     grayscale: string,

static/locales/en.json

@@ -32,7 +32,8 @@
     "color": "color",
     "size": "size",
     "rounding": "rounding",
-    "duration": "duration"
+    "duration": "duration",
+    "offset": "offset"
   },
   "filter": {
     "grayscale": "grayscale",

static/locales/es.json

@@ -32,7 +32,8 @@
     "color": "color",
     "size": "tamaño",
     "rounding": "redondeo",
-    "duration": "duración"
+    "duration": "duración",
+    "offset": "desplazar"
   },
   "filter": {
     "grayscale": "escala de grises",

static/locales/hi.json

@@ -32,7 +32,8 @@
     "color": "रंग",
     "size": "आकार",
     "rounding": "गोलाई",
-    "duration": "अवधि"
+    "duration": "अवधि",
+    "offset": "ऑफ़सेट"
   },
   "filter": {
     "grayscale": "ग्रेस्केल",

static/locales/ja.json

@@ -32,7 +32,8 @@
     "color": "色",
     "size": "サイズ",
     "rounding": "丸め",
-    "duration": "期間"
+    "duration": "期間",
+    "offset": "オフセット"
   },
   "filter": {
     "grayscale": "グレースケール",

static/locales/ko.json

@@ -32,7 +32,8 @@
     "color": "색",
     "size": "크기",
     "rounding": "진원도",
-    "duration": "기간"
+    "duration": "기간",
+    "offset": "오프셋"
   },
   "filter": {
     "grayscale": "회색조",

static/locales/pt_BR.json

@@ -32,7 +32,8 @@
     "color": "cor",
     "size": "tamanho",
     "rounding": "arredondado",
-    "duration": "duração"
+    "duration": "duração",
+    "offset": "deslocamento"
   },
   "filter": {
     "grayscale": "escala de cinza",

static/locales/ru.json

@@ -32,7 +32,8 @@
     "color": "цвет",
     "size": "размер",
     "rounding": "круглость",
-    "duration": "скорость"
+    "duration": "скорость",
+    "offset": "сместить"
   },
   "filter": {
     "grayscale": "полутоновой",

static/locales/tr.json

@@ -32,7 +32,8 @@
     "color": "renk",
     "size": "boyut",
     "rounding": "yuvarlaklık",
-    "duration": "süre"
+    "duration": "süre",
+    "offset": "ofset"
   },
   "filter": {
     "grayscale": "gri tonlama",

static/locales/zh_CN.json

@@ -32,7 +32,8 @@
     "color": "颜色",
     "size": "大小",
     "rounding": "圆度",
-    "duration": "持续时间"
+    "duration": "持续时间",
+    "offset": "偏移"
   },
   "filter": {
     "grayscale": "灰度",

static/locales/zh_TW.json

@@ -32,7 +32,8 @@
     "color": "顏色",
     "size": "大小",
     "rounding": "圓度",
-    "duration": "持續時間"
+    "duration": "持續時間",
+    "offset": "位移"
   },
   "filter": {
     "grayscale": "灰階",