|
|
|
@ -77,12 +77,11 @@ function CaptionSetting(props: { |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, [isFocused]); |
|
|
|
}, [isFocused]); |
|
|
|
|
|
|
|
|
|
|
|
function setNewValue(value: number) { |
|
|
|
const inputClasses = `py-1 bg-video-context-inputBg rounded text-white cursor-text ${ |
|
|
|
props.onChange?.(Math.min(Math.max(value, props.min), props.max)); |
|
|
|
props.controlButtons ? "text-center px-4 w-24" : "px-3 text-left w-20" |
|
|
|
} |
|
|
|
}`;
|
|
|
|
|
|
|
|
const arrowButtonClasses = |
|
|
|
const inputClasses = |
|
|
|
"hover:text-white transition-colors duration-100 w-full h-full flex justify-center items-center hover:bg-video-context-buttonOverInputHover rounded"; |
|
|
|
"px-3 py-1 bg-video-context-inputBg rounded w-20 text-left text-white cursor-text"; |
|
|
|
|
|
|
|
const textTransformer = props.textTransformer ?? ((s) => s); |
|
|
|
const textTransformer = props.textTransformer ?? ((s) => s); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
@ -161,7 +160,7 @@ function CaptionSetting(props: { |
|
|
|
<button |
|
|
|
<button |
|
|
|
className={classNames( |
|
|
|
className={classNames( |
|
|
|
inputClasses, |
|
|
|
inputClasses, |
|
|
|
props.controlButtons ? "pr-8 relative" : undefined |
|
|
|
props.controlButtons ? "relative" : undefined |
|
|
|
)} |
|
|
|
)} |
|
|
|
type="button" |
|
|
|
type="button" |
|
|
|
tabIndex={0} |
|
|
|
tabIndex={0} |
|
|
|
@ -171,32 +170,36 @@ function CaptionSetting(props: { |
|
|
|
)} |
|
|
|
)} |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
{props.controlButtons ? ( |
|
|
|
{props.controlButtons ? ( |
|
|
|
<div className="actions w-6 h-full absolute right-0 top-0 flex items-center flex-col"> |
|
|
|
<> |
|
|
|
<button |
|
|
|
<div className="actions w-6 h-full absolute left-0 top-0 grid grid-cols-1 items-center justify-center"> |
|
|
|
type="button" |
|
|
|
<button |
|
|
|
onClick={ |
|
|
|
type="button" |
|
|
|
() => |
|
|
|
onClick={ |
|
|
|
setNewValue( |
|
|
|
() => |
|
|
|
props.value + 1 / 10 ** (props.decimalsAllowed ?? 0) |
|
|
|
props.onChange?.( |
|
|
|
) // Add depending on the decimalsAllowed. If there's 1 decimal allowed, add 0.1. For 2, add 0.01, etc.
|
|
|
|
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" |
|
|
|
} |
|
|
|
> |
|
|
|
className={arrowButtonClasses} |
|
|
|
<Icon icon={Icons.CHEVRON_UP} /> |
|
|
|
> |
|
|
|
</button> |
|
|
|
<Icon icon={Icons.CHEVRON_LEFT} /> |
|
|
|
<button |
|
|
|
</button> |
|
|
|
type="button" |
|
|
|
</div> |
|
|
|
onClick={ |
|
|
|
<div className="actions w-6 h-full absolute right-0 top-0 grid grid-cols-1 items-center justify-center"> |
|
|
|
() => |
|
|
|
<button |
|
|
|
setNewValue( |
|
|
|
type="button" |
|
|
|
props.value - 1 / 10 ** (props.decimalsAllowed ?? 0) |
|
|
|
onClick={ |
|
|
|
) // Remove depending on the decimalsAllowed. If there's 1 decimal allowed, add 0.1. For 2, add 0.01, etc.
|
|
|
|
() => |
|
|
|
} |
|
|
|
props.onChange?.( |
|
|
|
className="hover:text-white transition-colors duration-100" |
|
|
|
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.
|
|
|
|
<Icon icon={Icons.CHEVRON_DOWN} /> |
|
|
|
} |
|
|
|
</button> |
|
|
|
className={arrowButtonClasses} |
|
|
|
</div> |
|
|
|
> |
|
|
|
|
|
|
|
<Icon icon={Icons.CHEVRON_RIGHT} /> |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
)} |
|
|
|
)} |
|
|
|
|
mrjvs
2 years ago