+ automatic retrieval of translations from another project when addin…

…g a translation

+ “reset translation” button when clicking on the header

src/lib/components/translations/AddNewTranslationPopup.svelte

@@ -106,6 +106,8 @@
 			element.hadItTranslationEverBeenModified = false; // Reset the flag
 		});
 
+		document.getElementById('fetch-translations-button')?.click();
+
 		toast.success('Translation added');
 	}
 </script>

src/lib/components/translations/TranslationsCreatorHeader.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import { currentProject } from '$lib/stores/ProjectStore';
-	import { getEditionFromName } from '$lib/stores/QuranStore';
+	import { downloadTranslationForVerse, getEditionFromName } from '$lib/stores/QuranStore';
 	//@ts-ignore
 	import { check_outros, group_outros, transition_out } from 'svelte/internal';
 	import AddNewTranslationPopup from '$lib/components/translations/AddNewTranslationPopup.svelte';
 	import { fade } from 'svelte/transition';
 	import type { Edition } from '$lib/models/Edition';
+	import toast from 'svelte-french-toast';
 
-	let translationToDelete: Edition | undefined = undefined;
+	let selectedTranslation: Edition | undefined = undefined;
 
 	function handleAddNewTranslationButtonClick() {
 		const popup = new AddNewTranslationPopup({
@@ -29,9 +30,33 @@
 	}
 
 	function handleTranslationHeaderClicked(lang: string) {
-		// Confirm dialog pour suppression
+		// Action dialog
 		const edition = getEditionFromName(lang);
-		translationToDelete = edition;
+		selectedTranslation = edition;
+	}
+
+	/**
+	 * Reset the translation to the original one
+	 * @param name The name of the translation to reset
+	 */
+	async function resetTranslation(name: string) {
+		if (!name) return;
+
+		await Promise.all(
+			$currentProject.timeline.subtitlesTracks[0].clips.map(async (subtitleClip) => {
+				subtitleClip.translations[name] = await downloadTranslationForVerse(
+					name,
+					subtitleClip.surah,
+					subtitleClip.verse
+				);
+			})
+		);
+
+		// force svelte to rerender
+		$currentProject.projectSettings.addedTranslations =
+			$currentProject.projectSettings.addedTranslations;
+
+		toast.success('This translation has been successfully reset');
 	}
 </script>
 
@@ -40,7 +65,7 @@
 		{#each $currentProject.projectSettings.addedTranslations as lang, i}
 			{@const edition = getEditionFromName(lang)}
 			<button
-				class={'bg-[#214627] text-white p-1 xl:p-2 flex gap-x-2 border-2 text-xs xl:text-base border-[#173619] hover:bg-[#b86461] duration-200 ' +
+				class={'bg-[#214627] text-white p-1 xl:p-2 flex gap-x-2 border-2 text-xs xl:text-base border-[#173619] hover:bg-[#432749] duration-200 ' +
 					(i === $currentProject.projectSettings.addedTranslations.length - 1
 						? 'rounded-br-lg border-r-2'
 						: 'border-r-0')}
@@ -67,33 +92,38 @@
 	>
 </header>
 
-{#if translationToDelete}
+{#if selectedTranslation}
 	<div class="absolute inset-0 backdrop-blur-sm z-50" transition:fade>
 		<div class="w-full h-full flex items-center justify-center">
 			<div
-				class="w-[300px] h-[200px] bg-[#413f3f] border-4 border-[#161616] rounded-lg flex flex-col items-center justify-center gap-y-5 p-5 shadow-lg shadow-black"
+				class="w-[400px] h-[250px] bg-[#413f3f] border-4 border-[#161616] rounded-lg flex flex-col items-center justify-center gap-y-5 p-5 shadow-lg shadow-black"
 			>
 				<h1>
-					Do you really want to delete the {translationToDelete.language} - {translationToDelete.author}
-					translation?
+					Please choose an action for the {selectedTranslation.language} - {selectedTranslation.author}
+					translation
 				</h1>
 
 				<button
-					class="hover:font-bold w-28 py-1 rounded-lg border-2 border-black bg-[#161616]"
+					class="hover:font-bold w-60 py-1 rounded-lg border-2 border-black bg-[#161616]"
 					on:click={() => {
 						// Delete translation
 						$currentProject.projectSettings.addedTranslations =
 							$currentProject.projectSettings.addedTranslations.filter(
-								(lang) => lang !== translationToDelete?.name
+								(lang) => lang !== selectedTranslation?.name
 							);
-						translationToDelete = undefined;
-					}}>Yes</button
+						selectedTranslation = undefined;
+					}}>Remove this translation</button
+				>
+				<button
+					class="hover:font-bold w-60 -mt-3 py-1 rounded-lg border-2 border-black bg-[#161616]"
+					on:click={() => resetTranslation(selectedTranslation?.name || '')}
+					>Reset this translation</button
 				>
 				<button
-					class="hover:font-bold w-28 -mt-3 py-1 rounded-lg border-2 border-black bg-[#161616]"
+					class="hover:font-bold w-60 -mt-3 py-1 rounded-lg border-2 border-black bg-[#161616]"
 					on:click={() => {
-						translationToDelete = undefined;
-					}}>No</button
+						selectedTranslation = undefined;
+					}}>Close</button
 				>
 			</div>
 		</div>

src/lib/components/translations/TranslationsSettings.svelte

@@ -11,6 +11,8 @@
 	 * Search in all the other user's projects for the translations of the current project
 	 */
 	async function fetchTranslationsFromOtherProjects() {
+		let numberOfUpdatedTranslations = 0;
+
 		const userProjects = getUserProjects();
 
 		await Promise.all(
@@ -49,6 +51,7 @@
 													) {
 														subtitle.translations[translation] = translationText;
 														subtitle.hadItTranslationEverBeenModified = true;
+														numberOfUpdatedTranslations++;
 													}
 												}
 											}
@@ -62,7 +65,11 @@
 			})
 		);
 
-		toast.success('Translations fetched from other projects');
+		toast.success(
+			'Translations fetched from other projects.\n' +
+				numberOfUpdatedTranslations +
+				' translation(s) updated.'
+		);
 
 		// Force update
 		$currentProject.timeline.subtitlesTracks[0].clips =
@@ -126,6 +133,7 @@
 	>
 		<button
 			class="border py-2 border-gray-200 rounded-lg duration-100 bg-[#170f1a]"
+			id="fetch-translations-button"
 			on:click={() => {
 				fetchTranslationsFromOtherProjects();
 			}}>Fetch translations from other projects</button