媒体流程组件

@mbjia/components

媒体流程组件

负责视频下载、素材拆条、视频截取等长链路业务。

媒体流程组件负责视频下载、素材拆条、视频截取等长链路业务。

模块定位

处理视频下载、素材拆条、视频截取、分段播放等长链路任务，通常和权益校验、任务轮询、结果下载联动。

下载流程拆条流程视频抓取

接入前确认

需要 eventBus、权益接口、任务接口、视频素材数据。部分流程会打开会员或点数弹窗。

eventBus权益校验任务轮询

接入速览

什么时候用

视频下载、镜头拆分、视频抓取、素材 AI 分析这类长链路任务，优先使用流程组件。

最少必填

多数流程都需要 eventBus；下载流程还需要记录 id、确认下载和权益相关回调。

返回什么

流程组件主要通过回调和事件通知状态；拆条、抓取、下载结果通常来自服务接口或事件 payload。

服务接口事件协议

容易漏什么

长链路通常还会触发权益弹窗、任务轮询和失败处理，不建议绕过流程组件只单独调接口。

支付与权益

组件

组件	说明
`MbjiaDownloadFlow`	视频下载流程
`MediaSplittingFlow`	素材拆条流程
`VideoCaptureFlow`	视频截取/抓取流程
`SegmentedProgressBar`	分段进度条
`MusicBox`	音乐素材卡片
`PlayerContainer`	音频封面和悬浮试听容器
`ScriptBox`	脚本素材卡片
`ScriptStructs`	脚本结构标签
`ScriptTable`	脚本列表表格
`ScriptInfo`	脚本分镜表格详情
`PreviewScript`	脚本预览弹窗
`ScriptModal`	脚本选择弹窗
`VideoClipper`	视频裁剪器
`MediaSplittingModal` 导出组	镜头拆分确认、进行中、完成、失败和强度选择弹窗
`VideoCaptureModal` 导出组	视频抓取、解析、下载、成功和次数不足弹窗
`AssetsAnalysisFlow`	素材 AI 分析扣费与任务流程
`SetMainContentOfMaterialFlow`	批量设置素材主体流程
`BatchGenerateFlow`	批量生成扣费与提交流程

媒体素材展示预览

产品开箱卖点介绍共 8 个镜头

脚本与音频素材

脚本卡片、脚本表格、脚本预览和音乐试听通常配合素材接口与事件总线使用。

MbjiaDownloadFlow

interface PropsType {
  record_id?: string | string[]
  logId?: string | number
  beforeJudgePhone?: Function
  notEnoughAction?: Function
  hasEnoughAction?: Function
  confirmDownload: Function
  judgePhoneOtherCondition?: Function
  showBigDownloadOverModal?: boolean
  chargeOver?: Function
  eventBus: any
  finishModal: boolean
  downloadCall?: Function
  typeOfWork?: 'template' | 'jianji' | 'ai'
  hasSelfLoadingModal?: boolean
  confirmTitle?: string
}

核心事件：

事件	说明
`global:PlaneEditing:startDownload`	开始下载
`global:downloadVideosDirectly`	直接下载
`global:showNotEnoughVideoPoints`	显示点数不足
`global:WaitingMemo:close`	关闭等待弹窗
`personalCenter:finalcut:download:success`	下载成功

回调出参：

回调	出参	说明
`beforeJudgePhone`	由业务实现决定	判断手机号前的扩展逻辑。
`notEnoughAction`	由业务实现决定	权益或点数不足时触发。
`hasEnoughAction`	由业务实现决定	权益足够时触发。
`confirmDownload`	由业务实现决定	确认下载时触发，必传。
`chargeOver`	由业务实现决定	扣费结束后触发。
`downloadCall`	由业务实现决定	下载动作回调。

MediaSplittingFlow

interface PropsType {
  eventBus: any
  [key: string]: any
}

type SplitItem = {
  id: string
  assetId: string
  duration: number
  assetType: number
}

核心事件：

事件	说明
`global:beginGetSplittingDetail`	开始获取拆条详情
`vip:modal:open`	权益不足时打开会员弹窗

数据结构：

类型	字段	说明
`SplitItem`	`id`	拆条项 id。
`SplitItem`	`assetId`	素材 id。
`SplitItem`	`duration`	时长。
`SplitItem`	`assetType`	素材类型。

