feat: add external server warning

src/lib/animation/index.ts

@@ -12,11 +12,11 @@ import {
 let effectsEnabled = true;
 let isMobileDevice = false;
 
-effects.subscribe(value => {
+effects.subscribe((value) => {
 	effectsEnabled = value;
 });
 
-isMobile.subscribe(value => {
+isMobile.subscribe((value) => {
 	isMobileDevice = value;
 });
 

src/lib/store/index.svelte.ts

@@ -4,6 +4,7 @@ import { VertFile } from "$lib/types";
 import jsmediatags from "jsmediatags";
 import type { TagType } from "jsmediatags/types";
 import { writable } from "svelte/store";
+import { addDialog } from "./DialogProvider";
 
 class Files {
 	public files = $state<VertFile[]>([]);
@@ -105,6 +106,7 @@ class Files {
 		return url;
 	}
 
+	private _warningShown = false;
 	private _add(file: VertFile | File) {
 		if (file instanceof VertFile) {
 			this.files.push(file);
@@ -133,6 +135,42 @@ class Files {
 			const vf = new VertFile(file, to, converter);
 			this.files.push(vf);
 			this._addThumbnail(vf);
+
+			const isVideo = converter.name === "vertd";
+			const acceptedExternalWarning =
+				localStorage.getItem("acceptedExternalWarning") === "true";
+			if (isVideo && !acceptedExternalWarning && !this._warningShown) {
+				this._warningShown = true;
+				const message =
+					"Some of your files will be uploaded to an external server to be converted. Do you want to continue?";
+				const buttons = [
+					{
+						text: "No",
+						action: () => {
+							this.files = this.files.filter(
+								(f) => f.converter?.name !== "vertd",
+							);
+							this._warningShown = false;
+						},
+					},
+					{
+						text: "Yes",
+						action: () => {
+							localStorage.setItem(
+								"acceptedExternalWarning",
+								"true",
+							);
+							this._warningShown = false;
+						},
+					},
+				];
+				addDialog(
+					"External server warning",
+					message,
+					buttons,
+					"warning",
+				);
+			}
 		}
 	}
 
@@ -218,8 +256,8 @@ export function setTheme(themeTo: "light" | "dark") {
 
 	// Lock dark reader if it's set to dark mode
 	if (themeTo === "dark") {
-		const lock = document.createElement('meta');
-		lock.name = 'darkreader-lock';
+		const lock = document.createElement("meta");
+		lock.name = "darkreader-lock";
 		document.head.appendChild(lock);
 	} else {
 		const lock = document.querySelector('meta[name="darkreader-lock"]');

src/routes/settings/+page.svelte

@@ -2,7 +2,6 @@
 	import { browser } from "$app/environment";
 	import { log } from "$lib/logger";
 	import * as Settings from "$lib/sections/settings/index.svelte";
-	import { addDialog, removeDialog } from "$lib/store/DialogProvider";
 	import { addToast } from "$lib/store/ToastProvider";
 	import { SettingsIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
@@ -62,38 +61,6 @@
 
 		<div class="flex flex-col gap-4 flex-1">
 			<Settings.Appearance />
-			<button class="hidden md:block btn btn-primary" onclick={() => {
-				const id = addDialog(
-					"Test dialog",
-					"This is a test dialog",
-					[
-						{
-							text: "Close",
-							action: () => {
-								addToast("info", "Dialog closed");
-							},
-						},
-					],
-					"info"
-				);
-
-				const id2 = addDialog(
-					"Test 2 dialog",
-					"This is a test dialog 2",
-					[
-						{
-							text: "meow",
-							action: () => {
-								addToast("info", "Dialog 2 closed");
-							},
-						},
-					],
-					"success"
-				);
-		
-				console.log(`Dialog ID: ${id}`);
-				console.log(`Dialog ID2: ${id2}`);
-			}}>Test dialogs</button>
 		</div>
 	</div>
 </div>