Skip to content

Commit 96b57a7

Browse files
KartoffelChipssKartoffelChipss
committed
Fixed format
1 parent 194c041 commit 96b57a7

File tree

13 files changed

+139
-175
lines changed

13 files changed

+139
-175
lines changed

‎index.html‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -19,23 +19,11 @@
1919
<meta property="og:url" content="https://jfcovers.jan.run" />
2020
<meta property="og:type" content="website" />
2121

22-
<link
23-
rel="icon"
24-
type="image/png"
25-
href="/favicons/favicon-96x96.png"
26-
sizes="96x96"
27-
/>
22+
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96" />
2823
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
2924
<link rel="shortcut icon" href="/favicons/favicon.ico" />
30-
<link
31-
rel="apple-touch-icon"
32-
sizes="180x180"
33-
href="/favicons/apple-touch-icon.png"
34-
/>
35-
<meta
36-
name="apple-mobile-web-app-title"
37-
content="Jellyfin Cover Maker"
38-
/>
25+
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
26+
<meta name="apple-mobile-web-app-title" content="Jellyfin Cover Maker" />
3927
<link rel="manifest" href="/favicons/site.webmanifest" />
4028

4129
<link rel="preconnect" href="https://fonts.googleapis.com" />

‎public/favicons/site.webmanifest‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{
2-
"name": "Jellyfin Cover Maker",
3-
"short_name": "Jellyfin Cover Maker",
4-
"icons": [
5-
{
6-
"src": "/favicons/web-app-manifest-192x192.png",
7-
"sizes": "192x192",
8-
"type": "image/png",
9-
"purpose": "maskable"
10-
},
11-
{
12-
"src": "/favicons/web-app-manifest-512x512.png",
13-
"sizes": "512x512",
14-
"type": "image/png",
15-
"purpose": "maskable"
16-
}
17-
],
18-
"theme_color": "#ffffff",
19-
"background_color": "#ffffff",
20-
"display": "standalone"
21-
}
2+
"name": "Jellyfin Cover Maker",
3+
"short_name": "Jellyfin Cover Maker",
4+
"icons": [
5+
{
6+
"src": "/favicons/web-app-manifest-192x192.png",
7+
"sizes": "192x192",
8+
"type": "image/png",
9+
"purpose": "maskable"
10+
},
11+
{
12+
"src": "/favicons/web-app-manifest-512x512.png",
13+
"sizes": "512x512",
14+
"type": "image/png",
15+
"purpose": "maskable"
16+
}
17+
],
18+
"theme_color": "#ffffff",
19+
"background_color": "#ffffff",
20+
"display": "standalone"
21+
}

‎src/components/FileInput.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { ImageIcon, ImagePlus } from "lucide-preact";
2-
import type { FC } from "preact/compat";
3-
import { useState, useCallback, useRef, useEffect } from "preact/hooks";
1+
import { ImageIcon, ImagePlus } from 'lucide-preact';
2+
import type { FC } from 'preact/compat';
3+
import { useState, useCallback, useRef, useEffect } from 'preact/hooks';
44

