Elijah/convertor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into fix/#157/resize-when-converting-to-ico

Browse source
This commit is contained in:
Emrik Östling 2024-10-05 01:02:48 +02:00 • committed by GitHub
commit 64e4a271e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 205 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/header.tsx
View file

@ -5,17 +5,23 @@ export const Header = ({
let rightNav: JSX.Element;
if (loggedIn) {
rightNav = (
<ul class="flex gap-4 ">
<ul class="flex gap-4">
<li>
<a
class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
class={`
text-accent-600 transition-all
hover:text-accent-500 hover:underline
`}
href="/history">
History
</a>
</li>
<li>
<a
class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
class={`
text-accent-600 transition-all
hover:text-accent-500 hover:underline
`}
href="/logoff">
Logout
</a>
@ -27,7 +33,10 @@ export const Header = ({
<ul class="flex gap-4">
<li>
<a
class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
class={`
text-accent-600 transition-all
hover:text-accent-500 hover:underline
`}
href="/login">
Login
</a>
@ -35,7 +44,10 @@ export const Header = ({
{accountRegistration ? (
<li>
<a
class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
class={`
text-accent-600 transition-all
hover:text-accent-500 hover:underline
`}
href="/register">
Register
</a>

4
src/converters/assimp.ts
View file

@ -116,8 +116,8 @@ export async function convert(
fileType: string,
convertTo: string,
targetPath: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
options?: any,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
options?: unknown,
): Promise<string> {
// let command = "ffmpeg";

2
src/converters/ffmpeg.ts
View file

@ -690,7 +690,7 @@ export async function convert(
convertTo: string,
targetPath: string,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_options?: unknown,
options?: unknown,
): Promise<string> {
let extra = "";

4
src/converters/graphicsmagick.ts
View file

@ -313,8 +313,8 @@ export function convert(
fileType: string,
convertTo: string,
targetPath: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
options?: any,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
options?: unknown,
): Promise<string> {
return new Promise((resolve, reject) => {
exec(

4
src/converters/libjxl.ts
View file

@ -39,8 +39,8 @@ export function convert(
fileType: string,
convertTo: string,
targetPath: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
options?: any,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
options?: unknown,
): Promise<string> {
let tool = "";
if (fileType === "jxl") {

84
src/converters/main.ts
View file

@ -1,67 +1,64 @@
import {
convert as convertImage,
properties as propertiesImage
} from "./vips";
import { normalizeFiletype } from "../helpers/normalizeFiletype";
import {
convert as convertPandoc,
properties as propertiesPandoc,
} from "./pandoc";
convert as convertassimp,
properties as propertiesassimp,
} from "./assimp";
import {
convert as convertFFmpeg,
properties as propertiesFFmpeg,
} from "./ffmpeg";
import {
convert as convertGraphicsmagick,
properties as propertiesGraphicsmagick,
} from "./graphicsmagick";
import {
convert as convertLibjxl,
properties as propertiesLibjxl,
} from "./libjxl";
import {
convert as convertPandoc,
properties as propertiesPandoc,
} from "./pandoc";
import {
convert as convertresvg,
properties as propertiesresvg,
} from "./resvg";
import { convert as convertImage, properties as propertiesImage } from "./vips";
import {
convert as convertxelatex,
properties as propertiesxelatex,
} from "./xelatex";
import {
convert as convertLibjxl,
properties as propertiesLibjxl,
} from "./libjxl";
import {
convert as convertresvg,
properties as propertiesresvg,
} from "./resvg";
import {
convert as convertassimp,
properties as propertiesassimp,
} from "./assimp";
import { normalizeFiletype } from "../helpers/normalizeFiletype";
// This should probably be reconstructed so that the functions are not imported instead the functions hook into this to make the converters more modular
const properties: Record<string, {
const properties: Record<
string,
{
properties: {
from: Record<string, string[]>;
to: Record<string, string[]>;
options?: Record<string, Record<string, {
options?: Record<
string,
Record<
string,
{
description: string;
type: string;
default: number;
}>>;
}
>
>;
};
converter: (
filePath: string,
fileType: string,
convertTo: string,
targetPath: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
options?: any,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
) => any;
}> = {
options?: unknown,
) => unknown;
}
> = {
libjxl: {
properties: propertiesLibjxl,
converter: convertLibjxl,
@ -99,24 +96,20 @@ const properties: Record<string, {
export async function mainConverter(
inputFilePath: string,
fileTypeOriginal: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
convertTo: any,
convertTo: string,
targetPath: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
options?: any,
options?: unknown,
converterName?: string,
) {
const fileType = normalizeFiletype(fileTypeOriginal);
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
let converterFunc: any;
let converterFunc: ((filePath: string, fileType: string, convertTo: string, targetPath: string, options?: unknown) => unknown) | undefined;
// let converterName = converterName;
if (converterName) {
converterFunc = properties[converterName]?.converter;
} else {
// Iterate over each converter in properties
// biome-ignore lint/style/noParameterAssign: <explanation>
for (converterName in properties) {
const converterObj = properties[converterName];
@ -190,9 +183,7 @@ for (const converterName in properties) {
}
}
export const getPossibleTargets = (
from: string,
): Record<string, string[]> => {
export const getPossibleTargets = (from: string): Record<string, string[]> => {
const fromClean = normalizeFiletype(from);
return possibleTargets[fromClean] || {};
@ -216,6 +207,7 @@ for (const converterName in properties) {
}
possibleInputs.sort();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const getPossibleInputs = () => {
return possibleInputs;
};

4
src/converters/pandoc.ts
View file

@ -124,8 +124,8 @@ export function convert(
fileType: string,
convertTo: string,
targetPath: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
options?: any,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
options?: unknown,
): Promise<string> {
// set xelatex here
const xelatex = ["pdf", "latex"];

4
src/converters/resvg.ts
View file

@ -14,8 +14,8 @@ export function convert(
fileType: string,
convertTo: string,
targetPath: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
options?: any,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
options?: unknown,
): Promise<string> {
return new Promise((resolve, reject) => {
exec(`resvg "${filePath}" "${targetPath}"`, (error, stdout, stderr) => {

4
src/converters/vips.ts
View file

@ -94,8 +94,8 @@ export function convert(
fileType: string,
convertTo: string,
targetPath: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
options?: any,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
options?: unknown,
): Promise<string> {
// if (fileType === "svg") {
// const scale = options.scale || 1;

4
src/converters/xelatex.ts
View file

@ -14,8 +14,8 @@ export function convert(
fileType: string,
convertTo: string,
targetPath: string,
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
options?: any,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
options?: unknown,
): Promise<string> {
return new Promise((resolve, reject) => {
// const fileName: string = (targetPath.split("/").pop() as string).replace(".pdf", "")

120
src/index.tsx
View file

@ -141,7 +141,9 @@ const app = new Elysia({
<main class="mx-auto w-full max-w-4xl px-4">
<h1 class="my-8 text-3xl">Welcome to ConvertX!</h1>
<article class="article p-0">
<header class="w-full bg-neutral-800 p-4">Create your account</header>
<header class="w-full bg-neutral-800 p-4">
Create your account
</header>
<form method="post" action="/register" class="p-4">
<fieldset class="mb-4 flex flex-col gap-4">
<label class="flex flex-col gap-1">
@ -172,7 +174,10 @@ const app = new Elysia({
<footer class="p-4">
Report any issues on{" "}
<a
class="text-accent-500 underline hover:text-accent-400"
class={`
text-accent-500 underline
hover:text-accent-400
`}
href="https://github.com/C4illin/ConvertX"
>
GitHub
@ -528,12 +533,21 @@ const app = new Elysia({
<div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
<table
id="file-list"
class="w-full table-auto rounded bg-neutral-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"
class={`
w-full table-auto rounded bg-neutral-900
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}
/>
</div>
<div
id="dropzone"
class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-neutral-700 transition-all hover:border-neutral-600 [&.dragover]:border-4 [&.dragover]:border-neutral-500"
class={`
relative flex h-48 w-full items-center justify-center rounded border border-dashed
border-neutral-700 transition-all
[&.dragover]:border-4 [&.dragover]:border-neutral-500
hover:border-neutral-600
`}
>
<span>
<b>Choose a file</b> or drag it here
@ -561,11 +575,17 @@ const app = new Elysia({
class="w-full rounded bg-neutral-800 p-4"
/>
<div class="select_container relative">
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
<article class={`
convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col
overflow-y-auto overflow-x-hidden rounded bg-neutral-800
sm:h-[30vh]
`}>
{Object.entries(getAllTargets()).map(
([converter, targets]) => (
<article
class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
class={`
convert_to_group flex w-full flex-col border-b border-neutral-700 p-4
`}
data-converter={converter}
>
<header class="mb-2 w-full text-xl font-bold" safe>
@ -576,7 +596,10 @@ const app = new Elysia({
<button
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
tabindex={0}
class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
class={`
target rounded bg-neutral-700 p-1 text-base
hover:bg-neutral-600
`}
data-value={`${target},${converter}`}
data-target={target}
data-converter={converter}
@ -629,11 +652,15 @@ const app = new Elysia({
({ body }) => {
return (
<>
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
<article class={`
convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col
overflow-y-auto overflow-x-hidden rounded bg-neutral-800
sm:h-[30vh]
`}>
{Object.entries(getPossibleTargets(body.fileType)).map(
([converter, targets]) => (
<article
class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
class="convert_to_group flex w-full flex-col border-b border-neutral-700 p-4"
data-converter={converter}
>
<header class="mb-2 w-full text-xl font-bold" safe>
@ -644,7 +671,10 @@ const app = new Elysia({
<button
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
tabindex={0}
class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
class={`
target rounded bg-neutral-700 p-1 text-base
hover:bg-neutral-600
`}
data-value={`${target},${converter}`}
data-target={target}
data-converter={converter}
@ -713,7 +743,7 @@ const app = new Elysia({
await Bun.write(`${userUploadsDir}${file.name}`, file);
}
} else {
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/dot-notation
await Bun.write(`${userUploadsDir}${body.file["name"]}`, body.file);
}
}
@ -893,7 +923,11 @@ const app = new Elysia({
<main class="w-full px-4">
<article class="article">
<h1 class="mb-4 text-xl">Results</h1>
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
<table class={`
w-full table-auto rounded bg-neutral-900 text-left
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}>
<thead>
<tr>
<th class="px-4 py-2">Time</th>
@ -912,7 +946,10 @@ const app = new Elysia({
<td safe>{job.status}</td>
<td>
<a
class="text-accent-500 underline hover:text-accent-400"
class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/results/${job.id}`}
>
View
@ -990,9 +1027,20 @@ const app = new Elysia({
<progress
max={job.num_files}
value={files.length}
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
class={`
mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full
border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500
[&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full
[&::-webkit-progress-value]:[background:none]
[&[value]::-webkit-progress-value]:bg-accent-500
[&[value]::-webkit-progress-value]:transition-[inline-size]
`}
/>
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
<table class={`
w-full table-auto rounded bg-neutral-900 text-left
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}>
<thead>
<tr>
<th class="px-4 py-2">Converted File Name</th>
@ -1008,7 +1056,10 @@ const app = new Elysia({
<td safe>{file.status}</td>
<td>
<a
class="text-accent-500 underline hover:text-accent-400"
class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/download/${outputPath}${file.output_file_name}`}
>
View
@ -1016,7 +1067,10 @@ const app = new Elysia({
</td>
<td>
<a
class="text-accent-500 underline hover:text-accent-400"
class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/download/${outputPath}${file.output_file_name}`}
download={file.output_file_name}
>
@ -1093,9 +1147,20 @@ const app = new Elysia({
<progress
max={job.num_files}
value={files.length}
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
class={`
mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0
bg-neutral-700 bg-none text-accent-500 accent-accent-500
[&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full
[&::-webkit-progress-value]:[background:none]
[&[value]::-webkit-progress-value]:bg-accent-500
[&[value]::-webkit-progress-value]:transition-[inline-size]
`}
/>
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
<table class={`
w-full table-auto rounded bg-neutral-900 text-left
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}>
<thead>
<tr>
<th class="px-4 py-2">Converted File Name</th>
@ -1111,7 +1176,10 @@ const app = new Elysia({
<td safe>{file.status}</td>
<td>
<a
class="text-accent-500 underline hover:text-accent-400"
class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/download/${outputPath}${file.output_file_name}`}
>
View
@ -1119,7 +1187,10 @@ const app = new Elysia({
</td>
<td>
<a
class="text-accent-500 underline hover:text-accent-400"
class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/download/${outputPath}${file.output_file_name}`}
download={file.output_file_name}
>
@ -1179,7 +1250,12 @@ const app = new Elysia({
<main class="w-full px-4">
<article class="article">
<h1 class="mb-4 text-xl">Converters</h1>
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_ul]:list-inside [&_ul]:list-disc">
<table class={`
w-full table-auto rounded bg-neutral-900 text-left
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
[&_ul]:list-inside [&_ul]:list-disc
`}>
<thead>
<tr>
<th class="mx-4 my-2">Converter</th>

7
src/public/script.js
View file

@ -4,11 +4,11 @@ const dropZone = document.getElementById("dropzone");
const fileNames = [];
let fileType;
dropZone.addEventListener("dragover", (e) => {
dropZone.addEventListener("dragover", () => {
dropZone.classList.add("dragover");
});
dropZone.addEventListener("dragleave", (e) => {
dropZone.addEventListener("dragleave", () => {
dropZone.classList.remove("dragover");
});
@ -153,6 +153,7 @@ const setTitle = () => {
};
// Add a onclick for the delete button
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const deleteRow = (target) => {
const filename = target.parentElement.parentElement.children[0].textContent;
const row = target.parentElement.parentElement;
@ -203,7 +204,7 @@ const uploadFiles = (files) => {
const formConvert = document.querySelector("form[action='/convert']");
formConvert.addEventListener("submit", (e) => {
formConvert.addEventListener("submit", () => {
const hiddenInput = document.querySelector("input[name='file_names']");
hiddenInput.value = JSON.stringify(fileNames);
});