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

ov-components: Removed Angular Material legacy modules

pull/744/merge
Carlos Santos 2024-05-23 11:39:01 +02:00
parent c0bcb95282
commit b970463325
51 changed files with 305 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.css
View File

@ -177,11 +177,13 @@
display: table; display: table;
text-align: center; 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 { ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
padding: 0px !important; padding: 0px !important;
background-color: var(--ov-light-color) !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 { ::ng-deep .mat-form-field-wrapper {
height: 100% !important; height: 100% !important;
} }

2
openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
View File

@ -62,7 +62,7 @@
" "
class="item" class="item"
> >
<mat-card class="recording-card"> <mat-card appearance="outlined" class="recording-card">
<mat-card-content> <mat-card-content>
<div class="video-div-container"> <div class="video-div-container">
<img *ngIf="!!recording.url" [src]="recording.url | thumbnailUrl" /> <img *ngIf="!!recording.url" [src]="recording.url | thumbnailUrl" />

15
openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.css
View File

@ -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 { mat-card {
max-width: 220px; max-width: 220px;
margin: auto; margin: auto;
margin-top: 10vh; 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 { mat-card-content {
margin-bottom: 8px; 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 { mat-card-actions {
padding-top: 0px; padding-top: 0px;
} }
@ -21,7 +25,7 @@ mat-card-actions {
mat-spinner { mat-spinner {
margin: auto; margin: auto;
} }
.mat-card-actions { .mat-mdc-card-actions {
margin: 0; margin: 0;
} }
@ -52,17 +56,20 @@ mat-spinner {
width: 100%; width: 100%;
} }
::ng-deep .mat-input-element { ::ng-deep .mat-mdc-input-element {
caret-color: #000000; 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; 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 { ::ng-deep .mat-form-field-label {
color: var(--ov-panel-text-color) !important; 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; background-color: var(--ov-panel-text-color) !important;
} }

2
openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.html
View File

@ -9,7 +9,7 @@
</div> </div>
</div> </div>
<mat-card *ngIf="!checkingLogged"> <mat-card appearance="outlined" *ngIf="!checkingLogged">
<mat-card-content> <mat-card-content>
<form ngNativeValidate #loginForm (ngSubmit)="login()"> <form ngNativeValidate #loginForm (ngSubmit)="login()">
<table class="full-width" cellspacing="0"> <table class="full-width" cellspacing="0">

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/delete-recording.component.ts
View File

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog'; import { MatDialogRef } from '@angular/material/dialog';
/** /**
* @internal * @internal

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Inject } from '@angular/core'; 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'; import { DialogData } from '../../models/dialog.model';
/** /**

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Inject } from '@angular/core'; 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'; import { DialogData } from '../../models/dialog.model';

12
openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Inject } from '@angular/core'; 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'; import { RecordingDialogData } from '../../models/dialog.model';
/** /**
@ -17,11 +17,11 @@ import { RecordingDialogData } from '../../models/dialog.model';
`, `,
styles: [ styles: [
` `
video { video {
max-height: 64vh; max-height: 64vh;
max-width: 100%; max-width: 100%;
} }
` `
] ]
}) })
export class RecordingDialogComponent { export class RecordingDialogComponent {

40
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css
View File

@ -9,34 +9,49 @@
display: inherit; display: inherit;
background-color: var(--ov-light-color); background-color: var(--ov-light-color);
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
margin: auto;
padding: 10px;
} }
.activity-icon mat-icon { ::ng-deep .mat-mdc-list-item-icon {
margin: auto; margin: auto !important;
}
.activity-title,
.activity-subtitle {
margin: 0;
color: var(--ov-panel-text-color);
}
.activity-title {
font-weight: bold !important;
} }
.activity-subtitle { .activity-subtitle {
font-style: italic; font-style: italic;
font-size: 11px !important; font-size: 11px !important;
} }
.activity-title {
font-weight: bold !important;
}
.activity-action-buttons { .activity-action-buttons {
font-weight: 600; font-weight: 600;
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 15px; top: 0px;
} }
::ng-deep .mat-content { ::ng-deep .mat-content {
display: block !important; 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; padding-left: 10px !important;
align-self: center !important;
} }
::ng-deep .mat-expansion-panel-header { ::ng-deep .mat-expansion-panel-header {
@ -44,7 +59,7 @@
height: 65px !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 { .mat-list-base .mat-list-option .mat-list-item-content {
padding: 0px !important; padding: 0px !important;
} }
@ -63,4 +78,9 @@
::ng-deep .no-body .mat-expansion-panel-content { ::ng-deep .no-body .mat-expansion-panel-content {
display: none !important; 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;
}

6
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
View File

@ -1,12 +1,12 @@
<div class="panel-container" id="activities-container" fxLayout="column" fxLayoutAlign="space-evenly none"> <div class="panel-container" id="activities-container">
<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center"> <div class="panel-header-container">
<h3 class="panel-title">Activities</h3> <h3 class="panel-title">Activities</h3>
<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()"> <button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
<div class="activities-body-container" fxFlex="75%" fxLayoutAlign="space-evenly none"> <div class="activities-body-container">
<mat-accordion [multi]="false"> <mat-accordion [multi]="false">
<ov-recording-activity <ov-recording-activity
*ngIf="showRecordingActivity" *ngIf="showRecordingActivity"

27
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
View File

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

24
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.css
View File

@ -6,13 +6,23 @@
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
} }
.recording-title {
margin: 0px;
}
.time-container { .time-container {
padding: 2px; padding: 2px;
} }
.recording-icon { .recording-icon {
font-size: 32px !important; font-size: 32px !important;
height: 32px !important;
width: 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 { .recording-duration {
@ -111,6 +121,18 @@ mat-expansion-panel {
margin: 0px 0px 5px 0px; 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 { .blink {
animation: blinker 1.5s linear infinite !important; animation: blinker 1.5s linear infinite !important;
} }

19
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
View File

@ -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-expansion-panel-header>
<mat-list> <mat-list>
<mat-list-item> <mat-list-item>
<div <div
matListAvatar matListItemIcon
class="activity-icon" class="activity-icon"
[ngClass]="{ [ngClass]="{
started: recordingStatus === recStatusEnum.STARTED, started: recordingStatus === recStatusEnum.STARTED,
@ -12,15 +12,18 @@
pending: recordingStatus === recStatusEnum.STARTING || recordingStatus === recStatusEnum.STOPPING 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 video_camera_front
</mat-icon> </mat-icon>
<mat-icon *ngIf="recordingStatus === recStatusEnum.FAILED">error</mat-icon> <mat-icon *ngIf="recordingStatus === recStatusEnum.FAILED">error</mat-icon>
<mat-icon class="blink" *ngIf="recordingStatus === recStatusEnum.STARTED">radio_button_checked</mat-icon> <mat-icon class="blink" *ngIf="recordingStatus === recStatusEnum.STARTED">radio_button_checked</mat-icon>
</div> </div>
<h3 matLine class="activity-title">{{ 'PANEL.RECORDING.TITLE' | translate }}</h3> <h3 matListItemLine class="activity-title">{{ 'PANEL.RECORDING.TITLE' | translate }}</h3>
<p matLine class="activity-subtitle">{{ 'PANEL.RECORDING.SUBTITLE' | translate }}</p> <p matListItemLine class="activity-subtitle">{{ 'PANEL.RECORDING.SUBTITLE' | translate }}</p>
<div class="activity-action-buttons"> <div class="activity-action-buttons" matListItemMeta>
<div <div
id="recording-status" id="recording-status"
[ngClass]="{ [ngClass]="{
@ -95,9 +98,9 @@
</div> </div>
<div mat-line class="time-container"> <div mat-line class="time-container">
<span class="recording-duration"> {{ recording.duration | duration }} </span> <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>
<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 <button
mat-icon-button mat-icon-button

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css
View File

@ -36,10 +36,12 @@
border-radius: var(--ov-panel-radius); 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 { ::ng-deep .mat-slider-thumb {
visibility: hidden; 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-fill,
::ng-deep .mat-slider-vertical .mat-slider-track-background, ::ng-deep .mat-slider-vertical .mat-slider-track-background,
::ng-deep .mat-slider-vertical .mat-slider-track-wrapper { ::ng-deep .mat-slider-vertical .mat-slider-track-wrapper {

5
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.css
View File

@ -4,11 +4,16 @@
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
max-height: calc(100% - 40px); max-height: calc(100% - 40px);
min-height: calc(100% - 40px); min-height: calc(100% - 40px);
display: flex;
flex-direction: column;
align-items: stretch;
} }
.panel-header-container { .panel-header-container {
padding: 10px; padding: 10px;
flex: inherit;
display: flex; display: flex;
align-items: center;
} }
.panel-title { .panel-title {

35
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
View File

@ -1,16 +1,28 @@
.participant-avatar {
display: inherit;
border-radius: var(--ov-panel-radius);
margin: auto !important;
padding: 10px;
color: var(--ov-panel-text-color);
}
.participant-subtitle { .participant-subtitle {
font-style: italic; font-style: italic;
font-size: 11px !important; font-size: 11px !important;
} margin: 0;
.participant-nickname {
font-weight: bold !important;
} }
.participant-action-buttons{ .participant-nickname {
font-weight: bold !important;
margin: 0;
color: var(--ov-panel-text-color);
}
.participant-action-buttons {
display: flex; display: flex;
} }
::ng-deep .participant-action-buttons > *:not(#mute-btn) { ::ng-deep .participant-action-buttons > *:not(#mute-btn) {
display: contents; display: contents;
} }
@ -18,7 +30,8 @@
margin: auto; margin: auto;
} }
mat-list-item {
::ng-deep .mat-mdc-list-item {
height: max-content !important; height: max-content !important;
padding-bottom: 10px !important; padding-bottom: 10px !important;
} }
@ -27,8 +40,14 @@ mat-list {
padding: 3px; padding: 3px;
} }
.participant-avatar { ::ng-deep .mdc-list-item__content {
display: contents; padding-left: 10px !important;
align-self: center !important;
}
::ng-deep .mat-mdc-list-base {
--mdc-list-list-item-hover-label-text-color: unset;
--mdc-list-list-item-hover-leading-icon-color: unset;
} }
#mute-btn { #mute-btn {

16
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
View File

@ -1,13 +1,15 @@
<mat-list> <mat-list>
<mat-list-item> <mat-list-item>
<mat-icon matListAvatar class="participant-avatar">person</mat-icon> <div matListItemIcon class="participant-avatar" [style.background-color]="_participant.colorProfile">
<h3 matLine class="participant-nickname">{{ _participant.nickname }}</h3> <mat-icon>person</mat-icon>
<p matLine class="participant-subtitle">{{ _participant | streamTypesEnabled }}</p> </div>
<!-- <p matLine> <h3 matListItemLine class="participant-nickname">
<span class="participant-subtitle"></span> {{ _participant.nickname }}
</p> --> <span *ngIf="_participant.isLocal"> ({{ 'PANEL.PARTICIPANTS.YOU' | translate }})</span>
</h3>
<p matListItemLine class="participant-subtitle">{{ _participant | streamTypesEnabled }}</p>
<div class="participant-action-buttons"> <div class="participant-action-buttons" matListItemMeta>
<button <button
mat-icon-button mat-icon-button
id="mute-btn" id="mute-btn"

35
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css
View File

@ -1,6 +1,14 @@
#settings-container {
display: flex;
}
.settings-container { .settings-container {
display: flex; display: flex;
padding: 10px; padding: 10px;
flex: 1;
width: auto;
justify-content: space-between;
align-items: stretch;
} }
.item-menu { .item-menu {
@ -18,18 +26,29 @@
width: min-content; width: min-content;
} }
.option {
border-radius: var(--ov-panel-radius);
}
.lang-container button { .lang-container button {
width: 100%; width: 100%;
} }
/* .option {
border-radius: var(--ov-panel-radius);
} */
mat-list-option[aria-selected='true'] { mat-list-option[aria-selected='true'] {
background: var(--ov-tertiary-color); background: var(--ov-tertiary-color) !important;
font-weight: bold !important; border-radius: var(--ov-panel-radius);
color: var(--ov-panel-background);
} }
::ng-deep .mat-list-item-content {
padding: 5px !important; ::ng-deep mat-list-option[aria-selected='true'] .mat-mdc-list-item-unscoped-content, ::ng-deep mat-list-option[aria-selected='true'] mat-icon {
color: var(--ov-panel-background) !important;
}
mat-list-option[aria-selected='false'] mat-icon {
color: var(--ov-panel-text-color) !important;
}
::ng-deep .mdc-list-item--with-leading-icon .mdc-list-item__start {
margin-right: 15px !important;
}
.mat-mdc-list-base {
--mdc-list-list-item-focus-state-layer-color: transparent !important;
} }

22
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
View File

@ -1,17 +1,19 @@
<div class="panel-container" id="settings-container" fxLayout="column" fxLayoutAlign="space-evenly none"> <div class="panel-container" id="settings-container">
<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center"> <div class="panel-header-container">
<h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3> <h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()"> <button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
<div class="settings-container" fxFlex="100%" fxLayoutAlign="space-evenly none"> <div class="settings-container">
<div class="item-menu" [ngClass]="{ mobile: isMobile }"> <div class="item-menu" [ngClass]="{ mobile: isMobile }">
<mat-selection-list <mat-selection-list
#optionList #optionList
(selectionChange)="onSelectionChanged(optionList.selectedOptions.selected[0]?.value)" (selectionChange)="onSelectionChanged(optionList.selectedOptions.selected[0]?.value)"
[multiple]="false" [multiple]="false"
[hideSingleSelectionIndicator]="true"
[disableRipple]="true"
> >
<mat-list-option <mat-list-option
class="option" class="option"
@ -19,7 +21,7 @@
[selected]="selectedOption === settingsOptions.GENERAL" [selected]="selectedOption === settingsOptions.GENERAL"
[value]="settingsOptions.GENERAL" [value]="settingsOptions.GENERAL"
> >
<mat-icon mat-list-icon>manage_accounts</mat-icon> <mat-icon matListItemIcon>manage_accounts</mat-icon>
<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div> <div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
</mat-list-option> </mat-list-option>
<mat-list-option <mat-list-option
@ -28,7 +30,7 @@
[selected]="selectedOption === settingsOptions.VIDEO" [selected]="selectedOption === settingsOptions.VIDEO"
[value]="settingsOptions.VIDEO" [value]="settingsOptions.VIDEO"
> >
<mat-icon mat-list-icon>videocam</mat-icon> <mat-icon matListItemIcon>videocam</mat-icon>
<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div> <div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
</mat-list-option> </mat-list-option>
<mat-list-option <mat-list-option
@ -37,7 +39,7 @@
[selected]="selectedOption === settingsOptions.AUDIO" [selected]="selectedOption === settingsOptions.AUDIO"
[value]="settingsOptions.AUDIO" [value]="settingsOptions.AUDIO"
> >
<mat-icon mat-list-icon>mic</mat-icon> <mat-icon matListItemIcon>mic</mat-icon>
<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div> <div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div>
</mat-list-option> </mat-list-option>
<mat-list-option <mat-list-option
@ -47,7 +49,7 @@
[value]="settingsOptions.CAPTIONS" [value]="settingsOptions.CAPTIONS"
id="captions-opt" id="captions-opt"
> >
<mat-icon mat-list-icon>closed_caption</mat-icon> <mat-icon matListItemIcon>closed_caption</mat-icon>
<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div> <div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
</mat-list-option> </mat-list-option>
</mat-selection-list> </mat-selection-list>
@ -58,9 +60,9 @@
<ov-nickname-input></ov-nickname-input> <ov-nickname-input></ov-nickname-input>
<mat-list> <mat-list>
<mat-list-item> <mat-list-item>
<mat-icon mat-list-icon>language</mat-icon> <mat-icon matListItemIcon>language</mat-icon>
<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div> <div matListItemTitle>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
<ov-lang-selector></ov-lang-selector> <ov-lang-selector matListItemMeta></ov-lang-selector>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</div> </div>

3
openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
View File

@ -15,8 +15,6 @@
#toolbar ::ng-deep .lang-button { #toolbar ::ng-deep .lang-button {
height: 25px !important; height: 25px !important;
font-size: 14px !important; font-size: 14px !important;
line-height: 0px;
align-items: unset !important;
} }
.spacer { .spacer {
flex: 1 1 auto; flex: 1 1 auto;
@ -98,6 +96,7 @@ hr {
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-appearance-fill .mat-form-field-flex { .mat-form-field-appearance-fill .mat-form-field-flex {
/* background-color: var(--ov-text-color); */ /* background-color: var(--ov-text-color); */
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);

10
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
View File

@ -85,22 +85,26 @@
} }
} }
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
padding: 1px !important; padding: 1px !important;
} }
::ng-deep .mat-input-element { ::ng-deep .mat-mdc-input-element {
caret-color: #000000; 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; 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 { ::ng-deep .mat-form-field-label {
color: var(--ov-panel-text-color) !important; 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; background-color: var(--ov-panel-text-color) !important;
} }

14
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css
View File

@ -2,6 +2,10 @@
margin-top: 10px; margin-top: 10px;
} }
.lang-section-item {
height: fit-content !important
}
.section-description { .section-description {
color: var(--ov-panel-text-color); color: var(--ov-panel-text-color);
font-size: 12px; font-size: 12px;
@ -18,14 +22,6 @@
text-align: center; text-align: center;
} }
.pro-feture p { .pro-feture p {
font-size: 14px; font-size: 14px;
} }
::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color: var(--ov-tertiary-color);
}
::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color: var(--ov-light-color);
}

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html
View File

