my-dev
/
web2-client
4
0
Fork 0
Code Issues 18 Pull Requests Packages Projects Releases Wiki Activity

add reset attachment

This commit is contained in:
Saidakrom Rakhmedov 2025-02-01 20:21:56 +05:00
parent 372f84d1b1
commit 1d22ac2173
2 changed files with 119 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
src/pages/root/steps/data-step/index.tsx
View File

@ -14,6 +14,7 @@ import { useRootStore } from "~/shared/stores/root";
import { Checkbox } from "~/shared/ui/checkbox"; import { Checkbox } from "~/shared/ui/checkbox";
import { AudioPlayer } from "~/shared/ui/audio-player"; import { AudioPlayer } from "~/shared/ui/audio-player";
import { HashtagInput } from "~/shared/ui/hashtag-input"; import { HashtagInput } from "~/shared/ui/hashtag-input";
import { XMark } from "~/shared/ui/icons/x-mark";
type DataStepProps = { type DataStepProps = {
nextStep(): void; nextStep(): void;
@ -57,119 +58,133 @@ export const DataStep = ({ nextStep }: DataStepProps) => {
})(); })();
}; };
const handleFileReset = () => {
rootStore.setFile(null);
rootStore.setFileSrc('');
rootStore.setFileType('');
}
return ( return (
<section className={"mt-4 px-4 pb-8"}> <section className={"mt-4 px-4 pb-8"}>
<div className={"mb-[30px] flex flex-col text-sm"}> <div className={"mb-[30px] flex flex-col text-sm"}>
<span className={"ml-4"}>/Заполните информацию о контенте</span> <span className={"ml-4"}>/Заполните информацию о контенте</span>
<div> <div>
1/<span className={"text-[#7B7B7B]"}>5</span> 1/<span className={"text-[#7B7B7B]"}>5</span>
</div>
</div> </div>
</div>
<div className={"flex flex-col gap-[20px]"}> <div className={"flex flex-col gap-[20px]"}>
<FormLabel label={"Название"}> <FormLabel label={"Название"}>
<Input <Input
placeholder={"[ Введите название ]"} placeholder={"[ Введите название ]"}
error={form.formState.errors?.name} error={form.formState.errors?.name}
{...form.register("name")} {...form.register("name")}
/> />
</FormLabel> </FormLabel>
<FormLabel label={"Имя автора/исполнителя"}> <FormLabel label={"Имя автора/исполнителя"}>
<Input <Input
placeholder={"[ введите имя автора/исполнителя ]"} placeholder={"[ введите имя автора/исполнителя ]"}
error={form.formState.errors?.author} error={form.formState.errors?.author}
{...form.register("author")} {...form.register("author")}
/> />
</FormLabel> </FormLabel>
<FormLabel label={"Хэштеги"}> <FormLabel label={"Хэштеги"}>
<HashtagInput /> <HashtagInput />
</FormLabel> </FormLabel>
<FormLabel label={"Файл"}> <FormLabel label={"Файл"}>
<HiddenFileInput <HiddenFileInput
id={"file"} id={"file"}
shouldProcess={false} shouldProcess={false}
accept={"video/mp4,video/x-m4v,video/*,audio/mp3,audio/*"} accept={"video/mp4,video/x-m4v,video/*,audio/mp3,audio/*"}
onChange={(file) => { onChange={(file) => {
rootStore.setFile(file); rootStore.setFile(file);
rootStore.setFileSrc(URL.createObjectURL(file)); rootStore.setFileSrc(URL.createObjectURL(file));
rootStore.setFileType(file.type); // Save the file type for conditional rendering rootStore.setFileType(file.type); // Save the file type for conditional rendering
}} }}
/> />
{!rootStore.fileSrc && <FileButton htmlFor={"file"} />} {!rootStore.fileSrc && <FileButton htmlFor={"file"} />}
{rootStore.fileSrc && ( {rootStore.fileSrc && (
<div <div
className={ className={
"w-full border border-white bg-[#2B2B2B] px-[10px] py-[8px] text-sm" "w-full border border-white bg-[#2B2B2B] px-[10px] py-[8px] text-sm"
} }
> >
{rootStore.fileType?.startsWith("audio") ? ( {rootStore.fileType?.startsWith("audio") ? (
<AudioPlayer src={rootStore.fileSrc} /> <AudioPlayer src={rootStore.fileSrc} />
) : ( ) : (
<ReactPlayer <ReactPlayer
playsinline={true} playsinline={true}
controls={true} controls={true}
width="100%" width="100%"
config={{ file: { attributes: { playsInline: true } } }} config={{ file: { attributes: { playsInline: true } } }}
url={rootStore.fileSrc} url={rootStore.fileSrc}
/> />
)} )}
</div> <button
)} onClick={handleFileReset}
</FormLabel> className={
"text-center w-full gap-1 border border-white px-[10px] py-[8px] mt-2 text-sm"
<div className={"flex flex-col gap-2"}>
<FormLabel
label={"Разрешить обложку"}
labelClassName={"flex"}
formLabelAddon={
<Checkbox
onClick={() => rootStore.setAllowCover(!rootStore.allowCover)}
checked={rootStore.allowCover}
/>
} }
/> >
Изменить выбор
</button>
</div>
)}
</FormLabel>
{rootStore.allowCover && ( <div className={"flex flex-col gap-2"}>
<FormLabel label={"Обложка"}> <FormLabel
<HiddenFileInput label={"Разрешить обложку"}
id={"cover"} labelClassName={"flex"}
accept={"image/*"} formLabelAddon={
onChange={(cover) => { <Checkbox
rootStore.setCover(cover); onClick={() => rootStore.setAllowCover(!rootStore.allowCover)}
}} checked={rootStore.allowCover}
/> />
{rootStore.cover ? (
<CoverButton
src={URL.createObjectURL(rootStore.cover)}
onClick={() => {
rootStore.setCover(null);
}}
/>
) : (
<FileButton htmlFor={"cover"} />
)}
</FormLabel>
)}
</div>
</div>
<Button
className={"mt-[30px]"}
onClick={handleSubmit}
includeArrows={true}
label={"Готово"}
disabled={
!form.formState.isValid ||
!rootStore.file ||
(rootStore.allowCover && !rootStore.cover)
} }
/> />
</section>
{rootStore.allowCover && (
<FormLabel label={"Обложка"}>
<HiddenFileInput
id={"cover"}
accept={"image/*"}
onChange={(cover) => {
rootStore.setCover(cover);
}}
/>
{rootStore.cover ? (
<CoverButton
src={URL.createObjectURL(rootStore.cover)}
onClick={() => {
rootStore.setCover(null);
}}
/>
) : (
<FileButton htmlFor={"cover"} />
)}
</FormLabel>
)}
</div>
</div>
<Button
className={"mt-[30px]"}
onClick={handleSubmit}
includeArrows={true}
label={"Готово"}
disabled={
!form.formState.isValid ||
!rootStore.file ||
(rootStore.allowCover && !rootStore.cover)
}
/>
</section>
); );
}; };

2
src/shared/stores/root/index.ts
View File

@ -13,7 +13,7 @@ type RootStore = {
setAuthor: (author: string) => void; setAuthor: (author: string) => void;
file: File | null; file: File | null;
setFile: (file: File) => void; setFile: (file: File | null) => void;
fileType: string; fileType: string;
setFileType: (type: string) => void; setFileType: (type: string) => void;