105 lines
3.2 KiB
TypeScript
Executable File
105 lines
3.2 KiB
TypeScript
Executable File
import {useForm} from 'react-hook-form';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import React, {useEffect} from 'react';
|
|
import {message} from '@common/i18n/message';
|
|
import {CrupdateResourceLayout} from '@common/admin/crupdate-resource-layout';
|
|
import {CreateVideoPayload} from '@app/admin/videos/requests/use-create-video';
|
|
import {toast} from '@common/ui/toast/toast';
|
|
import {CrupdateVideoForm} from '@app/admin/videos/crupdate/crupdate-video-form';
|
|
import {useUpdateVideo} from '@app/admin/videos/requests/use-update-video';
|
|
import {useVideo} from '@app/admin/videos/requests/use-video';
|
|
import {FullPageLoader} from '@common/ui/progress/full-page-loader';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {OpenInNewIcon} from '@common/icons/material/OpenInNew';
|
|
import {getWatchLink} from '@app/videos/watch-page/get-watch-link';
|
|
import {Link, useParams} from 'react-router-dom';
|
|
import {useNavigate} from '@common/utils/hooks/use-navigate';
|
|
import {ArrowBackIcon} from '@common/icons/material/ArrowBack';
|
|
|
|
export function EditVideoPage() {
|
|
const {titleId} = useParams();
|
|
const navigate = useNavigate();
|
|
const form = useForm<CreateVideoPayload>();
|
|
const query = useVideo();
|
|
const video = query.data?.video;
|
|
const updateVideo = useUpdateVideo(form);
|
|
const link = video ? getWatchLink(video) : video;
|
|
|
|
useEffect(() => {
|
|
if (video && !form.getValues().name) {
|
|
form.reset({
|
|
name: video.name,
|
|
title_id: video.title_id,
|
|
season_num: video.season_num,
|
|
episode_num: video.episode_num,
|
|
thumbnail: video.thumbnail,
|
|
type: video.type,
|
|
src: video.src,
|
|
quality: video.quality,
|
|
language: video.language,
|
|
category: video.category,
|
|
captions:
|
|
video.captions?.map(caption => ({
|
|
id: caption.id,
|
|
name: caption.name,
|
|
url: caption.url,
|
|
language: caption.language,
|
|
})) || [],
|
|
});
|
|
}
|
|
}, [video, form]);
|
|
|
|
return (
|
|
<CrupdateResourceLayout
|
|
onSubmit={values => {
|
|
updateVideo.mutate(values, {
|
|
onSuccess: () => {
|
|
form.reset(values);
|
|
toast(message('Video updated'));
|
|
if (titleId) {
|
|
navigate(`../../`, {
|
|
relative: 'path',
|
|
});
|
|
}
|
|
},
|
|
});
|
|
}}
|
|
backButton={
|
|
titleId ? (
|
|
<IconButton
|
|
className="text-muted"
|
|
elementType={Link}
|
|
to="../../"
|
|
relative="path"
|
|
>
|
|
<ArrowBackIcon />
|
|
</IconButton>
|
|
) : undefined
|
|
}
|
|
form={form}
|
|
title={
|
|
video ? (
|
|
<Trans values={{name: video.name}} message="Edit “:name“" />
|
|
) : (
|
|
<Trans message="Edit video" />
|
|
)
|
|
}
|
|
actions={
|
|
link ? (
|
|
<IconButton size="sm" elementType={Link} to={link} target="_blank">
|
|
<OpenInNewIcon />
|
|
</IconButton>
|
|
) : null
|
|
}
|
|
isLoading={query.isLoading || updateVideo.isPending}
|
|
disableSaveWhenNotDirty
|
|
>
|
|
{query.isLoading ? (
|
|
<FullPageLoader />
|
|
) : (
|
|
<CrupdateVideoForm form={form} video={video} />
|
|
)}
|
|
</CrupdateResourceLayout>
|
|
);
|
|
}
|