@ -13,7 +13,7 @@
</div> </div>
<div id="lang-section"> <div id="lang-section">
<mat-list-item> <mat-list-item class="lang-section-item">
<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div> <div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
<button mat-flat-button [matMenuTriggerFor]="menu" [disabled]="!isSttReady" class="lang-button"> <button mat-flat-button [matMenuTriggerFor]="menu" [disabled]="!isSttReady" class="lang-button">
<span>{{ langSelected }}</span> <span>{{ langSelected }}</span>

3
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.css
View File

@ -1,4 +1,7 @@
.lang-button { .lang-button {
background-color: var(--ov-logo-background-color); background-color: var(--ov-logo-background-color);
color: var(--ov-text-color); color: var(--ov-text-color);
}
mat-icon {
vertical-align: middle;
} }

18
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.html
View File

@ -1,9 +1,17 @@
<button mat-flat-button [matMenuTriggerFor]="menu" class="lang-button"> <button mat-flat-button [matMenuTriggerFor]="menu" class="lang-button">
<span>{{langSelected?.name}}</span> <span>
<mat-icon>expand_more</mat-icon> <span>{{ langSelected?.name }}</span>
<mat-icon>expand_more</mat-icon>
</span>
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let lang of languages" (click)="onLangSelected(lang.lang)" class="lang-menu-opt"> <button
<span>{{lang.name}}</span> mat-menu-item
*ngFor="let lang of languages"
(click)="onLangSelected(lang.lang)"
[attr.id]="'lang-opt-' + lang.lang"
class="lang-menu-opt"
>
<span>{{ lang.name }}</span>
</button> </button>
</mat-menu> </mat-menu>

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts
View File

