add second bar for mouth-close threshold

src/components/bar.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { draggable } from "@neodrag/svelte";
-	import { onDestroy, onMount, tick } from "svelte";
-	import { appWindow } from "@tauri-apps/api/window";
+	import { onMount } from "svelte";
 	import { tweened } from "svelte/motion";
-	import { quintOut } from "svelte/easing";
+	import { sineIn, sineOut } from "svelte/easing";
 	import { invoke } from "@tauri-apps/api";
-	import type { UnlistenFn } from "@tauri-apps/api/event";
 	export let progress = 0;
 
 	export let withSetpoint = false;
@@ -15,7 +13,7 @@
 	let bar: HTMLDivElement;
 	let point: HTMLDivElement;
 	let pos = { x: 0, y: 0 };
-	const tweenedProgress = tweened(0, { duration: 100, easing: quintOut });
+	const tweenedProgress = tweened(0, { duration: 40, easing: sineOut });
 
 	onMount(async () => {
 		let rect = bar.getBoundingClientRect();
@@ -24,7 +22,16 @@
 	});
 
 	$: if (bar) {
-		$tweenedProgress = (progress / 100) * bar.getBoundingClientRect().height;
+		let pxProgress = (progress / 100) * bar.getBoundingClientRect().height;
+		if (pxProgress > $tweenedProgress) {
+			tweenedProgress
+				.set(pxProgress, {
+					duration: 20,
+					easing: sineOut,
+				})
+				.then();
+		}
+		$tweenedProgress = pxProgress;
 	}
 </script>
 

src/components/tube.svelte

@@ -6,16 +6,14 @@
 	let src = "";
 	export let buf = 0;
 	export let open = false;
+	export let threshold = 50;
 	let closed = false;
 	let blink = false;
 	let inAnim = "jump-in";
 	let outAnim = "none";
 
 	$: {
-		if (buf > 50) {
-			open = true;
-			closed = false;
-		} else {
+		if (buf < threshold) {
 			open = false;
 			closed = true;
 		}
@@ -38,10 +36,12 @@
 	onMount(async () => {
 		await appWindow.listen("mouth-open", () => {
 			buf = 100;
+			open = true;
+			closed = false;
 		});
 
 		await appWindow.listen("mouth-close", () => {
-			buf = buf - 10;
+			buf = buf - 5;
 			buf = buf < 0 ? 0 : buf;
 		});
 

src/views/main.svelte

@@ -13,10 +13,13 @@
   import Tuber from "../components/tube.svelte";
   import { invoke } from "@tauri-apps/api/tauri";
   import Bar from "../components/bar.svelte";
+  import { tick } from "svelte";
 
   let monitorTimer: NodeJS.Timer;
 
   let active = false;
+  let activation = 0;
+  let closeThreshold = 75;
 
   $: {
     invoke("set_mic_threshold", { threshold: $threshold }).then();
@@ -24,12 +27,14 @@
 
   onMount(async () => {
     await appWindow.setMinSize(new PhysicalSize(720, 600));
+
     await appWindow.onFocusChanged(({ payload: focused }) => {
       $transparent = !focused;
     });
 
     monitorTimer = setInterval(async () => {
       $level = await invoke("get_audio_level");
+      await tick();
     }, 40);
   });
 
@@ -42,7 +47,11 @@
 </script>
 
 <div class="container" class:transparent={$transparent}>
-  <Tuber bind:open={active} />
+  <Tuber
+    bind:open={active}
+    bind:buf={activation}
+    bind:threshold={closeThreshold}
+  />
   {#if !$transparent}
     <div
       transition:fly={{ duration: 200, x: -200, opacity: 100 }}
@@ -63,7 +72,12 @@
         }}
         --bar-color={active ? "lightgreen" : "blue"}
       />
-      <Bar />
+      <Bar
+        withSetpoint
+        progress={activation}
+        setpoint={closeThreshold}
+        onSetpointChange={(y) => (closeThreshold = y * 100)}
+      />
     </div>
   {/if}
 </div>
@@ -85,10 +99,10 @@
   .audio {
     position: absolute;
     display: flex;
-    gap: 10px;
+    gap: 2.5vh;
     bottom: 5vh;
     top: 5vh;
-    right: 30px;
+    right: 20px;
   }
 
   @keyframes fade-out {