maher
292
resources/client/admin/videos/crupdate/crupdate-video-form.tsx
Executable file
292
resources/client/admin/videos/crupdate/crupdate-video-form.tsx
Executable file
@@ -0,0 +1,292 @@
|
||||
import React, {useState} from 'react';
|
||||
import {useFormContext, UseFormReturn} from 'react-hook-form';
|
||||
import {FileUploadProvider} from '@common/uploads/uploader/file-upload-provider';
|
||||
import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
|
||||
import {Trans} from '@common/i18n/trans';
|
||||
import {TitleSelect} from '@app/titles/title-select';
|
||||
import {FormImageSelector} from '@common/ui/images/image-selector';
|
||||
import {FormSelect, Option} from '@common/ui/forms/select/select';
|
||||
import {useSettings} from '@common/core/settings/use-settings';
|
||||
import {useTrans} from '@common/i18n/use-trans';
|
||||
import {useValueLists} from '@common/http/value-lists';
|
||||
import {message} from '@common/i18n/message';
|
||||
import {CreateVideoPayload} from '@app/admin/videos/requests/use-create-video';
|
||||
import {InfoDialogTriggerIcon} from '@common/ui/overlays/dialog/info-dialog-trigger/info-dialog-trigger-icon';
|
||||
import {Video} from '@app/titles/models/video';
|
||||
import {VideoPlayerSkeleton} from '@app/videos/video-player-skeleton';
|
||||
import {SiteVideoPlayer} from '@app/videos/site-video-player';
|
||||
import {CaptionsPanel} from '@app/admin/videos/captions/captions-panel';
|
||||
import {FormFileEntryField} from '@common/ui/forms/input-field/file-entry-field';
|
||||
import {RadioGroup} from '@common/ui/forms/radio-group/radio-group';
|
||||
import {Radio} from '@common/ui/forms/radio-group/radio';
|
||||
import {Disk} from '@common/uploads/types/backend-metadata';
|
||||
|
||||
interface Props {
|
||||
form: UseFormReturn<CreateVideoPayload>;
|
||||
video?: Video;
|
||||
}
|
||||
export function CrupdateVideoForm({form, video}: Props) {
|
||||
return (
|
||||
<div className="flex items-start gap-54">
|
||||
<div className="flex-auto">
|
||||
<VideoPreview video={video} />
|
||||
<ReloadMessage form={form} />
|
||||
<CaptionsPanel />
|
||||
</div>
|
||||
<div className="w-440 flex-shrink-0">
|
||||
<VideoForm />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReloadMessage({form}: Props) {
|
||||
const dirty = form.formState.dirtyFields;
|
||||
if (!dirty.src && !dirty.thumbnail) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-12 flex items-center gap-6 text-sm text-muted">
|
||||
<InfoDialogTriggerIcon
|
||||
size="xs"
|
||||
className="text-muted"
|
||||
viewBox="0 0 16 16"
|
||||
/>
|
||||
<Trans message="Save your changes to reload video preview." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface VideoPreviewProps {
|
||||
video?: Video;
|
||||
}
|
||||
function VideoPreview({video}: VideoPreviewProps) {
|
||||
if (!video || !video.src) {
|
||||
return <VideoPlayerSkeleton animate={false} />;
|
||||
}
|
||||
// timestamp will force reload of player when video is updated
|
||||
return (
|
||||
<SiteVideoPlayer
|
||||
video={video}
|
||||
mediaItemId={`${video.id}-${video.updated_at}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function VideoForm() {
|
||||
return (
|
||||
<FileUploadProvider>
|
||||
<FormTextField
|
||||
name="name"
|
||||
label={<Trans message="Name" />}
|
||||
className="mb-24"
|
||||
required
|
||||
/>
|
||||
<TitleSelect
|
||||
name="title_id"
|
||||
seasonName="season_num"
|
||||
episodeName="episode_num"
|
||||
className="mb-24"
|
||||
/>
|
||||
<FormImageSelector
|
||||
name="thumbnail"
|
||||
label={<Trans message="Thumbnail" />}
|
||||
diskPrefix="video-thumbnails"
|
||||
className="mb-24"
|
||||
/>
|
||||
<SourceTypeSelect />
|
||||
<SourceField />
|
||||
<QualitySelect />
|
||||
<LanguageSelect />
|
||||
<ContentTypeSelect />
|
||||
</FileUploadProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function SourceTypeSelect() {
|
||||
const {setValue} = useFormContext<CreateVideoPayload>();
|
||||
return (
|
||||
<FormSelect
|
||||
name="type"
|
||||
selectionMode="single"
|
||||
label={<Trans message="Source type" />}
|
||||
className="mb-24"
|
||||
onSelectionChange={() => setValue('src', '')}
|
||||
>
|
||||
<Option
|
||||
value="embed"
|
||||
description={
|
||||
<Trans message="Embed video hosted on another site. Youtube, vimeo etc." />
|
||||
}
|
||||
>
|
||||
<Trans message="Embed" />
|
||||
</Option>
|
||||
<Option
|
||||
value="video"
|
||||
description={
|
||||
<Trans message="Upload a video file or enter a url to direct video (.mp4, .webm, .avi, .mov etc.) hosted online." />
|
||||
}
|
||||
>
|
||||
<Trans message="Direct" />
|
||||
</Option>
|
||||
<Option
|
||||
value="stream"
|
||||
description={<Trans message="Enter a url to HLS or DASH stream." />}
|
||||
>
|
||||
<Trans message="Adaptive stream" />
|
||||
</Option>
|
||||
<Option
|
||||
value="external"
|
||||
description={
|
||||
<Trans message="Enter any url. User will be redirected to this url after clicking the video." />
|
||||
}
|
||||
>
|
||||
<Trans message="Basic url" />
|
||||
</Option>
|
||||
</FormSelect>
|
||||
);
|
||||
}
|
||||
|
||||
function SourceField() {
|
||||
const {watch} = useFormContext<CreateVideoPayload>();
|
||||
const isEmbed = watch('type') === 'embed';
|
||||
const isUrl = watch('type') === 'external';
|
||||
const canUpload = watch('type') === 'video';
|
||||
const {trans} = useTrans();
|
||||
|
||||
if (canUpload) {
|
||||
return <DirectSourceField />;
|
||||
}
|
||||
|
||||
return (
|
||||
<FormTextField
|
||||
required
|
||||
name="src"
|
||||
label={<Trans message="Source" />}
|
||||
className="mb-24"
|
||||
type={isUrl ? 'url' : undefined}
|
||||
placeholder={
|
||||
isEmbed
|
||||
? trans(message('Full embed code snippet or just src url'))
|
||||
: undefined
|
||||
}
|
||||
inputElementType={isEmbed ? 'textarea' : 'input'}
|
||||
rows={4}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DirectSourceField() {
|
||||
const form = useFormContext<CreateVideoPayload>();
|
||||
const [type, setType] = useState<'url' | 'file'>(() => {
|
||||
const src = form.getValues('src');
|
||||
return src.includes('api/v1/file-entries') ||
|
||||
src.includes('storage/title-videos')
|
||||
? 'file'
|
||||
: 'url';
|
||||
});
|
||||
return (
|
||||
<div className="mb-24">
|
||||
<RadioGroup size="sm" className="mb-8" name="direct-type">
|
||||
<Radio
|
||||
value="url"
|
||||
checked={type === 'url'}
|
||||
onChange={e => setType(e.target.value as any)}
|
||||
>
|
||||
<Trans message="Url" />
|
||||
</Radio>
|
||||
<Radio
|
||||
value="file"
|
||||
checked={type === 'file'}
|
||||
onChange={e => setType(e.target.value as any)}
|
||||
>
|
||||
<Trans message="File" />
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
{type === 'file' ? (
|
||||
<FormFileEntryField
|
||||
required
|
||||
name="src"
|
||||
disk={Disk.public}
|
||||
diskPrefix="title-videos"
|
||||
label={<Trans message="Source" />}
|
||||
/>
|
||||
) : (
|
||||
<FormTextField
|
||||
name="src"
|
||||
label={<Trans message="source" />}
|
||||
inputElementType="textarea"
|
||||
rows={2}
|
||||
required
|
||||
type="url"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function QualitySelect() {
|
||||
const {streaming} = useSettings();
|
||||
const qualities = streaming?.qualities || [];
|
||||
return (
|
||||
<FormSelect
|
||||
name="quality"
|
||||
selectionMode="single"
|
||||
label={<Trans message="Quality" />}
|
||||
className="mb-24"
|
||||
>
|
||||
{qualities.map((quality: string) => (
|
||||
<Option value={quality.toLowerCase()} key={quality} capitalizeFirst>
|
||||
<Trans message={quality} />
|
||||
</Option>
|
||||
))}
|
||||
</FormSelect>
|
||||
);
|
||||
}
|
||||
|
||||
function LanguageSelect() {
|
||||
const {trans} = useTrans();
|
||||
const query = useValueLists(['languages']);
|
||||
return (
|
||||
<FormSelect
|
||||
name="language"
|
||||
selectionMode="single"
|
||||
showSearchField
|
||||
searchPlaceholder={trans(message('Search languages'))}
|
||||
label={<Trans message="Language" />}
|
||||
className="mb-24"
|
||||
>
|
||||
{query.data?.languages?.map(language => (
|
||||
<Option value={language.code} key={language.code} capitalizeFirst>
|
||||
<Trans message={language.name} />
|
||||
</Option>
|
||||
))}
|
||||
</FormSelect>
|
||||
);
|
||||
}
|
||||
|
||||
function ContentTypeSelect() {
|
||||
return (
|
||||
<FormSelect
|
||||
name="category"
|
||||
selectionMode="single"
|
||||
label={<Trans message="Content type" />}
|
||||
className="mb-24"
|
||||
>
|
||||
<Option value="trailer">
|
||||
<Trans message="Trailer" />
|
||||
</Option>
|
||||
<Option value="clip">
|
||||
<Trans message="Clip" />
|
||||
</Option>
|
||||
<Option value="featurette">
|
||||
<Trans message="Featurette" />
|
||||
</Option>
|
||||
<Option value="teaser">
|
||||
<Trans message="Teaser" />
|
||||
</Option>
|
||||
<Option value="full">
|
||||
<Trans message="Full Movie or Episode" />
|
||||
</Option>
|
||||
</FormSelect>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user