93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
/**
|
|
* CreateTransitionForm Component
|
|
*
|
|
* Form for creating a new transition (legacy functionality).
|
|
* Transitions are now typically stored directly on navigation elements.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import BaseIcon from '../BaseIcon';
|
|
import { mdiSwapHorizontal } from '@mdi/js';
|
|
import type { AssetOption } from './types';
|
|
|
|
interface CreateTransitionFormProps {
|
|
name: string;
|
|
videoUrl: string;
|
|
supportsReverse: boolean;
|
|
videoOptions: AssetOption[];
|
|
durationNote: string;
|
|
isCreating: boolean;
|
|
onNameChange: (name: string) => void;
|
|
onVideoUrlChange: (url: string) => void;
|
|
onSupportsReverseChange: (value: boolean) => void;
|
|
onSubmit: () => void;
|
|
}
|
|
|
|
const CreateTransitionForm: React.FC<CreateTransitionFormProps> = ({
|
|
name,
|
|
videoUrl,
|
|
supportsReverse,
|
|
videoOptions,
|
|
durationNote,
|
|
isCreating,
|
|
onNameChange,
|
|
onVideoUrlChange,
|
|
onSupportsReverseChange,
|
|
onSubmit,
|
|
}) => {
|
|
return (
|
|
<div className='rounded border border-white/20 p-2 space-y-2'>
|
|
<p className='text-[11px] font-semibold text-white/80'>
|
|
Create next page transition
|
|
</p>
|
|
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
placeholder='Name'
|
|
value={name}
|
|
onChange={(event) => onNameChange(event.target.value)}
|
|
/>
|
|
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={videoUrl}
|
|
onChange={(event) => onVideoUrlChange(event.target.value)}
|
|
>
|
|
<option value=''>Transition video asset</option>
|
|
{videoOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<p className='text-[11px] text-white/60'>
|
|
Transition duration is automatic from video metadata. {durationNote}
|
|
</p>
|
|
|
|
<label className='flex items-center gap-2 text-[11px] text-white/80'>
|
|
<input
|
|
type='checkbox'
|
|
checked={supportsReverse}
|
|
onChange={(event) => onSupportsReverseChange(event.target.checked)}
|
|
/>
|
|
Supports reverse playback
|
|
</label>
|
|
|
|
<button
|
|
type='button'
|
|
className='menu-action-btn'
|
|
onClick={onSubmit}
|
|
disabled={isCreating}
|
|
>
|
|
<BaseIcon path={mdiSwapHorizontal} size={16} />
|
|
<span>
|
|
{isCreating ? 'Creating Transition...' : 'Create Transition'}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CreateTransitionForm;
|