forked from 77media/video-flow
接口bug
This commit is contained in:
海龙
parent
12932a9f67
commit
77f82537a9
@ -1 +1,2 @@
|
||||
export const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
|
||||
export const BASE_URL = "https://77.smartvideo.py.qikongjian.com"
|
||||
// process.env.NEXT_PUBLIC_API_BASE_URL
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { ApiResponse } from './common';
|
||||
import { BASE_URL } from './constants';
|
||||
import { post } from './request';
|
||||
|
||||
// 资源列表请求参数
|
||||
@ -17,9 +16,9 @@ export interface Resource {
|
||||
script_id: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取资源列表 - 按创建者筛选
|
||||
export const getResourcesList = async (data: ResourcesListRequest): Promise<ApiResponse<Resource[]>> => {
|
||||
return post<ApiResponse<Resource[]>>(BASE_URL+'/resources/list', data);
|
||||
};
|
||||
return post<ApiResponse<Resource[]>>('/resources/list', data);
|
||||
};
|
||||
|
||||
@ -591,7 +591,7 @@ export const generateScriptStream = (
|
||||
onData: (data: any) => void
|
||||
): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
streamJsonPost("/text_to_script/generate_script_stream", request, (data) => {
|
||||
streamJsonPost("/text_to_script/stream", request, (data) => {
|
||||
switch(data.status) {
|
||||
case 'streaming':
|
||||
onData(data.content);
|
||||
|
||||
@ -46,11 +46,11 @@ export function MediaViewer({
|
||||
}: MediaViewerProps) {
|
||||
const mainVideoRef = useRef<HTMLVideoElement>(null);
|
||||
const finalVideoRef = useRef<HTMLVideoElement>(null);
|
||||
|
||||
|
||||
// 音量控制状态
|
||||
const [isMuted, setIsMuted] = useState(false);
|
||||
const [volume, setVolume] = useState(0.8);
|
||||
|
||||
|
||||
// 最终视频控制状态
|
||||
const [isFinalVideoPlaying, setIsFinalVideoPlaying] = useState(true);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
@ -113,7 +113,7 @@ export function MediaViewer({
|
||||
if (finalVideoRef.current) {
|
||||
setFinalVideoReady(true);
|
||||
applyVolumeSettings(finalVideoRef.current);
|
||||
|
||||
|
||||
// 如果当前状态是应该播放的，尝试播放
|
||||
if (isFinalVideoPlaying) {
|
||||
finalVideoRef.current.play().catch(error => {
|
||||
@ -237,7 +237,7 @@ export function MediaViewer({
|
||||
onClick={toggleMute}
|
||||
size="sm"
|
||||
/>
|
||||
|
||||
|
||||
{/* 音量滑块 - 一直显示 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
@ -249,11 +249,11 @@ export function MediaViewer({
|
||||
value={volume}
|
||||
onChange={(e) => handleVolumeChange(parseFloat(e.target.value))}
|
||||
className="w-16 h-1 bg-white/20 rounded-lg appearance-none cursor-pointer
|
||||
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
|
||||
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
|
||||
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
|
||||
[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-lg
|
||||
[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full
|
||||
[&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:cursor-pointer
|
||||
[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full
|
||||
[&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:cursor-pointer
|
||||
[&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:shadow-lg"
|
||||
style={{
|
||||
background: `linear-gradient(to right, white 0%, white ${volume * 100}%, rgba(255,255,255,0.2) ${volume * 100}%, rgba(255,255,255,0.2) 100%)`
|
||||
@ -273,9 +273,9 @@ export function MediaViewer({
|
||||
const finalVideo = final || {
|
||||
url: 'https://cdn.qikongjian.com/videos/1750389908_37d4fffa-8516-43a3-a423-fc0274f40e8a_text_to_video_0.mp4'
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className="relative w-full h-full rounded-lg overflow-hidden"
|
||||
key={`render-video-${currentStep}`}
|
||||
onMouseEnter={() => onControlsChange(true)}
|
||||
@ -297,12 +297,12 @@ export function MediaViewer({
|
||||
muted
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
|
||||
{/* 最终成片视频 */}
|
||||
<motion.div
|
||||
initial={{ clipPath: "inset(0 50% 0 50%)", filter: "blur(10px)" }}
|
||||
animate={{ clipPath: "inset(0 0% 0 0%)", filter: "blur(0px)" }}
|
||||
transition={{
|
||||
transition={{
|
||||
clipPath: { duration: 1.2, ease: [0.43, 0.13, 0.23, 0.96] },
|
||||
filter: { duration: 0.6, delay: 0.3 }
|
||||
}}
|
||||
@ -342,9 +342,9 @@ export function MediaViewer({
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
|
||||
{/* 视频信息浮层 */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 right-0 z-10 p-4 bg-gradient-to-t from-black/80 via-black/40 to-transparent"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
@ -354,7 +354,7 @@ export function MediaViewer({
|
||||
<div className="flex items-center gap-3">
|
||||
<motion.div
|
||||
className="w-2 h-2 rounded-full bg-emerald-500"
|
||||
animate={{
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [1, 0.6, 1]
|
||||
}}
|
||||
@ -386,7 +386,7 @@ export function MediaViewer({
|
||||
{isFinalVideoPlaying && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full blur-md"
|
||||
animate={{
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [0.5, 0.8, 0.5]
|
||||
}}
|
||||
@ -404,10 +404,10 @@ export function MediaViewer({
|
||||
size="sm"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
|
||||
{/* 音量控制 */}
|
||||
{renderVolumeControls()}
|
||||
|
||||
|
||||
{/* 全屏按钮 */}
|
||||
<GlassIconButton
|
||||
icon={isFullscreen ? Minimize : Maximize}
|
||||
@ -437,9 +437,9 @@ export function MediaViewer({
|
||||
const currentSketch = taskSketch[currentSketchIndex];
|
||||
const defaultBgColors = ['RGB(45, 50, 70)', 'RGB(75, 80, 100)', 'RGB(105, 110, 130)'];
|
||||
const bgColors = currentSketch?.bg_rgb || defaultBgColors;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className="relative w-full h-full rounded-lg"
|
||||
onMouseEnter={() => onControlsChange(true)}
|
||||
onMouseLeave={() => onControlsChange(false)}
|
||||
@ -447,20 +447,20 @@ export function MediaViewer({
|
||||
{/* 只在生成过程中或没有视频时使用ProgressiveReveal */}
|
||||
{(isGeneratingVideo || !taskVideos[currentSketchIndex]) ? (
|
||||
taskVideos[currentSketchIndex] ? (
|
||||
<ProgressiveReveal
|
||||
<ProgressiveReveal
|
||||
key={`generte-video-${currentSketchIndex}`}
|
||||
className="w-full h-full rounded-lg"
|
||||
className="w-full h-full rounded-lg"
|
||||
revealDuration={0.8}
|
||||
blurDuration={0.3}
|
||||
initialBlur={10}
|
||||
customVariants={{
|
||||
hidden: {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
filter: "blur(30px)",
|
||||
clipPath: "inset(0 100% 0 0)"
|
||||
},
|
||||
visible: {
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
filter: "blur(0px)",
|
||||
@ -492,7 +492,7 @@ export function MediaViewer({
|
||||
alt="background"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 视频 */}
|
||||
<motion.div
|
||||
initial={{ clipPath: "inset(0 100% 0 0)" }}
|
||||
@ -530,7 +530,7 @@ export function MediaViewer({
|
||||
) : (
|
||||
/* 生成完成后直接显示视频，不使用ProgressiveReveal */
|
||||
<div className="relative w-full h-full">
|
||||
|
||||
|
||||
{/* 视频 修复播放没有声音 */}
|
||||
<video
|
||||
ref={mainVideoRef}
|
||||
@ -589,7 +589,7 @@ export function MediaViewer({
|
||||
{isVideoPlaying && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full blur-md"
|
||||
animate={{
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [0.5, 0.8, 0.5]
|
||||
}}
|
||||
@ -607,7 +607,7 @@ export function MediaViewer({
|
||||
size="sm"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
|
||||
{/* 音量控制 */}
|
||||
{renderVolumeControls()}
|
||||
</motion.div>
|
||||
@ -622,9 +622,9 @@ export function MediaViewer({
|
||||
const currentSketch = taskSketch[currentSketchIndex];
|
||||
const defaultBgColors = ['RGB(45, 50, 70)', 'RGB(75, 80, 100)', 'RGB(105, 110, 130)'];
|
||||
const bgColors = currentSketch?.bg_rgb || defaultBgColors;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className="relative w-full h-full rounded-lg"
|
||||
onMouseEnter={() => onControlsChange(true)}
|
||||
onMouseLeave={() => onControlsChange(false)}
|
||||
@ -634,17 +634,17 @@ export function MediaViewer({
|
||||
currentSketch ? (
|
||||
<ProgressiveReveal
|
||||
key={`sketch-generating-${currentSketchIndex}`}
|
||||
className="w-full h-full rounded-lg"
|
||||
className="w-full h-full rounded-lg"
|
||||
revealDuration={0.8}
|
||||
blurDuration={0.3}
|
||||
initialBlur={10}
|
||||
customVariants={{
|
||||
hidden: {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
filter: "blur(30px)"
|
||||
},
|
||||
visible: {
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
filter: "blur(0px)",
|
||||
@ -675,7 +675,7 @@ export function MediaViewer({
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center rounded-lg overflow-hidden relative">
|
||||
{/* 动态渐变背景 */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className={`absolute inset-0 bg-gradient-to-r from-[${bgColors[0]}] via-[${bgColors[1]}] to-[${bgColors[2]}]`}
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
|
||||
@ -690,7 +690,7 @@ export function MediaViewer({
|
||||
}}
|
||||
/>
|
||||
{/* 动态光效 */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="absolute inset-0 opacity-50"
|
||||
style={{
|
||||
background: "radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, transparent 50%)",
|
||||
@ -704,7 +704,7 @@ export function MediaViewer({
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
<motion.div
|
||||
className="flex flex-col items-center gap-4 relative z-10"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
@ -713,11 +713,11 @@ export function MediaViewer({
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
className="absolute -inset-4 bg-gradient-to-r from-white via-sky-200 to-cyan-200 rounded-full opacity-60 blur-xl"
|
||||
animate={{
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
rotate: [0, 180, 360],
|
||||
}}
|
||||
transition={{
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
@ -727,7 +727,7 @@ export function MediaViewer({
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
) : (
|
||||
/* 生成完成后直接显示图片，不使用ProgressiveReveal */
|
||||
<img
|
||||
@ -775,7 +775,7 @@ export function MediaViewer({
|
||||
{isPlaying && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full bg-blue-500/30 blur-md"
|
||||
animate={{
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [0.5, 0.8, 0.5]
|
||||
}}
|
||||
@ -805,7 +805,7 @@ export function MediaViewer({
|
||||
return (
|
||||
<div className="relative w-full h-full bg-white/10 rounded-lg overflow-hidden p-2">
|
||||
{
|
||||
scriptData ? (
|
||||
mockScriptData ? (
|
||||
<ScriptRenderer data={mockScriptData} />
|
||||
) : (
|
||||
<div className="flex gap-2 w-full h-full">
|
||||
@ -838,4 +838,4 @@ export function MediaViewer({
|
||||
}
|
||||
|
||||
return renderSketchContent();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user