xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

模版禁用时长选择

Browse Source
This commit is contained in:
北枳 2025-10-21 22:17:49 +08:00
parent 93269b2bde
commit dcb07e6c6c
3 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/pages/create-video/CreateInput/ConfigPanel.tsx
View File

@ -20,6 +20,8 @@ interface ConfigPanelProps {
isMobile?: boolean;
/** Whether it's desktop device */
isDesktop?: boolean;
/** Whether to disable duration selection */
disableDuration?: boolean;
}
/**
@ -36,6 +38,7 @@ export const ConfigPanel = ({
onConfigChange,
isMobile = false,
isDesktop = true,
disableDuration = false,
}: ConfigPanelProps) => {
/** Language dropdown menu items */
const languageMenuItems = LanguageOptions.map((option) => ({
@ -104,10 +107,16 @@ export const ConfigPanel = ({
className: 'bg-[#1a1a1a] border border-white/10'
}}
trigger={['click']}
disabled={disableDuration}
>
<button
data-alt="config-video-duration"
className="h-8 px-2 rounded-full border border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center gap-2 text-gray-300 hover:text-cyan-400"
className={`h-8 px-2 rounded-full border transition-all duration-200 flex items-center gap-2 ${
disableDuration
? 'opacity-40 cursor-not-allowed border-white/20 bg-transparent text-gray-400'
: 'border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 text-gray-300 hover:text-cyan-400'
}`}
disabled={disableDuration}
>
<ClockCircleOutlined className="text-base" />
<span className="text-sm capitalize">{currentDuration}</span>

12
components/pages/create-video/CreateInput/MobileConfigModal.tsx
View File

@ -22,6 +22,8 @@ interface MobileConfigModalProps {
configOptions: ConfigOptions;
/** Handler for configuration changes */
onConfigChange: <K extends keyof ConfigOptions>(key: K, value: ConfigOptions[K], exclude?: boolean) => void;
/** Whether to disable duration selection */
disableDuration?: boolean;
}
/**
@ -38,6 +40,7 @@ export function MobileConfigModal({
onClose,
configOptions,
onConfigChange,
disableDuration = false,
}: MobileConfigModalProps) {
const [animeOptions, setAnimeOptions] = useState<Array<{ name: string; pcode: string }>>([]);
@ -170,14 +173,17 @@ export function MobileConfigModal({
<ClockCircleOutlined className="text-base text-cyan-400" />
<span className="text-sm text-gray-300">Duration</span>
</div>
<div className="flex items-center p-0.5 rounded-lg border border-white/20 bg-black/20">
<div className={`flex items-center p-0.5 rounded-lg border border-white/20 bg-black/20 ${disableDuration ? 'opacity-40' : ''}`}>
{VideoDurationOptions.map((option) => (
<button
key={option.value}
data-alt={`duration-${option.value}`}
onClick={() => onConfigChange('videoDuration', option.value as VideoDurationValue)}
onClick={() => !disableDuration && onConfigChange('videoDuration', option.value as VideoDurationValue)}
disabled={disableDuration}
className={`h-7 px-3 rounded-md transition-all duration-200 text-xs font-medium ${
configOptions.videoDuration === option.value
disableDuration
? 'cursor-not-allowed'
: configOptions.videoDuration === option.value
? 'bg-cyan-400/20 text-cyan-400'
: 'bg-transparent text-gray-400 hover:text-gray-300'
}`}

4
components/pages/create-video/CreateInput/VideoCreationForm.tsx
View File

@ -301,7 +301,7 @@ export default function VideoCreationForm() {
language: configOptions.language,
aspect_ratio: configOptions.aspect_ratio,
expansion_mode: configOptions.expansion_mode,
video_duration: configOptions.videoDuration,
video_duration: isTemplateSelected ? 'unlimited' : configOptions.videoDuration,
use_img2video: photos.length > 0,
pcode: configOptions.pcode === 'portrait' ? '' : configOptions.pcode,
};
@ -556,6 +556,7 @@ export default function VideoCreationForm() {
onConfigChange={handleConfigChange}
isMobile={isMobile}
isDesktop={isDesktop}
disableDuration={isTemplateSelected ? true : false}
/>
) : (
<button
@ -590,6 +591,7 @@ export default function VideoCreationForm() {
onClose={() => setConfigModalVisible(false)}
configOptions={configOptions}
onConfigChange={handleConfigChange}
disableDuration={isTemplateSelected ? true : false}
/>
{/* Add Item Modal */}