mirror of https://github.com/VERT-sh/VERT.git
feat: ui of image sequence/fps in format dropdown
This commit is contained in:
Maya
parent
cf77cf6fd6
commit
343d5f2d65
|
|
@ -59,6 +59,10 @@
|
|||
"image": "image",
|
||||
"extract_error": "Error extracting {filename}: {error}"
|
||||
},
|
||||
"image_sequence": {
|
||||
"image_sequence": "Image Sequence",
|
||||
"fps": "FPS"
|
||||
},
|
||||
"large_file_warning": "Due to browser / device limitations, video to audio conversion is disabled for this file as it is larger than {limit}GB. We recommend using Firefox or Safari for files of this size since they have less limitations.",
|
||||
"external_warning": {
|
||||
"title": "External server warning",
|
||||
|
|
|
|||
|
|
@ -1,24 +1,29 @@
|
|||
<script lang="ts">
|
||||
import type { HTMLInputAttributes } from "svelte/elements";
|
||||
|
||||
interface Props extends Omit<
|
||||
HTMLInputAttributes,
|
||||
keyof HTMLInputAttributes
|
||||
> {
|
||||
interface Props {
|
||||
class?: string;
|
||||
value?: string | number;
|
||||
checked?: boolean;
|
||||
type?: string;
|
||||
disabled?: boolean | null;
|
||||
extension?: string;
|
||||
prefix?: string;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
[key: string]: any;
|
||||
inputClass?: string;
|
||||
thin?: boolean;
|
||||
multiline?: boolean;
|
||||
[name: string]: unknown;
|
||||
}
|
||||
|
||||
let {
|
||||
class: className,
|
||||
inputClass,
|
||||
bgColor = "bg-panel",
|
||||
value = $bindable(),
|
||||
checked = $bindable(),
|
||||
type = "text",
|
||||
disabled = false,
|
||||
extension,
|
||||
prefix,
|
||||
thin = false,
|
||||
multiline = false,
|
||||
...rest
|
||||
}: Props = $props();
|
||||
|
|
@ -26,54 +31,54 @@
|
|||
|
||||
<div class="relative flex w-full {className}">
|
||||
{#if type === "checkbox"}
|
||||
<div class="relative w-full h-full">
|
||||
<input
|
||||
{...rest}
|
||||
type="checkbox"
|
||||
bind:checked
|
||||
{disabled}
|
||||
class="w-full p-3 rounded-lg bg-panel border-2 border-button
|
||||
<input
|
||||
{...rest}
|
||||
type="checkbox"
|
||||
bind:checked
|
||||
{disabled}
|
||||
class="w-full p-3 rounded-lg border-2 border-button
|
||||
{bgColor}
|
||||
{prefix ? 'pl-[2rem]' : 'pl-3'}
|
||||
{extension ? 'pr-[4rem]' : 'pr-3'}
|
||||
{disabled && 'opacity-50 cursor-not-allowed'} appearance-none"
|
||||
/>
|
||||
{#if checked}
|
||||
<div
|
||||
class="absolute w-7 h-7 inset-0 flex items-center justify-center pointer-events-none"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="var(--bg-panel)"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{disabled && 'opacity-50 cursor-not-allowed'} appearance-none
|
||||
{inputClass}"
|
||||
/>
|
||||
{#if checked}
|
||||
<div
|
||||
class="absolute w-7 h-7 inset-0 flex items-center justify-center pointer-events-none"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="var(--bg-panel)" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if multiline}
|
||||
<textarea
|
||||
{...rest}
|
||||
bind:value
|
||||
{disabled}
|
||||
class="w-full p-3 rounded-lg bg-panel border-2 border-button
|
||||
{prefix ? 'pl-[2rem]' : 'pl-3'}
|
||||
{extension ? 'pr-[4rem]' : 'pr-3'}
|
||||
{disabled && 'opacity-50 cursor-not-allowed'}"
|
||||
class="w-full rounded-lg bg-panel border-2 border-button
|
||||
{thin ? 'py-1.5' : 'p-3'}
|
||||
{prefix ? 'pl-[2rem]' : thin ? 'pl-2.5' : 'pl-3'}
|
||||
{extension ? (thin ? 'pr-[3.5rem]' : 'pr-[4rem]') : thin ? 'pr-2.5' : 'pr-3'}
|
||||
{disabled && 'opacity-50 cursor-not-allowed'}
|
||||
{inputClass}"
|
||||
></textarea>
|
||||
{:else}
|
||||
<input
|
||||
{...rest}
|
||||
bind:value
|
||||
{disabled}
|
||||
class="w-full p-3 rounded-lg bg-panel border-2 border-button
|
||||
{prefix ? 'pl-[2rem]' : 'pl-3'}
|
||||
{extension ? 'pr-[4rem]' : 'pr-3'}
|
||||
{disabled && 'opacity-50 cursor-not-allowed'}"
|
||||
class="w-full rounded-lg bg-panel border-2 border-button
|
||||
{thin ? 'py-1.5' : 'p-3'}
|
||||
{prefix ? 'pl-[2rem]' : thin ? 'pl-2.5' : 'pl-3'}
|
||||
{extension ? (thin ? 'pr-[3rem]' : 'pr-[4rem]') : thin ? 'pr-2.5' : 'pr-3'}
|
||||
{disabled && 'opacity-50 cursor-not-allowed'}
|
||||
{inputClass}"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
|
@ -84,10 +89,15 @@
|
|||
</div>
|
||||
{/if}
|
||||
{#if extension}
|
||||
<div class="absolute right-0 top-0 bottom-0 flex items-center px-4">
|
||||
<div
|
||||
class="absolute right-0 top-0 bottom-0 flex items-center {thin
|
||||
? 'px-2'
|
||||
: 'px-4'}"
|
||||
>
|
||||
<span
|
||||
class="text-sm bg-button text-black dynadark:text-white px-2 py-1 rounded"
|
||||
>{extension}</span
|
||||
class="bg-button text-black dynadark:text-white rounded {thin
|
||||
? 'text-xs px-2 py-0.5'
|
||||
: 'text-sm px-2 py-1'}">{extension}</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
import { VertFile } from "$lib/types";
|
||||
import SettingsModal from "./popups/SettingsModal.svelte";
|
||||
import { log } from "$lib/util/logger";
|
||||
import FancyInput from "./FancyInput.svelte";
|
||||
|
||||
type Props = {
|
||||
categories: Categories;
|
||||
|
|
@ -488,13 +489,34 @@
|
|||
<!-- format options -->
|
||||
<!-- TODO: image sequence & fps -->
|
||||
{#if file?.name.toLowerCase().endsWith(".zip")}
|
||||
<div class="border-t border-separator text-base p-2">
|
||||
<div
|
||||
class="flex flex-col gap-2 p-2 border-t border-separator text-base"
|
||||
>
|
||||
<button
|
||||
class="w-full p-2 text-center rounded-lg bg-accent text-black"
|
||||
onclick={() => extract()}
|
||||
>
|
||||
{m["convert.archive_file.extract"]()}
|
||||
</button>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex items-center gap-2 flex-1 min-w-0 h-full"
|
||||
>
|
||||
<FancyInput type="checkbox" class="!w-fit" />
|
||||
<label for="extract-sequence" class="text-sm">
|
||||
{m["convert.image_sequence.image_sequence"]()}
|
||||
</label>
|
||||
</div>
|
||||
<div class="w-[80px] shrink-0">
|
||||
<FancyInput
|
||||
thin
|
||||
inputClass="!h-9 !text-xs"
|
||||
type="number"
|
||||
extension="FPS"
|
||||
placeholder="15"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="border-t border-separator text-base p-2">
|
||||
|
|
|
|||
|
|
@ -398,7 +398,7 @@ body {
|
|||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
@apply appearance-none w-5 h-5 rounded-md bg-button border-2 border-button cursor-pointer transition-colors duration-200;
|
||||
@apply appearance-none w-5 h-5 rounded-md border-2 border-button cursor-pointer transition-colors duration-200;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover {
|
||||
|
|
|
|||
Loading…
Reference in New Issue