ov-components: Removed Angular Material legacy modules

OpenVidu · May 23, 2024 · b970463 · b970463
1 parent c0bcb95
commit b970463
Show file tree

Hide file tree

Showing 51 changed files with 301 additions and 154 deletions.
diff --git a/...ponents-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.css b/...ponents-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.css
@@ -177,11 +177,13 @@
 	display: table;
 	text-align: center;
 }
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
 	padding: 0px !important;
 	background-color: var(--ov-light-color) !important;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-wrapper {
 	height: 100% !important;
 }
diff --git a/...onents-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html b/...onents-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
@@ -62,7 +62,7 @@
 				"
 				class="item"
 			>
-				<mat-card class="recording-card">
+				<mat-card appearance="outlined" class="recording-card">
 					<mat-card-content>
 						<div class="video-div-container">
 							<img *ngIf="!!recording.url" [src]="recording.url | thumbnailUrl" />

diff --git a/...vidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.css b/...vidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.css
@@ -1,13 +1,17 @@
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card {
 	max-width: 220px;
 	margin: auto;
 	margin-top: 10vh;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card-content {
 	margin-bottom: 8px;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card-actions {
 	padding-top: 0px;
 }
@@ -21,7 +25,7 @@ mat-card-actions {
 mat-spinner {
 	margin: auto;
 }
-.mat-card-actions {
+.mat-mdc-card-actions {
 	margin: 0;
 }
 
@@ -52,17 +56,20 @@ mat-spinner {
 	width: 100%;
 }
 
-::ng-deep .mat-input-element {
+::ng-deep .mat-mdc-input-element {
 	caret-color: #000000;
 }
-::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
+/* TODO(mdc-migration): The following rule targets internal classes of option that may no longer apply for the MDC version. */
+::ng-deep .mat-primary .mat-mdc-option.mat-selected:not(.mat-option-disabled) {
 	color: #000000;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-label {
 	color: var(--ov-panel-text-color) !important;
 }
 
-::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+::ng-deep .mat-mdc-form-field.mat-focused .mat-form-field-ripple {
 	background-color: var(--ov-panel-text-color) !important;
 }
diff --git a/...idu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.html b/...idu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.html
@@ -9,7 +9,7 @@
 	</div>
 </div>
 
-<mat-card *ngIf="!checkingLogged">
+<mat-card appearance="outlined" *ngIf="!checkingLogged">
 	<mat-card-content>
 		<form ngNativeValidate #loginForm (ngSubmit)="login()">
 			<table class="full-width" cellspacing="0">

diff --git a/...ngular/projects/openvidu-angular/src/lib/components/dialogs/delete-recording.component.ts b/...ngular/projects/openvidu-angular/src/lib/components/dialogs/delete-recording.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 /**
  * @internal

diff --git a/...mponents-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts b/...mponents-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { DialogData } from '../../models/dialog.model';
 
 /**

diff --git a/...ular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts b/...ular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { DialogData } from '../../models/dialog.model';
 
 

diff --git a/...ngular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts b/...ngular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { RecordingDialogData } from '../../models/dialog.model';
 
 /**
@@ -17,11 +17,11 @@ import { RecordingDialogData } from '../../models/dialog.model';
 	`,
 	styles: [
 		`
-			video {
-				max-height: 64vh;
-				max-width: 100%;
-			}
-		`
+  			video {
+  				max-height: 64vh;
+  				max-width: 100%;
+  			}
+  		`
 	]
 })
 export class RecordingDialogComponent {

diff --git a/...openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css b/...openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css
@@ -9,42 +9,57 @@
 	display: inherit;
 	background-color: var(--ov-light-color);
 	border-radius: var(--ov-panel-radius);
+	margin: auto;
+	padding: 10px;
 }
 
-.activity-icon mat-icon {
-	margin: auto;
+::ng-deep .mat-mdc-list-item-icon {
+	margin: auto !important;
 }
 
+
+.activity-title,
 .activity-subtitle {
-	font-style: italic;
-	font-size: 11px !important;
+	margin: 0;
+	color: var(--ov-panel-text-color);
 }
+
 .activity-title {
 	font-weight: bold !important;
 }
 
+.activity-subtitle {
+	font-style: italic;
+	font-size: 11px !important;
+}
+
 .activity-action-buttons {
 	font-weight: 600;
 	position: absolute;
 	right: 15px;
-	top: 15px;
+	top: 0px;
 }
 
 ::ng-deep .mat-content {
 	display: block !important;
-
 }
 
-::ng-deep .mat-list-text {
+/* .activity-icon mat-icon {
+	margin: auto;
+} */
+
+/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+::ng-deep .mdc-list-item__content {
 	padding-left: 10px !important;
+	align-self: center !important;
 }
 
 ::ng-deep .mat-expansion-panel-header {
 	padding: 0px 5px !important;
 	height: 65px !important;
 }
 
-::ng-deep .mat-list-base .mat-list-item .mat-list-item-content,
+::ng-deep .mat-mdc-list-base .mat-mdc-list-item .mat-list-item-content,
 .mat-list-base .mat-list-option .mat-list-item-content {
 	padding: 0px !important;
 }
@@ -63,4 +78,9 @@
 
 ::ng-deep .no-body .mat-expansion-panel-content {
 	display: none !important;
-}
+}
+
+::ng-deep .mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before {
+	max-height: 24px;
+	height: 24px;
+}
diff --git a/...penvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html b/...penvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
@@ -1,12 +1,12 @@
-<div class="panel-container" id="activities-container" fxLayout="column" fxLayoutAlign="space-evenly none">
-	<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
+<div class="panel-container" id="activities-container">
+	<div class="panel-header-container">
 		<h3 class="panel-title">Activities</h3>
 		<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
 			<mat-icon>close</mat-icon>
 		</button>
 	</div>
 
-	<div class="activities-body-container" fxFlex="75%" fxLayoutAlign="space-evenly none">
+	<div class="activities-body-container">
 		<mat-accordion [multi]="false">
 			<ov-recording-activity
 				*ngIf="showRecordingActivity"

diff --git a/...ponents/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html b/...ponents/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
@@ -3,34 +3,39 @@
 		<mat-list>
 			<mat-list-item>
 				<div
-					matListAvatar
+					matListItemIcon
 					class="activity-icon"
 					[ngClass]="{
 						started: broadcastingStatus === broadcastingStatusEnum.STARTED,
 						stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED,
 						failed: broadcastingStatus === broadcastingStatusEnum.FAILED,
-						pending: broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
+						pending:
+							broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
 					}"
 				>
 					<mat-icon
 						id="broadcasting-icon"
-						*ngIf="broadcastingStatus !== broadcastingStatusEnum.FAILED && broadcastingStatus !== broadcastingStatusEnum.STARTED"
+						*ngIf="
+							broadcastingStatus !== broadcastingStatusEnum.FAILED && broadcastingStatus !== broadcastingStatusEnum.STARTED
+						"
 					>
 						sensors
 					</mat-icon>
 					<mat-icon *ngIf="broadcastingStatus === broadcastingStatusEnum.FAILED">error</mat-icon>
 					<mat-icon class="blink" *ngIf="broadcastingStatus === broadcastingStatusEnum.STARTED">sensors</mat-icon>
 				</div>
-				<h3 matLine class="activity-title">{{ 'PANEL.STREAMING.TITLE' | translate }}</h3>
-				<p matLine class="activity-subtitle">{{ 'PANEL.STREAMING.SUBTITLE' | translate }}</p>
-				<div class="activity-action-buttons">
+				<h3 matListItemLine class="activity-title">{{ 'PANEL.STREAMING.TITLE' | translate }}</h3>
+				<p matListItemLine class="activity-subtitle">{{ 'PANEL.STREAMING.SUBTITLE' | translate }}</p>
+				<div class="activity-action-buttons" matListItemMeta>
 					<div
 						id="broadcasting-status"
 						[ngClass]="{
 							started: broadcastingStatus === broadcastingStatusEnum.STARTED,
 							stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED,
 							failed: broadcastingStatus === broadcastingStatusEnum.FAILED,
-							pending: broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
+							pending:
+								broadcastingStatus === broadcastingStatusEnum.STARTING ||
+								broadcastingStatus === broadcastingStatusEnum.STOPPING
 						}"
 					>
 						<span>{{ broadcastingStatus | uppercase }}</span>
@@ -59,7 +64,9 @@ <h3 matLine class="activity-title">{{ 'PANEL.STREAMING.TITLE' | translate }}</h3
 			>
 				<input
 					placeholder="{{ 'PANEL.STREAMING.URL' | translate }}"
-					[disabled]="broadcastingStatus !== broadcastingStatusEnum.STOPPED && broadcastingStatus !== broadcastingStatusEnum.FAILED"
+					[disabled]="
+						broadcastingStatus !== broadcastingStatusEnum.STOPPED && broadcastingStatus !== broadcastingStatusEnum.FAILED
+					"
 					autocomplete="off"
 					(keypress)="eventKeyPress($event)"
 					[(ngModel)]="broadcastUrl"
@@ -70,7 +77,9 @@ <h3 matLine class="activity-title">{{ 'PANEL.STREAMING.TITLE' | translate }}</h3
 					*ngIf="broadcastingStatus !== broadcastingStatusEnum.STARTED"
 					id="broadcasting-btn"
 					[disabled]="
-						!broadcastUrl || broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
+						!broadcastUrl ||
+						broadcastingStatus === broadcastingStatusEnum.STARTING ||
+						broadcastingStatus === broadcastingStatusEnum.STOPPING
 					"
 					(click)="startBroadcasting()"
 				>

diff --git a/...lib/components/panel/activities-panel/recording-activity/recording-activity.component.css b/...lib/components/panel/activities-panel/recording-activity/recording-activity.component.css
@@ -6,13 +6,23 @@
 	border-radius: var(--ov-panel-radius);
 }
 
+.recording-title {
+	margin: 0px;
+}
+
 .time-container {
 	padding: 2px;
 }
 .recording-icon {
 	font-size: 32px !important;
-	height: 32px !important;
 	width: 32px !important;
+	margin: 0 !important;
+	align-self: center !important;
+	display: flex;
+	flex-wrap: wrap;
+	height: auto;
+	align-content: center;
+	color: var(--ov-panel-text-color) !important;
 }
 
 .recording-duration {
@@ -111,6 +121,18 @@ mat-expansion-panel {
 	margin: 0px 0px 5px 0px;
 }
 
+::ng-deep .mdc-list {
+	padding: 0px;
+}
+
+::ng-deep .mdc-list-item__secondary-text {
+	display: flex;
+}
+
+::ng-deep .mat-mdc-list-item-unscoped-content {
+	height: 0px !important;
+}
+
 .blink {
 	animation: blinker 1.5s linear infinite !important;
 }

diff --git a/...ib/components/panel/activities-panel/recording-activity/recording-activity.component.html b/...ib/components/panel/activities-panel/recording-activity/recording-activity.component.html
@@ -1,9 +1,9 @@
-<mat-expansion-panel (opened)="panelOpened()" (closed)="panelClosed()" [expanded]="expanded" [ngClass]="{'no-body': !opened}">
+<mat-expansion-panel (opened)="panelOpened()" (closed)="panelClosed()" [expanded]="expanded" [ngClass]="{ 'no-body': !opened }">
 	<mat-expansion-panel-header>
 		<mat-list>
 			<mat-list-item>
 				<div
-					matListAvatar
+					matListItemIcon
 					class="activity-icon"
 					[ngClass]="{
 						started: recordingStatus === recStatusEnum.STARTED,
@@ -12,15 +12,18 @@
 						pending: recordingStatus === recStatusEnum.STARTING || recordingStatus === recStatusEnum.STOPPING
 					}"
 				>
-					<mat-icon id="recording-icon" *ngIf="recordingStatus !== recStatusEnum.FAILED && recordingStatus !== recStatusEnum.STARTED">
+					<mat-icon
+						id="recording-icon"
+						*ngIf="recordingStatus !== recStatusEnum.FAILED && recordingStatus !== recStatusEnum.STARTED"
+					>
 						video_camera_front
 					</mat-icon>
 					<mat-icon *ngIf="recordingStatus === recStatusEnum.FAILED">error</mat-icon>
 					<mat-icon class="blink" *ngIf="recordingStatus === recStatusEnum.STARTED">radio_button_checked</mat-icon>
 				</div>
-				<h3 matLine class="activity-title">{{ 'PANEL.RECORDING.TITLE' | translate }}</h3>
-				<p matLine class="activity-subtitle">{{ 'PANEL.RECORDING.SUBTITLE' | translate }}</p>
-				<div class="activity-action-buttons">
+				<h3 matListItemLine class="activity-title">{{ 'PANEL.RECORDING.TITLE' | translate }}</h3>
+				<p matListItemLine class="activity-subtitle">{{ 'PANEL.RECORDING.SUBTITLE' | translate }}</p>
+				<div class="activity-action-buttons" matListItemMeta>
 					<div
 						id="recording-status"
 						[ngClass]="{
@@ -95,9 +98,9 @@ <h2 *ngIf="recordingsList.length === 0">{{ 'PANEL.RECORDING.CONTENT_TITLE' | tra
 					</div>
 					<div mat-line class="time-container">
 						<span class="recording-duration"> {{ recording.duration | duration }} </span>
-						<span class="recording-size"> | {{ recording.size / 1024 / 1024 | number: '1.1-2' }} MBs</span>
+						<span class="recording-size"> | {{ recording.size / 1024 / 1024 | number : '1.1-2' }} MBs</span>
 					</div>
-					<div mat-line class="recording-date">{{ recording.createdAt | date: 'HH:mm - dd/MM/yyyy' }}</div>
+					<div mat-line class="recording-date">{{ recording.createdAt | date : 'HH:mm - dd/MM/yyyy' }}</div>
 
 					<button
 						mat-icon-button

diff --git a/.../src/lib/components/panel/background-effects-panel/background-effects-panel.component.css b/.../src/lib/components/panel/background-effects-panel/background-effects-panel.component.css
@@ -36,10 +36,12 @@
 	border-radius: var(--ov-panel-radius);
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
 ::ng-deep .mat-slider-thumb {
 	visibility: hidden;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
 ::ng-deep .mat-slider-vertical .mat-slider-track-fill,
 ::ng-deep .mat-slider-vertical .mat-slider-track-background,
 ::ng-deep .mat-slider-vertical .mat-slider-track-wrapper {