mirror of https://github.com/VERT-sh/VERT.git
feat: further optimisation for massive conversions
This commit is contained in:
not-nullptr
parent
fb42680b40
commit
e5df89ac57
|
|
@ -4,43 +4,41 @@
|
|||
import Panel from "../visual/Panel.svelte";
|
||||
import Dropdown from "./Dropdown.svelte";
|
||||
import Tooltip from "../visual/Tooltip.svelte";
|
||||
import ProgressBar from "../visual/ProgressBar.svelte";
|
||||
import { fade } from "$lib/animation";
|
||||
|
||||
const length = $derived(files.files.length);
|
||||
const progress = $derived(files.files.filter((f) => f.result).length);
|
||||
</script>
|
||||
|
||||
<Panel
|
||||
class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4"
|
||||
>
|
||||
<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
|
||||
<button
|
||||
onclick={() => files.convertAll()}
|
||||
class="btn {$effects
|
||||
? ''
|
||||
: '!scale-100'} highlight flex gap-3 max-md:w-full"
|
||||
disabled={!files.ready}
|
||||
<Panel class="flex flex-col gap-4">
|
||||
<div
|
||||
class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4"
|
||||
>
|
||||
<div
|
||||
class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full"
|
||||
>
|
||||
<RefreshCw size="24" />
|
||||
<p>Convert all</p>
|
||||
</button>
|
||||
<button
|
||||
class="btn {$effects ? '' : '!scale-100'} flex gap-3 max-md:w-full"
|
||||
disabled={!files.ready || !files.results}
|
||||
onclick={() => files.downloadAll()}
|
||||
>
|
||||
<FolderArchiveIcon size="24" />
|
||||
<p>Download all as .zip</p>
|
||||
</button>
|
||||
{#if $isMobile}
|
||||
<button
|
||||
class="btn p-4 {$effects
|
||||
onclick={() => files.convertAll()}
|
||||
class="btn {$effects
|
||||
? ''
|
||||
: '!scale-100'} highlight flex gap-3 max-md:w-full"
|
||||
disabled={!files.ready}
|
||||
>
|
||||
<RefreshCw size="24" />
|
||||
<p>Convert all</p>
|
||||
</button>
|
||||
<button
|
||||
class="btn {$effects
|
||||
? ''
|
||||
: '!scale-100'} flex gap-3 max-md:w-full"
|
||||
disabled={files.files.length === 0}
|
||||
onclick={() => (files.files = [])}
|
||||
disabled={!files.ready || !files.results}
|
||||
onclick={() => files.downloadAll()}
|
||||
>
|
||||
<Trash2Icon size="24" />
|
||||
<p>Remove all files</p>
|
||||
<FolderArchiveIcon size="24" />
|
||||
<p>Download all as .zip</p>
|
||||
</button>
|
||||
{:else}
|
||||
<Tooltip text="Remove all files" position="right">
|
||||
{#if $isMobile}
|
||||
<button
|
||||
class="btn p-4 {$effects
|
||||
? ''
|
||||
|
|
@ -49,28 +47,53 @@
|
|||
onclick={() => (files.files = [])}
|
||||
>
|
||||
<Trash2Icon size="24" />
|
||||
<p>Remove all files</p>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="whitespace-nowrap text-xl">Set all to</p>
|
||||
{#if files.requiredConverters.length === 1}
|
||||
<!-- cannot convert to svg or heif -->
|
||||
{@const supported = files.files[0]?.converters
|
||||
.flatMap((c) => c.supportedFormats)
|
||||
?.filter((format) => format !== ".svg" && format !== ".heif")}
|
||||
<Dropdown
|
||||
onselect={(r) =>
|
||||
files.files.forEach((f) => {
|
||||
f.to = r;
|
||||
f.result = null;
|
||||
})}
|
||||
options={supported || []}
|
||||
/>
|
||||
{:else}
|
||||
<Dropdown options={["N/A"]} disabled />
|
||||
{/if}
|
||||
{:else}
|
||||
<Tooltip text="Remove all files" position="right">
|
||||
<button
|
||||
class="btn p-4 {$effects
|
||||
? ''
|
||||
: '!scale-100'} flex gap-3 max-md:w-full"
|
||||
disabled={files.files.length === 0}
|
||||
onclick={() => (files.files = [])}
|
||||
>
|
||||
<Trash2Icon size="24" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="whitespace-nowrap text-xl">Set all to</p>
|
||||
{#if files.requiredConverters.length === 1}
|
||||
<!-- cannot convert to svg or heif -->
|
||||
{@const supported = files.files[0]?.converters
|
||||
.flatMap((c) => c.supportedFormats)
|
||||
?.filter(
|
||||
(format) => format !== ".svg" && format !== ".heif",
|
||||
)}
|
||||
<Dropdown
|
||||
onselect={(r) =>
|
||||
files.files.forEach((f) => {
|
||||
f.to = r;
|
||||
f.result = null;
|
||||
})}
|
||||
options={supported || []}
|
||||
/>
|
||||
{:else}
|
||||
<Dropdown options={["N/A"]} disabled />
|
||||
{/if}
|
||||
</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}
|
||||
</Panel>
|
||||
|
|
|
|||
|
|
@ -23,43 +23,49 @@ class Files {
|
|||
this.files.length === 0 ? false : this.files.every((f) => f.result),
|
||||
);
|
||||
|
||||
private _addThumbnail = async (file: VertFile) => {
|
||||
const isAudio = converters
|
||||
.find((c) => c.name === "ffmpeg")
|
||||
?.supportedFormats?.includes(file.from.toLowerCase());
|
||||
const isVideo = converters
|
||||
.find((c) => c.name === "vertd")
|
||||
?.supportedFormats?.includes(file.from.toLowerCase());
|
||||
private thumbnailQueue = new PQueue({
|
||||
concurrency: navigator.hardwareConcurrency || 4,
|
||||
});
|
||||
|
||||
try {
|
||||
if (isAudio) {
|
||||
// try to get the thumbnail from the audio via music-metadata
|
||||
const { common } = await parseBlob(file.file, {
|
||||
skipPostHeaders: true,
|
||||
});
|
||||
const cover = selectCover(common.picture);
|
||||
if (cover) {
|
||||
const blob = new Blob([cover.data], {
|
||||
type: cover.format,
|
||||
private _addThumbnail = async (file: VertFile) => {
|
||||
this.thumbnailQueue.add(async () => {
|
||||
const isAudio = converters
|
||||
.find((c) => c.name === "ffmpeg")
|
||||
?.supportedFormats?.includes(file.from.toLowerCase());
|
||||
const isVideo = converters
|
||||
.find((c) => c.name === "vertd")
|
||||
?.supportedFormats?.includes(file.from.toLowerCase());
|
||||
|
||||
try {
|
||||
if (isAudio) {
|
||||
// try to get the thumbnail from the audio via music-metadata
|
||||
const { common } = await parseBlob(file.file, {
|
||||
skipPostHeaders: true,
|
||||
});
|
||||
file.blobUrl = URL.createObjectURL(blob);
|
||||
const cover = selectCover(common.picture);
|
||||
if (cover) {
|
||||
const blob = new Blob([cover.data], {
|
||||
type: cover.format,
|
||||
});
|
||||
file.blobUrl = URL.createObjectURL(blob);
|
||||
}
|
||||
} else if (isVideo) {
|
||||
// video
|
||||
file.blobUrl = await this._generateThumbnailFromMedia(
|
||||
file.file,
|
||||
true,
|
||||
);
|
||||
} else {
|
||||
// image
|
||||
file.blobUrl = await this._generateThumbnailFromMedia(
|
||||
file.file,
|
||||
false,
|
||||
);
|
||||
}
|
||||
} else if (isVideo) {
|
||||
// video
|
||||
file.blobUrl = await this._generateThumbnailFromMedia(
|
||||
file.file,
|
||||
true,
|
||||
);
|
||||
} else {
|
||||
// image
|
||||
file.blobUrl = await this._generateThumbnailFromMedia(
|
||||
file.file,
|
||||
false,
|
||||
);
|
||||
} catch (e) {
|
||||
error(["files"], e);
|
||||
}
|
||||
} catch (e) {
|
||||
error(["files"], e);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
private async _generateThumbnailFromMedia(
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ export class VertFile {
|
|||
const converter = this.converters.filter((converter) =>
|
||||
converter.supportedFormats.map((f) => supportedFormats.includes(f)),
|
||||
);
|
||||
console.log(this.converters, supportedFormats);
|
||||
return converter;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue