feat: Add better speaker handling

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 (
     <p
@@ -65,7 +67,8 @@ const DefaultSpeakerWrapper = ({
       }}
       contentEditable={false}
     >
-      {speaker} ({formatTime(start)} - {formatTime(end)})
+      Speaker {speaker} (su {totalSpeakers}) ({formatTime(start)} -{" "}
+      {formatTime(end)})
     </p>
   );
 };

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;
 }

src/stories/transcript/index.stories.tsx

@@ -42,6 +42,7 @@ const Template: StoryFn<StoryArgs> = (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 (
         <p>
-          {speaker} ({start} - {end}){" "}
+          Speaker {speaker + 1} ({start} - {end}){" "}
           <IconButton
             onClick={() => {
               setCurrentTime && setCurrentTime({ start, end });

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}
       />
       <NodeViewContent className="content is-editable" />
     </ParagraphWrapper>

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,

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
   );