From 8dd058fd50f73fa3727f82bba799c7d660a1bbeb Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Thu, 15 Jan 2026 18:03:09 +0100 Subject: [PATCH] ov-components: add disconnected state handling and translations for multiple languages --- .../videoconference.component.html | 8 +++ .../videoconference.component.ts | 66 +++++++++---------- .../src/lib/lang/cn.json | 4 +- .../src/lib/lang/de.json | 4 +- .../src/lib/lang/en.json | 4 +- .../src/lib/lang/es.json | 4 +- .../src/lib/lang/fr.json | 4 +- .../src/lib/lang/hi.json | 4 +- .../src/lib/lang/it.json | 4 +- .../src/lib/lang/ja.json | 4 +- .../src/lib/lang/nl.json | 4 +- .../src/lib/lang/pt.json | 4 +- 12 files changed, 71 insertions(+), 43 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html index 0a64f08ef..1dc418faa 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html @@ -30,6 +30,14 @@ error {{ componentState.error?.message }} + } @else if (componentState.state === 'DISCONNECTED') { + + +
+ check_circle + {{ 'ROOM.DISCONNECTED' | translate }} +

{{ 'ROOM.DISCONNECTED_SUBTITLE' | translate }}

+
} @else if (componentState.isRoomReady) { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts index 5e20e5e53..8b5256488 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts @@ -1,8 +1,6 @@ import { animate, style, transition, trigger } from '@angular/animations'; import { AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, Component, ContentChild, EventEmitter, @@ -11,7 +9,16 @@ import { TemplateRef, ViewChild } from '@angular/core'; +import { Room } from 'livekit-client'; import { Subject, filter, skip, take, takeUntil } from 'rxjs'; +import { + LayoutAdditionalElementsDirective, + LeaveButtonDirective, + ParticipantPanelAfterLocalParticipantDirective, + PreJoinDirective, + SettingsPanelGeneralAdditionalElementsDirective, + ToolbarMoreOptionsAdditionalMenuItemsDirective +} from '../../directives/template/internals.directive'; import { ActivitiesPanelDirective, AdditionalPanelsDirective, @@ -26,29 +33,17 @@ import { ToolbarAdditionalPanelButtonsDirective, ToolbarDirective } from '../../directives/template/openvidu-components-angular.directive'; -import { ILogger } from '../../models/logger.model'; -import { VideoconferenceState, VideoconferenceStateInfo } from '../../models/videoconference-state.model'; -import { ActionService } from '../../services/action/action.service'; -import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service'; -import { DeviceService } from '../../services/device/device.service'; -import { LoggerService } from '../../services/logger/logger.service'; -import { OpenViduService } from '../../services/openvidu/openvidu.service'; -import { StorageService } from '../../services/storage/storage.service'; -import { - TemplateManagerService, - TemplateConfiguration, - ExternalDirectives, - DefaultTemplates -} from '../../services/template/template-manager.service'; -import { Room } from 'livekit-client'; -import { ParticipantLeftEvent, ParticipantModel } from '../../models/participant.model'; +import { BroadcastingStartRequestedEvent, BroadcastingStopRequestedEvent } from '../../models/broadcasting.model'; import { CustomDevice } from '../../models/device.model'; +import { LangOption } from '../../models/lang.model'; +import { ILogger } from '../../models/logger.model'; import { ActivitiesPanelStatusEvent, ChatPanelStatusEvent, ParticipantsPanelStatusEvent, SettingsPanelStatusEvent } from '../../models/panel.model'; +import { ParticipantLeftEvent, ParticipantModel } from '../../models/participant.model'; import { RecordingDeleteRequestedEvent, RecordingDownloadClickedEvent, @@ -56,18 +51,21 @@ import { RecordingStartRequestedEvent, RecordingStopRequestedEvent } from '../../models/recording.model'; -import { BroadcastingStartRequestedEvent, BroadcastingStopRequestedEvent } from '../../models/broadcasting.model'; -import { LangOption } from '../../models/lang.model'; -import { - LayoutAdditionalElementsDirective, - ParticipantPanelAfterLocalParticipantDirective, - PreJoinDirective, - LeaveButtonDirective, - SettingsPanelGeneralAdditionalElementsDirective, - ToolbarMoreOptionsAdditionalMenuItemsDirective -} from '../../directives/template/internals.directive'; -import { OpenViduThemeService } from '../../services/theme/theme.service'; +import { VideoconferenceState, VideoconferenceStateInfo } from '../../models/videoconference-state.model'; +import { ActionService } from '../../services/action/action.service'; +import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service'; +import { DeviceService } from '../../services/device/device.service'; import { E2eeService } from '../../services/e2ee/e2ee.service'; +import { LoggerService } from '../../services/logger/logger.service'; +import { OpenViduService } from '../../services/openvidu/openvidu.service'; +import { StorageService } from '../../services/storage/storage.service'; +import { + DefaultTemplates, + ExternalDirectives, + TemplateConfiguration, + TemplateManagerService +} from '../../services/template/template-manager.service'; +import { OpenViduThemeService } from '../../services/theme/theme.service'; /** * The **VideoconferenceComponent** is the parent of all OpenVidu components. @@ -982,14 +980,16 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit { * @internal */ _onParticipantLeft(event: ParticipantLeftEvent) { - // Reset to disconnected state to allow prejoin to show again if needed + this.onParticipantLeft.emit(event); + + // Reset to disconnected state + // Set showPrejoin to false to prevent prejoin from showing and creating tracks + // This avoids the race condition where tracks are created before navigation this.updateComponentState({ state: VideoconferenceState.DISCONNECTED, isRoomReady: false, - showPrejoin: this.libService.showPrejoin() + showPrejoin: false }); - - this.onParticipantLeft.emit(event); } private subscribeToVideconferenceDirectives() { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json index 9f91aaaf9..e283cba05 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json @@ -23,7 +23,9 @@ }, "ROOM": { "JOINING": "正在加入房间...", - "LANDSCAPE_WARNING": "请将设备旋转到纵向以获得最佳体验" + "LANDSCAPE_WARNING": "请将设备旋转到纵向以获得最佳体验", + "DISCONNECTED": "您已离开房间", + "DISCONNECTED_SUBTITLE": "会话已结束" }, "PREJOIN": { "NICKNAME_SECTION": "设置你的绰号", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json index 1e4e5717e..375ef80be 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json @@ -23,7 +23,9 @@ }, "ROOM": { "JOINING": "Raum beitreten...", - "LANDSCAPE_WARNING": "Bitte drehen Sie Ihr Gerät für eine bessere Erfahrung in den Hochformatmodus" + "LANDSCAPE_WARNING": "Bitte drehen Sie Ihr Gerät für eine bessere Erfahrung in den Hochformatmodus", + "DISCONNECTED": "Sie haben den Raum verlassen", + "DISCONNECTED_SUBTITLE": "Die Sitzung wurde beendet" }, "PREJOIN": { "NICKNAME_SECTION": "Legen Sie Ihren Spitznamen fest", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json index a7037543a..3edc8ee30 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json @@ -35,7 +35,9 @@ }, "ROOM": { "JOINING": "Joining room...", - "LANDSCAPE_WARNING": "Please rotate your device to portrait for a better experience" + "LANDSCAPE_WARNING": "Please rotate your device to portrait for a better experience", + "DISCONNECTED": "You have left the room", + "DISCONNECTED_SUBTITLE": "The session has ended" }, "TOOLBAR": { "MUTE_AUDIO": "Mute your audio", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json index 4e0b4ecd8..ff39fc671 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json @@ -23,7 +23,9 @@ }, "ROOM": { "JOINING": "Uniéndose a la sala...", - "LANDSCAPE_WARNING": "Por favor, gira tu dispositivo a modo retrato para una mejor experiencia" + "LANDSCAPE_WARNING": "Por favor, gira tu dispositivo a modo retrato para una mejor experiencia", + "DISCONNECTED": "Has salido de la sala", + "DISCONNECTED_SUBTITLE": "La sesión ha finalizado" }, "PREJOIN": { "NICKNAME_SECTION": "Elige tu nombre", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json index 10d074cc7..fa921c8e2 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json @@ -23,7 +23,9 @@ }, "ROOM": { "JOINING": "Rejoindre la salle...", - "LANDSCAPE_WARNING": "Veuillez faire pivoter votre appareil en mode portrait pour une meilleure expérience" + "LANDSCAPE_WARNING": "Veuillez faire pivoter votre appareil en mode portrait pour une meilleure expérience", + "DISCONNECTED": "Vous avez quitté la salle", + "DISCONNECTED_SUBTITLE": "La session est terminée" }, "PREJOIN": { "NICKNAME_SECTION": "Définir votre surnom", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json index 73e970af7..d0733115a 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json @@ -23,7 +23,9 @@ }, "ROOM": { "JOINING": "कक्ष में शामिल हो रहा है...", - "LANDSCAPE_WARNING": "कृपया बेहतर अनुभव के लिए अपने डिवाइस को पोर्ट्रेट मोड में घुमाएँ" + "LANDSCAPE_WARNING": "कृपया बेहतर अनुभव के लिए अपने डिवाइस को पोर्ट्रेट मोड में घुमाएं", + "DISCONNECTED": "आपने कमरा छोड़ दिया है", + "DISCONNECTED_SUBTITLE": "सत्र समाप्त हो गया है" }, "PREJOIN": { "NICKNAME_SECTION": "अपना निकनेम सेट करें", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json index 31b31823c..e92664779 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json @@ -23,7 +23,9 @@ }, "ROOM": { "JOINING": "Unendosi alla stanza...", - "LANDSCAPE_WARNING": "Per una migliore esperienza, ruota il dispositivo in modalità verticale" + "LANDSCAPE_WARNING": "Per una migliore esperienza, ruota il dispositivo in modalità verticale", + "DISCONNECTED": "Hai lasciato la stanza", + "DISCONNECTED_SUBTITLE": "La sessione è terminata" }, "PREJOIN": { "NICKNAME_SECTION": "Imposta il tuo soprannome", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json index 2db21771e..981b7b184 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json @@ -23,7 +23,9 @@ }, "ROOM": { "JOINING": "ルームに参加しています...", - "LANDSCAPE_WARNING": "より良い体験のために、デバイスを縦向きに回転させてください" + "LANDSCAPE_WARNING": "より良い体験のために、デバイスを縦向きに回転させてください", + "DISCONNECTED": "ルームから退出しました", + "DISCONNECTED_SUBTITLE": "セッションが終了しました" }, "PREJOIN": { "NICKNAME_SECTION": "ニックネームを設定してください", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json index 88ec689c0..3a1b59c24 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json @@ -23,7 +23,9 @@ }, "ROOM": { "JOINING": "De ruimte betreden...", - "LANDSCAPE_WARNING": "Draai uw apparaat voor een betere ervaring naar portretmodus" + "LANDSCAPE_WARNING": "Draai uw apparaat voor een betere ervaring naar portretmodus", + "DISCONNECTED": "U heeft de kamer verlaten", + "DISCONNECTED_SUBTITLE": "De sessie is beëindigd" }, "PREJOIN": { "NICKNAME_SECTION": "Stel je bijnaam in", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json index a4bde0ee7..0cba34641 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json @@ -23,7 +23,9 @@ }, "ROOM": { "JOINING": "Entrando na sala...", - "LANDSCAPE_WARNING": "Por favor, gire seu dispositivo para o modo retrato para uma melhor experiência" + "LANDSCAPE_WARNING": "Por favor, gire seu dispositivo para o modo retrato para uma melhor experiência", + "DISCONNECTED": "Você saiu da sala", + "DISCONNECTED_SUBTITLE": "A sessão foi encerrada" }, "PREJOIN": { "NICKNAME_SECTION": "Defina seu apelido",