added the text showing when anouncent and fixed that sv-poup is used but not in package.json

package.json

@@ -29,14 +29,14 @@
 		"tailwindcss": "^4.0.0",
 		"vite": "^6.0.0"
 	},
-		"dependencies": {
-			"@supabase/supabase-js": "^2.49.4",
-			"@sveltejs/adapter-static": "^3.0.8",
-			"chart.js": "^4.4.9",
-			"js-confetti": "^0.12.0",
-			"random-words": "^2.0.1",
-			"svelte-5-french-toast": "^2.0.4",
-			"word-exists": "^1.0.0"
-	
+	"dependencies": {
+		"@supabase/supabase-js": "^2.49.4",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"chart.js": "^4.4.9",
+		"js-confetti": "^0.12.0",
+		"random-words": "^2.0.1",
+		"sv-popup": "^0.5.3",
+		"svelte-5-french-toast": "^2.0.4",
+		"word-exists": "^1.0.0"
 	}
 }

src/routes/announcer/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { PlayingAnnouncement ,CurrentText} from "./logic/announcerData.svelte.js";
+
 	import List from "./components/CommonAnounceedTexts/list.svelte";
 	import Add from "./components/CustomText/add.svelte";
 	import CustomText from "./components/CustomText/CustomText.svelte";
@@ -10,11 +12,14 @@
 
 <div class="flex h-full flex-col items-center justify-center gap-5 p-5">
 	<div class="w-fit rounded-2xl bg-gray-900 p-3">
-		<h1 class="text-center text-4xl">Most Announced announcements</h1>
-		<List />
-		<hr class="my-5 w-full border-gray-600" />
-		<h1 class="text-center text-4xl">Or announce something else</h1>
-		<CustomText />
-		<Add />
+		{#if PlayingAnnouncement.v == true}
+			<p class="text-center text-5xl">{CurrentText.v}</p>
+		{:else}
+			<h1 class="text-center text-4xl">Most Announced announcements</h1>
+			<List />
+			<hr class="my-5 w-full border-gray-600" />
+			<h1 class="text-center text-4xl">Or announce something else</h1>
+			<CustomText />
+			<Add />{/if}
 	</div>
 </div>

src/routes/announcer/logic/AnnounceUsingTTS.js

@@ -1,7 +1,14 @@
+import { PlayingAnnouncement } from "./announcerData.svelte.js";
+
 export function AnnounceUsingTTS(text) {
-    window.speechSynthesis.speak(
-        Object.assign(new SpeechSynthesisUtterance(text), {
-            rate: 0.5,
-        }),
-    );
-}
+	PlayingAnnouncement.v = true;
+
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.rate = 0.5;
+    utterance.onend = () => {
+        PlayingAnnouncement.v = false;
+    };
+    window.speechSynthesis.speak(utterance);
+
+	
+}

src/routes/announcer/logic/announcerData.svelte.js

@@ -1,2 +1,3 @@
 export let CurrentText = $state({ v: "" });
-export let MostUsedAnnouncements = $state({ v: [] });
+export let MostUsedAnnouncements = $state({ v: [] });
+export let PlayingAnnouncement = $state({ v: false });