seedance-video-sdk
Version:
Seedance AI Video Generation SDK - Create professional videos from text and images using ByteDance's advanced AI technology
165 lines (160 loc) • 9.16 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef, useState, useEffect } from 'react';
/**
* Seedance Video Player Component
*
* A customizable video player optimized for AI-generated videos
* with built-in loading states and error handling.
*/
const VideoPlayer = ({ src, poster, controls = true, autoplay = false, loop = false, muted = false, className = '', onLoadStart, onLoadedData, onError, }) => {
const videoRef = useRef(null);
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
useEffect(() => {
const video = videoRef.current;
if (!video)
return;
const handleLoadStart = () => {
setIsLoading(true);
setHasError(false);
onLoadStart?.();
};
const handleLoadedData = () => {
setIsLoading(false);
onLoadedData?.();
};
const handleError = (event) => {
setIsLoading(false);
setHasError(true);
const error = new Error('Video failed to load');
setErrorMessage(error.message);
onError?.(error);
};
video.addEventListener('loadstart', handleLoadStart);
video.addEventListener('loadeddata', handleLoadedData);
video.addEventListener('error', handleError);
return () => {
video.removeEventListener('loadstart', handleLoadStart);
video.removeEventListener('loadeddata', handleLoadedData);
video.removeEventListener('error', handleError);
};
}, [onLoadStart, onLoadedData, onError]);
const baseStyles = `
relative w-full h-auto rounded-lg overflow-hidden bg-gray-900
`;
const videoStyles = `
w-full h-full object-cover
`;
const loadingStyles = `
absolute inset-0 flex items-center justify-center bg-gray-900 text-white
`;
const errorStyles = `
absolute inset-0 flex flex-col items-center justify-center bg-gray-900 text-white p-4 text-center
`;
return (jsxs("div", { className: `${baseStyles} ${className}`, children: [jsx("video", { ref: videoRef, src: src, poster: poster, controls: controls, autoPlay: autoplay, loop: loop, muted: muted, className: videoStyles, playsInline: true }), isLoading && (jsxs("div", { className: loadingStyles, children: [jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-white" }), jsx("p", { className: "mt-2 text-sm", children: "Loading video..." })] })), hasError && (jsxs("div", { className: errorStyles, children: [jsx("svg", { className: "w-12 h-12 text-red-400 mb-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), jsx("p", { className: "text-sm font-medium", children: "Failed to load video" }), jsx("p", { className: "text-xs text-gray-400 mt-1", children: errorMessage })] }))] }));
};
/**
* Utility functions for Seedance Video SDK
*/
/**
* Convert video resolution to dimensions
*/
/**
* Format duration in human readable format
*/
function formatDuration(seconds) {
if (seconds < 60) {
return `${seconds}s`;
}
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
if (remainingSeconds === 0) {
return `${minutes}m`;
}
return `${minutes}m ${remainingSeconds}s`;
}
/**
* Get status color for UI components
*/
function getStatusColor(status) {
switch (status) {
case 'pending':
return '#f59e0b'; // amber
case 'processing':
return '#3b82f6'; // blue
case 'completed':
return '#10b981'; // green
case 'failed':
return '#ef4444'; // red
case 'cancelled':
return '#6b7280'; // gray
default:
return '#6b7280';
}
}
/**
* Get status display text
*/
function getStatusText(status) {
switch (status) {
case 'pending':
return 'Pending';
case 'processing':
return 'Processing';
case 'completed':
return 'Completed';
case 'failed':
return 'Failed';
case 'cancelled':
return 'Cancelled';
default:
return 'Unknown';
}
}
/**
* Progress Indicator Component
*
* Displays the progress and status of video generation tasks
* with visual indicators and estimated time remaining.
*/
const ProgressIndicator = ({ progress, status, estimatedTime, className = '', showPercentage = true, showStatus = true, }) => {
const statusColor = getStatusColor(status);
const statusText = getStatusText(status);
const getProgressBarColor = (status) => {
switch (status) {
case 'processing':
return 'bg-blue-500';
case 'completed':
return 'bg-green-500';
case 'failed':
return 'bg-red-500';
case 'cancelled':
return 'bg-gray-500';
default:
return 'bg-yellow-500';
}
};
const getIcon = (status) => {
switch (status) {
case 'pending':
return (jsx("svg", { className: "w-4 h-4 animate-pulse", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z", clipRule: "evenodd" }) }));
case 'processing':
return (jsx("svg", { className: "w-4 h-4 animate-spin", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }));
case 'completed':
return (jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }));
case 'failed':
return (jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }));
case 'cancelled':
return (jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }));
default:
return null;
}
};
const baseStyles = `
w-full p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700
`;
return (jsxs("div", { className: `${baseStyles} ${className}`, children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { style: { color: statusColor }, children: getIcon(status) }), showStatus && (jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: statusText }))] }), showPercentage && (jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [Math.round(progress), "%"] }))] }), jsx("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-3", children: jsx("div", { className: `h-2 rounded-full transition-all duration-300 ease-out ${getProgressBarColor(status)}`, style: { width: `${Math.min(100, Math.max(0, progress))}%` } }) }), jsxs("div", { className: "flex items-center justify-between text-xs text-gray-500 dark:text-gray-400", children: [jsxs("div", { children: [status === 'processing' && estimatedTime && (jsxs("span", { children: ["Estimated time: ", formatDuration(estimatedTime)] })), status === 'completed' && (jsx("span", { children: "Video generation completed" })), status === 'failed' && (jsx("span", { children: "Generation failed" })), status === 'pending' && (jsx("span", { children: "Waiting in queue..." })), status === 'cancelled' && (jsx("span", { children: "Generation cancelled" }))] }), status === 'processing' && (jsxs("div", { className: "flex items-center space-x-1", children: [jsx("div", { className: "w-1 h-1 bg-blue-500 rounded-full animate-pulse" }), jsx("div", { className: "w-1 h-1 bg-blue-500 rounded-full animate-pulse", style: { animationDelay: '0.2s' } }), jsx("div", { className: "w-1 h-1 bg-blue-500 rounded-full animate-pulse", style: { animationDelay: '0.4s' } })] }))] })] }));
};
export { ProgressIndicator, VideoPlayer };
//# sourceMappingURL=react.esm.js.map