VideoCaptureFlow

interface PropsType {
  eventBus: any
  dirId: string | null
}

核心事件：

事件	说明
`global:beginCaptrueVideo`	打开抓取视频弹窗
`global:reFetchVideo`	重新抓取视频
`global:beginDownloadVideoByCapture`	开始下载抓取结果
`global:AllUserInterests:BuyPoint:open`	打开点数购买
`global:AllUserInterests:UpgradeVip:changeState`	切换会员升级状态

SegmentedProgressBar

export interface Segment {
  start: number
  end: number
  color?: string
  id: string
  detail: string
  title?: string
}

interface ProgressBarProps {
  segments: Segment[]
  startTime: number
  endTime: number
  onSegmentClick?: (segment: Segment) => void
  onClick: (time: number) => void
  currentTime: number
  isPlaying: boolean
  onPause: () => void
  onPlay: () => void
  offsetTime?: { start: number; end: number }
  highLightMoment?: string
}

回调出参：

回调	出参	说明
`onSegmentClick`	`Segment`	点击分段时返回当前分段。
`onClick`	`time: number`	点击进度条时返回时间。
`onPause`	无	暂停回调。
`onPlay`	无	播放回调。

Segment 字段：

字段	类型	说明
`start`	`number`	分段开始时间。
`end`	`number`	分段结束时间。
`color`	`string`	分段颜色。
`id`	`string`	分段 id。
`detail`	`string`	分段详情。
`title`	`string`	分段标题。

MusicBox

音乐素材卡片。点击卡片触发选中，右键可透出上下文操作，内部使用 PlayerContainer 实现悬浮试听。

tsx

<MusicBox
  eventBus={eventBus}
  theme="ai"
  data={music}
  onCheck={(item) => setSelected(item)}
  onContextMenu={(item) => openMenu(item)}
/>

数据结构：

export interface MusicBoxDataType {
  id: string
  assetId: string
  name: string
  url: string
  coverUrl: string
  assetStyle: number
  assetType: number
  assetVersion: number
  duration: number
  checked: boolean
}

Props：

字段	类型	必填	默认值	说明
`data`	`MusicBoxDataType`	是	-	音乐素材数据。
`onCheck`	`(item: MusicBoxDataType) => void`	是	-	点击卡片时返回当前音乐。
`onContextMenu`	`(data: MusicBoxDataType) => void`	否	-	右键菜单回调。
`eventBus`	`any`	是	-	播放互斥和重置事件总线。
`theme`	`'ai' \| 'mbjia'`	是	`'ai'`	封面主题。

PlayerContainer

音频封面和悬浮试听容器。鼠标移入时创建 Howler 实例播放音频，鼠标移出时停止并释放实例。

tsx

<PlayerContainer
  eventBus={eventBus}
  url={music.url}
  coverUrl={music.coverUrl}
  checked={music.checked}
  theme="mbjia"
/>

Props：

字段	类型	必填	默认值	说明
`url`	`string`	是	-	音频地址。
`coverUrl`	`string`	否	主题默认封面	音频封面。
`checked`	`boolean`	是	-	是否选中。
`eventBus`	`any`	是	-	用于广播和监听音频重置事件。
`theme`	`'ai' \| 'mbjia'`	是	`'ai'`	默认封面主题。
`compressCover`	`boolean`	否	`false`	为 true 时封面地址追加 `!220`。
`speed`	`number`	否	-	播放速率。
`shape`	`'circle' \| 'square'`	否	`'square'`	封面形状。

事件协议：

事件	方向	说明
`musicEdit:musicBox:reset`	监听/触发	停止其他音乐卡片播放。
`captionEdit:audioBox:reset`	监听/触发	停止字幕音频卡片播放。

ScriptBox

脚本素材卡片。展示封面、脚本名称、分镜数量和结构标签，悬浮时展示“预览”和“使用”操作。

tsx

<ScriptBox
  data={script}
  onPreview={(item) => openPreview(item)}
  onUse={(item) => useScript(item)}
/>

字段	类型	必填	默认值	说明
`data`	`ScriptAssetModel`	是	-	脚本素材。
`onUse`	`(data: ScriptAssetModel) => void`	是	-	点击“使用”时返回当前脚本。
`onPreview`	`(data: ScriptAssetModel) => void`	是	-	点击“预览”时返回当前脚本。

