mirror of https://github.com/OpenVidu/openvidu.git
ov-components: Removed Angular Material legacy modules
Carlos Santos
parent
c0bcb95282
commit
b970463325
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -9,34 +9,49 @@
|
|||
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 {
|
||||
margin: 0;
|
||||
color: var(--ov-panel-text-color);
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.activity-subtitle {
|
||||
font-style: italic;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
.activity-title {
|
||||
font-weight: bold !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 {
|
||||
|
|
@ -44,7 +59,7 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -64,3 +79,8 @@
|
|||
::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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
>
|
||||
<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 @@
|
|||
*ngIf="broadcastingStatus !== broadcastingStatusEnum.STARTED"
|
||||
id="broadcasting-btn"
|
||||
[disabled]="
|
||||
!broadcastUrl || broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
|
||||
!broadcastUrl ||
|
||||
broadcastingStatus === broadcastingStatusEnum.STARTING ||
|
||||
broadcastingStatus === broadcastingStatusEnum.STOPPING
|
||||
"
|
||||
(click)="startBroadcasting()"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<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]="{
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -4,11 +4,16 @@
|
|||
border-radius: var(--ov-panel-radius);
|
||||
max-height: calc(100% - 40px);
|
||||
min-height: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.panel-header-container {
|
||||
padding: 10px;
|
||||
flex: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,21 @@
|
|||
.participant-avatar {
|
||||
display: inherit;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
margin: auto !important;
|
||||
padding: 10px;
|
||||
color: var(--ov-panel-text-color);
|
||||
}
|
||||
|
||||
.participant-subtitle {
|
||||
font-style: italic;
|
||||
font-size: 11px !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.participant-nickname {
|
||||
font-weight: bold !important;
|
||||
margin: 0;
|
||||
color: var(--ov-panel-text-color);
|
||||
}
|
||||
|
||||
.participant-action-buttons {
|
||||
|
|
@ -18,7 +30,8 @@
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
mat-list-item {
|
||||
|
||||
::ng-deep .mat-mdc-list-item {
|
||||
height: max-content !important;
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
|
|
@ -27,8 +40,14 @@ mat-list {
|
|||
padding: 3px;
|
||||
}
|
||||
|
||||
.participant-avatar {
|
||||
display: contents;
|
||||
::ng-deep .mdc-list-item__content {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<mat-list>
|
||||
<mat-list-item>
|
||||
<mat-icon matListAvatar class="participant-avatar">person</mat-icon>
|
||||
<h3 matLine class="participant-nickname">{{ _participant.nickname }}</h3>
|
||||
<p matLine class="participant-subtitle">{{ _participant | streamTypesEnabled }}</p>
|
||||
<!-- <p matLine>
|
||||
<span class="participant-subtitle"></span>
|
||||
</p> -->
|
||||
<div matListItemIcon class="participant-avatar" [style.background-color]="_participant.colorProfile">
|
||||
<mat-icon>person</mat-icon>
|
||||
</div>
|
||||
<h3 matListItemLine class="participant-nickname">
|
||||
{{ _participant.nickname }}
|
||||
<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
|
||||
mat-icon-button
|
||||
id="mute-btn"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
#settings-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex: 1;
|
||||
width: auto;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.item-menu {
|
||||
|
|
@ -18,18 +26,29 @@
|
|||
width: min-content;
|
||||
}
|
||||
|
||||
.option {
|
||||
border-radius: var(--ov-panel-radius);
|
||||
}
|
||||
.lang-container button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* .option {
|
||||
border-radius: var(--ov-panel-radius);
|
||||
} */
|
||||
mat-list-option[aria-selected='true'] {
|
||||
background: var(--ov-tertiary-color);
|
||||
font-weight: bold !important;
|
||||
color: var(--ov-panel-background);
|
||||
background: var(--ov-tertiary-color) !important;
|
||||
border-radius: var(--ov-panel-radius);
|
||||
}
|
||||
::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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
<div class="panel-container" id="settings-container" fxLayout="column" fxLayoutAlign="space-evenly none">
|
||||
<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
|
||||
<div class="panel-container" id="settings-container">
|
||||
<div class="panel-header-container">
|
||||
<h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
|
||||
<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
|
||||
<div class="settings-container">
|
||||
<div class="item-menu" [ngClass]="{ mobile: isMobile }">
|
||||
<mat-selection-list
|
||||
#optionList
|
||||
(selectionChange)="onSelectionChanged(optionList.selectedOptions.selected[0]?.value)"
|
||||
[multiple]="false"
|
||||
[hideSingleSelectionIndicator]="true"
|
||||
[disableRipple]="true"
|
||||
>
|
||||
<mat-list-option
|
||||
class="option"
|
||||
|
|
@ -19,7 +21,7 @@
|
|||
[selected]="selectedOption === 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>
|
||||
</mat-list-option>
|
||||
<mat-list-option
|
||||
|
|
@ -28,7 +30,7 @@
|
|||
[selected]="selectedOption === 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>
|
||||
</mat-list-option>
|
||||
<mat-list-option
|
||||
|
|
@ -37,7 +39,7 @@
|
|||
[selected]="selectedOption === 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>
|
||||
</mat-list-option>
|
||||
<mat-list-option
|
||||
|
|
@ -47,7 +49,7 @@
|
|||
[value]="settingsOptions.CAPTIONS"
|
||||
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>
|
||||
</mat-list-option>
|
||||
</mat-selection-list>
|
||||
|
|
@ -58,9 +60,9 @@
|
|||
<ov-nickname-input></ov-nickname-input>
|
||||
<mat-list>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>language</mat-icon>
|
||||
<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
|
||||
<ov-lang-selector></ov-lang-selector>
|
||||
<mat-icon matListItemIcon>language</mat-icon>
|
||||
<div matListItemTitle>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
|
||||
<ov-lang-selector matListItemMeta></ov-lang-selector>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,6 @@
|
|||
#toolbar ::ng-deep .lang-button {
|
||||
height: 25px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 0px;
|
||||
align-items: unset !important;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -98,6 +96,7 @@ hr {
|
|||
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 {
|
||||
/* background-color: var(--ov-text-color); */
|
||||
border-radius: var(--ov-video-radius);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
padding: 1px !important;
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.lang-section-item {
|
||||
height: fit-content !important
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: var(--ov-panel-text-color);
|
||||
font-size: 12px;
|
||||
|
|
@ -21,11 +25,3 @@
|
|||
.pro-feture p {
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
|
||||
<div id="lang-section">
|
||||
<mat-list-item>
|
||||
<mat-list-item class="lang-section-item">
|
||||
<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
|
||||
<button mat-flat-button [matMenuTriggerFor]="menu" [disabled]="!isSttReady" class="lang-button">
|
||||
<span>{{ langSelected }}</span>
|
||||
|
|
|
|||
|
|
@ -2,3 +2,6 @@
|
|||
background-color: var(--ov-logo-background-color);
|
||||
color: var(--ov-text-color);
|
||||
}
|
||||
mat-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -1,9 +1,17 @@
|
|||
<button mat-flat-button [matMenuTriggerFor]="menu" class="lang-button">
|
||||
<span>
|
||||
<span>{{ langSelected?.name }}</span>
|
||||
<mat-icon>expand_more</mat-icon>
|
||||
</span>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item *ngFor="let lang of languages" (click)="onLangSelected(lang.lang)" class="lang-menu-opt">
|
||||
<button
|
||||
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>
|
||||
</mat-menu>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { AfterViewInit, Component, OnInit, Output, ViewChild, EventEmitter, OnDestroy } from '@angular/core';
|
||||
import { MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu';
|
||||
import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
|
||||
import { MatMenuTrigger } from '@angular/material/menu';
|
||||
import { MatSelect } from '@angular/material/select';
|
||||
import { StorageService } from '../../../services/storage/storage.service';
|
||||
import { TranslateService } from '../../../services/translate/translate.service';
|
||||
import { LangOption } from '../../../models/lang.model';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
margin: auto 10px auto auto;
|
||||
}
|
||||
|
||||
#nickname-input-container button.mat-button-disabled {
|
||||
#nickname-button {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div id="nickname-input-container">
|
||||
<button mat-icon-button disabled>
|
||||
<button mat-icon-button disabled id="nickname-button">
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
<mat-form-field appearance="standard">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
|
|
|
|||
|
|
@ -47,6 +47,15 @@
|
|||
top: 40px;
|
||||
}
|
||||
|
||||
.video-settings-btn mat-icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
video {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
|
|
@ -84,7 +93,7 @@ video {
|
|||
background-color: var(--ov-warn-color);
|
||||
}
|
||||
|
||||
.status-icons .mat-icon-button,
|
||||
.status-icons .mat-mdc-icon-button,
|
||||
#settings-container .mat-icon-button {
|
||||
line-height: 0px;
|
||||
}
|
||||
|
|
@ -92,6 +101,12 @@ video {
|
|||
.status-icons mat-icon,
|
||||
#settings-container mat-icon {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#settings-container {
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@
|
|||
</div>
|
||||
|
||||
<div *ngIf="!isMinimal && showSettingsButton" id="settings-container" class="videoButtons">
|
||||
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleVideoMenu($event)"
|
||||
|
|
@ -59,6 +58,7 @@
|
|||
matTooltipPosition="above"
|
||||
aria-label="Video settings menu"
|
||||
id="video-settings-btn-{{ this._stream.streamManager?.stream?.typeOfVideo }}"
|
||||
class="video-settings-btn"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { animate, style, transition, trigger } from '@angular/animations';
|
||||
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 { Subscription } from 'rxjs';
|
||||
import { VideoSizeIcon } from '../../models/icon.model';
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
#media-buttons-container:not(#media-buttons-container > button) button,
|
||||
/* Applying css for external additional buttons*/
|
||||
::ng-deep #media-buttons-container:not(#media-buttons-container > button) button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: var(--ov-secondary-color);
|
||||
margin: 6px;
|
||||
}
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
#leave-btn {
|
||||
background-color: var(--ov-warn-color) !important;
|
||||
border-radius: var(--ov-leave-button-radius) !important;
|
||||
width: 60px !important;
|
||||
width: 68px !important;
|
||||
}
|
||||
|
||||
.tooltipList {
|
||||
|
|
@ -141,13 +141,13 @@
|
|||
top: -6px;
|
||||
}
|
||||
|
||||
.mat-icon-button[disabled] {
|
||||
.mat-mdc-icon-button[disabled] {
|
||||
color: #fff;
|
||||
}
|
||||
.divider {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
::ng-deep .mat-menu-item {
|
||||
::ng-deep .mat-mdc-menu-item {
|
||||
/* margin-bottom: 10px; */
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import { DocumentService } from '../../services/document/document.service';
|
|||
import { PanelService } from '../../services/panel/panel.service';
|
||||
|
||||
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 {
|
||||
ToolbarAdditionalButtonsDirective,
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "参与者",
|
||||
"CAMERA": "摄像头",
|
||||
"SCREEN": "屏幕"
|
||||
"SCREEN": "屏幕",
|
||||
"YOU": "你"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "设置",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "Teilnehmer",
|
||||
"CAMERA": "KAMERA",
|
||||
"SCREEN": "BILDSCHIRM"
|
||||
"SCREEN": "BILDSCHIRM",
|
||||
"YOU": "Sie"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "Einstellungen",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "Participants",
|
||||
"CAMERA": "CAMERA",
|
||||
"SCREEN": "SCREEN"
|
||||
"SCREEN": "SCREEN",
|
||||
"YOU": "You"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "Settings",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "Participantes",
|
||||
"CAMERA": "CÁMARA",
|
||||
"SCREEN": "PANTALLA"
|
||||
"SCREEN": "PANTALLA",
|
||||
"YOU": "Tú"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "Configuración",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "Participants",
|
||||
"CAMERA": "CAMÉRA",
|
||||
"SCREEN": "ÉCRAN"
|
||||
"SCREEN": "ÉCRAN",
|
||||
"YOU": "vous"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "Paramètres",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "सदस्य",
|
||||
"CAMERA": "कैमरा",
|
||||
"SCREEN": "स्क्रीन"
|
||||
"SCREEN": "स्क्रीन",
|
||||
"YOU": "आप"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "सेटिंग्स",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "Partecipanti",
|
||||
"CAMERA": "CAMERA",
|
||||
"SCREEN": "SCREEN"
|
||||
"SCREEN": "SCREEN",
|
||||
"YOU": "Tu"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "Impostazioni",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "参加者",
|
||||
"CAMERA": "カメラ",
|
||||
"SCREEN": "スクリーン"
|
||||
"SCREEN": "スクリーン",
|
||||
"YOU": "あなた"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "設定",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "Deelnemers",
|
||||
"CAMERA": "CAMERA",
|
||||
"SCREEN": "SCHERM"
|
||||
"SCREEN": "SCHERM",
|
||||
"YOU": "Jij"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "Instellingen",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
"PARTICIPANTS": {
|
||||
"TITLE": "Participantes",
|
||||
"CAMERA": "CÂMERA",
|
||||
"SCREEN": "TELA"
|
||||
"SCREEN": "TELA",
|
||||
"YOU": "Você"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "Configurações",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { MatLegacySnackBarConfig as MatSnackBarConfig } from '@angular/material/legacy-snack-bar';
|
||||
import { MatSnackBarConfig } from '@angular/material/snack-bar';
|
||||
|
||||
/**
|
||||
* @internal
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
|
||||
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
|
||||
import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core';
|
||||
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
|
||||
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatGridListModule } from '@angular/material/grid-list';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
|
||||
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
|
||||
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
|
||||
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
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 { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
|
||||
import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
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 { NgModule } from '@angular/core';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
|
||||
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
|
||||
import { ActionService } from './action.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
|
||||
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
|
||||
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { DeleteDialogComponent } from '../../components/dialogs/delete-recording.component';
|
||||
import { DialogTemplateComponent } from '../../components/dialogs/dialog.component';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
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 { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
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 { AppComponent } from './app.component';
|
||||
import { AppRoutingModule } from './app.routing.module';
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
{ name: 'Spanish', lang: 'es-ES' },
|
||||
{ name: 'English', lang: 'en-US' }
|
||||
]"
|
||||
[prejoin]="false"
|
||||
[prejoin]="true"
|
||||
[participantName]="'Participant'"
|
||||
[videoMuted]="false"
|
||||
[audioMuted]="false"
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
[toolbarParticipantsPanelButton]="true"
|
||||
[toolbarDisplayLogo]="true"
|
||||
[toolbarDisplaySessionName]="true"
|
||||
[streamResolution]="'160x120'"
|
||||
[streamFrameRate]="2"
|
||||
[streamResolution]="'640x480'"
|
||||
[streamFrameRate]="25"
|
||||
[streamDisplayParticipantName]="true"
|
||||
[streamDisplayAudioDetection]="true"
|
||||
[streamSettingsButton]="true"
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
// 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,
|
||||
// you can delete this line and instead use:
|
||||
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
|
||||
@include mat.all-legacy-component-typographies();
|
||||
@include mat.legacy-core();
|
||||
// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
|
||||
@include mat.all-component-typographies();
|
||||
@include mat.core();
|
||||
|
||||
// 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
|
||||
|
|
@ -41,7 +41,7 @@ $openvidu-components-theme: mat.define-light-theme(
|
|||
// Include theme styles for core and each component used in your app.
|
||||
// Alternatively, you can import and @include the theme mixins for each component
|
||||
// that you are using.
|
||||
@include mat.all-legacy-component-themes($openvidu-components-theme);
|
||||
@include mat.all-component-themes($openvidu-components-theme);
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
|
|
|
|||
|
|
@ -16,14 +16,14 @@
|
|||
// 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,
|
||||
// you can delete this line and instead use:
|
||||
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
|
||||
@include mat.all-legacy-component-typographies();
|
||||
@include mat.legacy-core();
|
||||
// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
|
||||
@include mat.all-component-typographies();
|
||||
@include mat.core();
|
||||
|
||||
// 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
|
||||
// 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);
|
||||
|
||||
// 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.
|
||||
// Alternatively, you can import and @include the theme mixins for each component
|
||||
// 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue