From 83e38ae88a09b779bc99af96e44b75d5e1f7ab88 Mon Sep 17 00:00:00 2001
From: CSantosM <4a.santos@gmail.com>
Date: Tue, 27 Jan 2026 16:09:07 +0100
Subject: [PATCH] ov-components: Refactor pre-join component to replace Angular
 animations with CSS animations and optimize video preview container handling

---
 .../pre-join/pre-join.component.html          |  2 +-
 .../pre-join/pre-join.component.scss          | 33 +++++++++++++++
 .../components/pre-join/pre-join.component.ts | 42 +++----------------
 3 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
index 4a843869e..30d168af9 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
@@ -25,7 +25,7 @@
 				<div class="prejoin-main">
 					<!-- Video Preview Section -->
 					<div class="video-preview-section">
-						<div class="video-preview-container" [@containerResize]="showBackgroundPanel ? 'compact' : 'normal'">
+					<div class="video-preview-container" [class.compact]="showBackgroundPanel">
 							<div class="video-frame">
 								<ov-media-element
 									[track]="videoTrack"
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
index 6c9d0a8ac..c8470c02b 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
@@ -3,6 +3,27 @@
 	width: 100%;
 	height: 100%;
 
+	// CSS Animations (replacing Angular animations)
+	@keyframes slideIn {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
 	.prejoin-container {
 		min-height: 100vh;
 		background: var(--ov-background-color);
@@ -89,6 +110,13 @@
 				border-radius: var(--ov-surface-radius) var(--ov-surface-radius) 0 0;
 				overflow: hidden;
 				background: var(--ov-video-background, var(--ov-primary-action-color));
+				transition: height 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
+
+				// Compact state when background panel is shown
+				&.compact {
+					height: 300px;
+					aspect-ratio: unset;
+				}
 
 				.video-frame {
 					width: 100%;
@@ -168,6 +196,11 @@
 		.vb-container {
 			height: fit-content;
 			overflow: hidden;
+
+			// Slide-in animation (replacing Angular @slideInOut)
+			&.slide-in {
+				animation: slideIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+			}
 		}
 
 		// Configuration Section
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
index 4bc2ff638..d05b1efbd 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
@@ -9,18 +9,17 @@ import {
 	OnInit,
 	Output
 } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { LocalTrack, Track } from 'livekit-client';
 import { filter, Subject, take, takeUntil } from 'rxjs';
+import { CustomDevice } from '../../models/device.model';
+import { LangOption } from '../../models/lang.model';
 import { ILogger } from '../../models/logger.model';
 import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 import { LoggerService } from '../../services/logger/logger.service';
 import { OpenViduService } from '../../services/openvidu/openvidu.service';
-import { ViewportService } from '../../services/viewport/viewport.service';
 import { TranslateService } from '../../services/translate/translate.service';
-import { LocalTrack, Track } from 'livekit-client';
-import { CustomDevice } from '../../models/device.model';
-import { LangOption } from '../../models/lang.model';
+import { ViewportService } from '../../services/viewport/viewport.service';
 
 /**
  * @internal
@@ -30,38 +29,7 @@ import { LangOption } from '../../models/lang.model';
 	templateUrl: './pre-join.component.html',
 	styleUrls: ['./pre-join.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false,
-	animations: [
-		trigger('containerResize', [
-			state(
-				'normal',
-				style({
-					height: '*'
-				})
-			),
-			state(
-				'compact',
-				style({
-					height: '300px'
-				})
-			),
-			transition('normal => compact', [animate('250ms cubic-bezier(0.25, 0.8, 0.25, 1)')]),
-			transition('compact => normal', [animate('350ms cubic-bezier(0.25, 0.8, 0.25, 1)')])
-		]),
-		trigger('slideInOut', [
-			transition(':enter', [
-				style({
-					opacity: 0
-				}),
-				animate(
-					'300ms cubic-bezier(0.34, 1.56, 0.64, 1)',
-					style({
-						opacity: 1
-					})
-				)
-			])
-		])
-	]
+	standalone: false
 })
 export class PreJoinComponent implements OnInit, OnDestroy {
 	@Input() set error(error: { name: string; message: string } | undefined) {