ScriptAssetModel 关键字段：

字段	类型	说明
`id`	`string`	脚本 id。
`name`	`string`	脚本名称。
`url`	`string`	脚本预览视频地址，继承自素材模型。
`coverUrl`	`string`	封面地址，继承自素材模型。
`json`	`string`	脚本 JSON。
`scenesCount`	`number`	分镜数量。
`cid`	`string`	分类 id。
`structs`	`StructItemType[]`	脚本结构标签。

ScriptStructs

脚本结构标签展示。默认最多直接展示 3 个标签，超过 3 个时通过 Tooltip 展示更多。

tsx

<ScriptStructs
  structs={[
    { id: '1', name: '产品开箱' },
    { id: '2', name: '卖点介绍' },
  ]}
/>

字段	类型	必填	默认值	说明
`structs`	`StructItemType[]`	是	-	结构标签数组。
`large`	`boolean`	否	`undefined`	是否使用大尺寸标签。

ScriptTable

脚本列表表格。提供预览、使用、复制、编辑、删除、移动分组和行内改名入口。

tsx

<ScriptTable
  data={scripts}
  page={1}
  pageSize={8}
  moreAction
  onPreview={(item) => openPreview(item)}
  onUse={(item) => useScript(item)}
  onDelete={(item) => removeScript(item)}
/>

字段	类型	必填	默认值	说明
`data`	`ScriptItem[]`	是	-	脚本列表。
`onUse`	`(data: ScriptAssetModel) => void`	是	-	使用脚本。
`onPreview`	`(data: ScriptAssetModel) => void`	是	-	预览脚本。
`pageSize`	`number`	是	`8`	每页数量，用于计算序号。
`page`	`number`	是	`1`	当前页，用于计算序号。
`onDelete`	`(data: ScriptAssetModel) => void`	否	-	删除脚本。
`onCopy`	`(data: ScriptAssetModel) => void`	否	-	创建副本。
`onEdit`	`(data: ScriptAssetModel) => void`	否	-	修改脚本。
`onMove`	`(data: ScriptAssetModel) => void`	否	-	移动分组。
`onEditName`	`(data: ScriptAssetModel) => void`	否	-	行内改名完成后触发。
`moreAction`	`boolean`	否	`false`	是否展示更多操作。
`actionNames`	`string[]`	否	`['预览', '使用', '更多']`	操作文案。
`moreActions`	`string[]`	否	`['copy', 'edit', 'delete', 'move']`	更多操作 key。

ScriptInfo

脚本分镜表格详情。可以通过 id 拉取脚本详情，也可以传入 json 或 vJson 直接渲染。

tsx

<ScriptInfo
  id={script.id}
  height={443}
  load={({ info, asset, columns, tableWidth }) => {
    setScriptInfo(info)
    setScriptAsset(asset)
  }}
/>

字段	类型	必填	默认值	说明
`height`	`number`	是	-	表格滚动高度。
`width`	`number`	否	`'100%'`	初始表格宽度。
`id`	`string`	否	-	脚本素材 id；存在时内部请求详情。
`json`	`any[]`	否	-	直接传入脚本 JSON。
`vJson`	`VeScriptInfo`	否	-	直接传入解析后的脚本信息。
`cid`	`number`	否	-	配合 `json` 使用的分类 id。
`load`	`(res) => void`	否	-	表格初始化完成后返回解析信息。

load 出参：

字段	类型	说明
`info`	`VeScriptInfo`	解析后的脚本表格信息。
`asset`	`AssetModel`	脚本素材模型。
`onResetColumns`	`Function`	重置列配置函数。
`columns`	`any[]`	AntD Table 列配置。
`tableWidth`	`number`	计算后的表格宽度。

PreviewScript

脚本预览弹窗。内部使用 ScriptInfo 渲染分镜表格，如果脚本素材有视频地址，会在左侧展示视频预览。

tsx

<PreviewScript
  id={script.id}
  open={previewOpen}
  onClose={() => setPreviewOpen(false)}
  onUse={() => useCurrentScript()}
/>

