cerevox 2.43.0 → 3.0.0-alpha.1

package/dist/timeline-editor/public/app.js

@@ -1,2086 +0,0 @@
-/* eslint-env browser */
-class TimelineEditor {
-  constructor() {
-    this.assets = {
-      video: [],
-      audio: [],
-      image: [],
-      text: [],
-    };
-    this.tracks = {
-      video: [],
-      audio: [],
-      bgm: [],
-      voice: [],
-      subtitle: [],
-    };
-    this.subtitles = []; // 字幕数据
-    this.selectedAsset = null;
-    this.selectedClip = null;
-    this.currentTime = 0;
-    this.totalDuration = 0;
-    this.zoomLevel = 1;
-    this.isPlaying = false;
-    this.pixelsPerSecond = 50; // Base pixels per second for timeline
-    this.currentClipIndex = 0; // 当前播放的clip索引
-    this.playbackClips = []; // 按时间顺序排列的视频clips
-    this.animationFrameId = null; // 用于requestAnimationFrame
-
-    // 音频播放相关状态
-    this.audioPlayers = {}; // { clipId: HTMLAudioElement }
-    this.audioTimers = []; // 保存所有定时器（开始/停止）以便清理
-
-    this.init();
-  }
-
-  async init() {
-    this.setupEventListeners();
-    await this.loadDraftData();
-    this.renderAssets();
-    this.renderTimeline();
-    this.updateTimelineRuler();
-    this.updatePlaybackIndicator(0);
-  }
-
-  setupEventListeners() {
-    // Header controls
-    document
-      .getElementById('updateProject')
-      ?.addEventListener('click', () => this.updateProject());
-
-    // Asset search
-    document
-      .getElementById('assetSearch')
-      ?.addEventListener('input', e => this.searchAssets(e.target.value));
-
-    // Category headers for collapsing/expanding
-    document.querySelectorAll('.category-header').forEach(header => {
-      header.addEventListener('click', () => this.toggleCategory(header));
-    });
-
-    // Video preview controls
-    document
-      .getElementById('playPauseBtn')
-      ?.addEventListener('click', () => this.togglePlayback());
-
-    // Timeline controls
-    document
-      .getElementById('zoomIn')
-      ?.addEventListener('click', () => this.zoomTimeline(1.2));
-    document
-      .getElementById('zoomOut')
-      ?.addEventListener('click', () => this.zoomTimeline(0.8));
-
-    // Track drag and drop
-    this.setupTrackDragDrop();
-
-    // Timeline ruler click to seek
-    this.setupTimelineRulerClick();
-
-    // Timeline scroll synchronization
-    this.setupTimelineScrollSync();
-
-    // Video playback events
-    this.setupVideoEvents();
-
-    // Keyboard shortcuts
-    document.addEventListener('keydown', e => this.handleKeyboard(e));
-  }
-
-  async loadDraftData() {
-    try {
-      // 加载draft数据
-      const response = await fetch('/api/draft');
-      if (!response.ok) {
-        console.warn('No draft file found, using empty project');
-        this.initEmptyProject();
-        return;
-      }
-
-      const draftData = await response.json();
-      console.log('Loaded draft data:', draftData);
-
-      // 设置项目信息
-      this.projectName = draftData.project?.name || 'Untitled Project';
-      this.projectId = draftData.project?.id || 'untitled';
-
-      // 加载素材
-      this.loadAssetsFromDraft(draftData.assets || []);
-
-      // 加载时间轴轨道
-      this.loadTracksFromDraft(draftData.timeline?.tracks || []);
-
-      // 加载字幕数据
-      this.loadSubtitlesFromDraft(draftData.subtitles || []);
-
-      // 重置音频播放（确保新项目或草稿加载后清理旧的音频）
-      this.resetAudioPlayback();
-
-      // 计算总时长
-      this.calculateTotalDuration();
-
-      console.log('Draft loaded successfully');
-    } catch (error) {
-      console.error('Failed to load draft:', error);
-      this.initEmptyProject();
-    }
-  }
-
-  loadAssetsFromDraft(assets) {
-    // 清空现有素材
-    this.assets = {
-      video: [],
-      audio: [],
-      image: [],
-      text: [],
-    };
-
-    // 按类型分类素材
-    assets.forEach(asset => {
-      const assetItem = {
-        id: asset.id,
-        name: asset.uri.split('/').pop() || asset.id,
-        duration: (asset.durationMs || 0) / 1000,
-        type: asset.type,
-        url: `/static/${asset.uri}`, // 修正URL路径
-        uri: asset.uri,
-        fps: asset.fps,
-        resolution: asset.resolution,
-      };
-
-      switch (asset.type) {
-        case 'video':
-          this.assets.video.push(assetItem);
-          break;
-        case 'audio':
-          this.assets.audio.push(assetItem);
-          break;
-        case 'image':
-          this.assets.image.push(assetItem);
-          break;
-        default:
-          console.warn('Unknown asset type:', asset.type);
-      }
-    });
-
-    console.log('Loaded assets:', this.assets);
-  }
-
-  loadTracksFromDraft(tracks) {
-    // 清空现有轨道
-    this.tracks = {
-      video: [],
-      audio: [],
-      bgm: [],
-    };
-
-    // 标记是否已创建主视频轨道
-    let mainVideoTrackCreated = false;
-    // 标记是否已创建背景音乐轨道
-    let bgmTrackCreated = false;
-
-    tracks.forEach(track => {
-      const trackData = {
-        id: track.id,
-        type: track.type,
-        clips: track.clips.map(clip => ({
-          ...clip,
-          startTime: clip.startMs / 1000,
-          duration: clip.durationMs / 1000,
-          inPoint: clip.inMs / 1000,
-        })),
-      };
-
-      // 根据轨道类型分配到对应的轨道组
-      switch (track.type) {
-        case 'video':
-          // 只创建一个主视频轨道，忽略其他video tracks
-          if (!mainVideoTrackCreated) {
-            trackData.name = '主视频轨道';
-            this.tracks.video.push(trackData);
-            mainVideoTrackCreated = true;
-            console.log('Created main video track:', trackData.id);
-          } else {
-            console.log('Ignored additional video track:', trackData.id);
-          }
-          break;
-        case 'audio': {
-          // 根据轨道ID或素材URI判断音频类型
-          const firstClip = trackData.clips[0];
-          let isBgmTrack = false;
-
-          // 检查轨道ID是否包含bgm
-          if (track.id.toLowerCase().includes('bgm')) {
-            isBgmTrack = true;
-          } else if (firstClip) {
-            // 检查素材URI是否包含bgm
-            const asset = this.findAssetById(firstClip.assetId);
-            if (
-              asset &&
-              (asset.uri.includes('bgm') || asset.id.includes('bgm'))
-            ) {
-              isBgmTrack = true;
-            }
-          }
-
-          if (isBgmTrack && !bgmTrackCreated) {
-            // 第一个包含bgm的轨道作为背景音乐
-            trackData.name = '背景音乐';
-            this.tracks.bgm.push(trackData);
-            bgmTrackCreated = true;
-            console.log('Created BGM track:', trackData.id);
-          } else if (!isBgmTrack) {
-            // 其他音频轨道
-            trackData.name = `音频轨道 ${this.tracks.audio.length + 1}`;
-            this.tracks.audio.push(trackData);
-            console.log('Created audio track:', trackData.id);
-          } else {
-            console.log('Ignored additional BGM track:', trackData.id);
-          }
-          break;
-        }
-        case 'subtitle':
-          // 暂时忽略字幕轨道
-          console.log('Ignored subtitle track:', trackData.id);
-          break;
-        default:
-          console.warn('Unknown track type:', track.type);
-      }
-    });
-
-    console.log('Loaded tracks:', this.tracks);
-  }
-
-  loadSubtitlesFromDraft(subtitles) {
-    // 清空现有字幕
-    this.subtitles = [];
-
-    // 加载字幕数据
-    subtitles.forEach(subtitle => {
-      this.subtitles.push({
-        id: subtitle.id,
-        text: subtitle.text,
-        startMs: subtitle.startMs,
-        endMs: subtitle.endMs,
-        style: subtitle.style || {},
-      });
-    });
-
-    console.log('Loaded subtitles:', this.subtitles);
-  }
-
-  calculateTotalDuration() {
-    let maxDuration = 0;
-
-    // 遍历所有轨道的所有片段，找到最大结束时间
-    Object.values(this.tracks).forEach(trackGroup => {
-      trackGroup.forEach(track => {
-        track.clips.forEach(clip => {
-          const endTime = (clip.startMs + clip.durationMs) / 1000;
-          maxDuration = Math.max(maxDuration, endTime);
-        });
-      });
-    });
-
-    this.totalDuration = maxDuration;
-    console.log('Total duration calculated:', this.totalDuration, 'seconds');
-  }
-
-  initEmptyProject() {
-    this.projectName = 'New Project';
-    this.projectId = 'new-project';
-    this.assets = {
-      video: [],
-      audio: [],
-      image: [],
-      text: [],
-    };
-    this.tracks = {
-      video: [],
-      audio: [],
-      bgm: [],
-      voice: [],
-      subtitle: [],
-    };
-    this.totalDuration = 0;
-  }
-
-  renderAssets() {
-    // Render video assets
-    const videoList = document.getElementById('videoAssets');
-    if (videoList) {
-      videoList.innerHTML = '';
-      this.assets.video.forEach(asset => {
-        const li = this.createAssetElement(asset);
-        videoList.appendChild(li);
-      });
-    }
-
-    // Render audio assets
-    const audioList = document.getElementById('audioAssets');
-    if (audioList) {
-      audioList.innerHTML = '';
-      this.assets.audio.forEach(asset => {
-        const li = this.createAssetElement(asset);
-        audioList.appendChild(li);
-      });
-    }
-
-    // Render image assets
-    const imageList = document.getElementById('imageAssets');
-    if (imageList) {
-      imageList.innerHTML = '';
-      this.assets.image.forEach(asset => {
-        const li = this.createAssetElement(asset);
-        imageList.appendChild(li);
-      });
-    }
-
-    // Render text assets
-    const textList = document.getElementById('textAssets');
-    if (textList) {
-      textList.innerHTML = '';
-      this.assets.text.forEach(asset => {
-        const li = this.createAssetElement(asset);
-        textList.appendChild(li);
-      });
-    }
-
-    // Auto-select the first video asset if available
-    if (this.assets.video.length > 0 && !this.selectedAsset) {
-      this.selectAsset(this.assets.video[0]);
-    }
-  }
-
-  createAssetElement(asset) {
-    const li = document.createElement('li');
-    li.className = 'asset-item';
-    li.draggable = true;
-    li.dataset.assetId = asset.id;
-    li.dataset.assetType = asset.type;
-
-    const icon = this.getAssetIcon(asset.type);
-    const duration =
-      asset.duration > 0 ? ` (${this.formatTime(asset.duration)})` : '';
-
-    li.innerHTML = `
-      <span class="asset-icon">${icon}</span>
-      <span class="asset-name">${asset.name}${duration}</span>
-    `;
-
-    // Asset selection
-    li.addEventListener('click', () => this.selectAsset(asset));
-
-    // Drag start
-    li.addEventListener('dragstart', e => {
-      e.dataTransfer.setData(
-        'text/plain',
-        JSON.stringify({
-          assetId: asset.id,
-          assetType: asset.type,
-        })
-      );
-    });
-
-    return li;
-  }
-
-  getAssetIcon(type) {
-    const icons = {
-      video: '🎬',
-      audio: '🎵',
-      image: '🖼️',
-      text: '📝',
-    };
-    return icons[type] || '📄';
-  }
-
-  selectAsset(asset) {
-    // Remove previous selection
-    document.querySelectorAll('.asset-item.selected').forEach(item => {
-      item.classList.remove('selected');
-    });
-
-    // Add selection to current asset
-    const assetElement = document.querySelector(
-      `[data-asset-id="${asset.id}"]`
-    );
-    if (assetElement) {
-      assetElement.classList.add('selected');
-    }
-
-    // Clear clip selection when selecting asset
-    this.selectedClip = null;
-    document.querySelectorAll('.timeline-clip.selected').forEach(clipEl => {
-      clipEl.classList.remove('selected');
-    });
-
-    this.selectedAsset = asset;
-
-    // Update video preview for video assets
-    const video = document.getElementById('previewVideo');
-    const placeholder = document.getElementById('videoPlaceholder');
-
-    if (asset.type === 'video' && video && placeholder) {
-      // 清除之前的事件监听器，避免意外触发
-      video.onloadeddata = null;
-      video.onended = null;
-      video.ontimeupdate = null;
-
-      video.src = `/static/${asset.uri}`;
-      video.style.display = 'block';
-      placeholder.style.display = 'none';
-
-      // 停止当前播放，切换到选中的资源
-      if (this.isPlaying) {
-        this.stopPlayback();
-      }
-    } else if (video && placeholder) {
-      video.style.display = 'none';
-      placeholder.style.display = 'flex';
-    }
-
-    this.updatePropertiesPanel();
-  }
-
-  renderTimeline() {
-    // Clear existing clips and tracks
-    document.querySelectorAll('.timeline-clip').forEach(clip => clip.remove());
-
-    // 重置播放clips列表
-    this.playbackClips = [];
-
-    // 动态渲染轨道
-    this.renderDynamicTracks();
-
-    // 按开始时间排序播放列表
-    this.playbackClips.sort((a, b) => a.startTime - b.startTime);
-
-    this.updateTimelineInfo();
-    // 只有在播放状态下才更新播放指示器，避免暂停时重置位置
-    if (this.isPlaying) {
-      this.updatePlaybackIndicator();
-    }
-  }
-
-  renderDynamicTracks() {
-    const tracksContainer = document.getElementById('timelineTracks');
-    if (!tracksContainer) return;
-
-    // 清空现有轨道
-    tracksContainer.innerHTML = '';
-
-    // 1. 渲染主视频轨道
-    if (this.tracks.video && this.tracks.video.length > 0) {
-      const videoTrack = this.tracks.video[0];
-      this.createTrackElement(
-        tracksContainer,
-        'video',
-        '主视频轨道',
-        videoTrack
-      );
-    }
-
-    // 2. 渲染背景音乐轨道
-    if (this.tracks.bgm && this.tracks.bgm.length > 0) {
-      const bgmTrack = this.tracks.bgm[0];
-      this.createTrackElement(tracksContainer, 'bgm', '背景音乐', bgmTrack);
-    }
-
-    // 3. 渲染音频轨道
-    if (this.tracks.audio && this.tracks.audio.length > 0) {
-      this.tracks.audio.forEach((audioTrack, index) => {
-        const trackName = audioTrack.name || `音频轨道 ${index + 1}`;
-        this.createTrackElement(
-          tracksContainer,
-          'audio',
-          trackName,
-          audioTrack
-        );
-      });
-    }
-
-    // 4. 渲染字幕轨道
-    if (this.subtitles && this.subtitles.length > 0) {
-      this.createSubtitleTrackElement(tracksContainer);
-    }
-  }
-
-  createTrackElement(container, trackType, trackName, trackData) {
-    // 创建轨道容器
-    const trackContainer = document.createElement('div');
-    trackContainer.className = 'track-container';
-
-    // 创建轨道头部
-    const trackHeader = document.createElement('div');
-    trackHeader.className = 'track-header';
-    trackHeader.textContent = trackName;
-
-    // 创建轨道内容区域
-    const trackContent = document.createElement('div');
-    trackContent.className = 'track-content';
-    trackContent.id = `${trackType}Track_${trackData.id}`;
-    trackContent.dataset.trackType = trackType;
-    trackContent.dataset.trackId = trackData.id;
-
-    // 添加拖拽支持
-    trackContent.addEventListener('dragover', e => {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = 'copy';
-    });
-
-    trackContent.addEventListener('drop', e => {
-      e.preventDefault();
-      const assetId = e.dataTransfer.getData('text/plain');
-      const rect = trackContent.getBoundingClientRect();
-      const dropTime =
-        (e.clientX - rect.left) / (this.pixelsPerSecond * this.zoomLevel);
-      this.addClipToTrack(assetId, trackType, dropTime);
-    });
-
-    // 渲染轨道中的片段
-    if (trackData.clips) {
-      trackData.clips.forEach(clip => {
-        const clipElement = this.createClipElement(clip, trackType);
-        if (clipElement) {
-          trackContent.appendChild(clipElement);
-        }
-
-        // 如果是视频类型的clip，添加到播放列表
-        if (trackType === 'video') {
-          const asset = this.findAssetById(clip.assetId);
-          if (asset) {
-            this.playbackClips.push({
-              clip: clip,
-              asset: asset,
-              startTime: clip.startTime || 0,
-              duration: clip.duration || 0, // 使用clip的duration
-            });
-          }
-        }
-      });
-    }
-
-    // 组装轨道元素
-    trackContainer.appendChild(trackHeader);
-    trackContainer.appendChild(trackContent);
-    container.appendChild(trackContainer);
-  }
-
-  createClipElement(clip, trackType) {
-    const asset = this.findAssetById(clip.assetId);
-    if (!asset) return null;
-
-    const clipDiv = document.createElement('div');
-    clipDiv.className = `timeline-clip ${trackType}`;
-    clipDiv.dataset.clipId = clip.id;
-    clipDiv.dataset.trackType = trackType;
-
-    const leftPos = clip.startTime * this.pixelsPerSecond * this.zoomLevel;
-    const width = clip.duration * this.pixelsPerSecond * this.zoomLevel;
-
-    clipDiv.style.left = `${leftPos}px`;
-    clipDiv.style.width = `${width}px`;
-    clipDiv.textContent = asset.name;
-
-    // Clip selection
-    clipDiv.addEventListener('click', e => {
-      e.stopPropagation();
-      this.selectClip(clip);
-    });
-
-    // Make clips draggable within tracks
-    clipDiv.draggable = true;
-    clipDiv.addEventListener('dragstart', e => {
-      e.dataTransfer.setData(
-        'text/plain',
-        JSON.stringify({
-          clipId: clip.id,
-          trackType: trackType,
-        })
-      );
-    });
-
-    return clipDiv;
-  }
-
-  selectClip(clip) {
-    // Remove previous selection
-    document.querySelectorAll('.timeline-clip.selected').forEach(clipEl => {
-      clipEl.classList.remove('selected');
-    });
-
-    // Add selection to current clip
-    const clipElement = document.querySelector(`[data-clip-id="${clip.id}"]`);
-    if (clipElement) {
-      clipElement.classList.add('selected');
-    }
-
-    // Clear asset selection when selecting clip
-    this.selectedAsset = null;
-    document.querySelectorAll('.asset-item.selected').forEach(item => {
-      item.classList.remove('selected');
-    });
-
-    this.selectedClip = clip;
-    this.updatePropertiesPanel();
-  }
-
-  createSubtitleTrackElement(container) {
-    // 创建字幕轨道容器
-    const trackContainer = document.createElement('div');
-    trackContainer.className = 'track-container';
-
-    // 创建轨道头部
-    const trackHeader = document.createElement('div');
-    trackHeader.className = 'track-header';
-    trackHeader.textContent = '字幕轨道';
-
-    // 创建轨道内容区域
-    const trackContent = document.createElement('div');
-    trackContent.className = 'track-content';
-    trackContent.id = 'subtitleTrack';
-    trackContent.dataset.trackType = 'subtitle';
-
-    // 渲染字幕片段
-    this.subtitles.forEach(subtitle => {
-      const subtitleElement = this.createSubtitleClipElement(subtitle);
-      if (subtitleElement) {
-        trackContent.appendChild(subtitleElement);
-      }
-    });
-
-    // 组装轨道元素
-    trackContainer.appendChild(trackHeader);
-    trackContainer.appendChild(trackContent);
-    container.appendChild(trackContainer);
-  }
-
-  createSubtitleClipElement(subtitle) {
-    const clipDiv = document.createElement('div');
-    clipDiv.className = 'timeline-clip subtitle';
-    clipDiv.dataset.clipId = subtitle.id;
-    clipDiv.dataset.trackType = 'subtitle';
-
-    // 计算位置和宽度（字幕使用毫秒，需要转换为秒）
-    const startTime = subtitle.startMs / 1000;
-    const endTime = subtitle.endMs / 1000;
-    const duration = endTime - startTime;
-
-    const leftPos = startTime * this.pixelsPerSecond * this.zoomLevel;
-    const width = duration * this.pixelsPerSecond * this.zoomLevel;
-
-    clipDiv.style.left = `${leftPos}px`;
-    clipDiv.style.width = `${width}px`;
-    clipDiv.textContent = subtitle.text;
-
-    // 字幕片段选择
-    clipDiv.addEventListener('click', e => {
-      e.stopPropagation();
-      this.selectSubtitleClip(subtitle);
-    });
-
-    return clipDiv;
-  }
-
-  selectSubtitleClip(subtitle) {
-    // 移除之前的选择
-    document.querySelectorAll('.timeline-clip.selected').forEach(clipEl => {
-      clipEl.classList.remove('selected');
-    });
-
-    // 选择当前字幕片段
-    const clipElement = document.querySelector(
-      `[data-clip-id="${subtitle.id}"]`
-    );
-    if (clipElement) {
-      clipElement.classList.add('selected');
-    }
-
-    // 清除资源选择
-    this.selectedAsset = null;
-    document.querySelectorAll('.asset-item.selected').forEach(item => {
-      item.classList.remove('selected');
-    });
-
-    this.selectedClip = null;
-    this.selectedSubtitle = subtitle;
-    this.updatePropertiesPanel();
-  }
-
-  setupTrackDragDrop() {
-    document.querySelectorAll('.track-content').forEach(track => {
-      track.addEventListener('dragover', e => {
-        e.preventDefault();
-        track.classList.add('drag-over');
-      });
-
-      track.addEventListener('dragleave', () => {
-        track.classList.remove('drag-over');
-      });
-
-      track.addEventListener('drop', e => {
-        e.preventDefault();
-        track.classList.remove('drag-over');
-
-        const data = JSON.parse(e.dataTransfer.getData('text/plain'));
-        const rect = track.getBoundingClientRect();
-
-        // 获取当前滚动偏移量，因为指示器使用了 translateX 同步滚动
-        const timelineTracks = document.querySelector('.timeline-tracks');
-        const scrollLeft = timelineTracks ? timelineTracks.scrollLeft : 0;
-
-        // 计算拖拽位置时需要加上滚动偏移量
-        const dropX = e.clientX - rect.left + scrollLeft;
-        const dropTime = dropX / (this.pixelsPerSecond * this.zoomLevel);
-
-        if (data.assetId) {
-          // Dropping an asset from the asset panel
-          this.addClipToTrack(data.assetId, track.dataset.trackType, dropTime);
-        } else if (data.clipId) {
-          // Moving an existing clip
-          this.moveClip(data.clipId, track.dataset.trackType, dropTime);
-        }
-      });
-    });
-  }
-
-  addClipToTrack(assetId, trackType, startTime) {
-    const asset = this.findAssetById(assetId);
-    if (!asset) return;
-
-    // Validate track type compatibility
-    if (!this.isAssetCompatibleWithTrack(asset.type, trackType)) {
-      alert(`无法将${asset.type}素材添加到${trackType}轨道`);
-      return;
-    }
-
-    const newClip = {
-      id: `clip_${Date.now()}`,
-      assetId: assetId,
-      startTime: Math.max(0, startTime),
-      duration: asset.duration || 5, // Default 5 seconds for images/text
-      trackType: trackType,
-    };
-
-    if (!this.tracks[trackType]) {
-      this.tracks[trackType] = [];
-    }
-
-    this.tracks[trackType].push(newClip);
-    this.renderTimeline();
-    this.selectClip(newClip);
-  }
-
-  moveClip(clipId, newTrackType, newStartTime) {
-    // Find and remove clip from current track
-    let clip = null;
-    Object.keys(this.tracks).forEach(trackType => {
-      const index = this.tracks[trackType].findIndex(c => c.id === clipId);
-      if (index !== -1) {
-        clip = this.tracks[trackType].splice(index, 1)[0];
-      }
-    });
-
-    if (!clip) return;
-
-    // Update clip properties
-    clip.trackType = newTrackType;
-    clip.startTime = Math.max(0, newStartTime);
-
-    // Add to new track
-    if (!this.tracks[newTrackType]) {
-      this.tracks[newTrackType] = [];
-    }
-
-    this.tracks[newTrackType].push(clip);
-    this.renderTimeline();
-    this.selectClip(clip);
-  }
-
-  isAssetCompatibleWithTrack(assetType, trackType) {
-    const compatibility = {
-      video: ['video'],
-      audio: ['audio', 'bgm', 'voice'],
-      image: ['video'],
-      text: ['subtitle'],
-    };
-
-    return compatibility[assetType]?.includes(trackType) || false;
-  }
-
-  updateTimelineRuler() {
-    const ruler = document.getElementById('timelineRuler');
-    if (!ruler) return;
-
-    ruler.innerHTML = '';
-
-    // 创建一个容器来包含所有标尺标记，这样可以使用 translateX 移动
-    const rulerContent = document.createElement('div');
-    rulerContent.className = 'ruler-content';
-    rulerContent.style.position = 'relative';
-    rulerContent.style.width = 'max-content';
-
-    const timelineWidth =
-      this.totalDuration * this.pixelsPerSecond * this.zoomLevel;
-    const interval = this.zoomLevel >= 1 ? 10 : 30; // seconds between markers
-
-    for (let time = 0; time <= this.totalDuration; time += interval) {
-      const marker = document.createElement('div');
-      marker.style.left = `${time * this.pixelsPerSecond * this.zoomLevel}px`;
-      marker.textContent = this.formatTime(time);
-      rulerContent.appendChild(marker);
-    }
-
-    ruler.appendChild(rulerContent);
-  }
-
-  updateTimelineInfo() {
-    const info = document.getElementById('timelineInfo');
-    if (info) {
-      info.textContent = `缩放: ${Math.round(this.zoomLevel * 100)}% | 总时长: ${this.formatTime(this.totalDuration)}`;
-    }
-  }
-
-  zoomTimeline(factor) {
-    this.zoomLevel = Math.max(0.1, Math.min(5, this.zoomLevel * factor));
-    this.renderTimeline();
-    this.updateTimelineRuler();
-    this.updateTimelineInfo();
-    // 只有在播放状态下才更新播放指示器位置，避免暂停时重置位置
-    if (this.isPlaying) {
-      this.updatePlaybackIndicator();
-    }
-  }
-
-  togglePlayback() {
-    const btn = document.getElementById('playPauseBtn');
-    const video = document.getElementById('previewVideo');
-
-    if (this.isPlaying) {
-      // 暂停播放，保存当前播放位置
-      this.isPlaying = false;
-      this.stopPlaybackIndicatorAnimation();
-
-      // 保存当前时间轴位置
-      console.log('Pausing - currentClipIndex:', this.currentClipIndex);
-      console.log('Pausing - playbackClips length:', this.playbackClips.length);
-      console.log(
-        'Pausing - video currentTime:',
-        video ? video.currentTime : 'no video'
-      );
-
-      if (
-        this.currentClipIndex < this.playbackClips.length &&
-        this.playbackClips[this.currentClipIndex]
-      ) {
-        const currentClip = this.playbackClips[this.currentClipIndex];
-        const videoCurrentTime = video ? video.currentTime || 0 : 0;
-        this.currentTime = currentClip.startTime + videoCurrentTime;
-        console.log(
-          'Saved currentTime:',
-          this.currentTime,
-          '(startTime:',
-          currentClip.startTime,
-          '+ videoTime:',
-          videoCurrentTime,
-          ')'
-        );
-      } else {
-        console.log('Cannot save position - invalid clip index or no clips');
-        this.currentTime = 0;
-      }
-
-      if (btn) btn.textContent = '▶️';
-      if (video && !video.paused) {
-        video.pause();
-      }
-      // 同步暂停音频播放
-      this.pauseAudioPlayback();
-    } else {
-      // 继续播放
-      this.isPlaying = true;
-      if (btn) btn.textContent = '⏸️';
-
-      console.log('Resuming playback with currentTime:', this.currentTime);
-      // 从当前位置继续播放
-      this.resumePlayback();
-    }
-  }
-
-  // 从当前位置继续播放
-  resumePlayback() {
-    if (this.playbackClips.length === 0) {
-      console.log('没有可播放的视频片段');
-      return;
-    }
-
-    // 如果还没有开始播放过，从头开始
-    if (this.currentClipIndex === undefined || this.currentClipIndex < 0) {
-      this.startTimelinePlayback();
-      return;
-    }
-
-    // 从保存的位置继续播放
-    this.resumeFromCurrentPosition();
-  }
-
-  startTimelinePlayback() {
-    if (this.playbackClips.length === 0) {
-      console.log('没有可播放的视频片段');
-      return;
-    }
-
-    // 重置播放索引到开头
-    this.currentClipIndex = 0;
-    // 重置当前时间到开头
-    this.currentTime = 0;
-
-    // 开始动画循环更新播放指示器
-    this.startPlaybackIndicatorAnimation();
-
-    // 按时间轴调度音频播放（从时间0开始）
-    this.startAudioPlaybackAtTime(0);
-
-    this.playCurrentClip();
-  }
-
-  resumeFromCurrentPosition() {
-    console.log(
-      'resumeFromCurrentPosition called, currentTime:',
-      this.currentTime
-    );
-
-    if (!this.currentTime || this.currentTime === 0) {
-      // 如果没有保存的位置，从头开始
-      console.log('No saved position, starting from beginning');
-      // 从头开始时需要调度音频播放
-      this.startAudioPlaybackAtTime(0);
-      this.playCurrentClip();
-      return;
-    }
-
-    // 根据保存的时间位置找到对应的片段和片段内的时间
-    let accumulatedTime = 0;
-    let targetClipIndex = 0;
-    let targetClipTime = 0;
-
-    console.log(
-      'Searching for target clip, total clips:',
-      this.playbackClips.length
-    );
-
-    for (let i = 0; i < this.playbackClips.length; i++) {
-      const clip = this.playbackClips[i];
-      const clipDuration = clip.duration;
-
-      console.log(
-        `Clip ${i}: startTime=${clip.startTime}, duration=${clipDuration}, accumulatedTime=${accumulatedTime}`
-      );
-
-      if (accumulatedTime + clipDuration > this.currentTime) {
-        // 找到了目标片段
-        targetClipIndex = i;
-        targetClipTime = this.currentTime - accumulatedTime;
-        console.log(
-          `Found target clip ${targetClipIndex}, targetClipTime=${targetClipTime}`
-        );
-        break;
-      }
-
-      accumulatedTime += clipDuration;
-    }
-
-    // 设置当前片段索引
-    this.currentClipIndex = targetClipIndex;
-    console.log('Set currentClipIndex to:', this.currentClipIndex);
-
-    // 播放目标片段并设置到指定时间
-    const currentPlaybackItem = this.playbackClips[this.currentClipIndex];
-    const video = document.getElementById('previewVideo');
-
-    if (video && currentPlaybackItem) {
-      // 临时停止播放指示器更新，避免闪烁
-      const wasPlaying = this.isPlaying;
-      this.isPlaying = false;
-
-      // 清除之前的事件监听器，避免意外触发
-      video.onloadeddata = null;
-      video.onended = null;
-      video.ontimeupdate = null;
-
-      // 设置视频源
-      video.src = `/static/${currentPlaybackItem.asset.uri}`;
-      console.log('Set video source to:', video.src);
-
-      // 监听视频加载完成事件
-      video.onloadeddata = () => {
-        if (wasPlaying) {
-          // 设置到指定时间点
-          console.log('Setting video currentTime to:', targetClipTime);
-          video.currentTime = targetClipTime;
-
-          // 恢复播放状态
-          this.isPlaying = true;
-
-          // 重新启动requestAnimationFrame动画
-          this.startPlaybackIndicatorAnimation();
-
-          // 根据保存的时间位置调度音频播放
-          this.startAudioPlaybackAtTime(this.currentTime);
-
-          video.play().catch(err => {
-            console.error('播放视频失败:', err);
-            this.playNextClip();
-          });
-        }
-      };
-
-      // 监听视频时间更新事件
-      video.ontimeupdate = () => {
-        this.updateTimeDisplay();
-      };
-
-      // 监听视频播放结束事件
-      video.onended = () => {
-        console.log(
-          '视频播放结束，当前片段索引:',
-          this.currentClipIndex,
-          '总片段数:',
-          this.playbackClips.length
-        );
-        this.playNextClip();
-      };
-
-      // 如果视频已经加载，直接设置时间并播放
-      if (video.readyState >= 2 && wasPlaying) {
-        console.log(
-          'Video already loaded, setting currentTime to:',
-          targetClipTime
-        );
-        video.currentTime = targetClipTime;
-
-        // 恢复播放状态
-        this.isPlaying = true;
-
-        // 重新启动requestAnimationFrame动画
-        this.startPlaybackIndicatorAnimation();
-
-        // 根据保存的时间位置调度音频播放
-        this.startAudioPlaybackAtTime(this.currentTime);
-
-        video.play().catch(err => {
-          console.error('播放视频失败:', err);
-          this.playNextClip();
-        });
-      }
-    }
-  }
-
-  playCurrentClip() {
-    console.log('playCurrentClip调用，索引:', this.currentClipIndex);
-    if (this.currentClipIndex >= this.playbackClips.length) {
-      console.log('播放完成，重新从头开始循环播放');
-      // 播放完成，重新从头开始循环播放
-      this.currentClipIndex = 0;
-      this.currentTime = 0;
-      // 重新调度整条时间轴的音频播放
-      this.startAudioPlaybackAtTime(0);
-    }
-
-    const currentPlaybackItem = this.playbackClips[this.currentClipIndex];
-    const video = document.getElementById('previewVideo');
-
-    console.log('当前播放项目:', currentPlaybackItem);
-
-    if (video && currentPlaybackItem) {
-      // 清除之前的事件监听器，避免重复绑定
-      video.onloadeddata = null;
-      video.ontimeupdate = null;
-      video.onended = null;
-
-      // 设置视频源
-      video.src = `/static/${currentPlaybackItem.asset.uri}`;
-      console.log('设置视频源:', video.src);
-
-      // 监听视频加载完成事件
-      video.onloadeddata = () => {
-        console.log(
-          '视频加载完成，持续时间:',
-          video.duration,
-          '当前时间:',
-          video.currentTime
-        );
-
-        // 计算播放速度：asset.duration / clip.duration
-        const assetDuration =
-          currentPlaybackItem.asset.duration || video.duration;
-        const clipDuration = currentPlaybackItem.duration;
-        const playbackRate = assetDuration / clipDuration;
-
-        console.log(
-          `设置播放速度: asset.duration=${assetDuration}, clip.duration=${clipDuration}, playbackRate=${playbackRate}`
-        );
-        video.playbackRate = playbackRate;
-
-        if (this.isPlaying) {
-          // 更新当前时间为该片段的开始时间
-          this.currentTime = currentPlaybackItem.startTime;
-
-          // 启动requestAnimationFrame动画
-          this.startPlaybackIndicatorAnimation();
-          // 开始按时间轴调度音频播放
-          // 注意：首次播放时已在startTimelinePlayback里调度，这里不重复调度，避免中途切片时重置音频
-
-          video.play().catch(err => {
-            console.error('播放视频失败:', err);
-            this.playNextClip();
-          });
-        }
-      };
-
-      // 监听视频时间更新事件 - 移除直接更新，改用requestAnimationFrame
-      video.ontimeupdate = () => {
-        this.updateTimeDisplay();
-      };
-
-      // 监听视频播放结束事件
-      video.onended = () => {
-        this.playNextClip();
-      };
-
-      // 如果视频已经加载，直接播放
-      if (video.readyState >= 2 && this.isPlaying) {
-        // 计算播放速度：asset.duration / clip.duration
-        const assetDuration =
-          currentPlaybackItem.asset.duration || video.duration;
-        const clipDuration = currentPlaybackItem.duration;
-        const playbackRate = assetDuration / clipDuration;
-
-        console.log(
-          `设置播放速度: asset.duration=${assetDuration}, clip.duration=${clipDuration}, playbackRate=${playbackRate}`
-        );
-        video.playbackRate = playbackRate;
-
-        // 更新当前时间为该片段的开始时间
-        this.currentTime = currentPlaybackItem.startTime;
-
-        // 启动requestAnimationFrame动画
-        this.startPlaybackIndicatorAnimation();
-        // 开始按时间轴调度音频播放（避免与startTimelinePlayback重复调用，这里不额外调度）
-
-        video.play().catch(err => {
-          console.error('播放视频失败:', err);
-          this.playNextClip();
-        });
-      }
-    }
-  }
-
-  playNextClip() {
-    console.log(
-      'playNextClip调用，当前索引:',
-      this.currentClipIndex,
-      '总片段数:',
-      this.playbackClips.length
-    );
-    if (this.isPlaying) {
-      this.currentClipIndex++;
-      console.log('播放下一个片段，新索引:', this.currentClipIndex);
-      this.playCurrentClip();
-    }
-  }
-
-  stopPlayback() {
-    this.isPlaying = false;
-    // 不重置currentClipIndex和currentTime，保持当前位置
-    // this.currentClipIndex = 0;
-
-    // 停止播放指示器动画循环
-    this.stopPlaybackIndicatorAnimation();
-
-    const btn = document.getElementById('playPauseBtn');
-    const video = document.getElementById('previewVideo');
-    // 不隐藏播放指示器，保持在当前位置
-    // const indicator = document.getElementById('playbackIndicator');
-
-    if (btn) btn.textContent = '▶️';
-    if (video && !video.paused) {
-      video.pause();
-    }
-    // 保持播放指示器显示在当前位置
-    // if (indicator) {
-    //   indicator.style.display = 'none';
-    // }
-  }
-
-  toggleCategory(header) {
-    const category = header.parentElement;
-    const assetList = category.querySelector('.asset-list');
-
-    if (assetList.style.display === 'none') {
-      assetList.style.display = 'block';
-      header.style.opacity = '1';
-    } else {
-      assetList.style.display = 'none';
-      header.style.opacity = '0.7';
-    }
-  }
-
-  searchAssets(query) {
-    const searchTerm = query.toLowerCase();
-
-    document.querySelectorAll('.asset-item').forEach(item => {
-      const name = item.querySelector('.asset-name').textContent.toLowerCase();
-      if (name.includes(searchTerm)) {
-        item.style.display = 'flex';
-      } else {
-        item.style.display = 'none';
-      }
-    });
-  }
-
-  updatePropertiesPanel() {
-    const content = document.getElementById('propertiesContent');
-    if (!content) return;
-
-    if (this.selectedClip) {
-      content.innerHTML = this.generateClipProperties(this.selectedClip);
-    } else if (this.selectedSubtitle) {
-      content.innerHTML = this.generateSubtitleProperties(
-        this.selectedSubtitle
-      );
-    } else if (this.selectedAsset) {
-      content.innerHTML = this.generateAssetProperties(this.selectedAsset);
-    } else {
-      content.innerHTML =
-        '<div class="no-selection">选择素材或轨道元素以编辑属性</div>';
-    }
-  }
-
-  generateClipProperties(clip) {
-    const asset = this.findAssetById(clip.assetId);
-    if (!asset) return '';
-
-    return `
-      <div class="property-group">
-        <h4>基本属性</h4>
-        <div class="property-item">
-          <label class="property-label">名称</label>
-          <input type="text" class="property-input" value="${asset.name}" readonly>
-        </div>
-        <div class="property-item">
-          <label class="property-label">轨道类型</label>
-          <input type="text" class="property-input" value="${clip.trackType || '未知'}" readonly>
-        </div>
-        <div class="property-item">
-          <label class="property-label">开始时间 (秒)</label>
-          <input type="number" class="property-input" value="${clip.startTime}" 
-                 onchange="timelineEditor.updateClipProperty('${clip.id}', 'startTime', this.value)">
-        </div>
-        <div class="property-item">
-          <label class="property-label">持续时间 (秒)</label>
-          <input type="number" class="property-input" value="${clip.duration}" 
-                 onchange="timelineEditor.updateClipProperty('${clip.id}', 'duration', this.value)">
-        </div>
-      </div>
-    `;
-  }
-
-  generateSubtitleProperties(subtitle) {
-    return `
-      <div class="property-group">
-        <h4>字幕属性</h4>
-        <div class="property-item">
-          <label class="property-label">文本内容</label>
-          <textarea class="property-input" rows="3" 
-                    onchange="timelineEditor.updateSubtitleProperty('${subtitle.id}', 'text', this.value)">${subtitle.text}</textarea>
-        </div>
-        <div class="property-item">
-          <label class="property-label">开始时间 (秒)</label>
-          <input type="number" class="property-input" value="${subtitle.startMs / 1000}" step="0.1"
-                 onchange="timelineEditor.updateSubtitleProperty('${subtitle.id}', 'startMs', this.value * 1000)">
-        </div>
-        <div class="property-item">
-          <label class="property-label">结束时间 (秒)</label>
-          <input type="number" class="property-input" value="${subtitle.endMs / 1000}" step="0.1"
-                 onchange="timelineEditor.updateSubtitleProperty('${subtitle.id}', 'endMs', this.value * 1000)">
-        </div>
-        <div class="property-item">
-          <label class="property-label">持续时间 (秒)</label>
-          <input type="text" class="property-input" value="${(subtitle.endMs - subtitle.startMs) / 1000}" readonly>
-        </div>
-      </div>
-      
-      <div class="property-group">
-        <h4>样式属性</h4>
-        <div class="property-item">
-          <label class="property-label">字体大小</label>
-          <input type="number" class="property-input" value="${subtitle.style?.fontSize || 16}" 
-                 onchange="timelineEditor.updateSubtitleStyle('${subtitle.id}', 'fontSize', this.value)">
-        </div>
-        <div class="property-item">
-          <label class="property-label">字体颜色</label>
-          <input type="color" class="property-input" value="${subtitle.style?.color || '#ffffff'}" 
-                 onchange="timelineEditor.updateSubtitleStyle('${subtitle.id}', 'color', this.value)">
-        </div>
-      </div>
-    `;
-  }
-
-  generateAssetProperties(asset) {
-    return `
-      <div class="property-group">
-        <h4>素材信息</h4>
-        <div class="property-item">
-          <label class="property-label">名称</label>
-          <input type="text" class="property-input" value="${asset.name}" readonly>
-        </div>
-        <div class="property-item">
-          <label class="property-label">类型</label>
-          <input type="text" class="property-input" value="${asset.type}" readonly>
-        </div>
-        <div class="property-item">
-          <label class="property-label">时长</label>
-          <input type="text" class="property-input" value="${this.formatTime(asset.duration)}" readonly>
-        </div>
-      </div>
-    `;
-  }
-
-  updateClipProperty(clipId, property, value) {
-    console.log('updateClipProperty called:', clipId, property, value);
-    // Find the clip in all tracks
-    Object.keys(this.tracks).forEach(trackType => {
-      const tracks = this.tracks[trackType];
-      let clip = null;
-      for (const track of tracks) {
-        if (track.clips.find(c => c.id === clipId)) {
-          clip = track.clips.find(c => c.id === clipId);
-          break;
-        }
-      }
-      if (clip) {
-        console.log('Found clip, updating property:', clip, property, value);
-        const numValue = parseFloat(value) || 0;
-        clip[property] = numValue;
-
-        // 同步更新相关字段
-        if (property === 'duration') {
-          // 当更新 duration (秒) 时，同步更新 durationMs (毫秒)
-          clip.durationMs = numValue * 1000;
-          console.log('Synced durationMs:', clip.durationMs);
-        } else if (property === 'startTime') {
-          // 当更新 startTime (秒) 时，同步更新 startMs (毫秒)
-          clip.startMs = numValue * 1000;
-          console.log('Synced startMs:', clip.startMs);
-        } else if (property === 'inPoint') {
-          // 当更新 inPoint (秒) 时，同步更新 inMs (毫秒)
-          clip.inMs = numValue * 1000;
-          console.log('Synced inMs:', clip.inMs);
-        }
-
-        console.log('Calling renderTimeline...');
-        this.renderTimeline();
-        this.updatePropertiesPanel(); // 更新属性面板以显示新的属性值
-      }
-    });
-  }
-
-  updateSubtitleProperty(subtitleId, property, value) {
-    const subtitle = this.subtitles.find(s => s.id === subtitleId);
-    if (subtitle) {
-      if (property === 'startMs' || property === 'endMs') {
-        subtitle[property] = parseFloat(value) || 0;
-      } else {
-        subtitle[property] = value;
-      }
-      this.renderTimeline();
-      this.updatePropertiesPanel(); // 更新属性面板以显示新的持续时间
-    }
-  }
-
-  updateSubtitleStyle(subtitleId, styleProperty, value) {
-    const subtitle = this.subtitles.find(s => s.id === subtitleId);
-    if (subtitle) {
-      if (!subtitle.style) {
-        subtitle.style = {};
-      }
-      if (styleProperty === 'fontSize') {
-        subtitle.style[styleProperty] = parseFloat(value) || 16;
-      } else {
-        subtitle.style[styleProperty] = value;
-      }
-      this.renderTimeline();
-    }
-  }
-
-  findAssetById(assetId) {
-    for (const type of Object.keys(this.assets)) {
-      const asset = this.assets[type].find(a => a.id === assetId);
-      if (asset) return asset;
-    }
-    return null;
-  }
-
-  // ===== 音频播放相关方法 =====
-  getAllAudioClipsWithAssets() {
-    const result = [];
-    const collect = (trackGroup = []) => {
-      trackGroup.forEach(track => {
-        track.clips.forEach(clip => {
-          const asset = this.findAssetById(clip.assetId);
-          if (asset) {
-            result.push({ clip, asset, trackType: track.type || 'audio' });
-          }
-        });
-      });
-    };
-
-    collect(this.tracks.audio);
-    collect(this.tracks.bgm);
-    // 如果存在语音轨，可一并处理
-    if (this.tracks.voice && this.tracks.voice.length) {
-      collect(this.tracks.voice);
-    }
-
-    return result;
-  }
-
-  resetAudioPlayback() {
-    // 清除所有定时器
-    if (this.audioTimers && this.audioTimers.length) {
-      this.audioTimers.forEach(tid => clearTimeout(tid));
-    }
-    this.audioTimers = [];
-
-    // 停止并移除所有音频元素
-    if (this.audioPlayers) {
-      Object.values(this.audioPlayers).forEach(audio => {
-        try {
-          audio.pause();
-        } catch (e) {
-          // 避免空的 catch 语句，记录调试信息
-          console.warn('resetAudioPlayback: pause() 失败', e);
-        }
-        try {
-          audio.src = '';
-        } catch (e) {
-          console.warn('resetAudioPlayback: 清空 src 失败', e);
-        }
-        try {
-          audio.remove();
-        } catch (e) {
-          console.warn('resetAudioPlayback: remove() 失败', e);
-        }
-      });
-    }
-    this.audioPlayers = {};
-  }
-
-  pauseAudioPlayback() {
-    // 为了简化恢复逻辑，这里直接重置，恢复时重新根据时间轴进行调度
-    this.resetAudioPlayback();
-  }
-
-  startAudioPlaybackAtTime(timelineTimeSec) {
-    // 每次重新调度前，先清理旧的音频和定时器
-    this.resetAudioPlayback();
-
-    const audioClips = this.getAllAudioClipsWithAssets();
-    const container =
-      document.querySelector('.video-container') || document.body;
-
-    audioClips.forEach(({ clip, asset }) => {
-      const clipStart = clip.startTime; // 秒
-      const clipDuration = clip.duration; // 秒
-      const clipEnd = clipStart + clipDuration;
-
-      // 如果当前时间在片段结束之后，跳过
-      if (timelineTimeSec >= clipEnd) {
-        return;
-      }
-
-      const startDelaySec = clipStart - timelineTimeSec; // 负数表示立即开始且已过开头
-      const offsetSec = Math.max(0, timelineTimeSec - clipStart); // 立即开始时从片段内的偏移
-
-      const scheduleStart = () => {
-        const remainingSec = clipDuration - offsetSec;
-        if (remainingSec <= 0) return; // 无需播放
-
-        const audio = document.createElement('audio');
-        audio.src = `/static/${asset.uri}`;
-        audio.preload = 'auto';
-        audio.style.display = 'none';
-        audio.dataset.clipId = clip.id;
-        container.appendChild(audio);
-
-        // 设置起始播放位置（素材内时间=入点+片段内偏移）
-        const playStartInAsset = (clip.inPoint || 0) + offsetSec;
-        const setAndPlay = () => {
-          try {
-            audio.currentTime = playStartInAsset;
-          } catch (e) {
-            // 某些浏览器在未加载metadata前设置currentTime会报错
-          }
-          // 开始播放
-          audio.play().catch(err => {
-            console.error('音频播放失败:', err);
-          });
-
-          // 添加时间更新监听器，确保音频在clip.duration时长后停止
-          audio.addEventListener('timeupdate', () => {
-            const currentAssetTime = audio.currentTime;
-            const playedDuration = currentAssetTime - playStartInAsset;
-
-            // 如果播放时长超过了clip的duration，立即停止
-            if (playedDuration >= remainingSec) {
-              console.log(`音频 ${clip.id} 达到clip时长限制，停止播放`);
-              audio.pause();
-              audio.currentTime = 0;
-            }
-          });
-        };
-
-        // 等待元数据加载后设置currentTime并播放
-        audio.addEventListener('loadedmetadata', setAndPlay, { once: true });
-        // 如果已经可以播放，直接尝试
-        audio.addEventListener('canplay', setAndPlay, { once: true });
-
-        // 记录播放器
-        this.audioPlayers[clip.id] = audio;
-
-        // 定时停止此音频
-        const stopDelayMs = remainingSec * 1000;
-        const stopTimer = setTimeout(
-          () => this.stopAudioForClip(clip.id),
-          stopDelayMs
-        );
-        this.audioTimers.push(stopTimer);
-      };
-
-      if (startDelaySec <= 0) {
-        // 立即开始（从偏移位置）
-        scheduleStart();
-      } else {
-        // 延时开始
-        const startTimer = setTimeout(scheduleStart, startDelaySec * 1000);
-        this.audioTimers.push(startTimer);
-      }
-    });
-  }
-
-  stopAudioForClip(clipId) {
-    const audio = this.audioPlayers[clipId];
-    if (audio) {
-      try {
-        audio.pause();
-      } catch (e) {
-        console.warn('stopAudioForClip: pause() 失败', e);
-      }
-      try {
-        audio.src = '';
-      } catch (e) {
-        console.warn('stopAudioForClip: 清空 src 失败', e);
-      }
-      try {
-        audio.remove();
-      } catch (e) {
-        console.warn('stopAudioForClip: remove() 失败', e);
-      }
-      delete this.audioPlayers[clipId];
-    }
-  }
-
-  getTotalDuration() {
-    let maxDuration = 0;
-
-    // 遍历所有轨道的所有片段，找到最大的结束时间
-    Object.values(this.tracks).forEach(trackGroup => {
-      trackGroup.forEach(track => {
-        track.clips.forEach(clip => {
-          const endTime = (clip.startMs + clip.durationMs) / 1000;
-          maxDuration = Math.max(maxDuration, endTime);
-        });
-      });
-    });
-
-    // 如果没有片段，返回默认时长60秒
-    return maxDuration > 0 ? maxDuration : 60;
-  }
-
-  formatTime(seconds) {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-  }
-
-  updateTimeDisplay() {
-    const video = document.getElementById('previewVideo');
-    const timeDisplay = document.getElementById('timeDisplay');
-
-    if (video && timeDisplay) {
-      // 计算整个时间轴的总时长
-      const totalTimelineDuration = this.totalDuration;
-
-      // 计算当前在整个时间轴中的绝对位置
-      let currentTimelinePosition = 0;
-      if (this.isPlaying && this.currentClipIndex < this.playbackClips.length) {
-        const currentClip = this.playbackClips[this.currentClipIndex];
-        const videoCurrentTime = video.currentTime || 0;
-        currentTimelinePosition = currentClip.startTime + videoCurrentTime;
-      } else if (!this.isPlaying) {
-        // 暂停状态下，使用保存的当前时间位置
-        currentTimelinePosition = this.currentTime || 0;
-      }
-
-      timeDisplay.textContent = `${this.formatTime(currentTimelinePosition)} / ${this.formatTime(totalTimelineDuration)}`;
-
-      // 只在播放状态下更新播放指示器位置，避免暂停时重置
-      if (this.isPlaying) {
-        this.updatePlaybackIndicator(currentTimelinePosition);
-      }
-    }
-  }
-
-  // 使用requestAnimationFrame平滑更新播放指示器
-  startPlaybackIndicatorAnimation() {
-    // 如果已经有动画在运行，先停止它
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-    }
-
-    const animate = () => {
-      if (this.isPlaying) {
-        // 计算当前在时间轴上的绝对位置
-        const video = document.getElementById('previewVideo');
-        if (video && this.playbackClips[this.currentClipIndex]) {
-          const currentClip = this.playbackClips[this.currentClipIndex];
-          const timelinePosition = currentClip.startTime + video.currentTime;
-          this.currentTime = timelinePosition;
-          this.updatePlaybackIndicator(timelinePosition);
-        }
-
-        // 继续下一帧动画
-        this.animationFrameId = requestAnimationFrame(animate);
-      }
-    };
-
-    // 开始动画循环
-    this.animationFrameId = requestAnimationFrame(animate);
-  }
-
-  // 停止播放指示器动画
-  stopPlaybackIndicatorAnimation() {
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-      this.animationFrameId = null;
-    }
-  }
-
-  updatePlaybackIndicator(currentTimelinePosition = null) {
-    // 等待DOM完全加载
-    if (document.readyState !== 'complete') {
-      setTimeout(
-        () => this.updatePlaybackIndicator(currentTimelinePosition),
-        100
-      );
-      return;
-    }
-
-    const indicator = document.getElementById('playbackIndicator');
-    if (!indicator) {
-      console.warn(
-        'Playback indicator element not found, DOM may not be ready'
-      );
-      // 尝试创建指示器元素
-      this.createPlaybackIndicator();
-      return;
-    }
-
-    // 如果没有传入位置参数，使用当前时间
-    const position =
-      currentTimelinePosition !== null
-        ? currentTimelinePosition
-        : this.currentTime;
-
-    // 显示播放指示器
-    indicator.style.display = 'block';
-
-    // 计算指示器在时间轴上的像素位置
-    // 由于timeline-ruler有120px的左边距，指示器位置不需要额外偏移
-    // 因为指示器是timeline-ruler的子元素，会自动跟随父元素的偏移
-    const pixelPosition = position * this.pixelsPerSecond * this.zoomLevel;
-    indicator.style.left = `${pixelPosition}px`;
-
-    // 更新字幕显示
-    this.updateSubtitleDisplay(position);
-
-    // console.log(
-    //   `Playback indicator updated: position=${position}, pixelPosition=${pixelPosition}`
-    // );
-  }
-
-  createPlaybackIndicator() {
-    const timelineRuler = document.getElementById('timelineRuler');
-    if (!timelineRuler) {
-      console.error(
-        'Timeline ruler not found, cannot create playback indicator'
-      );
-      return;
-    }
-
-    // 检查是否已存在
-    let indicator = document.getElementById('playbackIndicator');
-    if (indicator) {
-      return;
-    }
-
-    // 创建播放指示器元素
-    indicator = document.createElement('div');
-    indicator.id = 'playbackIndicator';
-    indicator.className = 'playback-indicator';
-    timelineRuler.appendChild(indicator);
-
-    console.log('Playback indicator created dynamically');
-  }
-
-  handleKeyboard(e) {
-    if (e.code === 'Space') {
-      e.preventDefault();
-      this.togglePlayback();
-    } else if (e.code === 'Delete' && this.selectedClip) {
-      this.deleteSelectedClip();
-    }
-  }
-
-  deleteSelectedClip() {
-    if (!this.selectedClip) return;
-
-    Object.keys(this.tracks).forEach(trackType => {
-      const index = this.tracks[trackType].findIndex(
-        c => c.id === this.selectedClip.id
-      );
-      if (index !== -1) {
-        this.tracks[trackType].splice(index, 1);
-      }
-    });
-
-    this.selectedClip = null;
-    this.renderTimeline();
-    this.updatePropertiesPanel();
-  }
-
-  // 过滤掉额外添加的字段，只保留原始数据
-  filterClips(clips) {
-    if (!clips || !Array.isArray(clips)) {
-      return [];
-    }
-
-    return clips.map(clip => {
-      // 创建新对象，排除额外添加的字段
-      const { startTime, duration, inPoint, ...originalClip } = clip;
-      return originalClip;
-    });
-  }
-
-  // Project management methods
-  async updateProject() {
-    try {
-      // 将app.js的tracks格式转换为draft_content.json的格式
-      const convertedTracks = [];
-
-      // 转换video tracks
-      if (this.tracks.video && this.tracks.video.length > 0) {
-        this.tracks.video.forEach((track, index) => {
-          convertedTracks.push({
-            id: track.id || `video-track-${index + 1}`,
-            type: 'video',
-            clips: this.filterClips(track.clips) || [],
-          });
-        });
-      }
-
-      // 转换audio tracks
-      if (this.tracks.audio && this.tracks.audio.length > 0) {
-        this.tracks.audio.forEach((track, index) => {
-          convertedTracks.push({
-            id: track.id || `audio-track-${index + 1}`,
-            type: 'audio',
-            clips: this.filterClips(track.clips) || [],
-          });
-        });
-      }
-
-      // 转换bgm tracks
-      if (this.tracks.bgm && this.tracks.bgm.length > 0) {
-        this.tracks.bgm.forEach((track, index) => {
-          convertedTracks.push({
-            id: track.id || `bgm-track-${index + 1}`,
-            type: 'audio',
-            clips: this.filterClips(track.clips) || [],
-          });
-        });
-      }
-
-      // 将app.js的assets格式转换为draft_content.json的格式
-      const convertedAssets = [];
-
-      // 转换video assets
-      if (this.assets.video && this.assets.video.length > 0) {
-        this.assets.video.forEach(asset => {
-          convertedAssets.push({
-            id: asset.id,
-            type: 'video',
-            uri: asset.uri,
-            durationMs: Math.round(asset.duration * 1000),
-          });
-        });
-      }
-
-      // 转换audio assets
-      if (this.assets.audio && this.assets.audio.length > 0) {
-        this.assets.audio.forEach(asset => {
-          convertedAssets.push({
-            id: asset.id,
-            type: 'audio',
-            uri: asset.uri,
-            durationMs: Math.round(asset.duration * 1000),
-          });
-        });
-      }
-
-      // 转换image assets
-      if (this.assets.image && this.assets.image.length > 0) {
-        this.assets.image.forEach(asset => {
-          convertedAssets.push({
-            id: asset.id,
-            type: 'image',
-            uri: asset.uri,
-            durationMs: Math.round(asset.duration * 1000),
-          });
-        });
-      }
-
-      // 收集当前的项目数据
-      const projectData = {
-        assets: convertedAssets,
-        tracks: convertedTracks,
-        totalDuration: this.totalDuration,
-        subtitles: this.subtitles || [],
-      };
-
-      // 发送更新请求到服务器
-      const response = await fetch('/api/update-draft', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(projectData),
-      });
-
-      if (response.ok) {
-        alert('项目已成功更新到 draft_content.json');
-      } else {
-        const error = await response.text();
-        alert('更新失败: ' + error);
-      }
-    } catch (error) {
-      console.error('更新项目时出错:', error);
-      alert('更新失败: ' + error.message);
-    }
-  }
-
-  setupTimelineRulerClick() {
-    const timelineRuler = document.querySelector('.timeline-ruler');
-    if (!timelineRuler) return;
-
-    timelineRuler.addEventListener('click', e => {
-      const timelineTracks = document.querySelector('.timeline-tracks');
-      if (!timelineTracks) return;
-
-      const rect = timelineRuler.getBoundingClientRect();
-      const scrollLeft = timelineTracks.scrollLeft;
-
-      // 考虑滚动偏移量的鼠标位置
-      const x = e.clientX - rect.left + scrollLeft;
-      const clampedX = Math.max(0, Math.min(x, rect.width + scrollLeft));
-
-      // 计算对应的时间位置
-      const timePosition = clampedX / this.pixelsPerSecond;
-
-      // 如果正在播放，先点击播放按钮暂停播放，然后延迟跳转
-      if (this.isPlaying) {
-        this.togglePlayback(); // 模拟点击播放按钮暂停
-        setTimeout(() => {
-          this.seekToTimelinePosition(timePosition);
-        }, 100);
-      } else {
-        // 如果没有播放，直接跳转
-        this.seekToTimelinePosition(timePosition);
-      }
-    });
-  }
-
-  seekToTimelinePosition(timelinePosition) {
-    // 更新当前时间位置
-    this.currentTime = timelinePosition;
-
-    // 找到在指定时间位置的视频片段
-    for (
-      let trackIndex = 0;
-      trackIndex < this.tracks.video.length;
-      trackIndex++
-    ) {
-      const track = this.tracks.video[trackIndex];
-      for (let clipIndex = 0; clipIndex < track.clips.length; clipIndex++) {
-        const clip = track.clips[clipIndex];
-        if (
-          timelinePosition >= clip.startTime &&
-          timelinePosition < clip.startTime + clip.duration
-        ) {
-          // 计算在该片段内的相对时间
-          const relativeTime = timelinePosition - clip.startTime + clip.inPoint;
-
-          // 更新当前片段索引
-          this.currentClipIndex = clipIndex;
-
-          // 根据assetId找到对应的asset
-          const asset = this.findAssetById(clip.assetId);
-          if (asset) {
-            // 选择该片段并跳转到相应时间
-            this.selectAsset(asset);
-            const video = document.getElementById('previewVideo');
-            if (video) {
-              // 确保视频已加载后再设置时间
-              const setVideoTime = () => {
-                video.currentTime = relativeTime;
-                // 强制更新视频帧显示
-                video.pause();
-                video.currentTime = relativeTime;
-                // 拖拽进度到新位置时，暂停当前音频，等待用户继续播放
-                this.pauseAudioPlayback();
-              };
-
-              if (video.readyState >= 2) {
-                // 视频已加载足够数据
-                setVideoTime();
-              } else {
-                // 等待视频加载
-                video.addEventListener('loadeddata', setVideoTime, {
-                  once: true,
-                });
-              }
-            }
-          }
-
-          // 更新播放指示器位置和时间显示
-          this.updatePlaybackIndicator(timelinePosition);
-          this.updateTimeDisplay();
-          return;
-        }
-      }
-    }
-
-    // 如果没有找到对应的视频片段，但仍在时间轴范围内
-    if (timelinePosition >= 0 && timelinePosition <= this.getTotalDuration()) {
-      // 更新播放指示器位置和时间显示
-      this.updatePlaybackIndicator(timelinePosition);
-      this.updateTimeDisplay();
-    }
-  }
-
-  setupVideoEvents() {
-    const video = document.getElementById('previewVideo');
-    if (!video) return;
-
-    // 监听视频时间更新事件，只更新时间显示
-    video.addEventListener('timeupdate', () => {
-      // 只更新时间显示，不更新播放指示器位置
-      // 播放指示器位置由requestAnimationFrame动画循环控制
-      this.updateTimeDisplay();
-    });
-
-    // 监听视频播放结束事件
-    video.addEventListener('ended', () => {
-      this.playNextClip();
-    });
-
-    // 监听视频加载完成事件
-    video.addEventListener('loadeddata', () => {
-      if (this.isPlaying) {
-        video.play().catch(err => {
-          console.error('Failed to play video:', err);
-        });
-      }
-    });
-  }
-
-  setupTimelineScrollSync() {
-    const timelineRuler = document.querySelector('.timeline-ruler');
-    const timelineTracks = document.querySelector('.timeline-tracks');
-
-    if (timelineRuler && timelineTracks) {
-      // 监听轨道区域的横向滚动，使用 translateX 同步时间轴标尺
-      timelineTracks.addEventListener('scroll', () => {
-        const scrollLeft = timelineTracks.scrollLeft;
-        // 使用 translateX 来移动 ruler 内容，而不是依赖 scrollLeft
-        const rulerContent =
-          timelineRuler.querySelector('.ruler-content') || timelineRuler;
-        rulerContent.style.transform = `translateX(-${scrollLeft}px)`;
-
-        const playbackIndicator = document.getElementById('playbackIndicator');
-        if (playbackIndicator) {
-          // 同步播放指示器位置
-          playbackIndicator.style.transform = `translateX(-${scrollLeft}px)`;
-        }
-
-        // 只有在播放状态下才更新播放指示器的位置，避免暂停时重置位置
-        if (this.isPlaying) {
-          this.updatePlaybackIndicator();
-        }
-      });
-    }
-  }
-
-  updateSubtitleDisplay(currentTimeSeconds) {
-    const subtitleText = document.getElementById('subtitleText');
-    if (!subtitleText) return;
-
-    // 将当前时间转换为毫秒
-    const currentTimeMs = currentTimeSeconds * 1000;
-
-    // 查找当前时间应该显示的字幕
-    const currentSubtitle = this.subtitles.find(subtitle => {
-      return (
-        currentTimeMs >= subtitle.startMs && currentTimeMs <= subtitle.endMs
-      );
-    });
-
-    if (currentSubtitle) {
-      // 显示字幕
-      subtitleText.textContent = currentSubtitle.text;
-      subtitleText.style.display = 'block';
-
-      // 应用字幕样式
-      if (currentSubtitle.style) {
-        if (currentSubtitle.style.fontSize) {
-          subtitleText.style.fontSize =
-            currentSubtitle.style.fontSize / 2 + 'px';
-        }
-        if (currentSubtitle.style.color) {
-          subtitleText.style.color = currentSubtitle.style.color;
-        }
-      }
-    } else {
-      // 隐藏字幕
-      subtitleText.style.display = 'none';
-    }
-  }
-}
-
-// Initialize the timeline editor when the page loads
-let timelineEditor;
-document.addEventListener('DOMContentLoaded', () => {
-  timelineEditor = new TimelineEditor();
-});