openvidu-testapp: differ between final and non-final transcription events

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css

@@ -76,10 +76,14 @@ mat-expansion-panel {
     margin-right: 0 !important;
 }
 
-.room-event {
+.RoomEvent {
     background: #beefd5 !important;
 }
 
+.RoomEvent-InterimTranscription {
+    background: #ffbf83 !important;
+}
+
 mat-expansion-panel-header {
     font-size: 10.5px !important;
     padding: 0 7px 0 9px !important;

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html

@@ -73,8 +73,7 @@
                 <div class="event-list-flex">
                     <div class="event-list scroll-custom">
                         <mat-accordion [attr.id]="'room-events-' + room.localParticipant.identity">
-                            <mat-expansion-panel *ngFor="let event of events"
-                                [ngClass]="event.eventCategory === 'RoomEvent' ? 'room-event' : (event.eventCategory === 'ParticipantEvent' ? 'participant-event' : 'track-event')">
+                            <mat-expansion-panel *ngFor="let event of events" [ngClass]="event.eventCategory">
                                 <mat-expansion-panel-header
                                     [ngClass]="event.eventType + '-' + room.localParticipant.identity"
                                     [collapsedHeight]="'20px'" [expandedHeight]="'20px'">

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts

@@ -32,7 +32,6 @@ import {
   Track,
   TrackPublication,
   TrackPublishOptions,
-  TranscriptionSegment,
 } from 'livekit-client';
 import { ParticipantPermission } from 'livekit-server-sdk';
 import {
@@ -1030,15 +1029,16 @@ export class OpenviduInstanceComponent {
             const message = await reader.readAll();
             const isFinal =
               reader.info.attributes!['lk.transcription_final'] === 'true';
-            if (isFinal) {
-              this.updateEventList(
-                RoomEvent.TranscriptionReceived,
-                { participant: participantInfo.identity, message },
-                `${participantInfo.identity} ${
-                  isFinal ? 'said' : 'is saying'
-                }: ${message}`
-              );
-            }
+            this.updateEventList(
+              isFinal
+                ? ('finalTranscription' as any)
+                : ('interimTranscription' as any),
+              { participant: participantInfo.identity, message },
+              `${participantInfo.identity} ${
+                isFinal ? 'said' : 'is saying'
+              }: ${message}`,
+              isFinal ? 'RoomEvent' : 'RoomEvent-InterimTranscription'
+            );
           }
         );
       }
@@ -1048,11 +1048,12 @@ export class OpenviduInstanceComponent {
   updateEventList(
     eventType: RoomEvent,
     eventContent: any,
-    eventDescription: string
+    eventDescription: string,
+    eventCategory = 'RoomEvent'
   ) {
     const event: TestAppEvent = {
       eventType,
-      eventCategory: 'RoomEvent',
+      eventCategory: eventCategory as any,
       eventContent,
       eventDescription,
     };

openvidu-testapp/src/app/components/participant/participant.component.css

@@ -70,11 +70,11 @@ mat-expansion-panel {
     margin-right: 0 !important;
 }
 
-.participant-event {
+.ParticipantEvent {
     background: #d0ebf1 !important;
 }
 
-.track-event {
+.TrackEvent {
     background: #ede3bb !important;
 }
 

openvidu-testapp/src/app/components/participant/participant.component.html

@@ -40,7 +40,7 @@
         <div class="event-list scroll-custom">
             <mat-accordion [attr.id]="index + '-participant-events-' + participant.identity">
                 <mat-expansion-panel *ngFor="let event of events"
-                    [ngClass]="event.eventCategory === 'ParticipantEvent' ? 'participant-event' : 'track-event'">
+                    [ngClass]="event.eventCategory">
                     <mat-expansion-panel-header [ngClass]="event.eventType + '-' + participant.identity"
                         [collapsedHeight]="'20px'" [expandedHeight]="'20px'">
                         {{event.eventType}}

openvidu-testapp/src/app/services/test-feed.service.ts

@@ -4,7 +4,7 @@ import { Subject } from 'rxjs';
 
 export interface TestAppEvent {
     eventType: RoomEvent | ParticipantEvent | TrackEvent;
-    eventCategory: 'RoomEvent' | 'ParticipantEvent' | 'TrackEvent';
+    eventCategory: 'RoomEvent' | 'RoomEvent-InterimTranscription' | 'ParticipantEvent' | 'TrackEvent';
     eventContent: any;
     eventDescription: string;
 }

openvidu-testapp/src/styles.css

@@ -41,15 +41,19 @@ ul {
   word-break: break-all;
 }
 
-.room-event .mat-expansion-panel-body {
+.RoomEvent .mat-expansion-panel-body {
   border-color: #beefd5;
 }
 
-.participant-event .mat-expansion-panel-body {
+.RoomEvent-InterimTranscription .mat-expansion-panel-body {
+  border-color: #ffbf83;
+}
+
+.ParticipantEvent .mat-expansion-panel-body {
   border-color: #d0ebf1;
 }
 
-.track-event .mat-expansion-panel-body {
+.TrackEvent .mat-expansion-panel-body {
   border-color: #ede3bb;
 }