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

Merge branch 'dev' into prod

Browse Source
This commit is contained in:
moux1024 2025-10-12 04:18:32 +08:00
commit 1ccb69e747
13 changed files with 822 additions and 628 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/globals.css
View File

@ -307,6 +307,39 @@ body {
}
}
.mobile-textarea, .mobile-input {
.mobile-textarea,
.mobile-input {
font-size: 16px !important;
}
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.custom-scrollbar:hover {
scrollbar-color: rgba(156, 163, 175, 0.2) rgba(0, 0, 0, 0);
}
/* Webkit browsers (Chrome, Safari) */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
background: rgba(156, 163, 175, 0.5);
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb:hover {
background: rgba(156, 163, 175, 0.7);
}

34
app/pricing/page.tsx
View File

@ -77,6 +77,19 @@ function HomeModule5() {
}[]
>(() => {
return plans.map((plan) => {
const rawDescription = plan.description ?? '';
let creditsText: string = rawDescription;
try {
const parsed = JSON.parse(rawDescription) as { period: 'month' | 'year'; content: string }[];
if (Array.isArray(parsed)) {
const match = parsed.find((item) => item && item.period === billingType);
if (match && typeof match.content === 'string') {
creditsText = match.content;
}
}
} catch {
// If not valid JSON, keep original string
}
return {
title: plan.display_name || plan.name,
price:
@ -86,7 +99,7 @@ function HomeModule5() {
originalPrice: plan.price_month / 100,
monthlyPrice: billingType === "month" ? 0 : Math.round(plan.price_year / 12) / 100,
discountMsg: `Saves $${(plan.price_month * 12 - plan.price_year) / 100} by billing yearly!`,
credits: plan.description,
credits: creditsText,
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
issubscribed: plan.is_subscribed,
features: plan.features || [],
@ -150,9 +163,26 @@ function HomeModule5() {
xl:text-[3.375rem] xl:leading-[110%] xl:mb-[1.5rem]
2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-[1.5rem]"
>
Pick a plan and make it yours
CREATE FOR $0.
</h2>
<p
className="text-white font-normal text-center
/* 移动端字体 */
text-[1rem] leading-[140%]
/* 平板字体 */
sm:text-[1.25rem] sm:leading-[140%]
/* 小屏笔记本字体 */
md:text-[1.5rem] md:leading-[140%]
/* 大屏笔记本字体 */
lg:text-[1.6rem] lg:leading-[140%]
/* 桌面端字体 */
xl:text-[1.7rem] xl:leading-[140%]
/* 大屏显示器字体 */
2xl:text-[1.8rem] 2xl:leading-[140%]"
>
Remove watermark with Credits.
</p>
{/* 计费切换 */}
<div
className="flex bg-black rounded-full border border-white/20

34
app/share/page.tsx
View File

@ -267,7 +267,7 @@ export default function SharePage(): JSX.Element {
<span className="text-sm font-medium text-custom-blue/50">Step 3</span>
<span className="rounded px-2 py-0.5 text-xs text-white bg-custom-purple/50">Reward</span>
</div>
<p data-alt="step-desc" className="mt-2 text-sm text-white/70">You both receive rewards after your friend activates their account.</p>
<p data-alt="step-desc" className="mt-2 text-sm text-white/70">You will receive <strong>500 credits</strong> after your friends successfully sign in.</p>
</li>
</ol>
</div>
@ -275,33 +275,23 @@ export default function SharePage(): JSX.Element {
<div data-alt="rules-col" className="rounded-md">
<h2 data-alt="section-title" className="text-lg font-medium text-white mb-4">MovieFlow Credits Rewards Program</h2>
<div className='p-4 space-y-4'>
<p className="text-sm">Welcome to MovieFlow! Our Credits Program is designed to reward your growth and contributions. Credits can be redeemed for premium templates, effects, and membership time.</p>
<p className="text-sm">
Welcome to MovieFlow! Our Credits Program is designed to reward your growth and contributions.
<br />
Credits can be redeemed for <strong>watermark</strong> removal.
<br />
In the future, credits may be used to redeem advanced template features.
</p>
<div className="content">
<h2 className="text-medium font-medium text-white">How to Earn Credits?</h2>
<div className="reward-section welcome">
<h3 className="text-medium font-medium text-white">Welcome Bonus</h3>
<p className='text-sm'>All <strong>new users</strong> receive a bonus of <span className="credit-amount">500 credits</span> upon successful registration!</p>
</div>
<div className="reward-section invite">
<h3 className="text-medium font-medium text-white">Invite & Earn</h3>
<p className='text-sm'>Invite friends to join using your unique referral link. Both you and your friend will get <span className="credit-amount">500 credits</span> once they successfully sign up.</p>
<div className="highlight">
<p className='text-sm'>If your invited friend completes their first purchase, you will receive a <strong>bonus equal to 20% of the credits</strong> they earn from that purchase.</p>
</div>
</div>
<div className="reward-section login">
<h3 className="text-medium font-medium text-white">Daily Login</h3>
<p className='text-sm'>Starting the day after registration, log in daily to claim <span className="credit-amount">100 credits</span>.</p>
<p className='text-sm'>This reward can be claimed for <strong>7 consecutive days</strong>.</p>
<div className="note">
<p className='text-sm'><strong>Please note:</strong> Daily login credits will <strong>reset</strong> automatically on the 8th day, so remember to use them in time!</p>
</div>
<p className='text-sm'>Invite friends to join using your unique referral link.</p>
<p className='text-sm'>You will get <strong>500 credits</strong> once they successfully sign in.</p>
<br />
<p className='text-sm'>When your invited friends complete their first purchase, you will receive <strong>a 20% share of the credits</strong> they earn from that purchase.</p>
</div>
</div>
</div>

2
components/ChatInputBox/H5TemplateDrawer.tsx
View File

@ -570,7 +570,7 @@ export const H5TemplateDrawer = ({
data-alt="items-section-title"
className="text-base font-semibold text-white mb-3"
>
input Configuration
Input Configuration
</h3>
<textarea
data-alt="h5-template-free-input-top"

20
components/ChatInputBox/PcTemplateModal.tsx
View File

@ -284,9 +284,9 @@ export const PcTemplateModal = ({
// 故事编辑器渲染
const storyEditorRender = () => {
return selectedTemplate ? (
<div className="relative h-full">
<div className="h-full flex flex-col overflow-hidden">
{/* 模板信息头部 - 增加顶部空间 */}
<div className="flex gap-3 py-4 border-b border-white/[0.1] h-[300px]">
<div className="flex gap-3 py-4 border-b border-white/[0.1] max-h-[300px]">
{/* 左侧图片 */}
<div className="w-1/4">
<Image
@ -321,13 +321,14 @@ export const PcTemplateModal = ({
</div>
</div>
<div className="flex-1 overflow-y-auto custom-scrollbar">
{/* 角色配置区域 */}
{selectedTemplate?.storyRole &&
selectedTemplate.storyRole.length > 0 && (
<div className="pt-2 border-t border-white/10">
<h3
data-alt="roles-section-title"
className="text-lg font-semibold text-white mb-4"
className="text-lg font-semibold text-white mb-2"
>
Character Configuration
</h3>
@ -702,20 +703,18 @@ export const PcTemplateModal = ({
{/** 自由输入文字 */}
{freeInputLayout === 'top' && selectedTemplate?.freeInput && selectedTemplate.freeInput.length > 0 && (
<div className="py-2 flex-1 flex flex-col" style={{
height: 'calc(70vh - 300px - 8rem)'
}}>
<div className="pt-2 pb-6 h-full flex flex-col">
<h3
data-alt="items-section-title"
className="text-lg font-semibold text-white mb-4"
className="text-lg font-semibold text-white mb-2"
>
input Configuration
Input Configuration
</h3>
<textarea
data-alt="pc-template-free-input-top"
value={selectedTemplate?.freeInput[0].free_input_text || ""}
placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
className="w-full min-h-[50px] max-h-[150px] flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
onChange={(e) => {
// 更新自由输入文字字段
const updatedTemplate = {
@ -730,6 +729,7 @@ export const PcTemplateModal = ({
/>
</div>
)}
</div>
<div className=" absolute -bottom-8 right-0 w-full flex items-center justify-end gap-2">
{/** 自由输入文字 */}
@ -813,7 +813,7 @@ export const PcTemplateModal = ({
<div className="flex gap-4 pb-8 flex-1 overflow-y-hidden">
{templateListRender()}
<div className="flex-1">{storyEditorRender()}</div>
<div className="flex-1 relative">{storyEditorRender()}</div>
</div>
</div>
</GlobalLoad>

4
components/layout/top-bar.tsx
View File

@ -380,7 +380,7 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
</p>
</div>
{/* Sign-in entry */}
<div>
{/* <div>
<button
className="px-2 py-1 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors disabled:opacity-50 flex items-center justify-center"
onClick={() => handleSignin()}
@ -388,7 +388,7 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
>
<CalendarDays className="h-3 w-3" />
</button>
</div>
</div> */}
</div>
{/* AI 积分 */}

40
components/pages/create-to-video2.tsx
View File

@ -1,6 +1,7 @@
"use client";
import { useState, useEffect, useRef, useCallback } from 'react';
import type { MouseEvent } from 'react';
import { Loader2, Download } from 'lucide-react';
import { useRouter } from 'next/navigation';
import './style/create-to-video2.css';
@ -11,7 +12,9 @@ import cover_image1 from '@/public/assets/cover_image3.jpg';
import cover_image2 from '@/public/assets/cover_image_shu.jpg';
import { motion } from 'framer-motion';
import { Tooltip, Button } from 'antd';
import { downloadVideo, getFirstFrame } from '@/utils/tools';
import { downloadVideo, downloadAllVideos, getFirstFrame } from '@/utils/tools';
import { showDownloadOptionsModal } from '@/components/pages/work-flow/download-options-modal';
import { post } from '@/api/request';
import Masonry from 'react-masonry-css';
import debounce from 'lodash/debounce';
@ -263,6 +266,34 @@ export default function CreateToVideo2() {
}, []);
const renderProjectCard = (project: MovieProject): JSX.Element => {
const handleDownloadClick = async (e: MouseEvent, project: MovieProject) => {
console.log(project);
e.stopPropagation();
showDownloadOptionsModal({
currentVideoIndex: 0,
totalVideos: 1,
isCurrentVideoFailed: false,
isFinalStage: true,
projectId: project.project_id,
onDownloadCurrent: async (withWatermark: boolean) => {
setIsLoadingDownloadBtn(true);
try {
const json: any = await post('/movie/download_video', {
project_id: project.project_id,
watermark: withWatermark
});
const url = json?.data?.download_url as string | undefined;
if (url) {
await downloadVideo(url);
}
} finally {
setIsLoadingDownloadBtn(false);
}
},
onDownloadAll: ()=>{}
});
};
// 根据 aspect_ratio 计算纵横比
const getAspectRatio = () => {
switch (project.aspect_ratio) {
@ -320,12 +351,7 @@ export default function CreateToVideo2() {
{(project.final_video_url || project.final_simple_video_url) && (
<div className="absolute top-1 right-1">
<Tooltip placement="top" title="Download">
<Button size="small" type="text" disabled={isLoadingDownloadBtn} className="w-[2.5rem] h-[2.5rem] rounded-full items-center justify-center p-0 hidden group-hover:flex transition-all duration-300 hover:bg-white/15" onClick={async (e) => {
e.stopPropagation(); // 阻止事件冒泡
setIsLoadingDownloadBtn(true);
await downloadVideo(project.final_video_url || project.final_simple_video_url);
setIsLoadingDownloadBtn(false);
}}>
<Button size="small" type="text" disabled={isLoadingDownloadBtn} className="w-[2.5rem] h-[2.5rem] rounded-full items-center justify-center p-0 hidden group-hover:flex transition-all duration-300 hover:bg-white/15" onClick={(e) => handleDownloadClick(e, project)}>
{isLoadingDownloadBtn ? <Loader2 className="w-4 h-4 animate-spin text-white" /> : <Download className="w-4 h-4 text-white" />}
</Button>
</Tooltip>

34
components/pages/home-page2.tsx
View File

@ -1223,6 +1223,19 @@ function HomeModule5() {
}[]
>(() => {
return plans.map((plan) => {
const rawDescription = plan.description ?? '';
let creditsText: string = rawDescription;
try {
const parsed = JSON.parse(rawDescription) as { period: 'month' | 'year'; content: string }[];
if (Array.isArray(parsed)) {
const match = parsed.find((item) => item && item.period === billingType);
if (match && typeof match.content === 'string') {
creditsText = match.content;
}
}
} catch {
// If not valid JSON, keep original string
}
return {
title: plan.display_name || plan.name,
price:
@ -1232,7 +1245,7 @@ function HomeModule5() {
originalPrice: plan.price_month / 100,
monthlyPrice: billingType === "month" ? 0 : Math.round(plan.price_year / 12) / 100,
discountMsg: `Saves $${(plan.price_month * 12 - plan.price_year) / 100} by billing yearly!`,
credits: plan.description,
credits: creditsText,
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
issubscribed: plan.is_subscribed,
features: plan.features || [],
@ -1302,9 +1315,26 @@ function HomeModule5() {
/* 大屏显示器字体 */
2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-[1.5rem]"
>
Pick a plan and make it yours
CREATE FOR $0.
</h2>
<p
className="text-white font-normal text-center
/* 移动端字体 */
text-[1rem] leading-[140%]
/* 平板字体 */
sm:text-[1.25rem] sm:leading-[140%]
/* 小屏笔记本字体 */
md:text-[1.5rem] md:leading-[140%]
/* 大屏笔记本字体 */
lg:text-[1.6rem] lg:leading-[140%]
/* 桌面端字体 */
xl:text-[1.7rem] xl:leading-[140%]
/* 大屏显示器字体 */
2xl:text-[1.8rem] 2xl:leading-[140%]"
>
Remove watermark with Credits.
</p>
{/* 计费切换 */}
<div
className="flex bg-black rounded-full border border-white/20

1
components/pages/usage-view.tsx
View File

@ -181,6 +181,7 @@ const UsageView: React.FC = () => {
const formatSource = useCallback((source: string | undefined) => {
if (!source) return '-';
const map: Record<string, string> = {
video_download: 'Video Download',
video_generation: 'Video Generation',
manual_admin: 'Manual (Admin)',
subscription: 'Subscription',

187
components/pages/work-flow/H5MediaViewer.tsx
View File

@ -9,9 +9,11 @@ import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';
import ScriptLoading from './script-loading';
import { GlassIconButton } from '@/components/ui/glass-icon-button';
import { downloadVideo, downloadAllVideos, getFirstFrame } from '@/utils/tools';
import { post } from '@/api/request';
import { Drawer } from 'antd';
import { useSearchParams } from 'next/navigation';
import error_image from '@/public/assets/error.webp';
import { createRoot, Root } from 'react-dom/client';
import { showDownloadOptionsModal } from './download-options-modal';
interface H5MediaViewerProps {
/** 任务对象，包含各阶段数据 */
@ -51,143 +53,6 @@ interface H5MediaViewerProps {
aspectRatio?: string;
}
interface DownloadOptionsModalProps {
onDownloadCurrent: () => void;
onDownloadAll: () => void;
onClose: () => void;
currentVideoIndex: number;
totalVideos: number;
/** 当前视频是否生成失败 */
isCurrentVideoFailed: boolean;
/** 是否为最终视频阶段 */
isFinalStage?: boolean;
}
function DownloadOptionsModal(props: DownloadOptionsModalProps) {
const { onDownloadCurrent, onDownloadAll, onClose, currentVideoIndex, totalVideos, isCurrentVideoFailed, isFinalStage = false } = props;
const containerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const originalOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = originalOverflow;
};
}, []);
return (
<div
ref={containerRef}
data-alt="download-options-overlay"
className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60"
>
<div
data-alt="download-options-modal"
className="relative w-11/12 max-w-sm rounded-2xl bg-white/5 border border-white/10 backdrop-blur-xl shadow-2xl p-6 text-white"
role="dialog"
aria-modal="true"
aria-labelledby="download-options-title"
onClick={(e) => e.stopPropagation()}
>
<button
data-alt="close-button"
className="absolute top-4 right-4 w-6 h-6 rounded-full bg-white/10 hover:bg-white/20 border border-white/10 flex items-center justify-center text-white transition-all active:scale-95"
onClick={onClose}
aria-label="Close"
>
<X size={14} />
</button>
<div data-alt="modal-header" className="flex flex-col items-center text-center gap-2">
<div data-alt="modal-icon" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-lg text-purple-400">
<Download />
</div>
<h3 id="download-options-title" data-alt="modal-title" className="text-base font-semibold">
Download Options
</h3>
</div>
<div data-alt="modal-body" className="mt-4">
<p data-alt="modal-description" className="text-sm text-white/80 text-center">
Choose your download preference
</p>
{!isCurrentVideoFailed && (
<div data-alt="stats-info" className="mt-3 rounded-lg bg-white/5 border border-white/10 p-3 text-center">
<div className="text-xs text-white/60">Current video</div>
<div className="text-sm font-medium">{currentVideoIndex + 1} / {totalVideos}</div>
</div>
)}
</div>
<div data-alt="modal-actions" className="mt-6 space-y-3">
{!isCurrentVideoFailed && (
<button
data-alt="download-current-button"
className="w-full px-4 py-2.5 rounded-lg bg-gradient-to-br from-purple-600/80 to-purple-700/80 hover:from-purple-500/80 hover:to-purple-600/80 text-white font-medium transition-all flex items-center justify-center gap-2"
onClick={() => {
onDownloadCurrent();
onClose();
}}
>
<Download size={16} />
{isFinalStage ? 'Download Final Video' : 'Download Current Video'}
</button>
)}
<button
data-alt="download-all-button"
className="w-full px-4 py-2.5 rounded-lg bg-gradient-to-br from-purple-500/60 to-purple-600/60 hover:from-purple-500/80 hover:to-purple-600/80 text-white font-medium transition-all flex items-center justify-center gap-2 border border-purple-400/30"
onClick={() => {
onDownloadAll();
onClose();
}}
>
<ArrowDownWideNarrow size={16} />
Download All Videos ({totalVideos})
</button>
</div>
</div>
</div>
);
}
/**
* Opens a download options modal with glass morphism style.
* @param {DownloadOptionsModalProps} options - download options and callbacks.
*/
function showDownloadOptionsModal(options: Omit<DownloadOptionsModalProps, 'onClose'>): void {
if (typeof window === 'undefined' || typeof document === 'undefined') {
return;
}
const mount = document.createElement('div');
mount.setAttribute('data-alt', 'download-options-modal-root');
document.body.appendChild(mount);
let root: Root | null = null;
try {
root = createRoot(mount);
} catch {
if (mount.parentNode) {
mount.parentNode.removeChild(mount);
}
return;
}
const close = () => {
try {
root?.unmount();
} finally {
if (mount.parentNode) {
mount.parentNode.removeChild(mount);
}
}
};
root.render(
<DownloadOptionsModal {...options} onClose={close} />
);
}
/**
* 面向 H5 的媒体预览组件。
* - 除剧本阶段外，统一使用 antd Carousel 展示 图片/视频。
@ -221,7 +86,8 @@ export function H5MediaViewer({
const [isPlaying, setIsPlaying] = useState<boolean>(false);
const [isCatalogOpen, setIsCatalogOpen] = useState<boolean>(false);
const [isEdgeBrowser, setIsEdgeBrowser] = useState<boolean>(false);
const searchParams = useSearchParams();
const episodeId = searchParams.get('episodeId') || '';
/** 解析形如 "16:9" 的比例字符串 */
const parseAspect = (input?: string): { w: number; h: number } => {
const parts = (typeof input === 'string' ? input.split(':') : []);
@ -611,18 +477,19 @@ export function H5MediaViewer({
currentVideoIndex: hasFinalVideo ? activeIndex + 1 : activeIndex,
totalVideos,
isCurrentVideoFailed,
onDownloadCurrent: async () => {
if (hasUrl) {
await downloadVideo(current.urls[0]);
}
},
onDownloadAll: async () => {
const all = (taskObject.videos?.data ?? []).flatMap((v: any) => v?.urls ?? []);
if (hasFinalVideo) {
all.push(taskObject.final.url);
}
await downloadAllVideos(all);
projectId: episodeId,
videoId: current?.video_id,
onDownloadCurrent: async (withWatermark: boolean) => {
if (!current?.video_id) return;
const json: any = await post('/movie/download_video', {
project_id: episodeId,
video_id: current.video_id,
watermark: withWatermark
});
const url = json?.data?.download_url as string | undefined;
if (url) await downloadVideo(url);
},
onDownloadAll: ()=>{}
});
}}
/>
@ -660,18 +527,16 @@ export function H5MediaViewer({
totalVideos,
isCurrentVideoFailed: false,
isFinalStage: true,
onDownloadCurrent: async () => {
if (finalUrl) {
await downloadVideo(finalUrl);
}
},
onDownloadAll: async () => {
const all = (taskObject.videos?.data ?? []).flatMap((v: any) => v?.urls ?? []);
if (finalUrl) {
all.push(finalUrl);
}
await downloadAllVideos(all);
projectId: episodeId,
onDownloadCurrent: async (withWatermark: boolean) => {
const json: any = await post('/movie/download_video', {
project_id: episodeId,
watermark: withWatermark
});
const url = json?.data?.download_url as string | undefined;
if (url) await downloadVideo(url);
},
onDownloadAll: ()=>{}
});
}}
/>

182
components/pages/work-flow/download-options-modal.tsx Normal file
View File

@ -0,0 +1,182 @@
'use client';
import React, { useEffect, useRef, useState } from 'react';
import { Checkbox } from 'antd';
import { createRoot, Root } from 'react-dom/client';
import { X, Download, ArrowDownWideNarrow } from 'lucide-react';
import { post } from '@/api/request';
interface DownloadOptionsModalProps {
onDownloadCurrent: (withWatermark: boolean) => void;
onDownloadAll: (withWatermark: boolean) => void;
onClose: () => void;
currentVideoIndex: number;
totalVideos: number;
/** 当前视频是否生成失败 */
isCurrentVideoFailed: boolean;
/** 是否为最终视频阶段 */
isFinalStage?: boolean;
/** 项目ID */
projectId?: string;
/** 视频ID（分镜视频可用） */
videoId?: string;
}
/**
* Download options modal component with glass morphism style.
* @param {DownloadOptionsModalProps} props - modal properties.
*/
function DownloadOptionsModal(props: DownloadOptionsModalProps) {
const { onDownloadCurrent, onDownloadAll, onClose, currentVideoIndex, totalVideos, isCurrentVideoFailed, isFinalStage = false, projectId, videoId } = props;
const containerRef = useRef<HTMLDivElement | null>(null);
const [withWatermark, setWithWatermark] = useState<boolean>(true);
const [baseAmount, setBaseAmount] = useState<number>(0);
const [isCheckingBalance, setIsCheckingBalance] = useState<boolean>(false);
useEffect(() => {
const originalOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = originalOverflow;
};
}, []);
// 监听水印选择变化，请求价格信息
useEffect(() => {
let aborted = false;
const checkBalance = async () => {
try {
if (!aborted) setIsCheckingBalance(true);
const json: any = await post('/movie/download_video', {
project_id: projectId,
video_id: videoId,
watermark: withWatermark,
check_balance: true
});
const amount = json?.data?.base_amount;
if (!aborted) setBaseAmount(Number.isFinite(amount) ? Number(amount) : 0);
} catch {
if (!aborted) setBaseAmount(0);
} finally {
if (!aborted) setIsCheckingBalance(false);
}
};
void checkBalance();
return () => {
aborted = true;
};
}, [withWatermark]);
return (
<div
ref={containerRef}
data-alt="download-options-overlay"
className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60"
>
<div
data-alt="download-options-modal"
className="relative w-11/12 max-w-sm rounded-2xl bg-white/5 border border-white/10 backdrop-blur-xl shadow-2xl p-6 text-white"
role="dialog"
aria-modal="true"
aria-labelledby="download-options-title"
onClick={(e) => e.stopPropagation()}
>
<button
data-alt="close-button"
className="absolute top-4 right-4 w-6 h-6 rounded-full bg-white/10 hover:bg-white/20 border border-white/10 flex items-center justify-center text-white transition-all active:scale-95"
onClick={onClose}
aria-label="Close"
>
<X size={14} />
</button>
<div data-alt="modal-header" className="flex flex-col items-center text-center gap-2">
<div data-alt="modal-icon" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-lg text-purple-400">
<Download />
</div>
<h3 id="download-options-title" data-alt="modal-title" className="text-base font-semibold">
Download Options
</h3>
</div>
<div data-alt="modal-body" className="mt-4">
<p data-alt="modal-description" className="text-sm text-white/80 text-center">
Choose your download preference
</p>
<div data-alt="price-indicator" className="mt-2 text-center text-sm font-medium">
{!withWatermark && baseAmount && baseAmount !== 0 ? (
<span className="text-red-400">-{baseAmount} credits</span>
) : (
<span className="text-green-400">free</span>
)}
</div>
<div data-alt="watermark-select" className="mt-3 flex items-center justify-center">
<div data-alt="watermark-toggle" className="inline-flex items-center gap-2 text-sm text-white/90">
<Checkbox
data-alt="watermark-checkbox"
checked={!withWatermark}
onChange={(e) => setWithWatermark(!e.target.checked)}
/>
<span>without watermark</span>
</div>
</div>
{/* stats-info hidden temporarily due to no batch billing support */}
</div>
<div data-alt="modal-actions" className="mt-6 space-y-3">
<button
data-alt="download-single-button"
className="w-full px-4 py-2.5 rounded-lg bg-gradient-to-br from-purple-600/80 to-purple-700/80 hover:from-purple-500/80 hover:to-purple-600/80 text-white font-medium transition-all flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
disabled={isCheckingBalance}
onClick={() => {
onDownloadCurrent(withWatermark);
onClose();
}}
>
<Download size={16} />
Download Video
</button>
</div>
</div>
</div>
);
}
/**
* Opens a download options modal with glass morphism style.
* @param {DownloadOptionsModalProps} options - download options and callbacks.
*/
export function showDownloadOptionsModal(options: Omit<DownloadOptionsModalProps, 'onClose'>): void {
if (typeof window === 'undefined' || typeof document === 'undefined') {
return;
}
const mount = document.createElement('div');
mount.setAttribute('data-alt', 'download-options-modal-root');
document.body.appendChild(mount);
let root: Root | null = null;
try {
root = createRoot(mount);
} catch {
if (mount.parentNode) {
mount.parentNode.removeChild(mount);
}
return;
}
const close = () => {
try {
root?.unmount();
} finally {
if (mount.parentNode) {
mount.parentNode.removeChild(mount);
}
}
};
root.render(
<DownloadOptionsModal {...options} onClose={close} />
);
}

89
components/pages/work-flow/media-viewer.tsx
View File

@ -3,6 +3,7 @@
import React, { useRef, useEffect, useState, SetStateAction, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Edit3, Play, Pause, Volume2, VolumeX, Maximize, Minimize, Loader2, X, Scissors, RotateCcw, MessageCircleMore, Download, ArrowDownWideNarrow, PictureInPicture2, PenTool } from 'lucide-react';
import { showDownloadOptionsModal } from './download-options-modal';
import { ProgressiveReveal, presets } from '@/components/ui/progressive-reveal';
import { GlassIconButton } from '@/components/ui/glass-icon-button';
import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';
@ -12,9 +13,11 @@ import ScriptLoading from './script-loading';
import { TaskObject } from '@/api/DTO/movieEdit';
import { Button, Tooltip } from 'antd';
import { downloadVideo, downloadAllVideos, getFirstFrame } from '@/utils/tools';
import { post } from '@/api/request';
import { VideoEditOverlay } from './video-edit/VideoEditOverlay';
import { EditPoint as EditPointType } from './video-edit/types';
import { isVideoModificationEnabled } from '@/lib/server-config';
import { useSearchParams } from 'next/navigation';
import error_image from '@/public/assets/error.webp';
import { AspectRatioValue } from '@/components/ChatInputBox/AspectRatioSelector';
@ -89,7 +92,8 @@ export const MediaViewer = React.memo(function MediaViewer({
const [isVideoEditMode, setIsVideoEditMode] = useState(false);
// 控制钢笔图标显示的状态 - 参考谷歌登录按钮的实现
const [showVideoModification, setShowVideoModification] = useState(false);
const searchParams = useSearchParams();
const episodeId = searchParams.get('episodeId') || '';
useEffect(() => {
if (isSmartChatBoxOpen) {
const videoContentWidth = videoContentRef.current?.clientWidth ?? 0;
@ -505,21 +509,36 @@ export const MediaViewer = React.memo(function MediaViewer({
onClick={() => handleEditClick('3', 'final')}
/>
</Tooltip>
{/* 下载所有视频按钮 */}
<Tooltip placement="top" title="Download all videos">
<GlassIconButton icon={ArrowDownWideNarrow} size='sm' loading={isLoadingDownloadAllVideosBtn} onClick={ async () => {
setIsLoadingDownloadAllVideosBtn(true);
await downloadAllVideos(taskObject.videos.data.flatMap((video: any) => video.urls));
setIsLoadingDownloadAllVideosBtn(false);
}} />
</Tooltip>
{/* 下载按钮 */}
<Tooltip placement="top" title="Download video">
<GlassIconButton icon={Download} loading={isLoadingDownloadBtn} size='sm' onClick={async () => {
<Tooltip placement="top" title="Download">
<GlassIconButton
icon={Download}
size='sm'
onClick={() => {
const totalVideos = taskObject.videos.data.filter((video: any) => video.urls && video.urls.length > 0).length;
showDownloadOptionsModal({
currentVideoIndex: 0,
totalVideos: totalVideos + 1,
isCurrentVideoFailed: false,
isFinalStage: true,
projectId: episodeId || '',
onDownloadCurrent: async (withWatermark: boolean) => {
setIsLoadingDownloadBtn(true);
await downloadVideo(taskObject.final.url);
try {
const json: any = await post('/movie/download_video', {
project_id: episodeId,
watermark: withWatermark
});
const url = json?.data?.download_url as string | undefined;
if (url) await downloadVideo(url);
} finally {
setIsLoadingDownloadBtn(false);
}} />
}
},
onDownloadAll: () => {}
});
}}
/>
</Tooltip>
{showGotoCutButton && (
<Tooltip placement="top" title='Go to AI-powered editing platform'>
@ -648,15 +667,41 @@ export const MediaViewer = React.memo(function MediaViewer({
</Tooltip>
)}
<Tooltip placement="top" title="Download video">
<GlassIconButton icon={Download} loading={isLoadingDownloadBtn} size='sm' onClick={async () => {
<Tooltip placement="top" title="Download">
<GlassIconButton
icon={Download}
size='sm'
onClick={() => {
const currentVideo = taskObject.videos.data[currentSketchIndex];
if (currentVideo && currentVideo.urls && currentVideo.urls.length > 0) {
const totalVideos = taskObject.videos.data.filter((video: any) => video.urls && video.urls.length > 0).length;
const isCurrentVideoFailed = currentVideo.video_status === 2;
showDownloadOptionsModal({
currentVideoIndex: currentSketchIndex,
totalVideos: taskObject.final.url ? totalVideos + 1 : totalVideos,
isCurrentVideoFailed: isCurrentVideoFailed,
isFinalStage: false,
projectId: episodeId,
videoId: currentVideo?.video_id,
onDownloadCurrent: async (withWatermark: boolean) => {
if (!currentVideo?.video_id) return;
setIsLoadingDownloadBtn(true);
await downloadVideo(currentVideo.urls[0]);
try {
const json: any = await post('/movie/download_video', {
project_id: episodeId,
video_id: currentVideo.video_id,
watermark: withWatermark
});
const url = json?.data?.download_url as string | undefined;
if (url) await downloadVideo(url);
} finally {
setIsLoadingDownloadBtn(false);
}
}} />
},
onDownloadAll: () => {}
});
}}
/>
</Tooltip>
</>
) : (
@ -681,14 +726,6 @@ export const MediaViewer = React.memo(function MediaViewer({
}
}} />
</Tooltip>
{/* 下载所有视频按钮 */}
<Tooltip placement="top" title="Download all videos">
<GlassIconButton icon={ArrowDownWideNarrow} size='sm' loading={isLoadingDownloadAllVideosBtn} onClick={ async () => {
setIsLoadingDownloadAllVideosBtn(true);
await downloadAllVideos(taskObject.videos.data.flatMap((video: any) => video.urls));
setIsLoadingDownloadAllVideosBtn(false);
}} />
</Tooltip>
{/* 跳转剪辑按钮 */}
{showGotoCutButton && (
<Tooltip placement="top" title='Go to AI-powered editing platform'>

12
components/script-renderer/ScriptRenderer.tsx
View File

@ -177,13 +177,13 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
{addThemeTag.map((item, index) => (
<div key={index} className={`flex items-center gap-1 px-2 rounded-full ${Object.values(ThemeTagBgColor)[index]}`}>
<span className={`text-sm px-2 py-1 rounded-md`}>{item}</span>
<X className="w-4 h-4 cursor-pointer text-blue-500/80" onClick={() =>
{/* <X className="w-4 h-4 cursor-pointer text-blue-500/80" onClick={() =>
handleThemeTagChange(addThemeTag.filter(v => v !== item))
} />
} /> */}
</div>
))}
{/* 主题标签更改 */}
<div className='flex items-center gap-1'>
{/* <div className='flex items-center gap-1'>
<div className='w-[10rem]'>
<SelectDropdown
dropdownId="theme-type"
@ -197,7 +197,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
}}
/>
</div>
</div>
</div> */}
</div>
)
default:
@ -212,7 +212,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
>
<SquarePen
{/* <SquarePen
className="w-6 h-6 p-1 cursor-pointer text-gray-600 hover:text-blue-500 transition-colors"
onClick={() => {
// 提示权限不够
@ -220,7 +220,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
return;
handleEditBlock(block);
}}
/>
/> */}
<Copy
className="w-6 h-6 p-1 cursor-pointer text-gray-600 hover:text-blue-500 transition-colors"
onClick={() => {