RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: better many files conversion panel handling 

sorry lol
This commit is contained in:
Maya 2026-03-12 17:08:01 +03:00
parent f19f2095b6
commit 0d15de66c0
No known key found for this signature in database
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/lib/components/functional/ConversionPanel.svelte
View File

@ -11,6 +11,8 @@
const length = $derived(files.files.length); const length = $derived(files.files.length);
const progress = $derived(files.files.filter((f) => f.result).length); const progress = $derived(files.files.filter((f) => f.result).length);
const manyFiles = $derived(files.files.length > 50);
const compactActions = $derived(manyFiles && !$isMobile);
</script> </script>
<Panel class="flex flex-col gap-4"> <Panel class="flex flex-col gap-4">
@ -24,21 +26,29 @@
onclick={() => files.convertAll()} onclick={() => files.convertAll()}
class="btn {$effects class="btn {$effects
? '' ? ''
: '!scale-100'} highlight flex gap-3 max-md:w-full md:max-w-[15.5rem]" : '!scale-100'} highlight flex gap-3 max-md:w-full {compactActions
? 'p-4'
: 'md:max-w-[15.5rem]'}"
disabled={!files.allReady} disabled={!files.allReady}
> >
<RefreshCw size="24" /> <RefreshCw size="24" />
<p>{m["convert.panel.convert_all"]()}</p> {#if !compactActions}
<p>{m["convert.panel.convert_all"]()}</p>
{/if}
</button> </button>
<button <button
class="btn {$effects class="btn {$effects
? '' ? ''
: '!scale-100'} flex gap-3 max-md:w-full md:max-w-[15.5rem]" : '!scale-100'} flex gap-3 max-md:w-full {compactActions
? 'p-4'
: 'md:max-w-[15.5rem]'}"
disabled={!files.allReady || !files.results} disabled={!files.allReady || !files.results}
onclick={() => files.downloadAll()} onclick={() => files.downloadAll()}
> >
<FolderArchiveIcon size="24" /> <FolderArchiveIcon size="24" />
<p>{m["convert.panel.download_all"]()}</p> {#if !compactActions}
<p>{m["convert.panel.download_all"]()}</p>
{/if}
</button> </button>
{#if $isMobile} {#if $isMobile}
<button <button
@ -69,11 +79,26 @@
{/if} {/if}
</div> </div>
<div class="w-full bg-separator h-0.5 flex md:hidden"></div> <div class="w-full bg-separator h-0.5 flex md:hidden"></div>
<div class="flex items-center gap-2"> {#if manyFiles}
<p class="whitespace-normal text-xl text-right w-full"> <div class="w-full max-w-64 p-2 flex gap-4 items-center">
<div
class="flex-shrink-0 -mt-0.5 font-normal text-sm text-muted"
>
{progress}/{length}
</div>
<div class="flex-grow">
<ProgressBar min={0} max={length} {progress} />
</div>
</div>
<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
{/if}
<div class="flex items-center gap-2 w-fit">
<p
class="whitespace-normal text-xl text-center w-fit px-2 md:px-0 md:text-right"
>
{m["convert.panel.set_all_to"]()} {m["convert.panel.set_all_to"]()}
</p> </p>
<div class="w-48 md:max-w-[6.5rem]"> <div class="w-[122px]">
<!-- check if all files have the same converters --> <!-- check if all files have the same converters -->
<!-- video and audio together still have this dropdown disabled because audio has just ffmpeg (video has vertd & ffmpeg), even tho it can convert between video and audio --> <!-- video and audio together still have this dropdown disabled because audio has just ffmpeg (video has vertd & ffmpeg), even tho it can convert between video and audio -->
{#if files.files.length > 0 && files.files.every((f) => f.converters.length) && files.files.every((f) => JSON.stringify(f.converters) === JSON.stringify(files.files[0].converters))} {#if files.files.length > 0 && files.files.every((f) => f.converters.length) && files.files.every((f) => JSON.stringify(f.converters) === JSON.stringify(files.files[0].converters))}
@ -91,17 +116,5 @@
{/if} {/if}
</div> </div>
</div> </div>
{#if files.files.length > 50}
<div class="w-full px-2 flex gap-4 items-center">
<div
class="flex-shrink-0 -mt-0.5 font-normal text-sm text-muted"
>
{progress}/{length}
</div>
<div class="flex-grow">
<ProgressBar min={0} max={length} {progress} />
</div>
</div>
{/if}
</div></Panel </div></Panel
> >