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

更新 input focus

Browse Source
This commit is contained in:
moux1024 2025-10-22 04:57:40 +08:00
parent 6d033f5e59
commit 9f77815ab5
2 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/FamousTemplate.tsx
View File

@ -80,7 +80,25 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
{topTemplates.map((t) => {
return (
<div data-alt="template-item" key={t.id} className="relative h-40 group">
<div
data-alt="template-item"
key={t.id}
className="relative h-40 group"
onMouseEnter={(e) => {
const v = e.currentTarget.querySelector('video') as HTMLVideoElement | null
// @ts-ignore
v?.play?.()
}}
onMouseLeave={(e) => {
const v = e.currentTarget.querySelector('video') as HTMLVideoElement | null
// @ts-ignore
v?.pause?.()
if (v) {
// @ts-ignore
v.currentTime = 0
}
}}
>
<div
data-alt="template-item-placeholder"
className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/0 h-full transition-transform duration-300 ease-out group-hover:scale-105"
@ -98,6 +116,15 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
<div data-alt="template-meta" className="flex-1 min-w-0 absolute bg-black/50 bottom-0 left-0 right-0 px-3 py-3">
<div data-alt="template-name" className="text-base font-bold text-white truncate">{t.name}</div>
</div>
<div data-alt="template-video" className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-out">
<video
src={t.show_url}
className="w-full h-full object-cover object-center"
playsInline
muted
preload="none"
/>
</div>
<div
data-alt="template-hover-overlay"
className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-out pointer-events-none z-10"

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

@ -71,7 +71,6 @@ export default function VideoCreationForm() {
setInputText('');
}
}, [currentTemplate]);
/** Determine if input textarea should be shown based on selected template's freeInput */
const shouldShowInput = useMemo(() => {
if (!isTemplateSelected) {
@ -88,6 +87,11 @@ export default function VideoCreationForm() {
const dispatch = useAppDispatch();
const selectedTemplateId = useAppSelector(state => state.creationTemplate.selectedTemplateId);
useEffect(() => {
setTimeout(() => {
mainTextInputRef.current?.focus();
}, 0);
}, [mainTextInputRef]);
/** Clear current template related states */
const clearTemplateSelection = () => {
handleConfigChange('pcode', '');
@ -393,20 +397,17 @@ export default function VideoCreationForm() {
)}
{/* Template Description */}
{inputPlaceholder && (
<div data-alt="template-description-wrapper" className="px-4">
<div data-alt="template-description-text" className="italic text-[#606775] text-sm">{inputPlaceholder}</div>
<div data-alt="template-description-wrapper" className="px-4 pt-1">
<div data-alt="template-description-text" className="text-white/25 text-sm">{inputPlaceholder}</div>
</div>
)}
{/* Text Input Area - Middle */}
{shouldShowInput && (
<div data-alt="text-input-wrapper" className="flex-1 flex px-4 py-2">
{isTemplateSelected?.freeInput[0].input_name && (
<div data-alt="template-description-text" className="text-white/60 text-base pr-2 flex-shrink-0 capitalize">{`${isTemplateSelected?.freeInput[0].input_name}:`}</div>
)}
<textarea
data-alt="main-text-input"
ref={mainTextInputRef}
className="w-full h-full bg-transparent text-gray-300 text-base placeholder-gray-500 resize-none outline-none border-none"
className="w-full h-full bg-transparent text-gray-300 text-base placeholder:italic placeholder-gray-400 resize-none outline-none border-none"
placeholder={isTemplateSelected?.freeInput[0].user_tips || "Describe the story you want to make..."}
value={inputText}
onChange={(e) => setInputText(e.target.value)}