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

master
pabloFuente 2025-06-25 13:26:28 +02:00
parent 96132553ae
commit f16eefa9df
7 changed files with 30 additions and 22 deletions

View File

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

View File

@ -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'">

View File

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

View File

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

View File

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

View File

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

View File

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