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 --> <!-- Top Language Toolbar -->
<div class="top-toolbar" *ngIf="!isMinimal"> <div class="top-toolbar" *ngIf="!isMinimal">
<ov-lang-selector [compact]="false" class="language-selector" (onLangChanged)="onLangChanged.emit($event)"> </ov-lang-selector> <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 { @keyframes slideInFromRight {
from { from {
opacity: 0; 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 { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
import { LoggerService } from '../../services/logger/logger.service'; import { LoggerService } from '../../services/logger/logger.service';
import { OpenViduService } from '../../services/openvidu/openvidu.service'; import { OpenViduService } from '../../services/openvidu/openvidu.service';
import { ViewportService } from '../../services/viewport/viewport.service';
import { TranslateService } from '../../services/translate/translate.service'; import { TranslateService } from '../../services/translate/translate.service';
import { LocalTrack, Track } from 'livekit-client'; import { LocalTrack, Track } from 'livekit-client';
import { CustomDevice } from '../../models/device.model'; import { CustomDevice } from '../../models/device.model';
@ -74,7 +75,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
@Output() onReadyToJoin = new EventEmitter<any>(); @Output() onReadyToJoin = new EventEmitter<any>();
_error: string | undefined; _error: string | undefined;
windowSize: number; windowSize!: number;
isLoading = true; isLoading = true;
participantName: string | undefined = ''; participantName: string | undefined = '';
@ -95,7 +96,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
audioTrack: LocalTrack | undefined; audioTrack: LocalTrack | undefined;
isVideoEnabled: boolean = false; isVideoEnabled: boolean = false;
hasVideoDevices: boolean = true; hasVideoDevices: boolean = true;
private tracks: LocalTrack[]; private tracks: LocalTrack[] = [];
private log: ILogger; private log: ILogger;
private destroy$ = new Subject<void>(); private destroy$ = new Subject<void>();
private shouldRemoveTracksWhenComponentIsDestroyed: boolean = true; private shouldRemoveTracksWhenComponentIsDestroyed: boolean = true;
@ -111,7 +112,8 @@ export class PreJoinComponent implements OnInit, OnDestroy {
private cdkSrv: CdkOverlayService, private cdkSrv: CdkOverlayService,
private openviduService: OpenViduService, private openviduService: OpenViduService,
private translateService: TranslateService, private translateService: TranslateService,
private changeDetector: ChangeDetectorRef private changeDetector: ChangeDetectorRef,
protected viewportService: ViewportService
) { ) {
this.log = this.loggerSrv.get('PreJoinComponent'); this.log = this.loggerSrv.get('PreJoinComponent');
} }