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