import { default as React } from 'react'; import { SubtitleEntry, SubtitleLanguage } from '@xiping/subtitle'; export type SubtitleType = "srt" | "vtt"; export interface SubtitleData { /** 字幕类型 */ type: SubtitleType; /** 字幕内容字符串 */ content: string; /** 可选的语言标识,用于多字幕对照时的标签显示 */ label?: string; /** 字幕语言类型,用于分词,默认为中文 */ language?: SubtitleLanguage; } export type SubtitleDisplayMode = "current" | "lyrics"; export interface SubtitlePlayerProps { /** 字幕数据,可以是单个字幕或多个字幕(用于对照) */ subtitles: SubtitleData | SubtitleData[]; /** 当前播放进度(秒数) */ currentTime: number; /** 显示模式:'current' 只显示当前字幕,'lyrics' 显示全部字幕并高亮当前 */ mode?: SubtitleDisplayMode; /** 文本对齐方式:'left' 左对齐,'center' 居中,默认为 'left' */ textAlign?: "left" | "center"; /** 自定义类名 */ className?: string; /** 自定义样式 */ style?: React.CSSProperties; /** * 分词 hover 状态回调,由外部决定如何处理(比如请求第三方接口、展示弹窗等) * 传入 null 表示 hover 结束 * target.entry 包含完整的字幕条目数据(JSON 格式的数据项) */ onWordHoverChange?: (target: HoverTarget | null) => void; /** * 可选的渲染函数,在组件内部直接渲染自定义弹窗 * 建议将数据请求放到父组件,通过该函数返回需要展示的内容 */ renderWordOverlay?: (target: HoverTarget) => React.ReactNode; /** * 单词点击回调 * target.entry 包含完整的字幕条目数据(JSON 格式的数据项) */ onWordClick?: (target: WordClickTarget) => void; /** * 整条字幕点击回调 * target.entry 包含完整的字幕条目数据(JSON 格式的数据项) */ onSubtitleClick?: (target: SubtitleClickTarget) => void; } export interface HoverTarget { word: string; wordIndex: number; lineIndex: number; /** 完整的字幕条目数据(JSON 格式的数据项) */ entry: SubtitleEntry; label?: string; rect: DOMRect; element: HTMLElement; } /** 点击目标类型:单词或整条字幕 */ export type ClickTargetType = "word" | "subtitle"; export interface WordClickTarget { type: "word"; word: string; wordIndex: number; lineIndex: number; /** 完整的字幕条目数据(JSON 格式的数据项) */ entry: SubtitleEntry; label?: string; rect: DOMRect; element: HTMLElement; } export interface SubtitleClickTarget { type: "subtitle"; /** 完整的字幕条目数据(JSON 格式的数据项) */ entry: SubtitleEntry; label?: string; rect: DOMRect; element: HTMLElement; } export type ClickTarget = WordClickTarget | SubtitleClickTarget; /** * 字幕播放组件 * 支持 SRT 和 WebVTT 格式,可以同时显示多个字幕进行对照 * 支持两种显示模式:当前模式(只显示当前字幕)和歌词模式(显示全部并高亮当前) */ export declare const SubtitlePlayer: React.FC; export default SubtitlePlayer;