From ae807f33e972a559c59568741988cbf099f66b00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?= <7854742+wang_rumeng@user.noreply.gitee.com> Date: Tue, 21 Oct 2025 15:53:21 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=88=9B=E5=BB=BA=E5=85=A5?= =?UTF-8?q?=E5=8F=A3=EF=BC=9A=E6=A8=A1=E6=9D=BF=E9=80=89=E6=8B=A9=E5=85=BC?= =?UTF-8?q?=E5=AE=B9H5=E3=80=81=E9=80=89=E4=B8=AD=E6=A8=A1=E6=9D=BF?= =?UTF-8?q?=E6=B2=A1=E6=9C=89=E9=85=8D=E7=BD=AE=E6=96=87=E6=9C=AC=20?= =?UTF-8?q?=E4=B8=8D=E5=B1=95=E7=A4=BA=E8=BE=93=E5=85=A5=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/TemplatePreviewModal.tsx | 166 +++++++++++++++--- .../CreateInput/VideoCreationForm.tsx | 35 +++- components/pages/create-video/CreateVideo.tsx | 2 +- 3 files changed, 164 insertions(+), 39 deletions(-) diff --git a/components/common/TemplatePreviewModal.tsx b/components/common/TemplatePreviewModal.tsx index 5b3ed8b..97ec233 100644 --- a/components/common/TemplatePreviewModal.tsx +++ b/components/common/TemplatePreviewModal.tsx @@ -1,7 +1,8 @@ "use client"; -import { useEffect, useState } from 'react'; -import { X } from 'lucide-react'; +import { useEffect, useState, useRef } from 'react'; +import { X, ChevronDown, ChevronUp } from 'lucide-react'; +import { useDeviceType } from '@/hooks/useDeviceType'; interface TemplatePreviewModalProps { /** Control visibility */ @@ -23,6 +24,7 @@ interface TemplatePreviewModalProps { /** * Fullscreen, Tailwind-based template preview modal with video content. * Overlays title/description if provided and supports an optional primary action. + * Supports expand/collapse for long descriptions and H5 responsive design. */ export function TemplatePreviewModal({ open, @@ -31,27 +33,62 @@ export function TemplatePreviewModal({ title, description, onPrimaryAction, - primaryLabel = 'Try it', + primaryLabel = 'Try it Free', }: TemplatePreviewModalProps) { const [isReady, setIsReady] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); + const [showExpandButton, setShowExpandButton] = useState(false); + const descriptionRef = useRef(null); + const { isMobile } = useDeviceType(); useEffect(() => { if (!open) { setIsReady(false); + setIsExpanded(false); } }, [open]); + useEffect(() => { + if (isReady && description && descriptionRef.current) { + const element = descriptionRef.current; + const isOverflowing = element.scrollHeight > element.clientHeight; + setShowExpandButton(isOverflowing); + } + }, [isReady, description]); + if (!open || !videoUrl) return null; return ( -
+ <> + +
e.stopPropagation()} >
+
+ ); } diff --git a/components/pages/create-video/CreateInput/VideoCreationForm.tsx b/components/pages/create-video/CreateInput/VideoCreationForm.tsx index 54df7bf..6f130a2 100644 --- a/components/pages/create-video/CreateInput/VideoCreationForm.tsx +++ b/components/pages/create-video/CreateInput/VideoCreationForm.tsx @@ -63,6 +63,21 @@ export default function VideoCreationForm() { void getTemplateStoryList(); }, [getTemplateStoryList]); + /** Clear inputText when currentTemplate changes */ + useEffect(() => { + if (currentTemplate) { + setInputText(''); + } + }, [currentTemplate]); + + /** Determine if input textarea should be shown based on selected template's freeInput */ + const shouldShowInput = useMemo(() => { + if (!isTemplateSelected) { + return true; + } + return isTemplateSelected.freeInput && isTemplateSelected.freeInput.length > 0; + }, [isTemplateSelected]); + const characterInputRef = useRef(null); const sceneInputRef = useRef(null); const propInputRef = useRef(null); @@ -350,15 +365,17 @@ export default function VideoCreationForm() { )} {/* Text Input Area - Middle */} -
-