@ cloudgpt/ 时间线编辑器

增强反应时间线编辑器 - 一个强大和内容丰富的时序编辑器组件,用于建立视频编辑应用程序、动画工具和媒体时序界面.

关键特性

• 🎨 高级主题系统 - 全面定制的黑暗、光明和海洋主题
• ⏱️ 最大持续时间控制 - 设定时限并验证行动界限
• 🎯 自定义光标样式 - 全面控制光标外观和行为
• 🎛️ 专业人员 - 具有梯度效应的药丸形调整手柄大小
• 🎬 视频框架支持 - 在时间表上提取和显示视频帧
• 🖼️ 图像条显示 - 图像平面预览,用于视觉动作
• 📐 网格抓取 - 精确调整和定位
• 🎮 拖动行辅助 - 为更好的UX提供视觉指导
• 🚀 业绩优化 - 平滑动画和互动
• 📱 响应设计 - 跨越不同屏幕大小的工作

* 安装

npm install @cloudgpt/timeline-editor

基本用途

import { Timeline, TimelineEffect, TimelineRow } from '@cloudgpt/timeline-editor';
import React, { useState } from 'react';

const mockData: TimelineRow[] = [
  {
    id: "0",
    actions: [
      {
        id: "action00",
        start: 0,
        end: 2,
        effectId: "effect0",
      },
    ],
  },
  {
    id: "1", 
    actions: [
      {
        id: "action10",
        start: 1.5,
        end: 5,
        effectId: "effect1",
      }
    ],
  }
];

const mockEffect: Record<string, TimelineEffect> = {
  effect0: {
    id: "effect0",
    name: "Video Clip",
  },
  effect1: {
    id: "effect1", 
    name: "Audio Track",
  },
};

const TimelineEditor = () => {
  const [data, setData] = useState(mockData);
  
  return (
    <Timeline
      editorData={data}
      effects={mockEffect}
      onChange={setData}
      maxDuration={30} // Limit timeline to 30 seconds
      theme={{
        backgroundColor: '#191b1d',
        foregroundColor: '#ffffff',
        cursorColor: '#ff6b35',
      }}
      cursor={{
        cursorColor: '#ff6b35',
        cursorWidth: 2,
        cursorStyle: 'solid',
        showCursorHead: true,
      }}
      handles={{
        showHandles: true,
        handleOpacity: 0.3,
        handleHoverOpacity: 1,
      }}
      style={{ width: '100%', height: 400 }}
    />
  );
};

高级特性

主题配置

const themeConfig = {
  backgroundColor: '#1a1a1a',
  foregroundColor: '#ffffff', 
  gridColor: 'rgba(255, 255, 255, 0.1)',
  actionBackgroundColor: '#2f3134',
  actionBorderColor: 'rgba(255, 255, 255, 0.2)',
  dragLineColor: '#ff6b35',
};

<Timeline theme={themeConfig} />

最大持续时间控制

<Timeline
  maxDuration={60} // Limit to 60 seconds
  validateActionChange={({ action, row, start, end }) => {
    // Custom validation logic
    return end <= 60 && start >= 0;
  }}
/>

自定义光标样式

const cursorConfig = {
  cursorColor: '#00ff88',
  cursorWidth: 3,
  cursorStyle: 'dashed',
  cursorOpacity: 0.8,
  showCursorHead: true,
  cursorShadow: '0 0 10px rgba(0,255,136,0.5)',
};

<Timeline cursor={cursorConfig} />

处理自定义

const handleConfig = {
  showHandles: true,
  handleBackground: 'linear-gradient(180deg, #ff6b35, #ff4500)',
  handleBorderColor: 'rgba(255, 255, 255, 0.4)',
  handleOpacity: 0.4,
  handleHoverOpacity: 1,
};

<Timeline handles={handleConfig} />

媒体支助

增强的时间轴编辑器支持视频帧提取和图像预览:

// Custom render function for media actions
const renderAction = (action, row) => {
  if (action.effectId === 'video') {
    return <VideoStrip src="/video/sample.mp4" start={action.start} end={action.end} />;
  }
  if (action.effectId === 'image') {
    return <ImageStrip src="/images/sample.jpg" start={action.start} end={action.end} />;
  }
  return null;
};

<Timeline getActionRender={renderAction} />

* 原文增强

此软件包是原版的增强版 @xzdarcy/react-timeline-editor 有重大改进:

• 增强型系统 - 有综合接口的更好类型脚本支持
• 高级造型 - 专业级外观设计和主题
• 更好的业绩 - 优化渲染和互动处理
• 扩展 API - 更多的配置选项和定制能力
• 错误修正 - 解决光标打磨和验证问题
• 现代特征 - 支持现代反应模式和钩子

捐款

欢迎捐款! 请随意为错误和特性请求提交拉出请求或打开问题 .

许可证

麻省理工学院的执照 - 看 自由主义 详细文件.

承认

基于杰出的工作 @xzdarcy (英语) 在原反应-时间线编辑器上.