字段	类型	必填	默认值	说明
`id`	`string`	是	-	脚本 id。
`open`	`boolean`	是	-	弹窗是否打开。
`onClose`	`() => void`	是	-	关闭弹窗。
`onUse`	`() => void`	是	-	点击“使用该脚本”时触发。

ScriptModal

脚本选择弹窗。包含“我的脚本/脚本库”切换、分组、搜索、瀑布流/表格列表、预览和创建脚本入口。

tsx

<ScriptModal
  open={open}
  listId="script-modal"
  keyword=""
  cid=""
  loadType="waterfall"
  initialWidth={845}
  onClose={() => setOpen(false)}
  onUse={(item) => useScript(item)}
  onPreview={(item) => previewScript(item)}
  onCreateScript={() => createScript()}
/>

字段	类型	必填	默认值	说明
`open`	`boolean`	是	`true`	弹窗是否打开。
`onClose`	`() => void`	是	-	关闭弹窗。
`onUse`	`(data: ScriptAssetModel) => void`	是	-	使用脚本。
`onPreview`	`(data: ScriptAssetModel) => void`	是	-	预览脚本。
`onCreateScript`	`() => void`	是	-	创建脚本。
`keyword`	`string`	是	`''`	推荐脚本搜索关键词。
`cid`	`string`	是	`''`	推荐脚本分类 id。
`loadType`	`keyof typeof loadListType`	是	`waterfall`	列表展示方式。
`initialWidth`	`number`	是	`845`	初始内容宽度。
`listId`	`string`	是	-	列表容器 id。
`defaultCurrTab`	`string`	否	`'1'`	默认 tab，`1` 为我的脚本，`2` 为脚本库。
`createTab`	`{ key: string; name: string; render: React.ReactNode }`	否	-	自定义创建 tab。
`customDir`	`React.ReactNode`	否	-	自定义目录区域。
`modalWidth`	`number`	否	`1098`	弹窗宽度。

VideoClipper

视频裁剪器。用于在固定轨道上调整开始时间和裁剪时长，支持播放预览、拖动裁剪区域和拖动左右边界。

tsx

<VideoClipper
  videoUrl={video.url}
  duration={10}
  startTime={0}
  minDuration={3}
  updateInfo={(info) => setClipInfo(info)}
/>

字段	类型	必填	默认值	说明
`videoUrl`	`string`	是	-	视频地址。
`duration`	`number`	否	`0`	初始裁剪时长。
`startTime`	`number`	否	`0`	初始开始时间。
`canChangeDuration`	`boolean`	否	`true`	是否允许拖动左右边界调整时长。
`minDuration`	`number`	否	-	最小裁剪时长。
`site`	`string`	否	`'main'`	站点类型；`ai` 场景下开始时间越界处理不同。
`updateInfo`	`(info) => void`	是	-	初始化和拖拽结束时返回裁剪信息。

updateInfo 出参：

字段	类型	说明
`totalTime`	`number`	视频总时长。
`startTime`	`number`	裁剪开始时间。
`endTime`	`number`	裁剪结束时间。
`duration`	`number`	裁剪时长。

MediaSplittingModal 导出组

镜头拆分流程弹窗集合，通常由 MediaSplittingFlow 统一编排。

组件	说明	关键入参
`MediaSplittingConfirmModal`	拆分前扣费确认	`open`、`deductPoints`、`restPoints`、`costInfo`、`isBatch`
`SplittingModal`	拆分中提示，5 秒倒计时关闭	`open`、`onOpenChange`
`SplittingOverModal`	拆分完成提示	`open`、`onOpenChange`
`SplittingFailModal`	拆分失败提示	`open`、`assetHasProblem`
`ExerciseIntensityModal`	选择镜头运动强度	`open`、`onOk(selected)`、`isBatch`
`TimeTooLongModal`	视频过长无法拆分提示	由流程按限制触发
`NonComplianceAssetNoticeModal`	批量拆分存在不合规素材提示	由流程按校验结果触发

VideoCaptureModal 导出组

视频抓取流程弹窗集合，通常由 VideoCaptureFlow 统一编排。

