113 lines
4.5 KiB
TypeScript
113 lines
4.5 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import VideoButton, { VideoAttributes } from "./Video/VideoButton";
|
|
import { usePage } from "@inertiajs/react";
|
|
import InputError from "../InputError";
|
|
import { Label } from "@/components/ui/label";
|
|
import { cn, GetTranslation } from "@/lib/utils";
|
|
import BtnOptionnalLinkWithTooltip from "../BtnOptionnalLinkWithTooltip";
|
|
import { RefreshCcw, Trash } from "lucide-react";
|
|
import str from "@/hooks/use-string";
|
|
|
|
interface Props {
|
|
label: string;
|
|
name: string;
|
|
value: VideoAttributes | null;
|
|
// eslint-disable-next-line no-unused-vars
|
|
setData: (name: string, value: VideoAttributes | null) => void;
|
|
className?: string;
|
|
required?: boolean;
|
|
disabled?: boolean;
|
|
forcedFormat?: string;
|
|
forcedProvider?: number;
|
|
reset?: (name?: string) => void;
|
|
}
|
|
|
|
const VideoInput = (props: Props) => {
|
|
const { name, setData, value, className, label, required = true, disabled = false, forcedFormat, forcedProvider, reset } = props;
|
|
const { errors } = usePage().props;
|
|
const [refresh, setRefresh] = useState(Date.now());
|
|
|
|
useEffect(() => {
|
|
}, [refresh]);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col w-full justify-between items-start gap-1.5",
|
|
className,
|
|
)}
|
|
>
|
|
<Label htmlFor={name}>{label + (required ? " *" : "")}</Label>
|
|
<div className="flex w-full">
|
|
<div className="w-full">
|
|
<VideoButton
|
|
disabled={disabled}
|
|
isSmallButton={false}
|
|
value={value}
|
|
key={refresh}
|
|
forcedFormat={forcedFormat}
|
|
forcedProvider={forcedProvider}
|
|
hasError={errors[name] ? true : false}
|
|
onValidateVideo={(value) => {
|
|
if (value) {
|
|
setData(name, {
|
|
alt: value.alt,
|
|
canFullScreen: value.canFullScreen,
|
|
caption: value.caption,
|
|
hasControls: value.hasControls,
|
|
isMuted: value.isMuted,
|
|
provider: value.provider,
|
|
videoId: value.videoId,
|
|
format: value.format,
|
|
})
|
|
setRefresh(Date.now())
|
|
} else {
|
|
setData(name, null)
|
|
}
|
|
}} />
|
|
</div>
|
|
<div>
|
|
<BtnOptionnalLinkWithTooltip
|
|
content={<RefreshCcw />}
|
|
tooltipContent={
|
|
<p>
|
|
{str(GetTranslation('back.input_video.tooltip.reset')).ucFirst().value()}
|
|
</p>
|
|
}
|
|
onClick={() => {
|
|
reset?.(name)
|
|
setRefresh(Date.now())
|
|
}}
|
|
size="sm"
|
|
className={cn(!required ? "h-40 rounded-r-md" : "h-20 rounded-b-none", " rounded-l-none")}
|
|
variant="secondary"
|
|
/>
|
|
|
|
{
|
|
required && (
|
|
<BtnOptionnalLinkWithTooltip
|
|
content={<Trash />}
|
|
disabled={!value}
|
|
onClick={() => {
|
|
setData(name, null)
|
|
setRefresh(Date.now())
|
|
}}
|
|
tooltipContent={
|
|
<p>
|
|
{str(GetTranslation('back.input_video.tooltip.delete')).ucFirst().value()}
|
|
</p>
|
|
}
|
|
size="sm"
|
|
className="h-20 rounded-t-none rounded-l-none"
|
|
variant="destructive"
|
|
/>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<InputError message={errors[name]} />
|
|
</div>
|
|
)
|
|
}
|
|
export default VideoInput;
|