handle window resizing

src-tauri/src/main.rs

@@ -50,6 +50,7 @@ fn main() {
             Ok(())
         })
         .invoke_handler(tauri::generate_handler![
+            log,
             set_mic_threshold,
             get_mic_threshold,
             get_audio_level,
@@ -59,6 +60,11 @@ fn main() {
         .expect("error while running tauri application");
 }
 
+#[tauri::command]
+fn log(msg: String) {
+    println!("{}", msg);
+}
+
 #[tauri::command]
 fn set_mic_threshold(threshold: f32, current: State<'_, MicThreshold>) {
     *current.0.lock().unwrap() = threshold;

src/components/bar.svelte

@@ -1,34 +1,46 @@
 <script lang="ts">
 	import { draggable } from "@neodrag/svelte";
-	import { onMount, afterUpdate } from "svelte";
-
+	import { onDestroy, onMount, tick } from "svelte";
+	import { appWindow } from "@tauri-apps/api/window";
 	import { tweened } from "svelte/motion";
 	import { quintOut } 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;
 	export let setpoint = 0;
-	export let onSetpointChange = (e: number) => {};
+	export let onSetpointChange = (_: number) => {};
 
-	let bar;
-	let point;
-	let pos = {x: 0, y: 0};
-	const tweenedProgress = tweened(0, { duration: 200, easing: quintOut });
+	let bar: HTMLDivElement;
+	let point: HTMLDivElement;
+	let pos = { x: 0, y: 0 };
+	const tweenedProgress = tweened(0, { duration: 100, easing: quintOut });
 
-	onMount(() => {
+	onMount(async () => {
 		let rect = bar.getBoundingClientRect();
 		let prect = point.getBoundingClientRect();
 		pos.y = -(setpoint / 100) * rect.height + prect.height;
 	});
 
-	
 	$: if (bar) {
 		$tweenedProgress = (progress / 100) * bar.getBoundingClientRect().height;
 	}
 </script>
 
+<svelte:window
+	on:resize={async () => {
+		await invoke("log", {
+			msg: `Resized`,
+		});
+
+		pos = { x: 0, y: 0 };
+		let rect = bar.getBoundingClientRect();
+		let prect = point.getBoundingClientRect();
+		pos.y = -(setpoint / 100) * rect.height + prect.height;
+	}}
+/>
+
 <div bind:this={bar} class="bar-container">
 	{#if withSetpoint}
 		<div
@@ -42,39 +54,36 @@
 				bounds: "parent",
 				onDragEnd: (e) => {
 					let rect = bar.getBoundingClientRect();
-					let y = ( e.domRect.y - rect.y + (e.domRect.height/ 2)) / (rect.height);
+					let y = (e.domRect.y - rect.y + e.domRect.height / 2) / rect.height;
 					onSetpointChange(1.0 - y);
 				},
 			}}
-				 >
-			<div class="handle">
-				
-			</div>
-	</div>
+		>
+			<div class="handle" />
+		</div>
 	{/if}
 	<div class="bar" style="height: {$tweenedProgress}px;" />
 </div>
 
 <style lang="scss">
-		.setpoint {
+	.setpoint {
+		position: absolute;
+		background-color: black;
+		width: 10vh;
+		height: 0.5vh;
+		.handle {
 			position: absolute;
-			background-color: black;
-			width: 100%;
-			height: 0.5vh;
+			border-top: 2vh solid transparent;
+			border-bottom: 2vh solid transparent;
+			border-left: 2vh solid var(--handle-color, forestgreen);
+			left: -2.2vh;
+			top: 50%;
+			transform: translateY(-50%);
 		}
-	
-	.handle {
-			position: absolute;
-		  border-top: 10px solid transparent;
-  		border-bottom: 10px solid transparent;  
-  		border-right: 10px solid var(--handle-color, forestgreen);
-			right: -2.5vh;
-			transform: translateY(-45%);
-}
-	
+	}
+
 	.bar-container {
 		border-radius: var(--bar-radius, 0px);
-		position: absolute;
 		display: flex;
 		flex-direction: column;
 		justify-content: flex-end;
@@ -91,6 +100,6 @@
 		border: 0;
 		margin: 0;
 		background-color: var(--bar-color, blue);
-		transition: background-color 0.1s ;
+		transition: background-color 0.1s;
 	}
-</style>
+</style>

src/views/main.svelte

@@ -1,36 +1,48 @@
 <script lang="ts" context="module">
   import { writable } from "svelte/store";
   const transparent = writable(false);
-  let threshold = writable(0);
+  let threshold = writable(0.5);
   let level = writable(0);
 </script>
 
 <script lang="ts">
   import { appWindow, PhysicalSize } from "@tauri-apps/api/window";
-  import { onMount, beforeUpdate, afterUpdate } from "svelte";
+  import { onMount, onDestroy } from "svelte";
   import { fly } from "svelte/transition";
   import FramePreview from "../components/FramePreview.svelte";
   import Tuber from "../components/tube.svelte";
   import { invoke } from "@tauri-apps/api/tauri";
   import Bar from "../components/bar.svelte";
 
+  let monitorTimer: NodeJS.Timer;
+
   let active = false;
 
+  $: {
+    invoke("set_mic_threshold", { threshold: $threshold }).then();
+  }
+
   onMount(async () => {
     await appWindow.setMinSize(new PhysicalSize(720, 600));
     await appWindow.onFocusChanged(({ payload: focused }) => {
       $transparent = !focused;
     });
-    setInterval(async () => ($level = await invoke("get_audio_level")), 10);
+
+    monitorTimer = setInterval(async () => {
+      $level = await invoke("get_audio_level");
+    }, 40);
   });
 
-  beforeUpdate(async () => {
-    $threshold = await invoke("get_mic_threshold");
+  onDestroy(() => {
+    if (monitorTimer) {
+      clearInterval(monitorTimer);
+      monitorTimer = undefined;
+    }
   });
 </script>
 
 <div class="container" class:transparent={$transparent}>
-  <Tuber />
+  <Tuber bind:open={active} />
   {#if !$transparent}
     <div
       transition:fly={{ duration: 200, x: -200, opacity: 100 }}
@@ -47,11 +59,11 @@
         setpoint={$threshold * 100}
         withSetpoint
         onSetpointChange={async (e) => {
-          // $threshold = e;
-          await invoke("set_mic_threshold", { threshold: e });
+          $threshold = e;
         }}
-        --bar-color={active ? "green" : "blue"}
+        --bar-color={active ? "lightgreen" : "blue"}
       />
+      <Bar />
     </div>
   {/if}
 </div>