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 54930231..367e3fe3 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 @@ -1,4 +1,4 @@ -
+
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 73e67fa5..421b1ded 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 @@ -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; 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 7d497fe6..4bc2ff63 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 @@ -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(); _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(); 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'); }