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

ov-components: add material symbols support and improve toolbar symbols handling

master
Carlos Santos 2025-05-19 16:59:24 +02:00
parent c4c5fb9866
commit 5b112286d9
4 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,7 +51,8 @@
[class.active-btn]="_track.isPinned" [class.active-btn]="_track.isPinned"
[matTooltip]="_track.isPinned ? ('STREAM.UNPIN' | translate) : ('STREAM.PIN' | translate)" [matTooltip]="_track.isPinned ? ('STREAM.UNPIN' | translate) : ('STREAM.PIN' | translate)"
> >
<mat-icon>push_pin</mat-icon> <mat-icon *ngIf="_track.isPinned" fontSet="material-symbols-outlined" fontIcon="keep">keep_off</mat-icon>
<mat-icon *ngIf="!_track.isPinned" id="status-pinned" fontIcon="push_pin"></mat-icon>
</button> </button>
<button <button
*ngIf="!_track.participant.isLocal" *ngIf="!_track.participant.isLocal"

5
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
View File

@ -1,10 +1,7 @@
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<mat-toolbar id="toolbar" class="toolbar-container"> <mat-toolbar id="toolbar" class="toolbar-container">
<div id="info-container" class="info-container"> <div id="info-container" class="info-container">
<div> <div>
<img *ngIf="!isMinimal && showLogo" id="branding-logo" [ovLogo]="brandingLogo" /> <img *ngIf="!isMinimal && showLogo" id="branding-logo" [ovLogo]="brandingLogo" />
<div <div
id="session-info-container" id="session-info-container"
[class.collapsed]="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED" [class.collapsed]="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"

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

@ -411,6 +411,11 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
* @internal * @internal
*/ */
ngAfterViewInit() { ngAfterViewInit() {
//Add material icons to the page
const link = document.createElement('link');
link.href = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=background_replace,keep_off';
link.rel = 'stylesheet';
document.head.appendChild(link);
if (this.externalToolbar) { if (this.externalToolbar) {
this.log.d('Setting EXTERNAL TOOLBAR'); this.log.d('Setting EXTERNAL TOOLBAR');
this.openviduAngularToolbarTemplate = this.externalToolbar.template; this.openviduAngularToolbarTemplate = this.externalToolbar.template;

27
openvidu-components-angular/src/index.html
View File

@ -1,16 +1,17 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>OpenviduComponents</title> <title>OpenviduComponents</title>
<base href="/"> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Original Material Icons -->
</head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<body class="mat-typography"> </head>
<app-root></app-root> <body class="mat-typography">
</body> <app-root></app-root>
</body>
</html> </html>