ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: Refactor pre-join component to replace Angular animations with CSS animations and optimize video preview container handling

master
CSantosM 2026-01-27 16:09:07 +01:00
parent ed64c3a305
commit 83e38ae88a
3 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
View File

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

33
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
View File

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

42
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
View File

@ -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) {