Removed openvidu-components tutorials
This commit is contained in:
Carlos Santos
parent
8017644590
commit
077dd8c002
@ -1,2 +0,0 @@
|
||||
**/node_modules
|
||||
**/.angular
|
||||
@ -1,25 +0,0 @@
|
||||
FROM node:18.13.0-alpine3.17
|
||||
|
||||
ARG tutorial_name
|
||||
|
||||
COPY ./$tutorial_name ./$tutorial_name
|
||||
|
||||
WORKDIR /$tutorial_name
|
||||
|
||||
# Install openvidu-angular dependencies and build it for production
|
||||
RUN npm install -g npm && \
|
||||
npm install && \
|
||||
npm run build:prod
|
||||
|
||||
# Copy openvidu-basic-node
|
||||
RUN cp -r ./openvidu-basic-node /opt/ && \
|
||||
rm -rf ../$tutorial_name
|
||||
|
||||
# Install openvidu-basic-node dependencies
|
||||
RUN npm --prefix /opt/openvidu-basic-node install
|
||||
|
||||
WORKDIR /opt/openvidu-basic-node
|
||||
|
||||
COPY docker/entrypoint.sh .
|
||||
|
||||
ENTRYPOINT [ "./entrypoint.sh" ]
|
||||
@ -1,28 +0,0 @@
|
||||
#!/bin/bash
|
||||
if [ $# -eq 0 ]; then
|
||||
echo "No version argument provided. Usage: \"./create_image.sh <IMAGE_NAME> <TUTORIAL_NAME>\""
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [ $# -eq 1 ]; then
|
||||
echo "No tutorial argument provided. Usage: \"./create_image.sh <IMAGE_NAME> <TUTORIAL_NAME>\""
|
||||
exit 1
|
||||
fi
|
||||
|
||||
DIR="../"$2""
|
||||
if [ -d "$DIR" ]; then
|
||||
|
||||
pushd ../
|
||||
|
||||
cp -r ../openvidu-basic-node ./"$2"
|
||||
|
||||
trap 'rm -rf ./openvidu-basic-node' ERR
|
||||
|
||||
docker build --pull --no-cache --rm=true --build-arg tutorial_name=$2 -f docker/Dockerfile -t "$1" .
|
||||
|
||||
rm -rf ./"$2"/openvidu-basic-node
|
||||
else
|
||||
echo "Error: ${DIR} not found. Can not continue."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
exec node index.js "$*"
|
||||
@ -1,30 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
|
||||
TUTORIALS=(
|
||||
'openvidu-additional-panels'
|
||||
'openvidu-admin-dashboard'
|
||||
'openvidu-custom-activities-panel'
|
||||
'openvidu-custom-chat-panel'
|
||||
'openvidu-custom-layout'
|
||||
'openvidu-custom-panels'
|
||||
'openvidu-custom-participant-panel-item'
|
||||
'openvidu-custom-participant-panel-item-elements'
|
||||
'openvidu-custom-participants-panel'
|
||||
'openvidu-custom-stream'
|
||||
'openvidu-custom-toolbar'
|
||||
'openvidu-custom-ui'
|
||||
'openvidu-toggle-hand'
|
||||
'openvidu-toolbar-buttons'
|
||||
'openvidu-toolbar-panel-buttons'
|
||||
)
|
||||
|
||||
for tutorial in "${TUTORIALS[@]}"
|
||||
do
|
||||
echo "Installing modules in $tutorial, please wait ..."
|
||||
|
||||
cd $tutorial
|
||||
rm package-lock.json && npm install
|
||||
cd ..
|
||||
|
||||
done
|
||||
@ -1,44 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.vscode
|
||||
.angular
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -1,27 +0,0 @@
|
||||
# OpenviduAdditionalPanels
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.2.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
@ -1,122 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"openvidu-additional-panels": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"inlineTemplate": true,
|
||||
"inlineStyle": true,
|
||||
"style": "scss",
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:class": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:guard": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:interceptor": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:pipe": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:resolver": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:service": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"outputPath": {
|
||||
"base": "dist/openvidu-additional-panels"
|
||||
},
|
||||
"index": "src/index.html",
|
||||
"polyfills": [
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"browser": "src/main.ts"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "openvidu-additional-panels:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "openvidu-additional-panels:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "openvidu-additional-panels:build"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,34 +0,0 @@
|
||||
{
|
||||
"name": "openvidu-additional-panels",
|
||||
"version": "2.27.0",
|
||||
"scripts": {
|
||||
"start": "ng serve --port=5080 --host=0.0.0.0",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.0.1",
|
||||
"@angular/cdk": "^18.0.1",
|
||||
"@angular/common": "^18.0.1",
|
||||
"@angular/compiler": "^18.0.1",
|
||||
"@angular/core": "^18.0.1",
|
||||
"@angular/forms": "^18.0.1",
|
||||
"@angular/material": "^18.0.1",
|
||||
"@angular/platform-browser": "^18.0.1",
|
||||
"@angular/platform-browser-dynamic": "^18.0.1",
|
||||
"@angular/router": "^18.0.1",
|
||||
"openvidu-components-angular": "^3.0.0-dev5",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^18.0.2",
|
||||
"@angular/cli": "^18.0.2",
|
||||
"@angular/compiler-cli": "^18.0.1",
|
||||
"@types/node": "^20.12.12",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
#my-panels {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#my-panel1,
|
||||
#my-panel2 {
|
||||
text-align: center;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
#my-panel1 {
|
||||
background: #c9ffb2;
|
||||
}
|
||||
#my-panel2 {
|
||||
background: #ddf2ff;
|
||||
}
|
||||
@ -1,159 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component } from '@angular/core';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
|
||||
import {
|
||||
PanelStatusInfo,
|
||||
PanelService,
|
||||
OpenViduComponentsModule,
|
||||
} from 'openvidu-components-angular';
|
||||
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { MatIconButton } from '@angular/material/button';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference
|
||||
[token]="token"
|
||||
[livekitUrl]="LIVEKIT_URL"
|
||||
[toolbarDisplayRoomName]="false"
|
||||
(onTokenRequested)="onTokenRequested($event)"
|
||||
>
|
||||
<!-- Additional Toolbar Buttons -->
|
||||
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
|
||||
<button mat-icon-button (click)="toggleMyPanel('my-panel1')">
|
||||
<mat-icon>360</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="toggleMyPanel('my-panel2')">
|
||||
<mat-icon>star</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Additional Panels -->
|
||||
<div *ovAdditionalPanels id="my-panels">
|
||||
@if (showExternalPanel) {
|
||||
<div id="my-panel1">
|
||||
<h2>NEW PANEL 1</h2>
|
||||
<p>This is my new additional panel</p>
|
||||
</div>
|
||||
} @if (showExternalPanel2) {
|
||||
<div id="my-panel2">
|
||||
<h2>NEW PANEL 2</h2>
|
||||
<p>This is another new panel</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: `
|
||||
#my-panels {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#my-panel1,
|
||||
#my-panel2 {
|
||||
text-align: center;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
#my-panel1 {
|
||||
background: #c9ffb2;
|
||||
}
|
||||
#my-panel2 {
|
||||
background: #ddf2ff;
|
||||
}
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [OpenViduComponentsModule, MatIconButton, MatIcon],
|
||||
})
|
||||
export class AppComponent {
|
||||
// For local development, leave these variables empty
|
||||
// For production, configure them with correct URLs depending on your deployment
|
||||
APPLICATION_SERVER_URL = '';
|
||||
LIVEKIT_URL = '';
|
||||
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'additional-panels';
|
||||
token!: string;
|
||||
|
||||
// Flags to control the visibility of external panels
|
||||
showExternalPanel: boolean = false;
|
||||
showExternalPanel2: boolean = false;
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
private panelService: PanelService
|
||||
) {
|
||||
this.configureUrls();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.subscribeToPanelToggling();
|
||||
}
|
||||
|
||||
private configureUrls() {
|
||||
// If APPLICATION_SERVER_URL is not configured, use default value from local development
|
||||
if (!this.APPLICATION_SERVER_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
|
||||
} else {
|
||||
this.APPLICATION_SERVER_URL =
|
||||
'https://' + window.location.hostname + ':6443/';
|
||||
}
|
||||
}
|
||||
|
||||
// If LIVEKIT_URL is not configured, use default value from local development
|
||||
if (!this.LIVEKIT_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.LIVEKIT_URL = 'ws://localhost:7880/';
|
||||
} else {
|
||||
this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: any) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
// Subscribe to panel toggling events
|
||||
subscribeToPanelToggling() {
|
||||
this.panelService.panelStatusObs.subscribe((ev: PanelStatusInfo) => {
|
||||
this.showExternalPanel = ev.isOpened && ev.panelType === 'my-panel1';
|
||||
this.showExternalPanel2 = ev.isOpened && ev.panelType === 'my-panel2';
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle the visibility of external panels
|
||||
toggleMyPanel(type: string) {
|
||||
this.panelService.togglePanel(type);
|
||||
}
|
||||
|
||||
// Function to get a token from the server
|
||||
async getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message:
|
||||
'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
};
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 948 B |
@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenviduAdditionalPanels</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<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/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,23 +0,0 @@
|
||||
import { enableProdMode, importProvidersFrom } from '@angular/core';
|
||||
import { environment } from './environments/environment';
|
||||
import { AppComponent } from './app/app.component';
|
||||
import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
|
||||
import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
|
||||
import { provideAnimations } from '@angular/platform-browser/animations';
|
||||
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
|
||||
|
||||
const config: OpenViduComponentsConfig = {
|
||||
production: environment.production,
|
||||
};
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [
|
||||
importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
|
||||
provideAnimations(),
|
||||
provideHttpClient(withInterceptorsFromDi()),
|
||||
],
|
||||
}).catch((err) => console.error(err));
|
||||
@ -1,53 +0,0 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
@ -1,23 +0,0 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
:root {
|
||||
--ov-primary-color: #303030;
|
||||
--ov-secondary-color: #3e3f3f;
|
||||
--ov-tertiary-color: #598eff;
|
||||
--ov-warn-color: #EB5144;
|
||||
--ov-accent-color: #ffae35;
|
||||
--ov-light-color: #e6e6e6;
|
||||
|
||||
--ov-logo-background-color: #3a3d3d;
|
||||
--ov-text-color: #ffffff;
|
||||
|
||||
--ov-panel-text-color: #1d1d1d;
|
||||
--ov-panel-background: #ffffff;
|
||||
|
||||
--ov-buttons-radius: 50%; // border-radius property
|
||||
--ov-leave-button-radius: 10px;
|
||||
--ov-video-radius: 5px;
|
||||
--ov-panel-radius: 5px;
|
||||
}
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
@ -1,15 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"esModuleInterop": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -1,27 +0,0 @@
|
||||
# OpenviduAdminDashboard
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.2.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
@ -1,95 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"openvidu-admin-dashboard": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"outputPath": {
|
||||
"base": "dist/openvidu-admin-dashboard"
|
||||
},
|
||||
"index": "src/index.html",
|
||||
"polyfills": [
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"browser": "src/main.ts"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "openvidu-admin-dashboard:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "openvidu-admin-dashboard:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "openvidu-admin-dashboard:build"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "openvidu-admin-dashboard",
|
||||
"version": "2.27.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --port=5080 --host=0.0.0.0",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.0.1",
|
||||
"@angular/cdk": "^18.0.1",
|
||||
"@angular/common": "^18.0.1",
|
||||
"@angular/compiler": "^18.0.1",
|
||||
"@angular/core": "^18.0.1",
|
||||
"@angular/forms": "^18.0.1",
|
||||
"@angular/material": "^18.0.1",
|
||||
"@angular/platform-browser": "^18.0.1",
|
||||
"@angular/platform-browser-dynamic": "^18.0.1",
|
||||
"@angular/router": "^18.0.1",
|
||||
"openvidu-components-angular": "^3.0.0-dev5",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^18.0.2",
|
||||
"@angular/cli": "^18.0.2",
|
||||
"@angular/compiler-cli": "^18.0.1",
|
||||
"@types/node": "^20.12.12",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
import { Component, WritableSignal, signal } from '@angular/core';
|
||||
import {
|
||||
RecordingInfo,
|
||||
OpenViduComponentsModule,
|
||||
RecordingStatus,
|
||||
RecordingOutputMode,
|
||||
RecordingDeleteRequestedEvent,
|
||||
} from 'openvidu-components-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
@if (logged) {
|
||||
<ov-admin-dashboard
|
||||
[recordingsList]="recordings()"
|
||||
(onLogoutRequested)="onLogoutRequested()"
|
||||
(onRefreshRecordingsRequested)="onRefreshRecordingsRequested()"
|
||||
(onLoadMoreRecordingsRequested)="onLoadMoreRecordingsRequested()"
|
||||
(onRecordingDeleteRequested)="onRecordingDeleteRequested($event)"
|
||||
></ov-admin-dashboard>
|
||||
} @else {
|
||||
<ov-admin-login (onLoginRequested)="onLoginRequested($event)">
|
||||
</ov-admin-login>
|
||||
}
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [OpenViduComponentsModule],
|
||||
})
|
||||
export class AppComponent {
|
||||
roomName = 'openvidu-admin-dashboard';
|
||||
logged: boolean = false;
|
||||
recordings: WritableSignal<RecordingInfo[]> = signal([
|
||||
{
|
||||
id: 'recording1',
|
||||
roomName: this.roomName,
|
||||
roomId: 'roomId1',
|
||||
outputMode: RecordingOutputMode.COMPOSED,
|
||||
status: RecordingStatus.READY,
|
||||
filename: 'sampleRecording.mp4',
|
||||
startedAt: new Date().getTime(),
|
||||
endedAt: new Date().getTime(),
|
||||
duration: 0,
|
||||
size: 100,
|
||||
location: 'http://localhost:8080/recordings/recording1',
|
||||
},
|
||||
]);
|
||||
|
||||
constructor() {}
|
||||
|
||||
onLoginRequested(credentials: { username: string; password: string }) {
|
||||
console.log(`Loggin button clicked ${credentials}`);
|
||||
/**
|
||||
* WARNING! This code is developed for didactic purposes only.
|
||||
* The authentication process should be done in the server side.
|
||||
**/
|
||||
this.logged = true;
|
||||
}
|
||||
|
||||
onLogoutRequested() {
|
||||
console.log('Logout button clicked');
|
||||
/**
|
||||
* WARNING! This code is developed for didactic purposes only.
|
||||
* The authentication process should be done in the server side.
|
||||
**/
|
||||
this.logged = false;
|
||||
}
|
||||
|
||||
onRefreshRecordingsRequested() {
|
||||
console.log('Refresh recording clicked');
|
||||
/**
|
||||
* WARNING! This code is developed for didactic purposes only.
|
||||
* The authentication process should be done in the server side.
|
||||
**/
|
||||
// Getting the recordings from the server
|
||||
this.recordings.update(() => [
|
||||
{
|
||||
id: 'recording1',
|
||||
roomName: this.roomName,
|
||||
roomId: 'roomId1',
|
||||
outputMode: RecordingOutputMode.COMPOSED,
|
||||
status: RecordingStatus.READY,
|
||||
filename: 'sampleRecording1.mp4',
|
||||
startedAt: new Date().getTime(),
|
||||
endedAt: new Date().getTime(),
|
||||
duration: 0,
|
||||
size: 100,
|
||||
location: 'http://localhost:8080/recordings/recording1',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
onLoadMoreRecordingsRequested() {
|
||||
console.log('Load more recordings clicked');
|
||||
}
|
||||
|
||||
onRecordingDeleteRequested(recording: RecordingDeleteRequestedEvent) {
|
||||
console.log(`Delete recording clicked ${recording.recordingId}`);
|
||||
/**
|
||||
* WARNING! This code is developed for didactic purposes only.
|
||||
* The authentication process should be done in the server side.
|
||||
**/
|
||||
// Deleting the recording from the server
|
||||
this.recordings.update((recordings) =>
|
||||
recordings.filter((rec) => rec.id !== recording.recordingId)
|
||||
);
|
||||
|
||||
console.log(this.recordings());
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
};
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 948 B |
@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenviduAdminDashboard</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<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/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
import { enableProdMode, importProvidersFrom } from '@angular/core';
|
||||
import { environment } from './environments/environment';
|
||||
import { AppComponent } from './app/app.component';
|
||||
import {
|
||||
OpenViduComponentsModule,
|
||||
OpenViduComponentsConfig,
|
||||
} from 'openvidu-components-angular';
|
||||
import { provideAnimations } from '@angular/platform-browser/animations';
|
||||
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
|
||||
|
||||
const config: OpenViduComponentsConfig = {
|
||||
production: environment.production,
|
||||
};
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [
|
||||
importProvidersFrom(
|
||||
BrowserModule,
|
||||
OpenViduComponentsModule.forRoot(config)
|
||||
),
|
||||
provideAnimations(),
|
||||
],
|
||||
}).catch((err) => console.error(err));
|
||||
@ -1,53 +0,0 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
@ -1,23 +0,0 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
:root {
|
||||
--ov-primary-color: #303030;
|
||||
--ov-secondary-color: #3e3f3f;
|
||||
--ov-tertiary-color: #598eff;
|
||||
--ov-warn-color: #EB5144;
|
||||
--ov-accent-color: #ffae35;
|
||||
--ov-light-color: #e6e6e6;
|
||||
|
||||
--ov-logo-background-color: #3a3d3d;
|
||||
--ov-text-color: #ffffff;
|
||||
|
||||
--ov-panel-text-color: #1d1d1d;
|
||||
--ov-panel-background: #ffffff;
|
||||
|
||||
--ov-buttons-radius: 50%; // border-radius property
|
||||
--ov-leave-button-radius: 10px;
|
||||
--ov-video-radius: 5px;
|
||||
--ov-panel-radius: 5px;
|
||||
}
|
||||
html, body { height: 100%; overflow: hidden; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
@ -1,26 +0,0 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
<T>(id: string): T;
|
||||
keys(): string[];
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting(),
|
||||
);
|
||||
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().forEach(context);
|
||||
@ -1,15 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"esModuleInterop": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.vscode
|
||||
.angular
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -1,27 +0,0 @@
|
||||
# OpenviduCustomActivitiesPanel
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.2.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
@ -1,122 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"openvidu-custom-activities-panel": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"inlineTemplate": true,
|
||||
"inlineStyle": true,
|
||||
"style": "scss",
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:class": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:guard": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:interceptor": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:pipe": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:resolver": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:service": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"outputPath": {
|
||||
"base": "dist/openvidu-custom-activities-panel"
|
||||
},
|
||||
"index": "src/index.html",
|
||||
"polyfills": [
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"browser": "src/main.ts"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "openvidu-custom-activities-panel:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "openvidu-custom-activities-panel:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "openvidu-custom-activities-panel:build"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "openvidu-custom-activities-panel",
|
||||
"version": "2.27.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --port=5080 --host=0.0.0.0",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.0.1",
|
||||
"@angular/cdk": "^18.0.1",
|
||||
"@angular/common": "^18.0.1",
|
||||
"@angular/compiler": "^18.0.1",
|
||||
"@angular/core": "^18.0.1",
|
||||
"@angular/forms": "^18.0.1",
|
||||
"@angular/material": "^18.0.1",
|
||||
"@angular/platform-browser": "^18.0.1",
|
||||
"@angular/platform-browser-dynamic": "^18.0.1",
|
||||
"@angular/router": "^18.0.1",
|
||||
"openvidu-components-angular": "^3.0.0-dev5",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^18.0.2",
|
||||
"@angular/cli": "^18.0.2",
|
||||
"@angular/compiler-cli": "^18.0.1",
|
||||
"@types/node": "^20.12.12",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
@ -1,88 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component } from '@angular/core';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
import { OpenViduComponentsModule } from 'openvidu-components-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<ov-videoconference
|
||||
[token]="token"
|
||||
[livekitUrl]="LIVEKIT_URL"
|
||||
(onTokenRequested)="onTokenRequested($event)"
|
||||
>
|
||||
<!-- Custom activities panel -->
|
||||
<div *ovActivitiesPanel id="my-panel">
|
||||
<h3>ACTIVITIES</h3>
|
||||
<div>CUSTOM ACTIVITIES</div>
|
||||
</div>
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: `
|
||||
#my-panel {
|
||||
background: #aafffc;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [OpenViduComponentsModule],
|
||||
})
|
||||
export class AppComponent {
|
||||
// For local development, leave these variables empty
|
||||
// For production, configure them with correct URLs depending on your deployment
|
||||
APPLICATION_SERVER_URL = '';
|
||||
LIVEKIT_URL = '';
|
||||
roomName = 'custom-activities-panel';
|
||||
token!: string;
|
||||
|
||||
constructor(private httpClient: HttpClient) {
|
||||
this.configureUrls();
|
||||
}
|
||||
|
||||
configureUrls() {
|
||||
// If APPLICATION_SERVER_URL is not configured, use default value from local development
|
||||
if (!this.APPLICATION_SERVER_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
|
||||
} else {
|
||||
this.APPLICATION_SERVER_URL =
|
||||
'https://' + window.location.hostname + ':6443/';
|
||||
}
|
||||
}
|
||||
|
||||
// If LIVEKIT_URL is not configured, use default value from local development
|
||||
if (!this.LIVEKIT_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.LIVEKIT_URL = 'ws://localhost:7880/';
|
||||
} else {
|
||||
this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message: 'Cannot connect with backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 948 B |
@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenviduCustomActivitiesPanel</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<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/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
import { enableProdMode, importProvidersFrom } from '@angular/core';
|
||||
import { environment } from './environments/environment';
|
||||
import { AppComponent } from './app/app.component';
|
||||
import {
|
||||
OpenViduComponentsModule,
|
||||
OpenViduComponentsConfig,
|
||||
} from 'openvidu-components-angular';
|
||||
import { provideAnimations } from '@angular/platform-browser/animations';
|
||||
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
|
||||
|
||||
const config: OpenViduComponentsConfig = {
|
||||
production: environment.production,
|
||||
};
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [
|
||||
importProvidersFrom(
|
||||
BrowserModule,
|
||||
OpenViduComponentsModule.forRoot(config)
|
||||
),
|
||||
provideAnimations(),
|
||||
],
|
||||
}).catch((err) => console.error(err));
|
||||
@ -1,53 +0,0 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
@ -1,24 +0,0 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
:root {
|
||||
--ov-primary-color: #303030;
|
||||
--ov-secondary-color: #3e3f3f;
|
||||
--ov-tertiary-color: #598eff;
|
||||
--ov-warn-color: #EB5144;
|
||||
--ov-accent-color: #ffae35;
|
||||
--ov-light-color: #e6e6e6;
|
||||
|
||||
--ov-logo-background-color: #3a3d3d;
|
||||
|
||||
--ov-text-color: #ffffff;
|
||||
|
||||
--ov-panel-text-color: #1d1d1d;
|
||||
--ov-panel-background: #ffffff;
|
||||
|
||||
--ov-buttons-radius: 50%; // border-radius property
|
||||
--ov-leave-button-radius: 10px;
|
||||
--ov-video-radius: 5px;
|
||||
--ov-panel-radius: 5px;
|
||||
}
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
@ -1,15 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"esModuleInterop": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.vscode
|
||||
.angular
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -1,27 +0,0 @@
|
||||
# OpenviduCustomChatPanel
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.2.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
@ -1,122 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"openvidu-custom-chat-panel": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"inlineTemplate": true,
|
||||
"inlineStyle": true,
|
||||
"style": "scss",
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:class": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:guard": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:interceptor": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:pipe": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:resolver": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:service": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"outputPath": {
|
||||
"base": "dist/openvidu-custom-chat-panel"
|
||||
},
|
||||
"index": "src/index.html",
|
||||
"polyfills": [
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"browser": "src/main.ts"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "openvidu-custom-chat-panel:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "openvidu-custom-chat-panel:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "openvidu-custom-chat-panel:build"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "openvidu-custom-chat-panel",
|
||||
"version": "2.27.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --port=5080 --host=0.0.0.0",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.0.1",
|
||||
"@angular/cdk": "^18.0.1",
|
||||
"@angular/common": "^18.0.1",
|
||||
"@angular/compiler": "^18.0.1",
|
||||
"@angular/core": "^18.0.1",
|
||||
"@angular/forms": "^18.0.1",
|
||||
"@angular/material": "^18.0.1",
|
||||
"@angular/platform-browser": "^18.0.1",
|
||||
"@angular/platform-browser-dynamic": "^18.0.1",
|
||||
"@angular/router": "^18.0.1",
|
||||
"openvidu-components-angular": "^3.0.0-dev5",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^18.0.2",
|
||||
"@angular/cli": "^18.0.2",
|
||||
"@angular/compiler-cli": "^18.0.1",
|
||||
"@types/node": "^20.12.12",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
@ -1,149 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component } from '@angular/core';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
|
||||
import {
|
||||
DataPacket_Kind,
|
||||
DataPublishOptions,
|
||||
DataTopic,
|
||||
ParticipantService,
|
||||
RemoteParticipant,
|
||||
Room,
|
||||
RoomEvent,
|
||||
OpenViduComponentsModule,
|
||||
} from 'openvidu-components-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference
|
||||
[token]="token"
|
||||
[livekitUrl]="LIVEKIT_URL"
|
||||
[toolbarDisplayRoomName]="false"
|
||||
(onTokenRequested)="onTokenRequested($event)"
|
||||
(onRoomCreated)="onRoomCreated($event)"
|
||||
>
|
||||
<!-- Chat Panel -->
|
||||
<div *ovChatPanel id="my-panel">
|
||||
<h3>Chat</h3>
|
||||
<div>
|
||||
<ul>
|
||||
@for (msg of messages; track msg) {
|
||||
<li>{{ msg }}</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<input value="Hello" #input />
|
||||
<button (click)="send(input.value)">Send</button>
|
||||
</div>
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: `
|
||||
#my-panel {
|
||||
background: #aafffc;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [OpenViduComponentsModule],
|
||||
})
|
||||
export class AppComponent {
|
||||
// For local development, leave these variables empty
|
||||
// For production, configure them with correct URLs depending on your deployment
|
||||
APPLICATION_SERVER_URL = '';
|
||||
LIVEKIT_URL = '';
|
||||
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'chat-panel-directive-example';
|
||||
token!: string;
|
||||
messages: string[] = [];
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
private participantService: ParticipantService
|
||||
) {
|
||||
this.configureUrls();
|
||||
}
|
||||
|
||||
private configureUrls() {
|
||||
// If APPLICATION_SERVER_URL is not configured, use default value from local development
|
||||
if (!this.APPLICATION_SERVER_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
|
||||
} else {
|
||||
this.APPLICATION_SERVER_URL =
|
||||
'https://' + window.location.hostname + ':6443/';
|
||||
}
|
||||
}
|
||||
|
||||
// If LIVEKIT_URL is not configured, use default value from local development
|
||||
if (!this.LIVEKIT_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.LIVEKIT_URL = 'ws://localhost:7880/';
|
||||
} else {
|
||||
this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
// Event handler for room creation
|
||||
onRoomCreated(room: Room) {
|
||||
room.on(
|
||||
RoomEvent.DataReceived,
|
||||
(
|
||||
payload: Uint8Array,
|
||||
participant?: RemoteParticipant,
|
||||
_?: DataPacket_Kind,
|
||||
topic?: string
|
||||
) => {
|
||||
if (topic === DataTopic.CHAT) {
|
||||
const { message } = JSON.parse(new TextDecoder().decode(payload));
|
||||
const participantName = participant?.name || 'Unknown';
|
||||
this.messages.push(message);
|
||||
console.log(`Message received from ${participantName}:`, message);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Function to send a chat message
|
||||
async send(message: string): Promise<void> {
|
||||
const strData = JSON.stringify({ message });
|
||||
const data: Uint8Array = new TextEncoder().encode(strData);
|
||||
const options: DataPublishOptions = { topic: DataTopic.CHAT };
|
||||
await this.participantService.publishData(data, options);
|
||||
this.messages.push(message);
|
||||
}
|
||||
|
||||
// Function to get a token from the server
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message:
|
||||
'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 948 B |
@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenviduCustomChatPanel</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<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/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,22 +0,0 @@
|
||||
import { enableProdMode, importProvidersFrom } from '@angular/core';
|
||||
import { environment } from './environments/environment';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
|
||||
import { provideAnimations } from '@angular/platform-browser/animations';
|
||||
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
|
||||
|
||||
const config: OpenViduComponentsConfig = {
|
||||
production: environment.production,
|
||||
};
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [
|
||||
importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
|
||||
provideAnimations(),
|
||||
],
|
||||
}).catch((err) => console.error(err));
|
||||
@ -1,53 +0,0 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
@ -1,24 +0,0 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
:root {
|
||||
--ov-primary-color: #303030;
|
||||
--ov-secondary-color: #3e3f3f;
|
||||
--ov-tertiary-color: #598eff;
|
||||
--ov-warn-color: #EB5144;
|
||||
--ov-accent-color: #ffae35;
|
||||
--ov-light-color: #e6e6e6;
|
||||
|
||||
--ov-logo-background-color: #3a3d3d;
|
||||
|
||||
--ov-text-color: #ffffff;
|
||||
|
||||
--ov-panel-text-color: #1d1d1d;
|
||||
--ov-panel-background: #ffffff;
|
||||
|
||||
--ov-buttons-radius: 50%; // border-radius property
|
||||
--ov-leave-button-radius: 10px;
|
||||
--ov-video-radius: 5px;
|
||||
--ov-panel-radius: 5px;
|
||||
}
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
@ -1,15 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"esModuleInterop": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.vscode
|
||||
.angular
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -1,27 +0,0 @@
|
||||
# OpenviduCustomLayout
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.2.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
@ -1,122 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"openvidu-custom-layout": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"inlineTemplate": true,
|
||||
"inlineStyle": true,
|
||||
"style": "scss",
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:class": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:guard": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:interceptor": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:pipe": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:resolver": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:service": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"outputPath": {
|
||||
"base": "dist/openvidu-custom-layout"
|
||||
},
|
||||
"index": "src/index.html",
|
||||
"polyfills": [
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"browser": "src/main.ts"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "openvidu-custom-layout:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "openvidu-custom-layout:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "openvidu-custom-layout:build"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
7148
openvidu-components/openvidu-custom-layout/package-lock.json
generated
7148
openvidu-components/openvidu-custom-layout/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "openvidu-custom-layout",
|
||||
"version": "2.27.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --port=5080 --host=0.0.0.0",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.0.1",
|
||||
"@angular/cdk": "^18.0.1",
|
||||
"@angular/common": "^18.0.1",
|
||||
"@angular/compiler": "^18.0.1",
|
||||
"@angular/core": "^18.0.1",
|
||||
"@angular/forms": "^18.0.1",
|
||||
"@angular/material": "^18.0.1",
|
||||
"@angular/platform-browser": "^18.0.1",
|
||||
"@angular/platform-browser-dynamic": "^18.0.1",
|
||||
"@angular/router": "^18.0.1",
|
||||
"openvidu-components-angular": "^3.0.0-dev5",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^18.0.2",
|
||||
"@angular/cli": "^18.0.2",
|
||||
"@angular/compiler-cli": "^18.0.1",
|
||||
"@types/node": "^20.12.12",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
@ -1,168 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { lastValueFrom, Subscription } from 'rxjs';
|
||||
import {
|
||||
ParticipantModel,
|
||||
ParticipantService,
|
||||
OpenViduComponentsModule,
|
||||
} from 'openvidu-components-angular';
|
||||
import { NgClass } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference
|
||||
[token]="token"
|
||||
[livekitUrl]="LIVEKIT_URL"
|
||||
(onTokenRequested)="onTokenRequested($event)"
|
||||
>
|
||||
<!-- Custom Layout for Video Streams -->
|
||||
<div *ovLayout>
|
||||
<div class="container">
|
||||
<!-- Local Participant's Tracks -->
|
||||
@for (track of localParticipant.tracks; track track) {
|
||||
<div
|
||||
class="item"
|
||||
[ngClass]="{
|
||||
hidden:
|
||||
track.isAudioTrack && !track.participant.onlyHasAudioTracks
|
||||
}"
|
||||
>
|
||||
<ov-stream [track]="track"></ov-stream>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Remote Participants' Tracks -->
|
||||
@for (track of remoteParticipants | tracks; track track) {
|
||||
<div
|
||||
class="item"
|
||||
[ngClass]="{
|
||||
hidden:
|
||||
track.isAudioTrack && !track.participant.onlyHasAudioTracks
|
||||
}"
|
||||
>
|
||||
<ov-stream [track]="track"></ov-stream>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: `
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.item {
|
||||
flex: 0 50%;
|
||||
height: 250px;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [OpenViduComponentsModule, NgClass],
|
||||
})
|
||||
export class AppComponent implements OnInit, OnDestroy {
|
||||
// For local development, leave these variables empty
|
||||
// For production, configure them with correct URLs depending on your deployment
|
||||
APPLICATION_SERVER_URL = '';
|
||||
LIVEKIT_URL = '';
|
||||
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'custom-layout';
|
||||
token!: string;
|
||||
|
||||
// Participant-related properties
|
||||
localParticipant!: ParticipantModel;
|
||||
remoteParticipants!: ParticipantModel[];
|
||||
localParticipantSubs!: Subscription;
|
||||
remoteParticipantsSubs!: Subscription;
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
private participantService: ParticipantService
|
||||
) {
|
||||
this.configureUrls();
|
||||
}
|
||||
|
||||
private configureUrls() {
|
||||
// If APPLICATION_SERVER_URL is not configured, use default value from local development
|
||||
if (!this.APPLICATION_SERVER_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
|
||||
} else {
|
||||
this.APPLICATION_SERVER_URL =
|
||||
'https://' + window.location.hostname + ':6443/';
|
||||
}
|
||||
}
|
||||
|
||||
// If LIVEKIT_URL is not configured, use default value from local development
|
||||
if (!this.LIVEKIT_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.LIVEKIT_URL = 'ws://localhost:7880/';
|
||||
} else {
|
||||
this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// Subscribe to participants' updates
|
||||
this.subscribeToParticipants();
|
||||
}
|
||||
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
// Unsubscribe from participant updates to prevent memory leaks
|
||||
this.localParticipantSubs.unsubscribe();
|
||||
this.remoteParticipantsSubs.unsubscribe();
|
||||
}
|
||||
|
||||
// Subscribe to updates for local and remote participants
|
||||
subscribeToParticipants() {
|
||||
this.localParticipantSubs =
|
||||
this.participantService.localParticipant$.subscribe((p) => {
|
||||
if (p) this.localParticipant = p;
|
||||
});
|
||||
|
||||
this.remoteParticipantsSubs =
|
||||
this.participantService.remoteParticipants$.subscribe(
|
||||
(participants) => {
|
||||
this.remoteParticipants = participants;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Function to get a token from the server
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message:
|
||||
'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 948 B |
@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenviduCustomLayout</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<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/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,23 +0,0 @@
|
||||
import { enableProdMode, importProvidersFrom } from '@angular/core';
|
||||
|
||||
import { environment } from './environments/environment';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
|
||||
import { provideAnimations } from '@angular/platform-browser/animations';
|
||||
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
|
||||
|
||||
const config: OpenViduComponentsConfig = {
|
||||
production: environment.production,
|
||||
};
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [
|
||||
importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
|
||||
provideAnimations(),
|
||||
],
|
||||
}).catch((err) => console.error(err));
|
||||
@ -1,53 +0,0 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
@ -1,25 +0,0 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
||||
:root {
|
||||
--ov-primary-color: #303030;
|
||||
--ov-secondary-color: #3e3f3f;
|
||||
--ov-tertiary-color: #598eff;
|
||||
--ov-warn-color: #EB5144;
|
||||
--ov-accent-color: #ffae35;
|
||||
--ov-light-color: #e6e6e6;
|
||||
|
||||
--ov-logo-background-color: #3a3d3d;
|
||||
|
||||
--ov-text-color: #ffffff;
|
||||
|
||||
--ov-panel-text-color: #1d1d1d;
|
||||
--ov-panel-background: #ffffff;
|
||||
|
||||
--ov-buttons-radius: 50%; // border-radius property
|
||||
--ov-leave-button-radius: 10px;
|
||||
--ov-video-radius: 5px;
|
||||
--ov-panel-radius: 5px;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"esModuleInterop": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.vscode
|
||||
.angular
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -1,27 +0,0 @@
|
||||
# OpenviduCustomPanels
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.2.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
@ -1,122 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"openvidu-custom-panels": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"inlineTemplate": true,
|
||||
"inlineStyle": true,
|
||||
"style": "scss",
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:class": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:guard": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:interceptor": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:pipe": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:resolver": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:service": {
|
||||
"skipTests": true
|
||||
},
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"outputPath": {
|
||||
"base": "dist/openvidu-custom-panels"
|
||||
},
|
||||
"index": "src/index.html",
|
||||
"polyfills": [
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"browser": "src/main.ts"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "openvidu-custom-panels:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "openvidu-custom-panels:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "openvidu-custom-panels:build"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
7148
openvidu-components/openvidu-custom-panels/package-lock.json
generated
7148
openvidu-components/openvidu-custom-panels/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "openvidu-custom-panels",
|
||||
"version": "2.27.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --port=5080 --host=0.0.0.0",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"build:prod": "ng build --output-path ./openvidu-basic-node/public/ --configuration production"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.0.1",
|
||||
"@angular/cdk": "^18.0.1",
|
||||
"@angular/common": "^18.0.1",
|
||||
"@angular/compiler": "^18.0.1",
|
||||
"@angular/core": "^18.0.1",
|
||||
"@angular/forms": "^18.0.1",
|
||||
"@angular/material": "^18.0.1",
|
||||
"@angular/platform-browser": "^18.0.1",
|
||||
"@angular/platform-browser-dynamic": "^18.0.1",
|
||||
"@angular/router": "^18.0.1",
|
||||
"openvidu-components-angular": "^3.0.0-dev5",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^18.0.2",
|
||||
"@angular/cli": "^18.0.2",
|
||||
"@angular/compiler-cli": "^18.0.1",
|
||||
"@types/node": "^20.12.12",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
@ -1,120 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component } from '@angular/core';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
|
||||
import { OpenViduComponentsModule } from 'openvidu-components-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference
|
||||
[token]="token"
|
||||
[livekitUrl]="LIVEKIT_URL"
|
||||
(onTokenRequested)="onTokenRequested($event)"
|
||||
>
|
||||
<!-- Custom Panels -->
|
||||
<ov-panel *ovPanel>
|
||||
<!-- Custom Chat Panel -->
|
||||
<div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
|
||||
|
||||
<!-- Custom Participants Panel -->
|
||||
<div *ovParticipantsPanel id="my-participants-panel">
|
||||
This is my custom participants panel
|
||||
</div>
|
||||
|
||||
<!-- Custom Activities Panel -->
|
||||
<div *ovActivitiesPanel id="my-activities-panel">
|
||||
This is my custom activities panel
|
||||
</div>
|
||||
</ov-panel>
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: `
|
||||
#my-chat-panel,
|
||||
#my-participants-panel,
|
||||
#my-activities-panel {
|
||||
text-align: center;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#my-chat-panel {
|
||||
background: #c9ffb2;
|
||||
}
|
||||
|
||||
#my-participants-panel {
|
||||
background: #ddf2ff;
|
||||
}
|
||||
|
||||
#my-activities-panel {
|
||||
background: #ffddc9;
|
||||
}
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [OpenViduComponentsModule],
|
||||
})
|
||||
export class AppComponent {
|
||||
// For local development, leave these variables empty
|
||||
// For production, configure them with correct URLs depending on your deployment
|
||||
APPLICATION_SERVER_URL = '';
|
||||
LIVEKIT_URL = '';
|
||||
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'custom-panels';
|
||||
token!: string;
|
||||
|
||||
constructor(private httpClient: HttpClient) {
|
||||
this.configureUrls();
|
||||
}
|
||||
|
||||
private configureUrls() {
|
||||
// If APPLICATION_SERVER_URL is not configured, use default value from local development
|
||||
if (!this.APPLICATION_SERVER_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
|
||||
} else {
|
||||
this.APPLICATION_SERVER_URL =
|
||||
'https://' + window.location.hostname + ':6443/';
|
||||
}
|
||||
}
|
||||
|
||||
// If LIVEKIT_URL is not configured, use default value from local development
|
||||
if (!this.LIVEKIT_URL) {
|
||||
if (window.location.hostname === 'localhost') {
|
||||
this.LIVEKIT_URL = 'ws://localhost:7880/';
|
||||
} else {
|
||||
this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
// Function to get a token from the server
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message:
|
||||
'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 948 B |
@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenviduCustomPanels</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<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/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,22 +0,0 @@
|
||||
import { enableProdMode, importProvidersFrom } from '@angular/core';
|
||||
|
||||
import { environment } from './environments/environment';
|
||||
import { AppComponent } from './app/app.component';
|
||||
import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
|
||||
import { provideAnimations } from '@angular/platform-browser/animations';
|
||||
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
|
||||
|
||||
const config: OpenViduComponentsConfig = {
|
||||
production: environment.production,
|
||||
};
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
bootstrapApplication(AppComponent, {
|
||||
providers: [
|
||||
importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(config)),
|
||||
provideAnimations(),
|
||||
],
|
||||
}).catch((err) => console.error(err));
|
||||
@ -1,53 +0,0 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user