更新 input focus

components/FamousTemplate.tsx

@@ -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"

components/pages/create-video/CreateInput/VideoCreationForm.tsx

@@ -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-wrapper" className="px-4 pt-1">
-                        <div data-alt="template-description-text" className="italic text-[#606775] text-sm">{inputPlaceholder}</div>
+                        <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)}