From 5b021572702c393bb5732c3a9822156cd7ece2eb Mon Sep 17 00:00:00 2001
From: zonetecde <zonetecde@gmail.com>
Date: Sat, 11 Jan 2025 12:55:12 +0100
Subject: [PATCH] - Bug fixes - Added indication for subtitles with custom
 styles - Updated default glowing values

---
 .../CustomizeSubtitleStyleButton.svelte       | 10 +++++++-
 .../common/EditSubtitleButton.svelte          |  3 ++-
 .../components/preview/BurnedSubtitles.svelte | 25 +++++++------------
 .../components/subtitles/WordsSelector.svelte |  7 +++---
 .../IndividualSubtitleSettings.svelte         | 16 +++++++++++-
 .../track/SubtitleClipComponent.svelte        | 17 +++++++++++++
 .../translations/TranslationInput.svelte      |  2 +-
 src/lib/models/Project.ts                     |  1 +
 src/routes/editor/+page.svelte                |  3 ++-
 9 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/common/CustomizeSubtitleStyleButton.svelte b/src/lib/components/common/CustomizeSubtitleStyleButton.svelte
index f3b3841..e7f7040 100644
--- a/src/lib/components/common/CustomizeSubtitleStyleButton.svelte
+++ b/src/lib/components/common/CustomizeSubtitleStyleButton.svelte
@@ -1,13 +1,21 @@
 <script lang="ts">
 	import type { SubtitleClip } from '$lib/models/Timeline';
+	import { currentProject } from '$lib/stores/ProjectStore';
 
 	export let onClick: () => void;
 	export let subtitle: SubtitleClip;
+
+	$: hadAtLeastOneStyle =
+		$currentProject.projectSettings.individualSubtitlesSettings[subtitle.id].hasAtLeastOneStyle;
 </script>
 
 {#if !subtitle.isSilence}
 	<abbr title="Customize style">
-		<button class=" bg-[#253030] p-1 rounded-lg border border-[#1a1013]" on:click={onClick}>
+		<button
+			class={'bg-[#253030] p-1 rounded-lg border border-[#1a1013] ' +
+				(hadAtLeastOneStyle ? 'border-[#7cce79]' : '')}
+			on:click={onClick}
+		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
diff --git a/src/lib/components/common/EditSubtitleButton.svelte b/src/lib/components/common/EditSubtitleButton.svelte
index b1d872c..0008022 100644
--- a/src/lib/components/common/EditSubtitleButton.svelte
+++ b/src/lib/components/common/EditSubtitleButton.svelte
@@ -5,13 +5,14 @@
 		currentlyEditedSubtitleId,
 		setSubtitleToEdit
 	} from '$lib/stores/LayoutStore';
