mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
Add manipulation buttons to caption offset
This commit is contained in:
Jip Fr
parent
e569b5ba32
commit
269d2b59eb
2 changed files with 55 additions and 7 deletions
|
|
@ -9,6 +9,7 @@ export enum Icons {
|
|||
ARROW_LEFT = "arrowLeft",
|
||||
ARROW_RIGHT = "arrowRight",
|
||||
CHEVRON_DOWN = "chevronDown",
|
||||
CHEVRON_UP = "chevronUp",
|
||||
CHEVRON_RIGHT = "chevronRight",
|
||||
CHEVRON_LEFT = "chevronLeft",
|
||||
CLAPPER_BOARD = "clapperBoard",
|
||||
|
|
@ -61,6 +62,7 @@ const iconList: Record<Icons, string> = {
|
|||
eyeSlash: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L150.7 92.77zM223.1 149.5L313.4 220.3C317.6 211.8 320 202.2 320 191.1C320 180.5 316.1 169.7 311.6 160.4C314.4 160.1 317.2 159.1 320 159.1C373 159.1 416 202.1 416 255.1C416 269.7 413.1 282.7 407.1 294.5L446.6 324.7C457.7 304.3 464 280.9 464 255.1C464 176.5 399.5 111.1 320 111.1C282.7 111.1 248.6 126.2 223.1 149.5zM320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L177.4 235.8C176.5 242.4 176 249.1 176 255.1C176 335.5 240.5 400 320 400C338.7 400 356.6 396.4 373 389.9L446.2 447.5C409.9 467.1 367.8 480 320 480H320z"/></svg>`,
|
||||
arrowLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`,
|
||||
chevronDown: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>`,
|
||||
chevronUp: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>`,
|
||||
chevronRight: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
|
||||
chevronLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
|
||||
clapperBoard: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M326.1 160l127.4-127.4C451.7 32.39 449.9 32 448 32h-86.06l-128 128H326.1zM166.1 160l128-128H201.9l-128 128H166.1zM497.7 56.19L393.9 160H512V96C512 80.87 506.5 67.15 497.7 56.19zM134.1 32H64C28.65 32 0 60.65 0 96v64h6.062L134.1 32zM0 416c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V192H0V416z"/></svg>`,
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ function CaptionSetting(props: {
|
|||
label: string;
|
||||
min: number;
|
||||
decimalsAllowed?: number;
|
||||
controlButtons?: boolean;
|
||||
}) {
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
|
@ -76,6 +77,10 @@ function CaptionSetting(props: {
|
|||
};
|
||||
}, [isFocused]);
|
||||
|
||||
function setNewValue(value: number) {
|
||||
props.onChange?.(Math.min(Math.max(value, props.min), props.max));
|
||||
}
|
||||
|
||||
const inputClasses =
|
||||
"px-3 py-1 bg-video-context-inputBg rounded w-20 text-left text-white cursor-text";
|
||||
const textTransformer = props.textTransformer ?? ((s) => s);
|
||||
|
|
@ -143,17 +148,57 @@ function CaptionSetting(props: {
|
|||
}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
className={inputClasses}
|
||||
onClick={() => {
|
||||
<div
|
||||
className="relative"
|
||||
onClick={(evt) => {
|
||||
if ((evt.target as HTMLButtonElement).closest(".actions"))
|
||||
return;
|
||||
|
||||
setInputValue(props.value.toFixed(props.decimalsAllowed ?? 0));
|
||||
setIsFocused(true);
|
||||
}}
|
||||
type="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
{textTransformer(props.value.toFixed(props.decimalsAllowed ?? 0))}
|
||||
</button>
|
||||
<button
|
||||
className={classNames(
|
||||
inputClasses,
|
||||
props.controlButtons ? "pr-8 relative" : undefined
|
||||
)}
|
||||
type="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
{textTransformer(
|
||||
props.value.toFixed(props.decimalsAllowed ?? 0)
|
||||
)}
|
||||
</button>
|
||||
{props.controlButtons ? (
|
||||
<div className="actions w-6 h-full absolute right-0 top-0 flex items-center flex-col">
|
||||
<button
|
||||
type="button"
|
||||
onClick={
|
||||
() =>
|
||||
setNewValue(
|
||||
props.value + 1 / 10 ** (props.decimalsAllowed ?? 0)
|
||||
) // Add depending on the decimalsAllowed. If there's 1 decimal allowed, add 0.1. For 2, add 0.01, etc.
|
||||
}
|
||||
className="hover:text-white transition-colors duration-100"
|
||||
>
|
||||
<Icon icon={Icons.CHEVRON_UP} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={
|
||||
() =>
|
||||
setNewValue(
|
||||
props.value - 1 / 10 ** (props.decimalsAllowed ?? 0)
|
||||
) // Remove depending on the decimalsAllowed. If there's 1 decimal allowed, add 0.1. For 2, add 0.01, etc.
|
||||
}
|
||||
className="hover:text-white transition-colors duration-100"
|
||||
>
|
||||
<Icon icon={Icons.CHEVRON_DOWN} />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -186,6 +231,7 @@ export function CaptionSettingsView({ id }: { id: string }) {
|
|||
value={delay}
|
||||
textTransformer={(s) => `${s}s`}
|
||||
decimalsAllowed={1}
|
||||
controlButtons
|
||||
/>
|
||||
<CaptionSetting
|
||||
label="Text size"
|
||||
|
|
|
|||
Loading…
Reference in a new issue