diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css index f44b6d6e..1a98576a 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css +++ b/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; diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html index ace67622..d5686569 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html @@ -73,8 +73,7 @@
- + diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts index 761bd9b5..44b07257 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts +++ b/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, }; diff --git a/openvidu-testapp/src/app/components/participant/participant.component.css b/openvidu-testapp/src/app/components/participant/participant.component.css index 1813c91c..486467b2 100644 --- a/openvidu-testapp/src/app/components/participant/participant.component.css +++ b/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; } diff --git a/openvidu-testapp/src/app/components/participant/participant.component.html b/openvidu-testapp/src/app/components/participant/participant.component.html index cca75081..4fbfa74b 100644 --- a/openvidu-testapp/src/app/components/participant/participant.component.html +++ b/openvidu-testapp/src/app/components/participant/participant.component.html @@ -40,7 +40,7 @@
+ [ngClass]="event.eventCategory"> {{event.eventType}} diff --git a/openvidu-testapp/src/app/services/test-feed.service.ts b/openvidu-testapp/src/app/services/test-feed.service.ts index c74e3ef4..fb5dcb30 100644 --- a/openvidu-testapp/src/app/services/test-feed.service.ts +++ b/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; } diff --git a/openvidu-testapp/src/styles.css b/openvidu-testapp/src/styles.css index 52797b9c..69f01a5f 100644 --- a/openvidu-testapp/src/styles.css +++ b/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; }