91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
/**
|
|
* MediaSettingsSection
|
|
*
|
|
* Settings for video_player and audio_player element types.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import FormField from '../FormField';
|
|
import { isVideoPlayerElementType } from '../../lib/elementDefaults';
|
|
import type { MediaSettingsSectionProps } from './types';
|
|
|
|
const MediaSettingsSection: React.FC<MediaSettingsSectionProps> = ({
|
|
elementType,
|
|
mediaUrl,
|
|
mediaAutoplay,
|
|
mediaLoop,
|
|
mediaMuted,
|
|
onChange,
|
|
context,
|
|
videoAssetOptions = [],
|
|
audioAssetOptions = [],
|
|
}) => {
|
|
const isConstructor = context === 'constructor';
|
|
const isVideo = isVideoPlayerElementType(elementType);
|
|
const assetOptions = isVideo ? videoAssetOptions : audioAssetOptions;
|
|
|
|
return (
|
|
<div className='space-y-4'>
|
|
{isConstructor ? (
|
|
<FormField label={isVideo ? 'Video asset' : 'Audio asset'}>
|
|
<select
|
|
value={mediaUrl}
|
|
onChange={(event) => onChange('mediaUrl', event.target.value)}
|
|
>
|
|
<option value=''>Not selected</option>
|
|
{assetOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
) : (
|
|
<FormField label='Media URL'>
|
|
<input
|
|
value={mediaUrl}
|
|
onChange={(event) => onChange('mediaUrl', event.target.value)}
|
|
/>
|
|
</FormField>
|
|
)}
|
|
|
|
<FormField label='Playback'>
|
|
<div className='flex flex-wrap gap-4'>
|
|
<label className='inline-flex items-center gap-2 text-sm'>
|
|
<input
|
|
type='checkbox'
|
|
checked={mediaAutoplay}
|
|
onChange={(event) =>
|
|
onChange('mediaAutoplay', event.target.checked)
|
|
}
|
|
/>
|
|
Autoplay
|
|
</label>
|
|
<label className='inline-flex items-center gap-2 text-sm'>
|
|
<input
|
|
type='checkbox'
|
|
checked={mediaLoop}
|
|
onChange={(event) => onChange('mediaLoop', event.target.checked)}
|
|
/>
|
|
Loop
|
|
</label>
|
|
{isVideo && (
|
|
<label className='inline-flex items-center gap-2 text-sm'>
|
|
<input
|
|
type='checkbox'
|
|
checked={mediaMuted}
|
|
onChange={(event) =>
|
|
onChange('mediaMuted', event.target.checked)
|
|
}
|
|
/>
|
|
Muted
|
|
</label>
|
|
)}
|
|
</div>
|
|
</FormField>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MediaSettingsSection;
|