openvidu-components: Made prejoin page responsive

OpenVidu · Sep 7, 2022 · 74cfa1e · 74cfa1e
1 parent b20da50
commit 74cfa1e
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 14 deletions.
diff --git a/...ents-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css b/...ents-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
@@ -1,6 +1,6 @@
 .container {
 	height: calc(100% - 64px);
-	padding: 50px 80px;
+	padding: 30px 60px;
 	background-color: var(--ov-light-color);
 }
 
@@ -58,9 +58,11 @@ hr {
 }
 
 #prejoin-container ::ng-deep .mat-drawer-container,
-#prejoin-container ::ng-deep .sidenav-menu {
-	background-color: var(--ov-light-color) !important;
+#prejoin-container ::ng-deep .sidenav-menu,
+#prejoin-container ::ng-deep #session-container {
+	background-color: transparent !important;
 }
+
 #prejoin-container ::ng-deep .sidenav-menu {
 	width: 320px;
 }
@@ -121,7 +123,7 @@ hr {
 	border-radius: var(--ov-video-radius);
 }
 
-@media only screen and (max-width: 480px) {
+ @media only screen and (max-width: 480px) {
 	.container,
 	.media-panel-container,
 	.buttons-container {
@@ -142,7 +144,7 @@ hr {
 }
 
 @media only screen and (min-width: 480px) and (max-width: 959px) {
-	.container,
+	/* .container, */
 	.media-panel-container,
 	.buttons-container {
 		padding: 0;
@@ -161,8 +163,4 @@ hr {
 		padding-top: 0px;
 		max-width: 600px;
 	}
-
-	.media-panel {
-		align-items: flex-start !important;
-	}
 }
diff --git a/...nts-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html b/...nts-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
@@ -8,9 +8,9 @@
 	</mat-toolbar>
 </div>
 
-<div class="container" id="prejoin-container" fxLayout.gt-sm="row" fxLayout.lt-md="column">
-	<div fxFlex.gt-sm="65%" fxFlex.lt-md="55%" fxLayoutAlign="center center" id="layout-container">
-		<ov-session [usedInPrejoinPage]="true">
+<div class="container" id="prejoin-container" fxLayout.landscape="row" fxLayout.lt-md="column" fxLayout.md="row" fxLayout.gt-md="row">
+	<div fxFlex.lt-sm="50%" fxFlex.lt-md="50%" fxFlex.md="45%" fxFlex.gt-md="45%" fxLayoutAlign="center center" id="layout-container">
+		<ov-session [usedInPrejoinPage]="true" class="ov-session">
 			<ng-template #panel *ngIf="!isMinimal && showBackgroundEffectsButton">
 				<ov-panel>
 					<ng-template #backgroundEffectsPanel>
@@ -38,7 +38,7 @@
 			</ng-template>
 		</ov-session>
 	</div>
-	<div fxFlex.gt-sm="35%" fxFlex.lt-md="45%" fxLayoutAlign="center center" class="media-panel" *ngIf="localParticipant">
+	<div fxFlex.lt-md="50%" fxFlex.md="55%" fxFlex.gt-md="55%" fxLayoutAlign="center center" class="media-panel" *ngIf="localParticipant">
 		<div fxLayout="column" fxLayoutGap="10px" class="media-panel-container">
 			<div fxLayout.gt-sm="column" fxLayout.lt-md="column" fxLayoutGap="10px" fxFlex="33%">
 				<div fxFlex.gt-sm="100%" fxFlex.lt-md="33%" fxLayoutAlign="center center" fxFlexFill class="nickname-container">

diff --git a/...onents-angular/projects/openvidu-angular/src/lib/components/session/session.component.css b/...onents-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
@@ -102,4 +102,8 @@
 
 ::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
 	background-color: var(--ov-panel-text-color) !important;
+}
+
+::ng-deep .mat-drawer {
+	background-color: transparent !important;
 }
diff --git a/...ponents-angular/projects/openvidu-angular/src/lib/config/custom-flexlayout-breakpoints.ts b/...ponents-angular/projects/openvidu-angular/src/lib/config/custom-flexlayout-breakpoints.ts
@@ -0,0 +1,29 @@
+import { BREAKPOINT, LayoutDirective } from '@angular/flex-layout';
+import { Directive } from '@angular/core';
+import {  } from '@angular/flex-layout';
+
+
+const LANDSCAPE_BREAKPOINTS = [
+	{
+		alias: 'landscape',
+		suffix: 'Landscape',
+		mediaQuery: 'screen and (orientation: landscape)',
+		overlapping: false,
+		priority: 2001
+	}
+];
+
+export const CustomBreakPointsProvider = {
+	provide: BREAKPOINT,
+	useValue: LANDSCAPE_BREAKPOINTS,
+	multi: true
+};
+
+
+const selector = `[fxLayout.landscape]`;
+const inputs = ['fxLayout.landscape'];
+
+@Directive({ selector, inputs })
+export class CustomLayoutExtensionDirective extends LayoutDirective {
+	protected inputs = inputs;
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
@@ -60,6 +60,7 @@ import { NicknameInputComponent } from './components/settings/nickname-input/nic
 import { LangSelectorComponent } from './components/settings/lang-selector/lang-selector.component';
 import { SubtitlesSettingComponent } from './components/settings/subtitles/subtitles.component';
 import { CaptionsComponent } from './components/captions/captions.component';
+import { CustomBreakPointsProvider, CustomLayoutExtensionDirective } from './config/custom-flexlayout-breakpoints';
 
 const publicComponents = [
 	AdminDashboardComponent,
@@ -104,7 +105,8 @@ const privateComponents = [
 		SearchByStringPropertyPipe,
 		ThumbnailFromUrlPipe,
 		StreamTypesEnabledPipe,
-		TranslatePipe
+		TranslatePipe,
+		CustomLayoutExtensionDirective,
 	],
 	imports: [
 		CommonModule,
@@ -120,6 +122,7 @@ const privateComponents = [
 		ActionService,
 		CdkOverlayContainer,
 		{ provide: OverlayContainer, useClass: CdkOverlayContainer },
+		CustomBreakPointsProvider,
 		ChatService,
 		PanelService,
 		DeviceService,