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

ov-components: Updated to Angular 19

master
Carlos Santos 2025-04-30 12:21:38 +02:00
parent 518e1511d2
commit 0c1e1a7134
53 changed files with 4890 additions and 4632 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
openvidu-components-angular/angular.json
View File

@ -155,17 +155,19 @@
"sourceRoot": "src", "sourceRoot": "src",
"architect": { "architect": {
"build": { "build": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:application",
"options": { "options": {
"outputPath": "dist/openvidu-webcomponent-rc", "outputPath": {
"base": "dist/openvidu-webcomponent-rc"
},
"index": "src/index.html", "index": "src/index.html",
"main": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts",
"polyfills": ["zone.js"], "polyfills": ["zone.js"],
"tsConfig": "src/app/openvidu-webcomponent/tsconfig.openvidu-webcomponent.json", "tsConfig": "src/app/openvidu-webcomponent/tsconfig.openvidu-webcomponent.json",
"aot": true, "aot": true,
"assets": ["src/favicon.ico"], "assets": ["src/favicon.ico"],
"styles": ["src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss"], "styles": ["src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss"],
"scripts": [] "scripts": [],
"browser": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts"
}, },
"configurations": { "configurations": {
"production": { "production": {
@ -180,8 +182,6 @@
"sourceMap": false, "sourceMap": false,
"namedChunks": false, "namedChunks": false,
"extractLicenses": true, "extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [ "budgets": [
{ {
"type": "initial", "type": "initial",

5929
openvidu-components-angular/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

34
openvidu-components-angular/package.json
View File

@ -1,27 +1,27 @@
{ {
"dependencies": { "dependencies": {
"@angular/animations": "18.2.5", "@angular/animations": "19.2.8",
"@angular/cdk": "18.2.5", "@angular/cdk": "19.2.11",
"@angular/common": "18.2.5", "@angular/common": "19.2.8",
"@angular/core": "18.2.5", "@angular/core": "19.2.8",
"@angular/forms": "18.2.5", "@angular/forms": "19.2.8",
"@angular/material": "18.2.5", "@angular/material": "19.2.11",
"@angular/platform-browser": "18.2.5", "@angular/platform-browser": "19.2.8",
"@angular/platform-browser-dynamic": "18.2.5", "@angular/platform-browser-dynamic": "19.2.8",
"@angular/router": "18.2.5", "@angular/router": "19.2.8",
"@livekit/track-processors": "0.3.2", "@livekit/track-processors": "0.3.2",
"autolinker": "4.0.0", "autolinker": "4.0.0",
"livekit-client": "2.5.2", "livekit-client": "2.5.2",
"rxjs": "7.8.1", "rxjs": "7.8.1",
"tslib": "2.7.0", "tslib": "2.7.0",
"zone.js": "^0.14.6" "zone.js": "^0.15.0"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "18.2.5", "@angular-devkit/build-angular": "19.2.9",
"@angular/cli": "18.2.5", "@angular/cli": "19.2.9",
"@angular/compiler": "18.2.5", "@angular/compiler": "19.2.8",
"@angular/compiler-cli": "18.2.5", "@angular/compiler-cli": "19.2.8",
"@angular/elements": "18.2.5", "@angular/elements": "19.2.8",
"@compodoc/compodoc": "^1.1.25", "@compodoc/compodoc": "^1.1.25",
"@types/dom-mediacapture-transform": "0.1.9", "@types/dom-mediacapture-transform": "0.1.9",
"@types/dom-webcodecs": "0.1.11", "@types/dom-webcodecs": "0.1.11",
@ -49,13 +49,13 @@
"karma-mocha-reporter": "2.2.5", "karma-mocha-reporter": "2.2.5",
"karma-notify-reporter": "1.3.0", "karma-notify-reporter": "1.3.0",
"lint-staged": "^15.2.10", "lint-staged": "^15.2.10",
"ng-packagr": "18.2.1", "ng-packagr": "19.2.2",
"npm-watch": "^0.13.0", "npm-watch": "^0.13.0",
"prettier": "3.3.3", "prettier": "3.3.3",
"selenium-webdriver": "4.25.0", "selenium-webdriver": "4.25.0",
"ts-node": "10.9.2", "ts-node": "10.9.2",
"tslint": "6.1.3", "tslint": "6.1.3",
"typescript": "5.4.5", "typescript": "5.8.3",
"webpack-bundle-analyzer": "^4.10.2" "webpack-bundle-analyzer": "^4.10.2"
}, },
"name": "openvidu-components-testapp", "name": "openvidu-components-testapp",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.ts
View File

@ -8,7 +8,8 @@ import { RecordingService } from '../../services/recording/recording.service';
@Component({ @Component({
selector: 'ov-admin-dashboard', selector: 'ov-admin-dashboard',
templateUrl: './admin-dashboard.component.html', templateUrl: './admin-dashboard.component.html',
styleUrls: ['./admin-dashboard.component.scss'] styleUrls: ['./admin-dashboard.component.scss'],
standalone: false
}) })
export class AdminDashboardComponent implements OnInit, OnDestroy { export class AdminDashboardComponent implements OnInit, OnDestroy {
/** /**

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.ts
View File

@ -7,7 +7,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
@Component({ @Component({
selector: 'ov-admin-login', selector: 'ov-admin-login',
templateUrl: './admin-login.component.html', templateUrl: './admin-login.component.html',
styleUrls: ['./admin-login.component.scss'] styleUrls: ['./admin-login.component.scss'],
standalone: false
}) })
export class AdminLoginComponent implements OnInit { export class AdminLoginComponent implements OnInit {
/** /**

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.ts
View File

@ -10,6 +10,7 @@ import { Component } from '@angular/core';
<div class="stick loud play"></div> <div class="stick loud play"></div>
<div class="stick normal play"></div> <div class="stick normal play"></div>
</div>`, </div>`,
styleUrls: ['./audio-wave.component.scss'] styleUrls: ['./audio-wave.component.scss'],
standalone: false
}) })
export class AudioWaveComponent {} export class AudioWaveComponent {}

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.ts
View File

@ -13,7 +13,8 @@ import { Component, Input } from '@angular/core';
</div> </div>
</div> </div>
`, `,
styleUrls: ['./avatar-profile.component.scss'] styleUrls: ['./avatar-profile.component.scss'],
standalone: false
}) })
export class AvatarProfileComponent { export class AvatarProfileComponent {
letter: string; letter: string;

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

@ -36,7 +36,8 @@ import { MatDialogRef } from '@angular/material/dialog';
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
} }
` `
] ],
standalone: false
}) })
export class DeleteDialogComponent { export class DeleteDialogComponent {
constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>) {} constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>) {}

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

@ -33,7 +33,8 @@ import { DialogData } from '../../models/dialog.model';
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
} }
` `
] ],
standalone: false
}) })
export class DialogTemplateComponent { export class DialogTemplateComponent {
constructor( constructor(

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

@ -19,7 +19,8 @@ import { DialogData } from '../../models/dialog.model';
</button> </button>
<button mat-button (click)="close()">{{'PANEL.CLOSE' | translate}}</button> <button mat-button (click)="close()">{{'PANEL.CLOSE' | translate}}</button>
</div> </div>
` `,
standalone: false
}) })
export class ProFeatureDialogTemplateComponent { export class ProFeatureDialogTemplateComponent {
constructor(public dialogRef: MatDialogRef<ProFeatureDialogTemplateComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {} constructor(public dialogRef: MatDialogRef<ProFeatureDialogTemplateComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

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

@ -38,7 +38,8 @@ import { RecordingDialogData } from '../../models/dialog.model';
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
} }
` `
] ],
standalone: false
}) })
export class RecordingDialogComponent { export class RecordingDialogComponent {
@ViewChild('videoElement', { static: true }) videoElement: ElementRef<HTMLVideoElement>; @ViewChild('videoElement', { static: true }) videoElement: ElementRef<HTMLVideoElement>;

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.ts
View File

@ -30,7 +30,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
selector: 'ov-layout', selector: 'ov-layout',
templateUrl: './layout.component.html', templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'], styleUrls: ['./layout.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
/** /**

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.ts
View File

@ -18,7 +18,8 @@ import { Track } from 'livekit-client';
transition(':enter', [style({ opacity: 0 }), animate('100ms', style({ opacity: 1 }))]), transition(':enter', [style({ opacity: 0 }), animate('100ms', style({ opacity: 1 }))]),
transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))]) transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))])
]) ])
] ],
standalone: false
}) })
export class MediaElementComponent implements AfterViewInit { export class MediaElementComponent implements AfterViewInit {
_track: Track; _track: Track;

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
View File

@ -20,7 +20,8 @@ import { BroadcastingStartRequestedEvent, BroadcastingStopRequestedEvent } from
selector: 'ov-activities-panel', selector: 'ov-activities-panel',
templateUrl: './activities-panel.component.html', templateUrl: './activities-panel.component.html',
styleUrls: ['../panel.component.scss', './activities-panel.component.scss'], styleUrls: ['../panel.component.scss', './activities-panel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
export class ActivitiesPanelComponent implements OnInit { export class ActivitiesPanelComponent implements OnInit {
/** /**

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

@ -18,7 +18,8 @@ import { OpenViduService } from '../../../../services/openvidu/openvidu.service'
selector: 'ov-broadcasting-activity', selector: 'ov-broadcasting-activity',
templateUrl: './broadcasting-activity.component.html', templateUrl: './broadcasting-activity.component.html',
styleUrls: ['./broadcasting-activity.component.scss', '../activities-panel.component.scss'], styleUrls: ['./broadcasting-activity.component.scss', '../activities-panel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
// TODO: Allow to add more than one broadcast url // TODO: Allow to add more than one broadcast url

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

@ -24,7 +24,8 @@ import { LoggerService } from '../../../../services/logger/logger.service';
selector: 'ov-recording-activity', selector: 'ov-recording-activity',
templateUrl: './recording-activity.component.html', templateUrl: './recording-activity.component.html',
styleUrls: ['./recording-activity.component.scss', '../activities-panel.component.scss'], styleUrls: ['./recording-activity.component.scss', '../activities-panel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
// TODO: Allow to add more than one recording type // TODO: Allow to add more than one recording type

7
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
View File

@ -12,7 +12,8 @@ import { VirtualBackgroundService } from '../../../services/virtual-background/v
selector: 'ov-background-effects-panel', selector: 'ov-background-effects-panel',
templateUrl: './background-effects-panel.component.html', templateUrl: './background-effects-panel.component.html',
styleUrls: ['../panel.component.scss', './background-effects-panel.component.scss'], styleUrls: ['../panel.component.scss', './background-effects-panel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
export class BackgroundEffectsPanelComponent implements OnInit { export class BackgroundEffectsPanelComponent implements OnInit {
backgroundSelectedId: string; backgroundSelectedId: string;
@ -56,10 +57,6 @@ export class BackgroundEffectsPanelComponent implements OnInit {
} }
async applyBackground(effect: BackgroundEffect) { async applyBackground(effect: BackgroundEffect) {
if (effect.type === EffectType.NONE) {
await this.backgroundService.removeBackground();
} else {
await this.backgroundService.applyBackground(effect); await this.backgroundService.applyBackground(effect);
} }
}
} }

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
View File

@ -13,7 +13,8 @@ import { PanelService } from '../../../services/panel/panel.service';
selector: 'ov-chat-panel', selector: 'ov-chat-panel',
templateUrl: './chat-panel.component.html', templateUrl: './chat-panel.component.html',
styleUrls: ['../panel.component.scss', './chat-panel.component.scss'], styleUrls: ['../panel.component.scss', './chat-panel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
export class ChatPanelComponent implements OnInit, AfterViewInit { export class ChatPanelComponent implements OnInit, AfterViewInit {
/** /**

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.ts
View File

@ -37,7 +37,8 @@ import { BackgroundEffect } from '../../models/background-effect.model';
selector: 'ov-panel', selector: 'ov-panel',
templateUrl: './panel.component.html', templateUrl: './panel.component.html',
styleUrls: ['./panel.component.scss'], styleUrls: ['./panel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
export class PanelComponent implements OnInit { export class PanelComponent implements OnInit {
/** /**

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

@ -15,7 +15,8 @@ import { ParticipantService } from '../../../../services/participant/participant
selector: 'ov-participant-panel-item', selector: 'ov-participant-panel-item',
templateUrl: './participant-panel-item.component.html', templateUrl: './participant-panel-item.component.html',
styleUrls: ['./participant-panel-item.component.scss'], styleUrls: ['./participant-panel-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
export class ParticipantPanelItemComponent implements OnInit, OnDestroy { export class ParticipantPanelItemComponent implements OnInit, OnDestroy {
/** /**

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts
View File

@ -25,7 +25,8 @@ import { ParticipantModel } from '../../../../models/participant.model';
selector: 'ov-participants-panel', selector: 'ov-participants-panel',
templateUrl: './participants-panel.component.html', templateUrl: './participants-panel.component.html',
styleUrls: ['../../panel.component.scss', './participants-panel.component.scss'], styleUrls: ['../../panel.component.scss', './participants-panel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit { export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit {
/** /**

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts
View File

@ -13,7 +13,8 @@ import { LangOption } from '../../../models/lang.model';
@Component({ @Component({
selector: 'ov-settings-panel', selector: 'ov-settings-panel',
templateUrl: './settings-panel.component.html', templateUrl: './settings-panel.component.html',
styleUrls: ['../panel.component.scss', './settings-panel.component.scss'] styleUrls: ['../panel.component.scss', './settings-panel.component.scss'],
standalone: false
}) })
export class SettingsPanelComponent implements OnInit { export class SettingsPanelComponent implements OnInit {
@Output() onVideoEnabledChanged = new EventEmitter<boolean>(); @Output() onVideoEnabledChanged = new EventEmitter<boolean>();

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

@ -17,7 +17,8 @@ import { StorageService } from '../../services/storage/storage.service';
@Component({ @Component({
selector: 'ov-pre-join', selector: 'ov-pre-join',
templateUrl: './pre-join.component.html', templateUrl: './pre-join.component.html',
styleUrls: ['./pre-join.component.scss'] styleUrls: ['./pre-join.component.scss'],
standalone: false
}) })
export class PreJoinComponent implements OnInit, OnDestroy { export class PreJoinComponent implements OnInit, OnDestroy {
@Input() set error(error: { name: string; message: string } | undefined) { @Input() set error(error: { name: string; message: string } | undefined) {

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
View File

@ -57,7 +57,8 @@ import { ParticipantLeftEvent, ParticipantLeftReason, ParticipantModel } from '.
templateUrl: './session.component.html', templateUrl: './session.component.html',
styleUrls: ['./session.component.scss'], styleUrls: ['./session.component.scss'],
animations: [trigger('sessionAnimation', [transition(':enter', [style({ opacity: 0 }), animate('50ms', style({ opacity: 1 }))])])], animations: [trigger('sessionAnimation', [transition(':enter', [style({ opacity: 0 }), animate('50ms', style({ opacity: 1 }))])])],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
export class SessionComponent implements OnInit, OnDestroy { export class SessionComponent implements OnInit, OnDestroy {
@ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any>; @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any>;

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts
View File

@ -12,7 +12,8 @@ import { ParticipantModel } from '../../../models/participant.model';
@Component({ @Component({
selector: 'ov-audio-devices-select', selector: 'ov-audio-devices-select',
templateUrl: './audio-devices.component.html', templateUrl: './audio-devices.component.html',
styleUrls: ['./audio-devices.component.scss'] styleUrls: ['./audio-devices.component.scss'],
standalone: false
}) })
export class AudioDevicesComponent implements OnInit, OnDestroy { export class AudioDevicesComponent implements OnInit, OnDestroy {
@Output() onAudioDeviceChanged = new EventEmitter<CustomDevice>(); @Output() onAudioDeviceChanged = new EventEmitter<CustomDevice>();

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

@ -12,7 +12,8 @@ import { Subscription } from 'rxjs';
@Component({ @Component({
selector: 'ov-lang-selector', selector: 'ov-lang-selector',
templateUrl: './lang-selector.component.html', templateUrl: './lang-selector.component.html',
styleUrls: ['./lang-selector.component.scss'] styleUrls: ['./lang-selector.component.scss'],
standalone: false
}) })
export class LangSelectorComponent implements OnInit, OnDestroy { export class LangSelectorComponent implements OnInit, OnDestroy {
/** /**

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.ts
View File

@ -9,7 +9,8 @@ import { StorageService } from '../../../services/storage/storage.service';
@Component({ @Component({
selector: 'ov-participant-name-input', selector: 'ov-participant-name-input',
templateUrl: './participant-name-input.component.html', templateUrl: './participant-name-input.component.html',
styleUrls: ['./participant-name-input.component.scss'] styleUrls: ['./participant-name-input.component.scss'],
standalone: false
}) })
export class ParticipantNameInputComponent implements OnInit { export class ParticipantNameInputComponent implements OnInit {
name: string; name: string;

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts
View File

@ -12,7 +12,8 @@ import { ParticipantModel } from '../../../models/participant.model';
@Component({ @Component({
selector: 'ov-video-devices-select', selector: 'ov-video-devices-select',
templateUrl: './video-devices.component.html', templateUrl: './video-devices.component.html',
styleUrls: ['./video-devices.component.scss'] styleUrls: ['./video-devices.component.scss'],
standalone: false
}) })
export class VideoDevicesComponent implements OnInit, OnDestroy { export class VideoDevicesComponent implements OnInit, OnDestroy {
@Output() onVideoDeviceChanged = new EventEmitter<CustomDevice>(); @Output() onVideoDeviceChanged = new EventEmitter<CustomDevice>();

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

@ -15,7 +15,8 @@ import { ParticipantTrackPublication } from '../../models/participant.model';
@Component({ @Component({
selector: 'ov-stream', selector: 'ov-stream',
templateUrl: './stream.component.html', templateUrl: './stream.component.html',
styleUrls: ['./stream.component.scss'] styleUrls: ['./stream.component.scss'],
standalone: false
}) })
export class StreamComponent implements OnInit, OnDestroy { export class StreamComponent implements OnInit, OnDestroy {
/** /**

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

@ -58,7 +58,8 @@ import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
selector: 'ov-toolbar', selector: 'ov-toolbar',
templateUrl: './toolbar.component.html', templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss'], styleUrls: ['./toolbar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
}) })
export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/** /**

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts
View File

@ -54,7 +54,8 @@ import { LangOption } from '../../models/lang.model';
transition(':enter', [style({ opacity: 0 }), animate('300ms ease-out', style({ opacity: 1 }))]) transition(':enter', [style({ opacity: 0 }), animate('300ms ease-out', style({ opacity: 1 }))])
// transition(':leave', [style({ opacity: 1 }), animate('50ms ease-in', style({ opacity: 0.9 }))]) // transition(':leave', [style({ opacity: 1 }), animate('50ms ease-in', style({ opacity: 0.9 }))])
]) ])
] ],
standalone: false
}) })
export class VideoconferenceComponent implements OnDestroy, AfterViewInit { export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
// *** Toolbar *** // *** Toolbar ***

19
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/activities-panel.directive.ts
View File

@ -17,7 +17,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
* <ov-activities-panel *ovActivitiesPanel [recordingActivity]="false"></ov-activities-panel> * <ov-activities-panel *ovActivitiesPanel [recordingActivity]="false"></ov-activities-panel>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[activitiesPanelRecordingActivity], ov-activities-panel[recordingActivity]' selector: 'ov-videoconference[activitiesPanelRecordingActivity], ov-activities-panel[recordingActivity]',
standalone: false
}) })
export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit, OnDestroy { export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit, OnDestroy {
@Input() set activitiesPanelRecordingActivity(value: boolean) { @Input() set activitiesPanelRecordingActivity(value: boolean) {
@ -31,7 +32,10 @@ export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit,
recordingActivityValue: boolean = true; recordingActivityValue: boolean = true;
constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {} constructor(
public elementRef: ElementRef,
private libService: OpenViduComponentsConfigService
) {}
ngAfterViewInit() { ngAfterViewInit() {
this.update(this.recordingActivityValue); this.update(this.recordingActivityValue);
@ -66,8 +70,9 @@ export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit,
* @example * @example
* <ov-activities-panel *ovActivitiesPanel [broadcastingActivity]="false"></ov-activities-panel> * <ov-activities-panel *ovActivitiesPanel [broadcastingActivity]="false"></ov-activities-panel>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[activitiesPanelBroadcastingActivity], ov-activities-panel[broadcastingActivity]' selector: 'ov-videoconference[activitiesPanelBroadcastingActivity], ov-activities-panel[broadcastingActivity]',
standalone: false
}) })
export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewInit, OnDestroy { export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewInit, OnDestroy {
@Input() set activitiesPanelBroadcastingActivity(value: boolean) { @Input() set activitiesPanelBroadcastingActivity(value: boolean) {
@ -81,7 +86,10 @@ export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewIn
broadcastingActivityValue: boolean = true; broadcastingActivityValue: boolean = true;
constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {} constructor(
public elementRef: ElementRef,
private libService: OpenViduComponentsConfigService
) {}
ngAfterViewInit() { ngAfterViewInit() {
this.update(this.broadcastingActivityValue); this.update(this.broadcastingActivityValue);
@ -100,4 +108,3 @@ export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewIn
} }
} }
} }

12
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/admin.directive.ts
View File

@ -12,7 +12,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
* *
*/ */
@Directive({ @Directive({
selector: 'ov-admin-dashboard[recordingsList]' selector: 'ov-admin-dashboard[recordingsList]',
standalone: false
}) })
export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnDestroy { export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnDestroy {
@ -53,7 +54,8 @@ export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnD
* *
*/ */
@Directive({ @Directive({
selector: 'ov-admin-dashboard[navbarTitle]' selector: 'ov-admin-dashboard[navbarTitle]',
standalone: false
}) })
export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy { export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
@ -95,7 +97,8 @@ export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
* *
*/ */
@Directive({ @Directive({
selector: 'ov-admin-login[navbarTitle]' selector: 'ov-admin-login[navbarTitle]',
standalone: false
}) })
export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy { export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
@ -138,7 +141,8 @@ export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
* *
*/ */
@Directive({ @Directive({
selector: 'ov-admin-login[error]' selector: 'ov-admin-login[error]',
standalone: false
}) })
export class AdminLoginErrorDirective implements AfterViewInit, OnDestroy { export class AdminLoginErrorDirective implements AfterViewInit, OnDestroy {

151
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts
View File

@ -1,7 +1,17 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { ActivitiesPanelBroadcastingActivityDirective, ActivitiesPanelRecordingActivityDirective } from './activities-panel.directive'; import { ActivitiesPanelBroadcastingActivityDirective, ActivitiesPanelRecordingActivityDirective } from './activities-panel.directive';
import { AdminLoginErrorDirective, AdminDashboardRecordingsListDirective, AdminLoginTitleDirective, AdminDashboardTitleDirective } from './admin.directive'; import {
import { LayoutRemoteParticipantsDirective, FallbackLogoDirective, ToolbarBrandingLogoDirective, PrejoinDisplayParticipantName } from './internals.directive'; AdminLoginErrorDirective,
AdminDashboardRecordingsListDirective,
AdminLoginTitleDirective,
AdminDashboardTitleDirective
} from './admin.directive';
import {
LayoutRemoteParticipantsDirective,
FallbackLogoDirective,
ToolbarBrandingLogoDirective,
PrejoinDisplayParticipantName
} from './internals.directive';
import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive'; import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
import { import {
StreamDisplayAudioDetectionDirective, StreamDisplayAudioDetectionDirective,
@ -42,97 +52,54 @@ import {
VideoEnabledDirective VideoEnabledDirective
} from './videoconference.directive'; } from './videoconference.directive';
const directives = [
LivekitUrlDirective,
TokenDirective,
TokenErrorDirective,
MinimalDirective,
LangDirective,
LangOptionsDirective,
// CaptionsLangOptionsDirective,
// CaptionsLangDirective,
PrejoinDirective,
PrejoinDisplayParticipantName,
VideoEnabledDirective,
AudioEnabledDirective,
RecordingStreamBaseUrlDirective,
ToolbarCameraButtonDirective,
ToolbarMicrophoneButtonDirective,
ToolbarScreenshareButtonDirective,
ToolbarFullscreenButtonDirective,
ToolbarBackgroundEffectsButtonDirective,
// ToolbarCaptionsButtonDirective,
ToolbarLeaveButtonDirective,
ToolbarRecordingButtonDirective,
ToolbarBroadcastingButtonDirective,
ToolbarParticipantsPanelButtonDirective,
ToolbarChatPanelButtonDirective,
ToolbarActivitiesPanelButtonDirective,
ToolbarDisplayRoomNameDirective,
ToolbarDisplayLogoDirective,
ToolbarSettingsButtonDirective,
ToolbarAdditionalButtonsPossitionDirective,
StreamDisplayParticipantNameDirective,
StreamDisplayAudioDetectionDirective,
StreamVideoControlsDirective,
FallbackLogoDirective,
ToolbarBrandingLogoDirective,
ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective,
ActivitiesPanelRecordingActivityDirective,
ActivitiesPanelBroadcastingActivityDirective,
AdminDashboardRecordingsListDirective,
AdminLoginTitleDirective,
AdminLoginErrorDirective,
AdminDashboardTitleDirective,
LayoutRemoteParticipantsDirective
];
@NgModule({ @NgModule({
declarations: [ declarations: [...directives],
LivekitUrlDirective, exports: [...directives]
TokenDirective,
TokenErrorDirective,
MinimalDirective,
LangDirective,
LangOptionsDirective,
// CaptionsLangOptionsDirective,
// CaptionsLangDirective,
PrejoinDirective,
PrejoinDisplayParticipantName,
VideoEnabledDirective,
AudioEnabledDirective,
RecordingStreamBaseUrlDirective,
ToolbarCameraButtonDirective,
ToolbarMicrophoneButtonDirective,
ToolbarScreenshareButtonDirective,
ToolbarFullscreenButtonDirective,
ToolbarBackgroundEffectsButtonDirective,
// ToolbarCaptionsButtonDirective,
ToolbarLeaveButtonDirective,
ToolbarRecordingButtonDirective,
ToolbarBroadcastingButtonDirective,
ToolbarParticipantsPanelButtonDirective,
ToolbarChatPanelButtonDirective,
ToolbarActivitiesPanelButtonDirective,
ToolbarDisplayRoomNameDirective,
ToolbarDisplayLogoDirective,
ToolbarSettingsButtonDirective,
ToolbarAdditionalButtonsPossitionDirective,
StreamDisplayParticipantNameDirective,
StreamDisplayAudioDetectionDirective,
StreamVideoControlsDirective,
FallbackLogoDirective,
ToolbarBrandingLogoDirective,
ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective,
ActivitiesPanelRecordingActivityDirective,
ActivitiesPanelBroadcastingActivityDirective,
AdminDashboardRecordingsListDirective,
AdminLoginTitleDirective,
AdminLoginErrorDirective,
AdminDashboardTitleDirective,
LayoutRemoteParticipantsDirective
],
exports: [
LivekitUrlDirective,
TokenDirective,
TokenErrorDirective,
MinimalDirective,
LangDirective,
LangOptionsDirective,
// CaptionsLangOptionsDirective,
// CaptionsLangDirective,
PrejoinDirective,
PrejoinDisplayParticipantName,
VideoEnabledDirective,
AudioEnabledDirective,
RecordingStreamBaseUrlDirective,
ToolbarCameraButtonDirective,
ToolbarMicrophoneButtonDirective,
ToolbarScreenshareButtonDirective,
ToolbarFullscreenButtonDirective,
ToolbarBackgroundEffectsButtonDirective,
// ToolbarCaptionsButtonDirective,
ToolbarLeaveButtonDirective,
ToolbarRecordingButtonDirective,
ToolbarBroadcastingButtonDirective,
ToolbarParticipantsPanelButtonDirective,
ToolbarChatPanelButtonDirective,
ToolbarActivitiesPanelButtonDirective,
ToolbarDisplayRoomNameDirective,
ToolbarDisplayLogoDirective,
ToolbarSettingsButtonDirective,
ToolbarAdditionalButtonsPossitionDirective,
StreamDisplayParticipantNameDirective,
StreamDisplayAudioDetectionDirective,
StreamVideoControlsDirective,
FallbackLogoDirective,
ToolbarBrandingLogoDirective,
ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective,
ActivitiesPanelRecordingActivityDirective,
ActivitiesPanelBroadcastingActivityDirective,
AdminDashboardRecordingsListDirective,
AdminLoginTitleDirective,
AdminLoginErrorDirective,
AdminDashboardTitleDirective,
LayoutRemoteParticipantsDirective
]
}) })
export class ApiDirectiveModule {} export class ApiDirectiveModule {}

12
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts
View File

@ -9,7 +9,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
* @internal * @internal
*/ */
@Directive({ @Directive({
selector: 'img[ovLogo]' selector: 'img[ovLogo]',
standalone: false
}) })
export class FallbackLogoDirective implements OnInit { export class FallbackLogoDirective implements OnInit {
defaultLogo = defaultLogo =
@ -53,7 +54,8 @@ export class FallbackLogoDirective implements OnInit {
* @internal * @internal
*/ */
@Directive({ @Directive({
selector: 'ov-layout[ovRemoteParticipants]' selector: 'ov-layout[ovRemoteParticipants]',
standalone: false
}) })
export class LayoutRemoteParticipantsDirective { export class LayoutRemoteParticipantsDirective {
@Input() set ovRemoteParticipants(value: ParticipantModel[] | undefined) { @Input() set ovRemoteParticipants(value: ParticipantModel[] | undefined) {
@ -85,7 +87,8 @@ export class LayoutRemoteParticipantsDirective {
* @internal * @internal
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[brandingLogo], ov-toolbar[brandingLogo]' selector: 'ov-videoconference[brandingLogo], ov-toolbar[brandingLogo]',
standalone: false
}) })
export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy { export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy {
/** /**
@ -127,7 +130,8 @@ export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy {
* @internal * @internal
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[prejoinDisplayParticipantName]' selector: 'ov-videoconference[prejoinDisplayParticipantName]',
standalone: false
}) })
export class PrejoinDisplayParticipantName implements OnDestroy { export class PrejoinDisplayParticipantName implements OnDestroy {
/** /**

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/participant-panel-item.directive.ts
View File

@ -17,7 +17,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
* <ov-participant-panel-item [muteButton]="false"></ov-participant-panel-item> * <ov-participant-panel-item [muteButton]="false"></ov-participant-panel-item>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[participantPanelItemMuteButton], ov-participant-panel-item[muteButton]' selector: 'ov-videoconference[participantPanelItemMuteButton], ov-participant-panel-item[muteButton]',
standalone: false
}) })
export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, OnDestroy { export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, OnDestroy {
@Input() set participantPanelItemMuteButton(value: boolean) { @Input() set participantPanelItemMuteButton(value: boolean) {

9
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts
View File

@ -17,7 +17,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
* <ov-stream [displayParticipantName]="false"></ov-stream> * <ov-stream [displayParticipantName]="false"></ov-stream>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[streamDisplayParticipantName], ov-stream[displayParticipantName]' selector: 'ov-videoconference[streamDisplayParticipantName], ov-stream[displayParticipantName]',
standalone: false
}) })
export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnDestroy { export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnDestroy {
@Input() set streamDisplayParticipantName(value: boolean) { @Input() set streamDisplayParticipantName(value: boolean) {
@ -71,7 +72,8 @@ export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnD
* <ov-stream [displayAudioDetection]="false"></ov-stream> * <ov-stream [displayAudioDetection]="false"></ov-stream>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[streamDisplayAudioDetection], ov-stream[displayAudioDetection]' selector: 'ov-videoconference[streamDisplayAudioDetection], ov-stream[displayAudioDetection]',
standalone: false
}) })
export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDestroy { export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDestroy {
@Input() set streamDisplayAudioDetection(value: boolean) { @Input() set streamDisplayAudioDetection(value: boolean) {
@ -123,7 +125,8 @@ export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDe
* <ov-stream [videoControls]="false"></ov-stream> * <ov-stream [videoControls]="false"></ov-stream>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[streamVideoControls], ov-stream[videoControls]' selector: 'ov-videoconference[streamVideoControls], ov-stream[videoControls]',
standalone: false
}) })
export class StreamVideoControlsDirective implements AfterViewInit, OnDestroy { export class StreamVideoControlsDirective implements AfterViewInit, OnDestroy {
@Input() set streamVideoControls(value: boolean) { @Input() set streamVideoControls(value: boolean) {

46
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts
View File

@ -18,7 +18,8 @@ import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
* <ov-toolbar [cameraButton]="false"></ov-toolbar> * <ov-toolbar [cameraButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarCameraButton], ov-toolbar[cameraButton]' selector: 'ov-videoconference[toolbarCameraButton], ov-toolbar[cameraButton]',
standalone: false
}) })
export class ToolbarCameraButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarCameraButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -83,7 +84,8 @@ export class ToolbarCameraButtonDirective implements AfterViewInit, OnDestroy {
* <ov-toolbar [microphoneButton]="false"></ov-toolbar> * <ov-toolbar [microphoneButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarMicrophoneButton], ov-toolbar[microphoneButton]' selector: 'ov-videoconference[toolbarMicrophoneButton], ov-toolbar[microphoneButton]',
standalone: false
}) })
export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -132,7 +134,6 @@ export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestro
} }
} }
/** /**
* The **screenshareButton** directive allows show/hide the screenshare toolbar button. * The **screenshareButton** directive allows show/hide the screenshare toolbar button.
* *
@ -149,7 +150,8 @@ export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestro
* <ov-toolbar [screenshareButton]="false"></ov-toolbar> * <ov-toolbar [screenshareButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarScreenshareButton], ov-toolbar[screenshareButton]' selector: 'ov-videoconference[toolbarScreenshareButton], ov-toolbar[screenshareButton]',
standalone: false
}) })
export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -214,7 +216,8 @@ export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestr
* <ov-toolbar [recordingButton]="false"></ov-toolbar> * <ov-toolbar [recordingButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarRecordingButton], ov-toolbar[recordingButton]' selector: 'ov-videoconference[toolbarRecordingButton], ov-toolbar[recordingButton]',
standalone: false
}) })
export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -277,7 +280,8 @@ export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy
* *
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarBroadcastingButton], ov-toolbar[broadcastingButton]' selector: 'ov-videoconference[toolbarBroadcastingButton], ov-toolbar[broadcastingButton]',
standalone: false
}) })
export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -339,7 +343,8 @@ export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDest
* <ov-toolbar [fullscreenButton]="false"></ov-toolbar> * <ov-toolbar [fullscreenButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarFullscreenButton], ov-toolbar[fullscreenButton]' selector: 'ov-videoconference[toolbarFullscreenButton], ov-toolbar[fullscreenButton]',
standalone: false
}) })
export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -401,7 +406,8 @@ export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestro
* <ov-toolbar [backgroundEffectsButton]="false"></ov-toolbar> * <ov-toolbar [backgroundEffectsButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarBackgroundEffectsButton], ov-toolbar[backgroundEffectsButton]' selector: 'ov-videoconference[toolbarBackgroundEffectsButton], ov-toolbar[backgroundEffectsButton]',
standalone: false
}) })
export class ToolbarBackgroundEffectsButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarBackgroundEffectsButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -522,7 +528,8 @@ export class ToolbarBackgroundEffectsButtonDirective implements AfterViewInit, O
* <ov-toolbar [settingsButton]="false"></ov-toolbar> * <ov-toolbar [settingsButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarSettingsButton], ov-toolbar[settingsButton]' selector: 'ov-videoconference[toolbarSettingsButton], ov-toolbar[settingsButton]',
standalone: false
}) })
export class ToolbarSettingsButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarSettingsButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -584,7 +591,8 @@ export class ToolbarSettingsButtonDirective implements AfterViewInit, OnDestroy
* <ov-toolbar [leaveButton]="false"></ov-toolbar> * <ov-toolbar [leaveButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarLeaveButton], ov-toolbar[leaveButton]' selector: 'ov-videoconference[toolbarLeaveButton], ov-toolbar[leaveButton]',
standalone: false
}) })
export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -647,7 +655,8 @@ export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy {
* <ov-toolbar [participantsPanelButton]="false"></ov-toolbar> * <ov-toolbar [participantsPanelButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarParticipantsPanelButton], ov-toolbar[participantsPanelButton]' selector: 'ov-videoconference[toolbarParticipantsPanelButton], ov-toolbar[participantsPanelButton]',
standalone: false
}) })
export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -711,7 +720,8 @@ export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, O
* <ov-toolbar [chatPanelButton]="false"></ov-toolbar> * <ov-toolbar [chatPanelButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarChatPanelButton], ov-toolbar[chatPanelButton]' selector: 'ov-videoconference[toolbarChatPanelButton], ov-toolbar[chatPanelButton]',
standalone: false
}) })
export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -773,7 +783,8 @@ export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy
* <ov-toolbar [activitiesPanelButton]="false"></ov-toolbar> * <ov-toolbar [activitiesPanelButton]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarActivitiesPanelButton], ov-toolbar[activitiesPanelButton]' selector: 'ov-videoconference[toolbarActivitiesPanelButton], ov-toolbar[activitiesPanelButton]',
standalone: false
}) })
export class ToolbarActivitiesPanelButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarActivitiesPanelButtonDirective implements AfterViewInit, OnDestroy {
/** /**
@ -835,7 +846,8 @@ export class ToolbarActivitiesPanelButtonDirective implements AfterViewInit, OnD
* <ov-toolbar [displayRoomName]="false"></ov-toolbar> * <ov-toolbar [displayRoomName]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarDisplayRoomName], ov-toolbar[displayRoomName]' selector: 'ov-videoconference[toolbarDisplayRoomName], ov-toolbar[displayRoomName]',
standalone: false
}) })
export class ToolbarDisplayRoomNameDirective implements AfterViewInit, OnDestroy { export class ToolbarDisplayRoomNameDirective implements AfterViewInit, OnDestroy {
/** /**
@ -898,7 +910,8 @@ export class ToolbarDisplayRoomNameDirective implements AfterViewInit, OnDestroy
* <ov-toolbar [displayLogo]="false"></ov-toolbar> * <ov-toolbar [displayLogo]="false"></ov-toolbar>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarDisplayLogo], ov-toolbar[displayLogo]' selector: 'ov-videoconference[toolbarDisplayLogo], ov-toolbar[displayLogo]',
standalone: false
}) })
export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy { export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy {
/** /**
@ -958,7 +971,8 @@ export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy {
* *
*/ */
@Directive({ @Directive({
selector: '[ovToolbarAdditionalButtonsPosition]' selector: '[ovToolbarAdditionalButtonsPosition]',
standalone: false
}) })
export class ToolbarAdditionalButtonsPossitionDirective implements AfterViewInit, OnDestroy { export class ToolbarAdditionalButtonsPossitionDirective implements AfterViewInit, OnDestroy {
/** /**

33
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts
View File

@ -18,7 +18,8 @@ import { StorageService } from '../../services/storage/storage.service';
* <ov-videoconference [livekitUrl]="http://localhost:1234"></ov-videoconference> * <ov-videoconference [livekitUrl]="http://localhost:1234"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[livekitUrl]' selector: 'ov-videoconference[livekitUrl]',
standalone: false
}) })
export class LivekitUrlDirective implements OnDestroy { export class LivekitUrlDirective implements OnDestroy {
/** /**
@ -70,7 +71,8 @@ export class LivekitUrlDirective implements OnDestroy {
* <ov-videoconference [token]="token"></ov-videoconference> * <ov-videoconference [token]="token"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[token]' selector: 'ov-videoconference[token]',
standalone: false
}) })
export class TokenDirective implements OnDestroy { export class TokenDirective implements OnDestroy {
/** /**
@ -121,7 +123,8 @@ export class TokenDirective implements OnDestroy {
* <ov-videoconference [tokenError]="error"></ov-videoconference> * <ov-videoconference [tokenError]="error"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[tokenError]' selector: 'ov-videoconference[tokenError]',
standalone: false
}) })
export class TokenErrorDirective implements OnDestroy { export class TokenErrorDirective implements OnDestroy {
/** /**
@ -172,7 +175,8 @@ export class TokenErrorDirective implements OnDestroy {
* <ov-videoconference [minimal]="true"></ov-videoconference> * <ov-videoconference [minimal]="true"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[minimal]' selector: 'ov-videoconference[minimal]',
standalone: false
}) })
export class MinimalDirective implements OnDestroy { export class MinimalDirective implements OnDestroy {
/** /**
@ -238,7 +242,8 @@ export class MinimalDirective implements OnDestroy {
* <ov-videoconference [lang]="'es'"></ov-videoconference> * <ov-videoconference [lang]="'es'"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[lang]' selector: 'ov-videoconference[lang]',
standalone: false
}) })
export class LangDirective implements OnDestroy { export class LangDirective implements OnDestroy {
/** /**
@ -307,7 +312,8 @@ export class LangDirective implements OnDestroy {
* <ov-videoconference [langOptions]="[{name:'Spanish', lang: 'es'}]"></ov-videoconference> * <ov-videoconference [langOptions]="[{name:'Spanish', lang: 'es'}]"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[langOptions]' selector: 'ov-videoconference[langOptions]',
standalone: false
}) })
export class LangOptionsDirective implements OnDestroy { export class LangOptionsDirective implements OnDestroy {
/** /**
@ -488,7 +494,8 @@ export class LangOptionsDirective implements OnDestroy {
* <ov-videoconference [participantName]="'OpenVidu'"></ov-videoconference> * <ov-videoconference [participantName]="'OpenVidu'"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[participantName]' selector: 'ov-videoconference[participantName]',
standalone: false
}) })
export class ParticipantNameDirective implements AfterViewInit, OnDestroy { export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
/** /**
@ -546,7 +553,8 @@ export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
* <ov-videoconference [prejoin]="false"></ov-videoconference> * <ov-videoconference [prejoin]="false"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[prejoin]' selector: 'ov-videoconference[prejoin]',
standalone: false
}) })
export class PrejoinDirective implements OnDestroy { export class PrejoinDirective implements OnDestroy {
/** /**
@ -600,7 +608,8 @@ export class PrejoinDirective implements OnDestroy {
* <ov-videoconference [videoEnabled]="false"></ov-videoconference> * <ov-videoconference [videoEnabled]="false"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[videoEnabled]' selector: 'ov-videoconference[videoEnabled]',
standalone: false
}) })
export class VideoEnabledDirective implements OnDestroy { export class VideoEnabledDirective implements OnDestroy {
/** /**
@ -671,7 +680,8 @@ export class VideoEnabledDirective implements OnDestroy {
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[audioEnabled]' selector: 'ov-videoconference[audioEnabled]',
standalone: false
}) })
export class AudioEnabledDirective implements OnDestroy { export class AudioEnabledDirective implements OnDestroy {
/** /**
@ -745,7 +755,8 @@ export class AudioEnabledDirective implements OnDestroy {
* </ov-videoconference> * </ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[recordingStreamBaseUrl]' selector: 'ov-videoconference[recordingStreamBaseUrl]',
standalone: false
}) })
export class RecordingStreamBaseUrlDirective implements AfterViewInit, OnDestroy { export class RecordingStreamBaseUrlDirective implements AfterViewInit, OnDestroy {
/** /**

3057
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.ts
View File

File diff suppressed because it is too large Load Diff

1
openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts
View File

@ -46,7 +46,6 @@ import { ApiDirectiveModule } from './directives/api/api.directive.module';
import { OpenViduComponentsDirectiveModule } from './directives/template/openvidu-components-angular.directive.module'; import { OpenViduComponentsDirectiveModule } from './directives/template/openvidu-components-angular.directive.module';
import { AppMaterialModule } from './openvidu-components-angular.material.module'; import { AppMaterialModule } from './openvidu-components-angular.material.module';
// Declaraciones de componentes/pipes (públicos y privados)
const publicComponents = [ const publicComponents = [
AdminDashboardComponent, AdminDashboardComponent,
AdminLoginComponent, AdminLoginComponent,

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/linkify.pipe.ts
View File

@ -4,7 +4,7 @@ import { Linkifier } from '../models/linkifier.model';
/** /**
* @internal * @internal
*/ */
@Pipe({ name: 'linkify' }) @Pipe({ name: 'linkify', standalone: false })
export class LinkifyPipe implements PipeTransform { export class LinkifyPipe implements PipeTransform {
private linkifer: Linkifier; private linkifer: Linkifier;

8
openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/participant.pipe.ts
View File

@ -8,9 +8,9 @@ import { Track } from 'livekit-client';
* This is used to display the tracks in the videoconference layout. * This is used to display the tracks in the videoconference layout.
* @returns {ParticipantTrackPublication[]} Array of tracks * @returns {ParticipantTrackPublication[]} Array of tracks
*/ */
@Pipe({ name: 'tracks' }) @Pipe({ name: 'tracks', standalone: false })
export class RemoteParticipantTracksPipe implements PipeTransform { export class RemoteParticipantTracksPipe implements PipeTransform {
constructor() { } constructor() {}
transform(participants: ParticipantModel[]): ParticipantTrackPublication[] { transform(participants: ParticipantModel[]): ParticipantTrackPublication[] {
return participants.map((p) => p.tracks).flat(); return participants.map((p) => p.tracks).flat();
@ -20,9 +20,9 @@ export class RemoteParticipantTracksPipe implements PipeTransform {
/** /**
* @internal * @internal
*/ */
@Pipe({ name: 'tracksPublishedTypes' }) @Pipe({ name: 'tracksPublishedTypes', standalone: false })
export class TrackPublishedTypesPipe implements PipeTransform { export class TrackPublishedTypesPipe implements PipeTransform {
constructor(private translateService: TranslateService) { } constructor(private translateService: TranslateService) {}
transform(participant: ParticipantModel): string { transform(participant: ParticipantModel): string {
const trackTypes = participant?.getTracksPublishedTypes() ?? []; const trackTypes = participant?.getTracksPublishedTypes() ?? [];

9
openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/recording.pipe.ts
View File

@ -4,7 +4,8 @@ import { Pipe, PipeTransform } from '@angular/core';
* @internal * @internal
*/ */
@Pipe({ @Pipe({
name: 'duration' name: 'duration',
standalone: false
}) })
export class DurationFromSecondsPipe implements PipeTransform { export class DurationFromSecondsPipe implements PipeTransform {
transform(durationInSeconds: number): string { transform(durationInSeconds: number): string {
@ -26,7 +27,8 @@ export class DurationFromSecondsPipe implements PipeTransform {
* @internal * @internal
*/ */
@Pipe({ @Pipe({
name: 'searchByStringProperty' name: 'searchByStringProperty',
standalone: false
}) })
export class SearchByStringPropertyPipe implements PipeTransform { export class SearchByStringPropertyPipe implements PipeTransform {
transform(items: any[], props: { properties: string[]; filter: string }): any { transform(items: any[], props: { properties: string[]; filter: string }): any {
@ -57,7 +59,8 @@ export class SearchByStringPropertyPipe implements PipeTransform {
* @internal * @internal
*/ */
@Pipe({ @Pipe({
name: 'thumbnailUrl' name: 'thumbnailUrl',
standalone: false
}) })
export class ThumbnailFromUrlPipe implements PipeTransform { export class ThumbnailFromUrlPipe implements PipeTransform {
transform(url: string): string { transform(url: string): string {

5
openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/translate.pipe.ts
View File

@ -4,7 +4,10 @@ import { TranslateService } from '../services/translate/translate.service';
/** /**
* @internal * @internal
*/ */
@Pipe({ name: 'translate', pure: false }) @Pipe({
name: 'translate', pure: false,
standalone: false
})
export class TranslatePipe implements PipeTransform { export class TranslatePipe implements PipeTransform {
constructor(private translateService: TranslateService) {} constructor(private translateService: TranslateService) {}

3
openvidu-components-angular/src/app/admin/admin-dashboard/admin-dashboard.component.ts
View File

@ -5,7 +5,8 @@ import { RestService } from 'src/app/services/rest.service';
@Component({ @Component({
selector: 'app-admin-dashboard', selector: 'app-admin-dashboard',
templateUrl: './admin-dashboard.component.html', templateUrl: './admin-dashboard.component.html',
styleUrls: ['./admin-dashboard.component.scss'] styleUrls: ['./admin-dashboard.component.scss'],
standalone: false
}) })
export class AdminDashboardComponent implements OnInit { export class AdminDashboardComponent implements OnInit {
recordings: RecordingInfo[] = []; recordings: RecordingInfo[] = [];

3
openvidu-components-angular/src/app/app.component.ts
View File

@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss'],
standalone: false
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
title = 'openvidu-components-angular'; title = 'openvidu-components-angular';

3
openvidu-components-angular/src/app/dashboard/dashboard.component.ts
View File

@ -4,7 +4,8 @@ import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'] styleUrls: ['./dashboard.component.scss'],
standalone: false
}) })
export class DashboardComponent implements OnInit { export class DashboardComponent implements OnInit {
title = 'openvidu-components-angular'; title = 'openvidu-components-angular';

3
openvidu-components-angular/src/app/openvidu-call/call.component.ts
View File

@ -17,7 +17,8 @@ import { ParticipantLeftEvent } from '../../../projects/openvidu-components-angu
@Component({ @Component({
selector: 'app-call', selector: 'app-call',
templateUrl: './call.component.html', templateUrl: './call.component.html',
styleUrls: ['./call.component.scss'] styleUrls: ['./call.component.scss'],
standalone: false
}) })
export class CallComponent implements OnInit { export class CallComponent implements OnInit {
roomName = 'daily-call'; roomName = 'daily-call';

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

@ -1,13 +1,15 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@include mat.core(); @include mat.elevation-classes();
@include mat.app-background();
// Define the theme // Define the theme
$openvidu-theme: mat.define-theme(); $openvidu-theme: mat.define-theme();
html { html {
// Emit theme-dependent styles for common features used across multiple components. // Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($openvidu-theme); @include mat.elevation-classes();
@include mat.app-background();
// @include mat.button-theme($theme); // @include mat.button-theme($theme);
@include mat.all-component-bases($openvidu-theme); @include mat.all-component-bases($openvidu-theme);
@include mat.all-component-colors($openvidu-theme); @include mat.all-component-colors($openvidu-theme);

3
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts
View File

@ -28,7 +28,8 @@ import { LangOption } from '../../../projects/openvidu-components-angular/src/li
* *
*/ */
@Component({ @Component({
templateUrl: './openvidu-webcomponent.component.html' templateUrl: './openvidu-webcomponent.component.html',
standalone: false
}) })
export class OpenviduWebComponentComponent { export class OpenviduWebComponentComponent {
/** /**

3
openvidu-components-angular/src/app/testing-app/testing.component.ts
View File

@ -50,7 +50,8 @@ export enum AttributeDirective {
@Component({ @Component({
selector: 'app-testing', selector: 'app-testing',
templateUrl: './testing.component.html', templateUrl: './testing.component.html',
styleUrls: ['./testing.component.scss'] styleUrls: ['./testing.component.scss'],
standalone: false
}) })
export class TestingComponent implements AfterViewInit { export class TestingComponent implements AfterViewInit {
roomName: string; roomName: string;

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

@ -1,13 +1,15 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@include mat.core(); @include mat.elevation-classes();
@include mat.app-background();
// Define the theme // Define the theme
$openvidu-theme: mat.define-theme(); $openvidu-theme: mat.define-theme();
html { html {
// Emit theme-dependent styles for common features used across multiple components. // Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($openvidu-theme); @include mat.elevation-classes();
@include mat.app-background();
// @include mat.button-theme($theme); // @include mat.button-theme($theme);
@include mat.all-component-bases($openvidu-theme); @include mat.all-component-bases($openvidu-theme);
@include mat.all-component-colors($openvidu-theme); @include mat.all-component-colors($openvidu-theme);