55
type DragAndDropFileInputProps = {
66
onImageUpload: (e: Event) => void;
@@ -34,7 +34,7 @@ const FileInput: FC<DragAndDropFileInputProps> = ({ onImageUpload }) => {
3434
dataTransfer.items.add(file);
3535
inputRef.current.files = dataTransfer.files;
3636

37-
const event = new Event("change", { bubbles: true });
37+
const event = new Event('change', { bubbles: true });
3838
inputRef.current.dispatchEvent(event);
3939
}
4040

@@ -57,23 +57,23 @@ const FileInput: FC<DragAndDropFileInputProps> = ({ onImageUpload }) => {
5757
};
5858

5959
useEffect(() => {
60-
window.addEventListener("dragover", handleGlobalDragOver);
61-
window.addEventListener("dragleave", handleGlobalDragLeave);
62-
window.addEventListener("drop", handleGlobalDrop);
60+
window.addEventListener('dragover', handleGlobalDragOver);
61+
window.addEventListener('dragleave', handleGlobalDragLeave);
62+
window.addEventListener('drop', handleGlobalDrop);
6363

6464
return () => {
65-
window.removeEventListener("dragover", handleGlobalDragOver);
66-
window.removeEventListener("dragleave", handleGlobalDragLeave);
67-
window.removeEventListener("drop", handleGlobalDrop);
65+
window.removeEventListener('dragover', handleGlobalDragOver);
66+
window.removeEventListener('dragleave', handleGlobalDragLeave);
67+
window.removeEventListener('drop', handleGlobalDrop);
6868
};
6969
}, [handleGlobalDragOver, handleGlobalDragLeave, handleGlobalDrop]);
7070

7171
return (
7272
<>
7373
<label
7474
class={
75-
"relative grow w-full rounded-md border border-input border-solid flex flex-col items-center justify-center gap-2 p-4 cursor-pointer transition-colors " +
76-
(isDragging ? " border-primary border-dashed" : "")
75+
'relative grow w-full rounded-md border border-input border-solid flex flex-col items-center justify-center gap-2 p-4 cursor-pointer transition-colors ' +
76+
(isDragging ? ' border-primary border-dashed' : '')
7777
}
7878
htmlFor="file-input"
7979
>
@@ -108,9 +108,7 @@ const FileInput: FC<DragAndDropFileInputProps> = ({ onImageUpload }) => {
108108
<div class="fixed inset-0 z-50 bg-black/70 flex items-center justify-center pointer-events-none border-primary border-4 rounded-md">
109109
<div class="card flex flex-row items-center gap-3 p-6 text-center">
110110
<ImagePlus class="w-6 h-6" />
111-
<p class="text-lg font-medium">
112-
Drop image anywhere to use
113-
</p>
111+
<p class="text-lg font-medium">Drop image anywhere to use</p>
114112
</div>
115113
</div>
116114
)}

‎src/components/OptionsDisplay.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,8 @@ const OptionsDisplay: FC<OptionsDisplayProps> = ({
122122
textBaseline === 'top'
123123
? 'middle'
124124
: textBaseline === 'middle'
125-
? 'bottom'
126-
: 'top';
125+
? 'bottom'
126+
: 'top';
127127
setTextBaseline(nextBaseline);
128128
}}
129129
>

‎src/components/PopoverPicker.tsx‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
import { HexColorInput, HexColorPicker } from "react-colorful";
1+
import { HexColorInput, HexColorPicker } from 'react-colorful';
22

3-
import useClickOutside from "../hooks/useClicksOutside";
4-
import { useCallback, useRef, useState } from "preact/hooks";
5-
import type { FC } from "preact/compat";
6-
import { Undo2 } from "lucide-preact";
3+
import useClickOutside from '../hooks/useClicksOutside';
4+
import { useCallback, useRef, useState } from 'preact/hooks';
5+
import type { FC } from 'preact/compat';
6+
import { Undo2 } from 'lucide-preact';
77

88
interface PopoverPickerProps {
99
color: string;
1010
onChange: (color: string) => void;
1111
defaultColor: string;
1212
}
1313

14-
const PopoverPicker: FC<PopoverPickerProps> = ({
15-
color,
16-
onChange,
17-
defaultColor,
18-
}) => {
14+
const PopoverPicker: FC<PopoverPickerProps> = ({ color, onChange, defaultColor }) => {
1915
const popover = useRef<HTMLDivElement>(null);
2016
const [isOpen, toggle] = useState(false);
2117

@@ -41,10 +37,7 @@ const PopoverPicker: FC<PopoverPickerProps> = ({
4137
color={color}
4238
onChange={onChange}
4339
/>
44-
<button
45-
className="btn-ghost"
46-
onClick={() => onChange(defaultColor)}
47-
>
40+
<button className="btn-ghost" onClick={() => onChange(defaultColor)}>
4841
<Undo2 />
4942
</button>
5043
</div>

‎src/components/SliderInput.tsx‎

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Minus, Plus, Undo2 } from "lucide-preact";
2-
import { type FC, useEffect, useRef } from "preact/compat";
1+
import { Minus, Plus, Undo2 } from 'lucide-preact';
2+
import { type FC, useEffect, useRef } from 'preact/compat';
33

44
interface SliderInputProps {
55
value: number;
@@ -29,7 +29,7 @@ const SliderInput: FC<SliderInputProps> = ({
2929
displayValue = false,
3030
displayUnit,
3131
decimalPlaces = 0,
32-
className = "",
32+
className = '',
3333
disabled = false,
3434
}) => {
3535
const sliderRef = useRef<HTMLInputElement>(null);
@@ -39,7 +39,7 @@ const SliderInput: FC<SliderInputProps> = ({
3939
if (!el) return;
4040

4141
const percent = max === min ? 0 : ((value - min) / (max - min)) * 100;
42-
el.style.setProperty("--slider-value", `${percent}%`);
42+
el.style.setProperty('--slider-value', `${percent}%`);
4343
};
4444

4545
useEffect(() => {
@@ -53,17 +53,11 @@ const SliderInput: FC<SliderInputProps> = ({
5353
};
5454

5555
return (
56-
<div
57-
className={
58-
"relative flex gap-3 items-center justify-between " + className
59-
}
60-
>
56+
<div className={'relative flex gap-3 items-center justify-between ' + className}>
6157
{showPlusMinusButtons && (
6258
<button
6359
className="btn-ghost"
64-
onClick={() =>
65-
onChange(Math.max(min, value - (buttonStep || step)))
66-
}
60+
onClick={() => onChange(Math.max(min, value - (buttonStep || step)))}
6761
disabled={value <= min}
6862
>
6963
<Minus />
@@ -86,9 +80,7 @@ const SliderInput: FC<SliderInputProps> = ({
8680
{showPlusMinusButtons && (
8781
<button
8882
className="btn-ghost"
89-
onClick={() =>
90-
onChange(Math.min(max, value + (buttonStep || step)))
91-
}
83+
onClick={() => onChange(Math.min(max, value + (buttonStep || step)))}
9284
disabled={value >= max || disabled}
9385
>
9486
<Plus />
@@ -100,15 +92,11 @@ const SliderInput: FC<SliderInputProps> = ({
10092
<span className="text-md text-muted-foreground font-mono">
10193
<span className="opacity-0">
10294
{String(max).length > String(value).length
103-
? "0".repeat(
104-
String(max).length - String(value).length
105-
)
106-
: ""}
95+
? '0'.repeat(String(max).length - String(value).length)
96+
: ''}
10797
</span>
108-
{decimalPlaces > 0
109-
? value.toFixed(decimalPlaces)
110-
: value}
111-
{displayUnit ?? ""}
98+
{decimalPlaces > 0 ? value.toFixed(decimalPlaces) : value}
99+
{displayUnit ?? ''}
112100
</span>
113101
</div>
114102
)}

‎src/hooks/useClicksOutside.ts‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,33 @@
1-
import { useEffect } from "preact/hooks";
2-
import type { RefObject } from "preact";
1+
import { useEffect } from 'preact/hooks';
2+
import type { RefObject } from 'preact';
33

44
type EventHandler = (event: MouseEvent | TouchEvent) => void;
55

6-
const useClickOutside = <T extends HTMLElement>(
7-
ref: RefObject<T>,
8-
handler: EventHandler
9-
): void => {
6+
const useClickOutside = <T extends HTMLElement>(ref: RefObject<T>, handler: EventHandler): void => {
107
useEffect(() => {
118
let startedInside = false;
129
let startedWhenMounted = false;
1310

1411
const validateEventStart = (event: MouseEvent | TouchEvent) => {
1512
startedWhenMounted = !!ref.current;
16-
startedInside =
17-
!!ref.current && ref.current.contains(event.target as Node);
13+
startedInside = !!ref.current && ref.current.contains(event.target as Node);
1814
};
1915

2016
const listener = (event: MouseEvent | TouchEvent) => {
2117
if (startedInside || !startedWhenMounted) return;
22-
if (!ref.current || ref.current.contains(event.target as Node))
23-
return;
18+
if (!ref.current || ref.current.contains(event.target as Node)) return;
2419

2520
handler(event);
2621
};
2722

28-
document.addEventListener("mousedown", validateEventStart);
29-
document.addEventListener("touchstart", validateEventStart);
30-
document.addEventListener("click", listener);
23+
document.addEventListener('mousedown', validateEventStart);
24+
document.addEventListener('touchstart', validateEventStart);
25+
document.addEventListener('click', listener);
3126

3227
return () => {
33-
document.removeEventListener("mousedown", validateEventStart);
34-
document.removeEventListener("touchstart", validateEventStart);
35-
document.removeEventListener("click", listener);
28+
document.removeEventListener('mousedown', validateEventStart);
29+
document.removeEventListener('touchstart', validateEventStart);
30+
document.removeEventListener('click', listener);
3631
};
3732
}, [ref, handler]);
3833
};

‎src/index.css‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import "tailwindcss";
2-
@import "basecoat-css";
1+
@import 'tailwindcss';
2+
@import 'basecoat-css';
33

44
body {
55
width: 100%;
@@ -57,15 +57,20 @@ body {
5757
--shadow-color: oklch(0 0 0);
5858
--shadow-2xs: 0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.075);
5959
--shadow-xs: 0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.075);
60-
--shadow-sm: 0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
60+
--shadow-sm:
61+
0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
6162
0 1px 2px -14.5px rgb(from var(--shadow-color) r g b / 0.15);
62-
--shadow: 0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
63+
--shadow:
64+
0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
6365
0 1px 2px -14.5px rgb(from var(--shadow-color) r g b / 0.15);
64-
--shadow-md: 0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
66+
--shadow-md:
67+
0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
6568
0 2px 4px -14.5px rgb(from var(--shadow-color) r g b / 0.15);
66-
--shadow-lg: 0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
69+
--shadow-lg:
70+
0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
6771
0 4px 6px -14.5px rgb(from var(--shadow-color) r g b / 0.15);
68-
--shadow-xl: 0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
72+
--shadow-xl:
73+
0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15),
6974
0 8px 10px -14.5px rgb(from var(--shadow-color) r g b / 0.15);
7075
--shadow-2xl: 0 1px 3px -13.5px rgb(from var(--shadow-color) r g b / 0.15);
7176
}

‎src/main.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { render } from "preact";
2-
import "./index.css";
3-
import App from "./app.tsx";
1+
import { render } from 'preact';
2+
import './index.css';
3+
import App from './app.tsx';
44

5-
render(<App />, document.getElementById("app")!);
5+
render(<App />, document.getElementById('app')!);

0 commit comments

Comments
 (0)