@ -1,6 +1,6 @@
import { AfterViewInit, Component, OnInit, Output, ViewChild, EventEmitter, OnDestroy } from '@angular/core'; import { AfterViewInit, Component, OnInit, Output, ViewChild, EventEmitter, OnDestroy } from '@angular/core';
import { MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu'; import { MatMenuTrigger } from '@angular/material/menu';
import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select'; import { MatSelect } from '@angular/material/select';
import { StorageService } from '../../../services/storage/storage.service'; import { StorageService } from '../../../services/storage/storage.service';
import { TranslateService } from '../../../services/translate/translate.service'; import { TranslateService } from '../../../services/translate/translate.service';
import { LangOption } from '../../../models/lang.model'; import { LangOption } from '../../../models/lang.model';

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.css
View File

@ -6,7 +6,7 @@
margin: auto 10px auto auto; margin: auto 10px auto auto;
} }
#nickname-input-container button.mat-button-disabled { #nickname-button {
color: #000000 !important; color: #000000 !important;
} }

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.html
View File

@ -1,8 +1,8 @@
<div id="nickname-input-container"> <div id="nickname-input-container">
<button mat-icon-button disabled> <button mat-icon-button disabled id="nickname-button">
<mat-icon>person</mat-icon> <mat-icon>person</mat-icon>
</button> </button>
<mat-form-field appearance="standard"> <mat-form-field>
<mat-label>{{ 'PREJOIN.NICKNAME' | translate }}</mat-label> <mat-label>{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
<input <input
matInput matInput

17
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
View File

@ -47,6 +47,15 @@
top: 40px; top: 40px;
} }
.video-settings-btn mat-icon {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
video { video {
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
@ -84,7 +93,7 @@ video {
background-color: var(--ov-warn-color); background-color: var(--ov-warn-color);
} }
.status-icons .mat-icon-button, .status-icons .mat-mdc-icon-button,
#settings-container .mat-icon-button { #settings-container .mat-icon-button {
line-height: 0px; line-height: 0px;
} }
@ -92,6 +101,12 @@ video {
.status-icons mat-icon, .status-icons mat-icon,
#settings-container mat-icon { #settings-container mat-icon {
font-size: 18px; font-size: 18px;
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
} }
#settings-container { #settings-container {

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
View File

