147 lines
5.5 KiB
TypeScript
147 lines
5.5 KiB
TypeScript
// * Other
|
|
import SimpleString from "@/back/Components/Inputs/SimpleString";
|
|
import SimpleSwitch from "@/back/Components/Inputs/SimpleSwitch";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import str from "@/hooks/use-string";
|
|
import { InputVideoValues } from "./VideoButton";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { ReactNode } from "react";
|
|
|
|
type VideoInputsProps = {
|
|
value: InputVideoValues;
|
|
onChange: (value: InputVideoValues) => void;
|
|
errors?: Record<string, string>;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
};
|
|
|
|
export default function VideoInputs({
|
|
value,
|
|
onChange,
|
|
errors = {},
|
|
disabled = false,
|
|
loading = false,
|
|
}: VideoInputsProps) {
|
|
const transVideoCaption = useTrans("back.input_video.caption");
|
|
return (
|
|
<>
|
|
|
|
{/* Input alt attribute of the image. */}
|
|
<SimpleString
|
|
name="alt"
|
|
label={str(useTrans("back.input_video.alt"))
|
|
.ucFirst()
|
|
.value()}
|
|
placeholder="ex: John Doe"
|
|
required
|
|
value={value.alt}
|
|
setData={(_, v) => onChange({ ...value, alt: v })}
|
|
disabled={disabled || loading}
|
|
parentErrors={errors}
|
|
/>
|
|
|
|
<SimpleSwitchLayout>
|
|
{/* Input switch to set the caption visibility. */}
|
|
<SimpleSwitch
|
|
label={str(useTrans("back.input_video.has_caption"))
|
|
.ucFirst()
|
|
.value()}
|
|
leftHelper={str(useTrans("back.no")).ucFirst().value()}
|
|
rightHelper={str(useTrans("back.yes")).ucFirst().value()}
|
|
name="hasCaption"
|
|
checked={value.hasCaption}
|
|
setData={(_, v) =>
|
|
onChange({
|
|
...value,
|
|
hasCaption: v,
|
|
caption: v ? value.caption : null,
|
|
})
|
|
}
|
|
/>
|
|
{/* Input caption of the video. */}
|
|
{value.hasCaption && (
|
|
<div className="px-4">
|
|
<Separator className="my-4" />
|
|
<SimpleString
|
|
name="caption"
|
|
label={str(transVideoCaption).ucFirst().value()}
|
|
placeholder="ex: John Doe"
|
|
required={false}
|
|
value={value.caption ?? ""}
|
|
setData={(_, v) => onChange({ ...value, caption: v })}
|
|
disabled={disabled || loading}
|
|
parentErrors={errors}
|
|
/>
|
|
</div>
|
|
)}
|
|
</SimpleSwitchLayout>
|
|
<Separator className="my-1" />
|
|
<SimpleSwitchLayout>
|
|
<SimpleSwitch
|
|
label={str(useTrans("back.input_video.is_muted"))
|
|
.ucFirst()
|
|
.value()}
|
|
leftHelper={str(useTrans("back.no")).ucFirst().value()}
|
|
rightHelper={str(useTrans("back.yes")).ucFirst().value()}
|
|
name="isMuted"
|
|
checked={value.isMuted}
|
|
setData={(_, v) =>
|
|
onChange({
|
|
...value,
|
|
isMuted: v,
|
|
})
|
|
}
|
|
parentErrors={errors}
|
|
/>
|
|
</SimpleSwitchLayout>
|
|
<Separator className="my-1" />
|
|
<SimpleSwitchLayout>
|
|
<SimpleSwitch
|
|
label={str(useTrans("back.input_video.has_controls"))
|
|
.ucFirst()
|
|
.value()}
|
|
leftHelper={str(useTrans("back.no")).ucFirst().value()}
|
|
rightHelper={str(useTrans("back.yes")).ucFirst().value()}
|
|
name="hasControls"
|
|
checked={value.hasControls}
|
|
setData={(_, v) =>
|
|
onChange({
|
|
...value,
|
|
hasControls: v,
|
|
})
|
|
}
|
|
parentErrors={errors}
|
|
/>
|
|
{value.hasControls && (
|
|
<div className="px-4">
|
|
<Separator className="my-4" />
|
|
<SimpleSwitch
|
|
label={str(useTrans("back.input_video.can_fullScreen"))
|
|
.ucFirst()
|
|
.value()}
|
|
leftHelper={str(useTrans("back.no")).ucFirst().value()}
|
|
rightHelper={str(useTrans("back.yes")).ucFirst().value()}
|
|
name="canFullScreen"
|
|
checked={value.canFullScreen}
|
|
setData={(_, v) =>
|
|
onChange({
|
|
...value,
|
|
canFullScreen: v,
|
|
})
|
|
}
|
|
parentErrors={errors}
|
|
/>
|
|
</div>
|
|
)}
|
|
</SimpleSwitchLayout>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const SimpleSwitchLayout = ({ children }: { children: ReactNode }) => {
|
|
return (
|
|
<div className="border-l border-1 h-full p-4">
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|