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

ov-components: enhance pre-join component for mobile support and viewport handling

master
Carlos Santos 2025-09-22 19:22:28 +02:00
parent 8416c3f764
commit bd74184799
3 changed files with 39 additions and 4 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

@ -1,4 +1,4 @@
<div class="prejoin-container" id="prejoin-container" [class.name-error]="!!_error">
<div class="prejoin-container" id="prejoin-container" [class.mobile]="viewportService.isMobile()" [class.name-error]="!!_error">
<!-- Top Language Toolbar -->
<div class="top-toolbar" *ngIf="!isMinimal">
<ov-lang-selector [compact]="false" class="language-selector" (onLangChanged)="onLangChanged.emit($event)"> </ov-lang-selector>

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

@ -293,6 +293,39 @@
}
}
.prejoin-container.mobile {
padding: 0;
.prejoin-main {
max-width: none;
width: 100%;
height: 100vh;
max-height: none;
border-radius: 0;
display: flex;
flex-direction: column;
.configuration-section {
padding: 20px 10px;
justify-content: center;
gap: 18px;
}
}
.video-preview-section {
flex: 1;
height: 50vh;
display: flex;
flex-direction: column;
.video-preview-container {
flex: 1;
height: 75vh;
aspect-ratio: unset;
border-radius: 0;
}
}
}
@keyframes slideInFromRight {
from {
opacity: 0;

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

@ -16,6 +16,7 @@ import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.servic
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';
@ -74,7 +75,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
@Output() onReadyToJoin = new EventEmitter<any>();
_error: string | undefined;
windowSize: number;
windowSize!: number;
isLoading = true;
participantName: string | undefined = '';
@ -95,7 +96,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
audioTrack: LocalTrack | undefined;
isVideoEnabled: boolean = false;
hasVideoDevices: boolean = true;
private tracks: LocalTrack[];
private tracks: LocalTrack[] = [];
private log: ILogger;
private destroy$ = new Subject<void>();
private shouldRemoveTracksWhenComponentIsDestroyed: boolean = true;
@ -111,7 +112,8 @@ export class PreJoinComponent implements OnInit, OnDestroy {
private cdkSrv: CdkOverlayService,
private openviduService: OpenViduService,
private translateService: TranslateService,
private changeDetector: ChangeDetectorRef
private changeDetector: ChangeDetectorRef,
protected viewportService: ViewportService
) {
this.log = this.loggerSrv.get('PreJoinComponent');
}