diff --git a/src/stories/transcript/extensions/theme/index.tsx b/src/stories/transcript/extensions/theme/index.tsx index 265595f0..2debe707 100644 --- a/src/stories/transcript/extensions/theme/index.tsx +++ b/src/stories/transcript/extensions/theme/index.tsx @@ -48,11 +48,13 @@ const DefaultSpeakerWrapper = ({ end, setCurrentTime, speaker, + totalSpeakers, }: { start: number; end: number; setCurrentTime?: ({ start, end }: { start: number; end: number }) => void; - speaker: string; + speaker: number; + totalSpeakers: number | null; }) => { return (

- {speaker} ({formatTime(start)} - {formatTime(end)}) + Speaker {speaker} (su {totalSpeakers}) ({formatTime(start)} -{" "} + {formatTime(end)})

); }; diff --git a/src/stories/transcript/getParsedContent.tsx b/src/stories/transcript/getParsedContent.tsx index a4791c88..23b813b2 100644 --- a/src/stories/transcript/getParsedContent.tsx +++ b/src/stories/transcript/getParsedContent.tsx @@ -31,10 +31,18 @@ export type ObservationType = { class ContentParser { private observations?: ObservationType[]; private sentences?: SentenceType[]; + private numberOfSpeakers: number | null = null; - constructor(observations?: ObservationType[], sentences?: SentenceType[]) { + constructor( + observations?: ObservationType[], + sentences?: SentenceType[], + numberOfSpeakers?: number + ) { this.observations = observations; this.sentences = sentences; + if (numberOfSpeakers) { + this.numberOfSpeakers = numberOfSpeakers; + } } private wrapWordInObservations(word: WordType): TipTapContent { @@ -84,7 +92,8 @@ class ContentParser { return { type: "Paragraph", attrs: { - speakername: `Speaker ${paragraph.speaker}`, + totalSpeakers: this.numberOfSpeakers, + speaker: paragraph.speaker, start: paragraph.start, end: paragraph.end, sentences: s, @@ -108,9 +117,12 @@ class ContentParser { export function getParsedContent( content?: ParagraphType[], observations?: ObservationType[], - sentences?: SentenceType[] + sentences?: SentenceType[], + numberOfSpeakers?: number ) { - return new ContentParser(observations, sentences).getParsedContent( - content - ) as TipTapContent | undefined; + return new ContentParser( + observations, + sentences, + numberOfSpeakers + ).getParsedContent(content) as TipTapContent | undefined; } diff --git a/src/stories/transcript/index.stories.tsx b/src/stories/transcript/index.stories.tsx index bfc2800e..b855d8f7 100644 --- a/src/stories/transcript/index.stories.tsx +++ b/src/stories/transcript/index.stories.tsx @@ -42,6 +42,7 @@ const Template: StoryFn = (args) => { onSetCurrentTime: args.onSetCurrentTime ? args.onSetCurrentTime(setCurrentTime) : undefined, + numberOfSpeakers: 1, }); if (!editor) return <>; @@ -295,7 +296,7 @@ WithCustomTheme.args = { speakerWrapper: ({ start, end, setCurrentTime, speaker }) => { return (

- {speaker} ({start} - {end}){" "} + Speaker {speaker + 1} ({start} - {end}){" "} { setCurrentTime && setCurrentTime({ start, end }); diff --git a/src/stories/transcript/nodes/paragraph/Component.tsx b/src/stories/transcript/nodes/paragraph/Component.tsx index 64bf1640..fa8bbdea 100644 --- a/src/stories/transcript/nodes/paragraph/Component.tsx +++ b/src/stories/transcript/nodes/paragraph/Component.tsx @@ -15,7 +15,8 @@ const Content = ({ node, editor }: { node: PMNode; editor: Editor }) => { }} start={node.attrs.start} end={node.attrs.end} - speaker={node.attrs.speakername} + speaker={node.attrs.speaker} + totalSpeakers={node.attrs.totalSpeakers} /> diff --git a/src/stories/transcript/nodes/paragraph/index.tsx b/src/stories/transcript/nodes/paragraph/index.tsx index fcbf5532..1766657a 100644 --- a/src/stories/transcript/nodes/paragraph/index.tsx +++ b/src/stories/transcript/nodes/paragraph/index.tsx @@ -11,8 +11,11 @@ export const Paragraph = Node.create({ addAttributes() { return { - speakername: { - default: "Speaker", + totalSpeakers: { + default: null, + }, + speaker: { + default: 0, }, start: { default: 0, diff --git a/src/stories/transcript/useEditor.tsx b/src/stories/transcript/useEditor.tsx index a3323c33..7440d5f0 100644 --- a/src/stories/transcript/useEditor.tsx +++ b/src/stories/transcript/useEditor.tsx @@ -24,6 +24,7 @@ export const useEditor = ( onSetCurrentTime, themeExtension, isEditable, + numberOfSpeakers, }: { content?: ParagraphType[]; observations?: ObservationType[]; @@ -32,6 +33,7 @@ export const useEditor = ( onSetCurrentTime?: (time: number) => void; themeExtension?: Extension; isEditable?: boolean; + numberOfSpeakers?: number; }, deps?: React.DependencyList ) => { @@ -53,7 +55,12 @@ export const useEditor = ( editorProps: { handlePaste: () => true, }, - content: getParsedContent(content, observations, translations), + content: getParsedContent( + content, + observations, + translations, + numberOfSpeakers + ), }, deps );