跳到主要内容

回放流程

回放页是 BlinkLife 最复杂的页面，负责视频回放、三层时间轴交互、高光事件浏览/编辑/删除、剪辑触发，支持横版和竖版视频两种布局模式。

用户旅程​

录制结束 ──┐
首页卡片 ──┤
历史记录 ──┼──→ 回放页 ──→ 剪辑列表 / 首页
外部导入 ──┘

页面入口​

入口来源页面携带参数
录制结束跳转RecordingPageRecordingRecord, fromRecording=true
首页卡片点击HomePageRecordingRecord
历史记录条目HistoryPageRecordingRecord
外部导入完成ExternalClipPageRecordingRecord (pushReplacement)

页面布局​

横版视频​

┌──────────────────────────┐
│       视频播放器          │ ← 宽度 96%，圆角 12
│     (操作栏 overlay)      │
├──────────────────────────┤
│   时间轴（三层绘制 48px） │
├──────────────────────────┤
│   筛选标签（可选）        │
├──────────────────────────┤
│   事件标题行（吸顶）      │
│   高光事件列表            │
└──────────────────────────┘

竖版视频​

┌──────────────────────────┐
│      视频播放器           │ ← 占 55%（下拉收起到 35%）
│    cover → contain 过渡   │
├──────────────────────────┤
│   时间轴 (36px)          │ ← 跟随 shrinkFraction
├──────────────────────────┤
│   筛选标签（pinned 吸顶） │
├──────────────────────────┤
│   事件标题行（吸顶）      │
│   高光事件列表            │
└──────────────────────────┘

核心交互​

1. 视频播放控制​

[打点]     [◀ 上一条] [▶||] [下一条 ▶]     [倍速] [静音] [全屏]
  • 倍速循环: 0.5x → 1.0x → 1.5x → 2.0x
  • 长按快进: 2x 快速播放 + 触觉反馈
  • 上/下一条: 基于 selectedDotId 索引导航，跳转前移 5 秒

2. 时间轴交互​

  • 拖拽: 30ms 节流 + 磁吸吸附 + 触觉反馈
  • 点击 marker: 前移 5 秒跳转 + 自动播放
  • 模式切换: 全部 ↔ 仅高光
  • 筛选: 按动作类型过滤（联动事件列表和 marker）

3. 高光事件操作​

  • 点击: 前移 5 秒跳转 + 自动播放
  • 左滑操作: 剪辑 / 编辑 / 删除
  • 编辑: BottomSheet（动作类型 + 时间微调 ±1s/±5s）
  • 已剪辑标签: 绿色 "✂ 已剪辑"，点击弹出匹配片段

4. 更多菜单（AppBar 右上角）​

菜单项条件
一键剪辑 / 剪辑已选默认 / 多选模式
查看已有剪辑有剪辑记录
编辑剪辑参数默认
导入打点/视频recordType=2/3
分享 / 删除记录默认

5. 全屏播放​

  • 竖版: 同页全屏（AnimationController 300ms）
  • 横版: 同页全屏（SystemChrome 旋转屏幕）
  • 操作栏 3 秒自动隐藏

状态流转​

初始加载 → 检测 isPortrait → 加载打点 → 加载元数据 → 恢复剪辑任务
  ↓
播放中 → position ~10Hz 更新 → 仅高光模式自动跳转
  ↓
编辑 → 修改 DotRecord → 重写 .blink → 更新 DB → 联动刷新
  ↓
剪辑 → submitTask → fire-and-forget → AppBar 进度环 → 完成 Toast

相关文档​