@ -51,7 +51,6 @@
</div> </div>
<div *ngIf="!isMinimal && showSettingsButton" id="settings-container" class="videoButtons"> <div *ngIf="!isMinimal && showSettingsButton" id="settings-container" class="videoButtons">
<button <button
mat-icon-button mat-icon-button
(click)="toggleVideoMenu($event)" (click)="toggleVideoMenu($event)"
@ -59,6 +58,7 @@
matTooltipPosition="above" matTooltipPosition="above"
aria-label="Video settings menu" aria-label="Video settings menu"
id="video-settings-btn-{{ this._stream.streamManager?.stream?.typeOfVideo }}" id="video-settings-btn-{{ this._stream.streamManager?.stream?.typeOfVideo }}"
class="video-settings-btn"
> >
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
View File

@ -1,6 +1,6 @@
import { animate, style, transition, trigger } from '@angular/animations'; import { animate, style, transition, trigger } from '@angular/animations';
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { MatLegacyMenuPanel as MatMenuPanel, MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu'; import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
import { PublisherProperties } from 'openvidu-browser'; import { PublisherProperties } from 'openvidu-browser';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { VideoSizeIcon } from '../../models/icon.model'; import { VideoSizeIcon } from '../../models/icon.model';

10
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
View File

@ -23,8 +23,8 @@
#media-buttons-container:not(#media-buttons-container > button) button, #media-buttons-container:not(#media-buttons-container > button) button,
/* Applying css for external additional buttons*/ /* Applying css for external additional buttons*/
::ng-deep #media-buttons-container:not(#media-buttons-container > button) button { ::ng-deep #media-buttons-container:not(#media-buttons-container > button) button {
width: 40px; width: 48px;
height: 40px; height: 48px;
background-color: var(--ov-secondary-color); background-color: var(--ov-secondary-color);
margin: 6px; margin: 6px;
} }
@ -126,7 +126,7 @@
#leave-btn { #leave-btn {
background-color: var(--ov-warn-color) !important; background-color: var(--ov-warn-color) !important;
border-radius: var(--ov-leave-button-radius) !important; border-radius: var(--ov-leave-button-radius) !important;
width: 60px !important; width: 68px !important;
} }
.tooltipList { .tooltipList {
@ -141,13 +141,13 @@
top: -6px; top: -6px;
} }
.mat-icon-button[disabled] { .mat-mdc-icon-button[disabled] {
color: #fff; color: #fff;
} }
.divider { .divider {
margin: 8px 0px; margin: 8px 0px;
} }
::ng-deep .mat-menu-item { ::ng-deep .mat-mdc-menu-item {
/* margin-bottom: 10px; */ /* margin-bottom: 10px; */
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -18,7 +18,7 @@ import { DocumentService } from '../../services/document/document.service';
import { PanelService } from '../../services/panel/panel.service'; import { PanelService } from '../../services/panel/panel.service';
import { MediaChange } from '@angular/flex-layout'; import { MediaChange } from '@angular/flex-layout';
import { MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu'; import { MatMenuTrigger } from '@angular/material/menu';
import { Session } from 'openvidu-browser'; import { Session } from 'openvidu-browser';
import { import {
ToolbarAdditionalButtonsDirective, ToolbarAdditionalButtonsDirective,

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "参与者", "TITLE": "参与者",
"CAMERA": "摄像头", "CAMERA": "摄像头",
"SCREEN": "屏幕" "SCREEN": "屏幕",
"YOU": "你"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "设置", "TITLE": "设置",

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "Teilnehmer", "TITLE": "Teilnehmer",
"CAMERA": "KAMERA", "CAMERA": "KAMERA",
"SCREEN": "BILDSCHIRM" "SCREEN": "BILDSCHIRM",
"YOU": "Sie"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "Einstellungen", "TITLE": "Einstellungen",

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "Participants", "TITLE": "Participants",
"CAMERA": "CAMERA", "CAMERA": "CAMERA",
"SCREEN": "SCREEN" "SCREEN": "SCREEN",
"YOU": "You"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "Settings", "TITLE": "Settings",

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "Participantes", "TITLE": "Participantes",
"CAMERA": "CÁMARA", "CAMERA": "CÁMARA",
"SCREEN": "PANTALLA" "SCREEN": "PANTALLA",
"YOU": "Tú"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "Configuración", "TITLE": "Configuración",

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "Participants", "TITLE": "Participants",
"CAMERA": "CAMÉRA", "CAMERA": "CAMÉRA",
"SCREEN": "ÉCRAN" "SCREEN": "ÉCRAN",
"YOU": "vous"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "Paramètres", "TITLE": "Paramètres",

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "सदस्य", "TITLE": "सदस्य",
"CAMERA": "कैमरा", "CAMERA": "कैमरा",
"SCREEN": "स्क्रीन" "SCREEN": "स्क्रीन",
"YOU": "आप"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "सेटिंग्स", "TITLE": "सेटिंग्स",

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "Partecipanti", "TITLE": "Partecipanti",
"CAMERA": "CAMERA", "CAMERA": "CAMERA",
"SCREEN": "SCREEN" "SCREEN": "SCREEN",
"YOU": "Tu"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "Impostazioni", "TITLE": "Impostazioni",

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "参加者", "TITLE": "参加者",
"CAMERA": "カメラ", "CAMERA": "カメラ",
"SCREEN": "スクリーン" "SCREEN": "スクリーン",
"YOU": "あなた"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "設定", "TITLE": "設定",

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "Deelnemers", "TITLE": "Deelnemers",
"CAMERA": "CAMERA", "CAMERA": "CAMERA",
"SCREEN": "SCHERM" "SCREEN": "SCHERM",
"YOU": "Jij"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "Instellingen", "TITLE": "Instellingen",

3
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json
View File

@ -70,7 +70,8 @@
"PARTICIPANTS": { "PARTICIPANTS": {
"TITLE": "Participantes", "TITLE": "Participantes",
"CAMERA": "CÂMERA", "CAMERA": "CÂMERA",
"SCREEN": "TELA" "SCREEN": "TELA",
"YOU": "Você"
}, },
"SETTINGS": { "SETTINGS": {
"TITLE": "Configurações", "TITLE": "Configurações",

4
openvidu-components-angular/projects/openvidu-angular/src/lib/models/notification-options.model.ts
View File

@ -1,4 +1,4 @@
import { MatLegacySnackBarConfig as MatSnackBarConfig } from '@angular/material/legacy-snack-bar'; import { MatSnackBarConfig } from '@angular/material/snack-bar';
/** /**
* @internal * @internal
@ -8,4 +8,4 @@ export interface INotificationOptions {
buttonActionText?: string; buttonActionText?: string;
cssClassName?: string; cssClassName?: string;
config?: MatSnackBarConfig; config?: MatSnackBarConfig;
} }

28
openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.material.module.ts
View File

@ -1,25 +1,25 @@
import { MatBadgeModule } from '@angular/material/badge'; import { MatBadgeModule } from '@angular/material/badge';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'; import { MatCardModule } from '@angular/material/card';
import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core'; import { MatOptionModule } from '@angular/material/core';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; import { MatDialogModule } from '@angular/material/dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list'; import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'; import { MatInputModule } from '@angular/material/input';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav'; import { MatSidenavModule } from '@angular/material/sidenav';
import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider'; import { MatSliderModule } from '@angular/material/slider';
import { MatToolbarModule } from '@angular/material/toolbar'; import { MatToolbarModule } from '@angular/material/toolbar';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu'; import { MatMenuModule } from '@angular/material/menu';
import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list'; import { MatListModule } from '@angular/material/list';
import { MatDividerModule } from '@angular/material/divider'; import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion'; import { MatExpansionModule } from '@angular/material/expansion';
import {MatLegacySlideToggleModule as MatSlideToggleModule} from '@angular/material/legacy-slide-toggle'; import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';

4
openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.spec.ts
View File

@ -1,6 +1,6 @@
import { TestBed } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import { ActionService } from './action.service'; import { ActionService } from './action.service';

4
openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts
View File

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog'; import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { DeleteDialogComponent } from '../../components/dialogs/delete-recording.component'; import { DeleteDialogComponent } from '../../components/dialogs/delete-recording.component';
import { DialogTemplateComponent } from '../../components/dialogs/dialog.component'; import { DialogTemplateComponent } from '../../components/dialogs/dialog.component';

6
openvidu-components-angular/src/app/app.module.ts
View File

@ -1,10 +1,10 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu'; import { MatMenuModule } from '@angular/material/menu';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module'; import { AppRoutingModule } from './app.routing.module';

6
openvidu-components-angular/src/app/openvidu-call/call.component.html
View File

@ -12,7 +12,7 @@
{ name: 'Spanish', lang: 'es-ES' }, { name: 'Spanish', lang: 'es-ES' },
{ name: 'English', lang: 'en-US' } { name: 'English', lang: 'en-US' }
]" ]"
[prejoin]="false" [prejoin]="true"
[participantName]="'Participant'" [participantName]="'Participant'"
[videoMuted]="false" [videoMuted]="false"
[audioMuted]="false" [audioMuted]="false"
@ -27,8 +27,8 @@
[toolbarParticipantsPanelButton]="true" [toolbarParticipantsPanelButton]="true"
[toolbarDisplayLogo]="true" [toolbarDisplayLogo]="true"
[toolbarDisplaySessionName]="true" [toolbarDisplaySessionName]="true"
[streamResolution]="'160x120'" [streamResolution]="'640x480'"
[streamFrameRate]="2" [streamFrameRate]="25"
[streamDisplayParticipantName]="true" [streamDisplayParticipantName]="true"
[streamDisplayAudioDetection]="true" [streamDisplayAudioDetection]="true"
[streamSettingsButton]="true" [streamSettingsButton]="true"

8
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss
View File

@ -13,9 +13,9 @@
// If you specify typography styles for the components you use elsewhere, you should delete this line. // If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles, // If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use: // you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` // `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
@include mat.all-legacy-component-typographies(); @include mat.all-component-typographies();
@include mat.legacy-core(); @include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss // Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@ -41,7 +41,7 @@ $openvidu-components-theme: mat.define-light-theme(
// Include theme styles for core and each component used in your app. // Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component // Alternatively, you can import and @include the theme mixins for each component
// that you are using. // that you are using.
@include mat.all-legacy-component-themes($openvidu-components-theme); @include mat.all-component-themes($openvidu-components-theme);
@font-face { @font-face {
font-family: 'Material Icons'; font-family: 'Material Icons';

10
openvidu-components-angular/src/styles.scss
View File

@ -16,14 +16,14 @@
// If you specify typography styles for the components you use elsewhere, you should delete this line. // If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles, // If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use: // you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` // `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
@include mat.all-legacy-component-typographies(); @include mat.all-component-typographies();
@include mat.legacy-core(); @include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss // Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker // (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/ // hue. Available color palettes: https://material.io/design/color/
$openvidu-components-primary: mat-palette($mat-blue-grey, 50, 300); $openvidu-components-primary: mat-palette($mat-blue-grey, 500, 300);
$openvidu-components-accent: mat-palette($mat-amber, 500, 700, A100); $openvidu-components-accent: mat-palette($mat-amber, 500, 700, A100);
// The warn palette is optional (defaults to red). // The warn palette is optional (defaults to red).
@ -42,7 +42,7 @@ $openvidu-components-theme: mat.define-light-theme((
// Include theme styles for core and each component used in your app. // Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component // Alternatively, you can import and @include the theme mixins for each component
// that you are using. // that you are using.
@include mat.all-legacy-component-themes($openvidu-components-theme); @include mat.all-component-themes($openvidu-components-theme);
// Custom openvidu-components styles // Custom openvidu-components styles