ov-components: add disconnected state handling and translations for multiple languages

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html

@@ -30,6 +30,14 @@
 			<mat-icon class="error-icon">error</mat-icon>
 			<span>{{ componentState.error?.message }}</span>
 		</div>
+	} @else if (componentState.state === 'DISCONNECTED') {
+		<!-- Disconnected state -->
+
+		<div id="spinner">
+			<mat-icon class="info-icon">check_circle</mat-icon>
+			<span>{{ 'ROOM.DISCONNECTED' | translate }}</span>
+			<p class="subtitle">{{ 'ROOM.DISCONNECTED_SUBTITLE' | translate }}</p>
+		</div>
 	} @else if (componentState.isRoomReady) {
 		<!-- VideoConference -->
 

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 { BroadcastingStartRequestedEvent, BroadcastingStopRequestedEvent } from '../../models/broadcasting.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 { 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 { VideoconferenceState, VideoconferenceStateInfo } from '../../models/videoconference-state.model';
-import { LangOption } from '../../models/lang.model';
+import { ActionService } from '../../services/action/action.service';
-import {
+import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
-	LayoutAdditionalElementsDirective,
+import { DeviceService } from '../../services/device/device.service';
-	ParticipantPanelAfterLocalParticipantDirective,
-	PreJoinDirective,
-	LeaveButtonDirective,
-	SettingsPanelGeneralAdditionalElementsDirective,
-	ToolbarMoreOptionsAdditionalMenuItemsDirective
-} from '../../directives/template/internals.directive';
-import { OpenViduThemeService } from '../../services/theme/theme.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() {

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": "设置你的绰号",

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",

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",

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",

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",

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": "अपना निकनेम सेट करें",

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",

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": "ニックネームを設定してください",

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",

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",