组件	说明	关键入参
`GrabVideoPopupModal`	输入视频分享链接并勾选免责声明	`open`、`dirId`、`onOk(text)`、`onShowDisclaimer`
`GrabVideoResultModal`	解析失败、下载成功、下载失败、素材过长等结果提示	`open`、`title`、`content`、`type`
`UndercountModal`	使用次数不足或试用提示	流程内按权益状态触发
`VideoDownloadModal`	视频下载中提示	`open`
`VideoParsingModal`	视频解析中提示	`open`
`VideoParseSuccessModal`	解析成功并展示视频信息	`open`、素材信息、确认回调

AssetsAnalysisFlow

素材 AI 分析流程组件。通过事件启动，查询扣费、展示明细、处理点数不足，并提交分析任务。

tsx

<AssetsAnalysisFlow eventBus={eventBus} />

eventBus.emit('beginAssetsAnalysisFlow', {
  dir_id: '1001',
  id_list: ['asset_1'],
  organize_type: 0,
})

字段	类型	必填	默认值	说明
`eventBus`	`any`	是	-	监听 `beginAssetsAnalysisFlow`，并在成功后触发结果刷新。

主要事件：

事件	方向	说明
`beginAssetsAnalysisFlow`	on	开始素材分析流程。
`global:getAssetAnalysisResult`	emit	提交任务成功后刷新分析结果。
`global:cancelCantAnalysisAssetAndBeginAnalysis`	emit	批量分析时取消不可分析素材并继续。

SetMainContentOfMaterialFlow

批量设置素材主体流程。通过全局事件接收素材列表，先检查哪些素材允许修改，再展示确认/输入弹窗。

tsx

<SetContentOfMaterial />

eventBus.emit('global:setMainContentOfMaterial', selectedAssets)

事件	方向	说明
`global:setMainContentOfMaterial`	on	接收待设置主体的素材列表。
`global:hideManage`	emit	设置成功后隐藏管理态。
`assets:fission:getCurrentList`	emit	设置成功后刷新当前素材列表。

依赖接口：

接口	用途
`modifiablePrincipalName`	检查哪些素材允许设置主体。
`updatePrincipalName`	提交素材主体。

BatchGenerateFlow

批量生成流程。通过事件接收作品 id 列表，查询扣费和不可生成作品，点数足够则提交批量生成，点数不足则进入权益不足流程。

tsx

<BatchGenerateFlow />

eventBus.emit('global:batchGenerate', {
  batchType: 'ai',
  ids: ['product_1', 'product_2'],
  callBack: () => refreshList(),
})

事件入参：

字段	类型	说明
`batchType`	`string`	批量生成类型；包含 `ai` 时支持查看计费明细。
`ids`	`string[]`	作品 id 列表。
`callBack`	`() => void`	批量生成提交成功后刷新当前页面。

依赖接口：

接口	用途
`getBatchRenderCost`	查询批量生成扣费。
`getBatchRenderCostList`	查询计费明细。
`submitBatchRender`	提交批量生成。

流程预览

用户选择媒体任务→判断任务类型

任务类型

下载流程拆条流程视频抓取流程

权益检查→权益足够：提交任务/轮询结果权益不足：会员或点数弹窗

媒体流程组件 ​

媒体流程组件

模块定位

接入前确认

接入速览 ​

组件 ​

媒体素材展示预览 ​

脚本与音频素材

MbjiaDownloadFlow ​

MediaSplittingFlow ​

VideoCaptureFlow ​

SegmentedProgressBar ​

MusicBox ​

PlayerContainer ​

ScriptBox ​

ScriptStructs ​

ScriptTable ​

ScriptInfo ​

PreviewScript ​

ScriptModal ​

VideoClipper ​

MediaSplittingModal 导出组 ​

VideoCaptureModal 导出组 ​

AssetsAnalysisFlow ​

SetMainContentOfMaterialFlow ​

BatchGenerateFlow ​

流程预览 ​

媒体流程组件

接入速览

组件

媒体素材展示预览

MbjiaDownloadFlow

MediaSplittingFlow

VideoCaptureFlow

SegmentedProgressBar

MusicBox

PlayerContainer

ScriptBox

ScriptStructs

ScriptTable

ScriptInfo

PreviewScript

ScriptModal

VideoClipper

MediaSplittingModal 导出组

VideoCaptureModal 导出组

AssetsAnalysisFlow

SetMainContentOfMaterialFlow

BatchGenerateFlow

流程预览