+	import { currentProject } from '$lib/stores/ProjectStore';
 	export let subtitle: SubtitleClip;
 </script>
 
 {#if subtitle.verse !== -1 && subtitle.surah !== -1}
 	<abbr title="Edit this subtitle">
 		<button
-			class=" bg-[#253030] p-1 rounded-lg border border-[#1a1013]"
+			class="bg-[#253030] p-1 rounded-lg border border-[#1a1013]"
 			on:click={() => {
 				if ($currentlyEditedSubtitleId === subtitle.id) {
 					clearSubtitleToEdit();
diff --git a/src/lib/components/preview/BurnedSubtitles.svelte b/src/lib/components/preview/BurnedSubtitles.svelte
index 2ecd2f7..0102b1b 100644
--- a/src/lib/components/preview/BurnedSubtitles.svelte
+++ b/src/lib/components/preview/BurnedSubtitles.svelte
@@ -66,6 +66,14 @@
 <svelte:head>
 	{#if hasCustomIndividualSettings && $currentProject.projectSettings.individualSubtitlesSettings[currentSubtitle.id].glowEffect}
 		<style>
+			.glow {
+				font-size: 80px;
+				text-align: center;
+				-webkit-animation: glow 1s ease-in-out infinite alternate;
+				-moz-animation: glow 1s ease-in-out infinite alternate;
+				animation: glow 1s ease-in-out infinite alternate;
+			}
+
 			@keyframes glow {
 				from {
 					text-shadow:
@@ -124,12 +132,7 @@ une constante (sinon animation de fade lorsqu'on bouge le curseur dans la timeli
 					($showSubtitlesPadding ? ' bg-blue-500 bg-opacity-30' : '')}
 			>
 				<p
-					class={'arabic text-center w-full subtitle-text ' +
-						(hasCustomIndividualSettings &&
-						$currentProject.projectSettings.individualSubtitlesSettings[currentSubtitle.id]
-							.glowEffect
-							? 'glow'
-							: '')}
+					class={'arabic text-center w-full subtitle-text glow'}
 					style={`font-size: ${subtitleTextSize}px; ${
 						enableOutline
 							? `text-shadow: ` +
@@ -179,13 +182,3 @@ une constante (sinon animation de fade lorsqu'on bouge le curseur dans la timeli
 		</div>
 	{/key}
 {/if}
-
-<style>
-	.glow {
-		font-size: 80px;
-		text-align: center;
-		-webkit-animation: glow 1s ease-in-out infinite alternate;
-		-moz-animation: glow 1s ease-in-out infinite alternate;
-		animation: glow 1s ease-in-out infinite alternate;
-	}
-</style>
diff --git a/src/lib/components/subtitles/WordsSelector.svelte b/src/lib/components/subtitles/WordsSelector.svelte
index 95e5651..830e052 100644
--- a/src/lib/components/subtitles/WordsSelector.svelte
+++ b/src/lib/components/subtitles/WordsSelector.svelte
@@ -320,11 +320,12 @@
 		// Mets à jour les paramètres individuels custom
 		$currentProject.projectSettings.individualSubtitlesSettings[subtitleId] = {
 			glowEffect: false,
-			glowColor: '#ff0000',
-			glowRadius: 7,
+			glowColor: '#973b3b',
+			glowRadius: 12,
 			bold: false,
 			italic: false,
-			underline: false
+			underline: false,
+			hasAtLeastOneStyle: false
 		};
 
 		// Met à jour la liste des sous-titres
diff --git a/src/lib/components/subtitles/subtitlesSettingsUI/IndividualSubtitleSettings.svelte b/src/lib/components/subtitles/subtitlesSettingsUI/IndividualSubtitleSettings.svelte
index ef08775..b7eab75 100644
--- a/src/lib/components/subtitles/subtitlesSettingsUI/IndividualSubtitleSettings.svelte
+++ b/src/lib/components/subtitles/subtitlesSettingsUI/IndividualSubtitleSettings.svelte
@@ -5,9 +5,23 @@
 	import { currentlyCustomizedSubtitleId } from '$lib/stores/LayoutStore';
 	import { currentProject } from '$lib/stores/ProjectStore';
 	import { onMount } from 'svelte';
+	import { derived } from 'svelte/store';
 
 	export let subtitle: SubtitleClip;
 	export let removeBorder = false;
+
+	$: {
+		const settings = $currentProject.projectSettings.individualSubtitlesSettings[subtitle.id];
+		if (settings) {
+			const newStyle =
+				settings.glowEffect || settings.bold || settings.italic || settings.underline;
+
+			// Update only if the value changes to avoid a re-trigger
+			if (settings.hasAtLeastOneStyle !== newStyle) {
+				settings.hasAtLeastOneStyle = newStyle;
+			}
+		}
+	}
 </script>
 
 <div
@@ -46,7 +60,7 @@
 	<Slider
 		title="Glow Radius"
 		min={1}
-		max={10}
+		max={20}
 		step={1}
 		bind:bindValue={$currentProject.projectSettings.individualSubtitlesSettings[subtitle.id]
 			.glowRadius}
diff --git a/src/lib/components/timeline/track/SubtitleClipComponent.svelte b/src/lib/components/timeline/track/SubtitleClipComponent.svelte
index 578058f..04eb08a 100644
--- a/src/lib/components/timeline/track/SubtitleClipComponent.svelte
+++ b/src/lib/components/timeline/track/SubtitleClipComponent.svelte
@@ -21,6 +21,7 @@
 	import ContextMenu, { Item, Divider, Settings } from 'svelte-contextmenu';
 	import SubtitlesListItem from '$lib/components/subtitles/SubtitlesListItem.svelte';
 	import IndividualSubtitleSettings from '$lib/components/subtitles/subtitlesSettingsUI/IndividualSubtitleSettings.svelte';
+	import { currentProject } from '$lib/stores/ProjectStore';
 
 	export let clip: SubtitleClip;
 	let color: string = '#7cce79';
@@ -109,6 +110,22 @@
 	<p class="arabic text-right px-3">
 		{clip.isSilence ? 'silence' : clip.isCustomText ? 'Custom Text' : clip.text}
 	</p>
+
+	{#if $currentProject.projectSettings.individualSubtitlesSettings[clip.id].hasAtLeastOneStyle}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="size-5 absolute top-0.5 right-0.5 bg-[#43ff3d4d] rounded-full border p-0.5 border-[#1e381dd8]"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
+			/>
+		</svg>{/if}
 </div>
 
 <ContextMenu bind:this={myMenu}>
diff --git a/src/lib/components/translations/TranslationInput.svelte b/src/lib/components/translations/TranslationInput.svelte
index 245018c..645dd2e 100644
--- a/src/lib/components/translations/TranslationInput.svelte
+++ b/src/lib/components/translations/TranslationInput.svelte
@@ -305,7 +305,7 @@
 
 		{#if showCustomizationSettings}
 			<br />
-			<div class=" w-full bg-[#1f1f1f] p-2 border-t-2 border-[#413f3f] border-b-2">
+			<div class="w-full p-2 border-[#413f3f]">
 				<IndividualSubtitleSettings {subtitle} removeBorder={true} />
 			</div>
 		{/if}
diff --git a/src/lib/models/Project.ts b/src/lib/models/Project.ts
index 4983558..811dc66 100644
--- a/src/lib/models/Project.ts
+++ b/src/lib/models/Project.ts
@@ -97,4 +97,5 @@ export interface IndividualSubtitleSettings {
 	bold: boolean;
 	underline: boolean;
 	italic: boolean;
+	hasAtLeastOneStyle: boolean;
 }
diff --git a/src/routes/editor/+page.svelte b/src/routes/editor/+page.svelte
index 956752d..a497874 100644
--- a/src/routes/editor/+page.svelte
+++ b/src/routes/editor/+page.svelte
@@ -46,7 +46,8 @@
 					bold: false,
 					italic: false,
 					underline: false,
-					glowEffect: false
+					glowEffect: false,
+					hasAtLeastOneStyle: false
 				};
 			}
 		});