Develop (#6)

* Play Button Refactored. * fixes.
rknyryn · Mar 26, 2024 · 0655328 · 0655328
1 parent 950914d
commit 0655328
Show file tree

Hide file tree

Showing 16 changed files with 253 additions and 131 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
   "type": "module",
   "dependencies": {
     "add": "^2.0.6",
-    "bits-ui": "^0.19.6",
+    "bits-ui": "^0.20.1",
     "clsx": "^2.1.0",
     "mode-watcher": "^0.2.2",
     "select": "^1.1.2",

diff --git a/src/components/PlaySound.svelte b/src/components/PlaySound.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import SoundDown from './SoundDown.svelte';
+	import SoundUp from './SoundUp.svelte';
+	import { fly } from 'svelte/transition';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	// import * as Select from '$lib/components/ui/select';
+	let Speaker: SpeechSynthesisUtterance;
+
+	export let isSpeaking: boolean = false;
+	export let text: string;
+	// let SpeakerVoices: SpeechSynthesisVoice[] = [];
+	// let SelectedSpeakerLang = { label: '', value: '' };
+	// let SpeakerLangOptions: { label: string; value: string }[] = [];
+
+	function handlePlay() {
+		text && Speech(text);
+	}
+
+	function Speech(text: string) {
+		if (isSpeaking) {
+			window.speechSynthesis.cancel();
+			isSpeaking = false;
+			return;
+		}
+		Speaker.lang = 'en-US';
+		Speaker.text = text;
+		window.speechSynthesis.speak(Speaker);
+		isSpeaking = true;
+		Speaker.addEventListener('end', () => {
+			isSpeaking = false;
+		});
+	}
+
+	onMount(() => {
+		Speaker = new SpeechSynthesisUtterance();
+		// SpeakerVoices = window.speechSynthesis.getVoices();
+
+		// if (Speaker.voice)
+		// 	SelectedSpeakerLang = { label: Speaker.voice?.name, value: Speaker.voice?.lang };
+		// else SelectedSpeakerLang = { label: SpeakerVoices[0].name, value: SpeakerVoices[0].lang };
+		// SpeakerLangOptions =
+		// 	SpeakerVoices?.map((voice) => ({ label: voice.name, value: voice.lang })) || [];
+	});
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if 'speechSynthesis' in window}
+	<div
+		on:click={handlePlay}
+		class="
+		mt-[4px]
+		flex
+		h-[32px]
+		w-[32px]
+		cursor-pointer
+		items-center
+		justify-center
+		rounded-full
+		transition-transform
+	
+		{isSpeaking
+			? '-translate-x-[3px] -translate-y-[6px] scale-[1.15]'
+			: ' hover:-translate-x-[3px] hover:scale-[1.15] hover:border'}
+		"
+	>
+		{#if isSpeaking}
+			<span in:fly={{ duration: 100, opacity: 0.2 }}>
+				<SoundUp {isSpeaking} style="transform:translateX(2.15px);" />
+			</span>
+		{:else}
+			<Tooltip.Root openDelay={0}>
+				<Tooltip.Trigger>
+					<span in:fly={{ duration: 100, opacity: 0.2 }}>
+						<SoundDown />
+					</span>
+				</Tooltip.Trigger>
+				<Tooltip.Content transitionConfig={{ y: 0 }} side="top">
+					<p class="text-sm font-bold">Listen to the word</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		{/if}
+	</div>
+	<!-- 
+	<Select.Root bind:selected={SelectedSpeakerLang}>
+		<Select.Trigger class="w-[180px]">
+			<Select.Value />
+		</Select.Trigger>
+		<Select.Content class="max-h-[20rem] overflow-y-auto ">
+			<Select.Group>
+				{#each SpeakerLangOptions as lang}
+					<Select.Item value={lang.value} label={lang.label}>
+						{lang.label}
+					</Select.Item>
+				{/each}
+			</Select.Group>
+		</Select.Content>
+		<Select.Input name="favoriteFruit" />
+	</Select.Root> -->
+{/if}
diff --git a/src/components/SoundAnimation.svelte b/src/components/SoundAnimation.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import SoundMute from './SoundMute.svelte';
+	import SoundDown from './SoundDown.svelte';
+	import SoundUp from './SoundUp.svelte';
+
+	let index: number = 0;
+
+	onMount(() => {
+		setInterval(() => {
+			if (index < 1) {
+				index++;
+			} else {
+				index = 0;
+			}
+		}, 300);
+	});
+</script>
+
+{#if index === 0}
+	<SoundMute />
+{:else if index === 1}
+	<SoundDown />
+{:else}
+	<SoundUp />
+{/if}
diff --git a/src/components/SoundDown.svelte b/src/components/SoundDown.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let style: string = '';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="100%"
+	height="100%"
+	viewBox="0 -960 960 960"
+	class="fill-[#020817] dark:fill-[#F8FAFC]"
+	{style}
+>
+	<path
+		d="M368.462-380.001H251.283q-13.564 0-22.423-8.859-8.859-8.859-8.859-22.423v-137.434q0-13.564 8.859-22.423 8.859-8.859 22.423-8.859h117.179L496.41-707.946q12.077-12.077 27.833-5.628 15.756 6.448 15.756 23.268v420.355q0 17.077-15.756 23.525-15.756 6.449-27.833-5.628L368.462-380.001ZM719.999-480q0 42.256-18.923 77.948-18.923 35.692-53.154 57.461-7.384 4.795-14.833.462-7.448-4.333-7.448-12.897v-247.537q0-8.564 7.448-12.769 7.449-4.205 14.833.333 34.231 21.974 53.154 58.564 18.923 36.589 18.923 78.435Z"
+	/>
+</svg>
diff --git a/src/components/SoundMute.svelte b/src/components/SoundMute.svelte
@@ -0,0 +1,10 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="28px"
+	height="28px"
+	viewBox="0 -960 960 960"
+	class="fill-[#313131] dark:fill-blue-400"
+	><path
+		d="M448.462-380.001H331.283q-13.468 0-22.375-8.907t-8.907-22.375v-137.434q0-13.468 8.907-22.375t22.375-8.907h117.179L576.41-707.946q12.077-12.077 27.833-5.544 15.756 6.532 15.756 23.184v420.355q0 16.909-15.756 23.441-15.756 6.533-27.833-5.544L448.462-380.001Z"
+	/></svg
+>
diff --git a/src/components/SoundOn.svelte b/src/components/SoundOn.svelte
@@ -0,0 +1,11 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="28px"
+	height="28px"
+	viewBox="0 -960 960 960"
+	class="fill-[#313131] dark:fill-blue-400"
+>
+	<path
+		d="M752.563-456.36H665.64q-10.872 0-18-7.128t-7.128-17.999q0-10.872 7.128-18t18-7.128h86.923q10.872 0 18 7.128t7.128 18q0 10.871-7.128 17.999-7.128 7.128-18 7.128ZM582.384-283.205q5.949-8.385 16.141-10.333 10.192-1.949 18.576 4.666l71.513 53.667q8.385 6.205 9.795 16.064 1.41 9.858-4.795 18.243-6.205 8.64-16.268 10.461-10.064 1.82-18.705-4.795l-71.257-53.667q-8.384-6.205-9.794-16.063-1.41-9.859 4.794-18.243Zm104.692-443.129-71.923 53.667q-8.641 6.615-18.5 4.667-9.859-1.949-15.807-10.333-6.205-8.385-4.795-18.243 1.41-9.859 9.795-16.064l71.923-53.667q8.384-6.615 18.243-4.794 9.859 1.82 16.064 10.461 6.205 8.384 4.794 18.243-1.41 9.858-9.794 16.063ZM290.77-380.001H173.591q-13.564 0-22.423-8.859-8.859-8.859-8.859-22.423v-137.434q0-13.564 8.859-22.423 8.859-8.859 22.423-8.859H290.77l127.948-127.947q12.076-12.077 27.832-5.628 15.756 6.448 15.756 23.268v420.355q0 17.077-15.756 23.525-15.756 6.449-27.832-5.628L290.77-380.001Z"
+	/>
+</svg>
diff --git a/src/components/SoundUp.svelte b/src/components/SoundUp.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let style: string = '';
+	export let isSpeaking: boolean = false;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="100%"
+	height="100%"
+	viewBox="0 -960 960 960"
+	class="{isSpeaking ? 'fill-blue-400' : 'fill-[#020817]'}  {isSpeaking
+		? 'dark:fill-blue-500'
+		: 'dark:fill-[#F8FAFC]'} "
+	{style}
+>
+	<path
+		d="M763.589-481q0-87.897-48.32-159.192-48.321-71.295-127.987-104.91-10.308-4.641-14.692-13.667-4.385-9.025-.154-18.281 4.179-10.256 15.051-13.795 10.871-3.538 21.922 1.103 92.359 40.256 148.397 123.41Q813.844-583.179 813.844-481q0 102.179-56.038 185.332-56.038 83.154-148.397 123.41-11.051 4.641-21.922 1.103-10.872-3.539-15.051-13.795-4.231-9.256.154-18.281 4.384-9.026 14.692-13.667 79.666-33.615 127.987-104.91 48.32-71.295 48.32-159.192ZM294.616-380.001H177.438q-13.564 0-22.423-8.859-8.859-8.859-8.859-22.423v-137.434q0-13.564 8.859-22.423 8.859-8.859 22.423-8.859h117.178l127.948-127.947q12.077-12.077 27.833-5.628 15.756 6.448 15.756 23.268v420.355q0 17.077-15.756 23.525-15.756 6.449-27.833-5.628L294.616-380.001ZM646.153-480q0 42.256-18.923 77.948-18.923 35.692-53.153 57.461-7.385 4.795-14.833.462-7.449-4.333-7.449-12.897v-247.537q0-8.564 7.449-12.769 7.448-4.205 14.833.333 34.23 21.974 53.153 58.564 18.923 36.589 18.923 78.435Z"
+	/>
+</svg>
diff --git a/src/components/WordCard.svelte b/src/components/WordCard.svelte
@@ -14,112 +14,60 @@
 
 <script lang="ts">
 	import * as Accordion from '$lib/components/ui/accordion';
-	import { onMount } from 'svelte';
 	import * as Alert from '$lib/components/ui/alert';
 	import * as Card from '$lib/components/ui/card';
-	import Pause from './Pause.svelte';
-	import Play from './Play.svelte';
+	import PlaySound from './PlaySound.svelte';
 
 	export let data: WordCardDataType;
 	export let index: number;
-
-	let Speaker: SpeechSynthesisUtterance;
-	let isSpeaking: boolean = false;
-
-	let SelectedSpeakerLang = { label: 'English (US)', value: 'en-US' };
-	let SpeakerLangOptions: { label: string; value: string }[] = [
-		{ label: 'English (US)', value: 'en-US' },
-		{ label: 'Turkish', value: 'tr-TR' }
-	];
-
-	function Speech(text: string) {
-		if (isSpeaking) {
-			window.speechSynthesis.cancel();
-			isSpeaking = false;
-			return;
-		}
-
-		Speaker.lang = SelectedSpeakerLang.value || 'en-US';
-		Speaker.text = text;
-		window.speechSynthesis.speak(Speaker);
-		isSpeaking = true;
-		Speaker.addEventListener('end', () => {
-			isSpeaking = false;
-		});
-	}
-	onMount(() => {
-		Speaker = new SpeechSynthesisUtterance();
-	});
 </script>
 
 <Card.Root class="">
 	<Card.Header>
-		<Card.Title class="flex gap-3 text-2xl capitalize ">
-			{data.word}
+		<Card.Title class="flex justify-between gap-3 text-2xl capitalize ">
+			{#if data?.word}
+				{data.word}
 
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			{#if 'speechSynthesis' in window}
-				<span class="play-button" on:click={() => Speech(data.word)}>
-					{#if isSpeaking}
-						<Pause />
-					{:else}
-						<Play />
-					{/if}
-				</span>
+				<PlaySound text={data.word} />
+			{:else}
+				Word
 			{/if}
-
-			<!-- <Select.Root bind:selected={SelectedSpeakerLang[index]}>
-                <Select.Trigger class="w-[180px]">
-                    <Select.Value />
-                </Select.Trigger>
-                <Select.Content>
-                    <Select.Group>
-                        {#each SpeakerLangOptions as lang}
-                            <Select.Item value={lang.value} label={lang.label}>
-                                {lang.label}
-                            </Select.Item>
-                        {/each}
-                    </Select.Group>
-                </Select.Content>
-                <Select.Input name="favoriteFruit" />
-            </Select.Root> -->
 		</Card.Title>
 	</Card.Header>
 	<Card.Content class="grid gap-2">
-		{#if data.meaning.noun}
+		{#if data?.meaning?.noun}
 			<Alert.Root>
 				<Alert.Title>Noun</Alert.Title>
 				<Alert.Description>
 					{data.meaning.noun}
 				</Alert.Description>
 			</Alert.Root>
 		{/if}
-		{#if data.meaning.adverb}
+		{#if data?.meaning?.adverb}
 			<Alert.Root>
 				<Alert.Title>Adverb</Alert.Title>
 				<Alert.Description>
 					{data.meaning.adverb}
 				</Alert.Description>
 			</Alert.Root>
 		{/if}
-		{#if data.meaning.verb}
+		{#if data?.meaning?.verb}
 			<Alert.Root>
 				<Alert.Title>Verb</Alert.Title>
 				<Alert.Description>
 					{data.meaning.verb}
 				</Alert.Description>
 			</Alert.Root>
 		{/if}
-		{#if data.meaning.adjective}
+		{#if data?.meaning?.adjective}
 			<Alert.Root>
 				<Alert.Title>Adjective</Alert.Title>
 				<Alert.Description>
 					{data.meaning.adjective}
 				</Alert.Description>
 			</Alert.Root>
 		{/if}
-		{#if data.example}
+		{#if data?.example}
 			<Accordion.Root class="rounded-md border px-4 hover:border-slate-400">
 				<Accordion.Item value={index.toString()}>
 					<Accordion.Trigger>Examples</Accordion.Trigger>

diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+};
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js.js";
+
+	type $$Props = TooltipPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		y: 8,
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TooltipPrimitive.Content>