mirror of https://github.com/VERT-sh/VERT.git
feat: start settings modal component
This commit is contained in:
Maya
parent
23e2601576
commit
30bbb764ae
|
|
@ -81,6 +81,10 @@
|
|||
"no_formats": "No formats available",
|
||||
"no_results": "No formats match your search"
|
||||
},
|
||||
"settings": {
|
||||
"settings": "Settings",
|
||||
"title": "File conversion settings"
|
||||
},
|
||||
"tooltips": {
|
||||
"unknown_file": "Unknown file type",
|
||||
"audio_file": "Audio file",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
import { onMount } from "svelte";
|
||||
import { quintOut } from "svelte/easing";
|
||||
import { VertFile } from "$lib/types";
|
||||
import Modal from "./Modal.svelte";
|
||||
import Dropdown from "./Dropdown.svelte";
|
||||
|
||||
type Props = {
|
||||
categories: Categories;
|
||||
|
|
@ -331,6 +333,13 @@
|
|||
newFiles.forEach((f) => files.add(f));
|
||||
};
|
||||
|
||||
let showSettingsModal = $state(false);
|
||||
const settings = () => {
|
||||
if (!file) return;
|
||||
// TODO: temporary - will have individual settings modals for each converter and show those instead
|
||||
showSettingsModal = true;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (dropdown && !dropdown.contains(e.target as Node)) {
|
||||
|
|
@ -355,6 +364,68 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
{#if showSettingsModal}
|
||||
<Modal
|
||||
icon={SearchIcon}
|
||||
title="Conversion Settings"
|
||||
color="purple"
|
||||
buttons={[
|
||||
{
|
||||
text: "Cancel",
|
||||
action: () => (showSettingsModal = false),
|
||||
},
|
||||
{
|
||||
text: "Apply",
|
||||
action: () => (showSettingsModal = false),
|
||||
primary: true,
|
||||
},
|
||||
]}
|
||||
onclose={() => (showSettingsModal = false)}
|
||||
>
|
||||
<div class="flex flex-col gap-8">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-base font-bold">Format Settings</p>
|
||||
<p class="text-sm text-muted font-normal">
|
||||
Configure conversion options for {file?.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-sm font-bold">Example dropdown</p>
|
||||
<Dropdown
|
||||
options={categories[currentCategory!]?.formats || []}
|
||||
settingsStyle
|
||||
{selected}
|
||||
onselect={(e) => {
|
||||
console.log("selected format", e);
|
||||
selected = e;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-sm font-bold">Resolution</p>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="1920x1080 or smth"
|
||||
class="rounded-lg bg-button text-foreground p-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-sm font-bold">Frame Rate (FPS)</p>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="30"
|
||||
class="rounded-lg bg-button text-foreground p-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="relative w-full min-w-fit text-xl font-medium text-center"
|
||||
bind:this={dropdown}
|
||||
|
|
@ -506,6 +577,16 @@
|
|||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if file}
|
||||
<div class="border-t border-separator text-base p-2">
|
||||
<button
|
||||
class="w-full p-2 text-center rounded-lg bg-accent text-black"
|
||||
onclick={() => settings()}
|
||||
>
|
||||
{m["convert.settings.settings"]()}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
<script lang="ts">
|
||||
import { duration, fade } from "$lib/util/animation";
|
||||
import { quintOut } from "svelte/easing";
|
||||
import type { Icon as IconType } from "lucide-svelte";
|
||||
|
||||
interface ModalButton {
|
||||
text: string;
|
||||
action: () => void;
|
||||
primary?: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
icon: typeof IconType;
|
||||
title: string;
|
||||
color: string;
|
||||
buttons: ModalButton[];
|
||||
children: () => any;
|
||||
onclose?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
icon: Icon,
|
||||
title,
|
||||
color,
|
||||
buttons,
|
||||
children,
|
||||
onclose,
|
||||
}: Props = $props();
|
||||
|
||||
let backdropElement = $state<HTMLDivElement>();
|
||||
|
||||
const handleOutsideClick = () => {
|
||||
onclose?.();
|
||||
};
|
||||
|
||||
const handleKeydown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onclose?.();
|
||||
};
|
||||
|
||||
$effect(() => {
|
||||
if (backdropElement) {
|
||||
document.body.appendChild(backdropElement);
|
||||
return () => {
|
||||
if (backdropElement?.parentNode === document.body) {
|
||||
document.body.removeChild(backdropElement);
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={backdropElement}
|
||||
class="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm z-[400]"
|
||||
onclick={handleOutsideClick}
|
||||
onkeydown={handleKeydown}
|
||||
role="dialog"
|
||||
tabindex="0"
|
||||
aria-modal="true"
|
||||
in:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
out:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={() => {}}
|
||||
tabindex="0"
|
||||
role="dialog"
|
||||
class="flex flex-col items-center justify-between w-full max-w-lg p-5 gap-6 bg-panel rounded-lg shadow-md"
|
||||
in:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
out:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
<div class="flex justify-between w-full items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="rounded-full bg-accent-{color} p-2 inline-block w-8 h-8"
|
||||
>
|
||||
<Icon size="16" color="black" />
|
||||
</div>
|
||||
<p class="text-lg font-semibold">{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 w-full text-sm font-normal text-muted">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center gap-4 w-full">
|
||||
{#each buttons as { text, action, primary }, i}
|
||||
<button
|
||||
class="hover:scale-105 active:scale-100 duration-200 flex items-center gap-2 p-2 rounded-md {primary ||
|
||||
i === 1
|
||||
? `text-black bg-accent-${color}`
|
||||
: 'bg-button text-black dynadark:text-white'} px-6"
|
||||
onclick={() => action()}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
{#if dialogList.length > 0}
|
||||
<div
|
||||
class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm z-40"
|
||||
class="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm z-40"
|
||||
in:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
|
|
|
|||
|
|
@ -97,6 +97,14 @@ export class VertFile {
|
|||
this.blobUrl = blobUrl;
|
||||
}
|
||||
|
||||
public settings() {
|
||||
// settings modal
|
||||
// images - quality/compression/quantize/interlace/depth-DPI, resize, crop, rotate, flip/flop, autoOrient?, color space/bit depth, transparency settings
|
||||
// audio - bitrate, sample rate, channels, normalize, trim silence
|
||||
// video - bitrate, fps, resolution, trim, crop, rotate, flip/flop, audio settings?
|
||||
// common - metadata?
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
public async convert(...args: any[]) {
|
||||
if (!this.converters.length) throw new Error("No converters found");
|
||||
|
|
|
|||
|
|
@ -179,7 +179,8 @@
|
|||
<ProgressBar
|
||||
min={0}
|
||||
max={100}
|
||||
progress={currentConverter?.reportsProgress || file.isZip()
|
||||
progress={currentConverter?.reportsProgress ||
|
||||
file.isZip()
|
||||
? file.progress
|
||||
: null}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue