mirror of https://github.com/OpenVidu/openvidu.git
ov-components: Updated testapp to Angular 17
parent
f2ab607c82
commit
6221c92bae
|
@ -20,7 +20,7 @@
|
||||||
"outputPath": "dist/openvidu-components-testapp",
|
"outputPath": "dist/openvidu-components-testapp",
|
||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
"main": "src/main.ts",
|
"main": "src/main.ts",
|
||||||
"polyfills": "src/polyfills.ts",
|
"polyfills": ["zone.js"],
|
||||||
"tsConfig": "tsconfig.app.json",
|
"tsConfig": "tsconfig.app.json",
|
||||||
"aot": true,
|
"aot": true,
|
||||||
"assets": ["src/favicon.ico", "src/assets"],
|
"assets": ["src/favicon.ico", "src/assets"],
|
||||||
|
@ -69,29 +69,29 @@
|
||||||
"serve": {
|
"serve": {
|
||||||
"builder": "@angular-devkit/build-angular:dev-server",
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
"options": {
|
"options": {
|
||||||
"browserTarget": "openvidu-components-testapp:build",
|
"proxyConfig": "src/proxy.config.json",
|
||||||
"proxyConfig": "src/proxy.config.json"
|
"buildTarget": "openvidu-components-testapp:build"
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"development": {
|
"development": {
|
||||||
"browserTarget": "openvidu-components-testapp:build:development"
|
"buildTarget": "openvidu-components-testapp:build:development"
|
||||||
},
|
},
|
||||||
"production": {
|
"production": {
|
||||||
"browserTarget": "openvidu-components-testapp:build:production"
|
"buildTarget": "openvidu-components-testapp:build:production"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"extract-i18n": {
|
"extract-i18n": {
|
||||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
"options": {
|
"options": {
|
||||||
"browserTarget": "openvidu-components-testapp:build"
|
"buildTarget": "openvidu-components-testapp:build"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"test": {
|
"test": {
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
"options": {
|
"options": {
|
||||||
"main": "src/test.ts",
|
"main": "src/test.ts",
|
||||||
"polyfills": "src/polyfills.ts",
|
"polyfills": ["zone.js"],
|
||||||
"tsConfig": "tsconfig.spec.json",
|
"tsConfig": "tsconfig.spec.json",
|
||||||
"karmaConfig": "karma.conf.js",
|
"karmaConfig": "karma.conf.js",
|
||||||
"assets": ["src/favicon.ico", "src/assets"],
|
"assets": ["src/favicon.ico", "src/assets"],
|
||||||
|
@ -162,7 +162,7 @@
|
||||||
"outputPath": "dist/openvidu-webcomponent-rc",
|
"outputPath": "dist/openvidu-webcomponent-rc",
|
||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
"main": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts",
|
"main": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts",
|
||||||
"polyfills": "src/polyfills.ts",
|
"polyfills": ["zone.js"],
|
||||||
"tsConfig": "src/app/openvidu-webcomponent/tsconfig.openvidu-webcomponent.json",
|
"tsConfig": "src/app/openvidu-webcomponent/tsconfig.openvidu-webcomponent.json",
|
||||||
"aot": true,
|
"aot": true,
|
||||||
"assets": ["src/favicon.ico"],
|
"assets": ["src/favicon.ico"],
|
||||||
|
@ -201,8 +201,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"cli": {
|
"cli": {
|
||||||
"analytics": false
|
"analytics": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,27 +1,27 @@
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "16.2.12",
|
"@angular/animations": "17.3.10",
|
||||||
"@angular/cdk": "16.2.14",
|
"@angular/cdk": "17.3.10",
|
||||||
"@angular/common": "16.2.12",
|
"@angular/common": "17.3.10",
|
||||||
"@angular/core": "16.2.12",
|
"@angular/core": "17.3.10",
|
||||||
"@angular/flex-layout": "15.0.0-beta.42",
|
"@angular/flex-layout": "15.0.0-beta.42",
|
||||||
"@angular/forms": "16.2.12",
|
"@angular/forms": "17.3.10",
|
||||||
"@angular/material": "16.2.14",
|
"@angular/material": "17.3.10",
|
||||||
"@angular/platform-browser": "16.2.12",
|
"@angular/platform-browser": "17.3.10",
|
||||||
"@angular/platform-browser-dynamic": "16.2.12",
|
"@angular/platform-browser-dynamic": "17.3.10",
|
||||||
"@angular/router": "16.2.12",
|
"@angular/router": "17.3.10",
|
||||||
"autolinker": "4.0.0",
|
"autolinker": "4.0.0",
|
||||||
"openvidu-browser": "2.29.1",
|
"openvidu-browser": "2.29.1",
|
||||||
"rxjs": "7.5.7",
|
"rxjs": "7.5.7",
|
||||||
"tslib": "2.3.1",
|
"tslib": "2.3.1",
|
||||||
"zone.js": "0.13.3"
|
"zone.js": "^0.14.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "16.2.14",
|
"@angular-devkit/build-angular": "17.3.8",
|
||||||
"@angular/cli": "16.2.14",
|
"@angular/cli": "17.3.8",
|
||||||
"@angular/compiler": "16.2.12",
|
"@angular/compiler": "17.3.10",
|
||||||
"@angular/compiler-cli": "16.2.12",
|
"@angular/compiler-cli": "17.3.10",
|
||||||
"@angular/elements": "16.2.12",
|
"@angular/elements": "17.3.10",
|
||||||
"@compodoc/compodoc": "^1.1.19",
|
"@compodoc/compodoc": "^1.1.19",
|
||||||
"@types/chai": "4.3.0",
|
"@types/chai": "4.3.0",
|
||||||
"@types/mocha": "9.1.0",
|
"@types/mocha": "9.1.0",
|
||||||
|
@ -46,11 +46,11 @@
|
||||||
"karma-mocha-reporter": "2.2.5",
|
"karma-mocha-reporter": "2.2.5",
|
||||||
"karma-notify-reporter": "1.3.0",
|
"karma-notify-reporter": "1.3.0",
|
||||||
"mocha": "9.2.2",
|
"mocha": "9.2.2",
|
||||||
"ng-packagr": "16.2.3",
|
"ng-packagr": "17.3.0",
|
||||||
"selenium-webdriver": "4.5.0",
|
"selenium-webdriver": "4.5.0",
|
||||||
"ts-node": "10.4.0",
|
"ts-node": "10.4.0",
|
||||||
"tslint": "6.1.3",
|
"tslint": "6.1.3",
|
||||||
"typescript": "4.9.3",
|
"typescript": "^5.4.5",
|
||||||
"webpack-bundle-analyzer": "^4.5.0"
|
"webpack-bundle-analyzer": "^4.5.0"
|
||||||
},
|
},
|
||||||
"name": "openvidu-components-testapp",
|
"name": "openvidu-components-testapp",
|
||||||
|
|
|
@ -1,14 +1,13 @@
|
||||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
{
|
{
|
||||||
"extends": "./tsconfig.lib.json",
|
"extends": "./tsconfig.lib.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"declarationMap": false,
|
"declarationMap": false,
|
||||||
"sourceMap": false,
|
"sourceMap": false,
|
||||||
"removeComments": true,
|
"removeComments": true,
|
||||||
"pretty": false,
|
"pretty": false
|
||||||
"watch": false,
|
},
|
||||||
},
|
"angularCompilerOptions": {
|
||||||
"angularCompilerOptions": {
|
"compilationMode": "partial"
|
||||||
"compilationMode": "partial"
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,63 +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 Safari >= 10, Chrome >= 55 (including Opera),
|
|
||||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
|
||||||
*
|
|
||||||
* Learn more in https://angular.io/guide/browser-support
|
|
||||||
*/
|
|
||||||
|
|
||||||
/***************************************************************************************************
|
|
||||||
* BROWSER POLYFILLS
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
|
||||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Web Animations `@angular/platform-browser/animations`
|
|
||||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
|
||||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
|
||||||
*/
|
|
||||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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/dist/zone'; // Included with Angular CLI.
|
|
||||||
|
|
||||||
|
|
||||||
/***************************************************************************************************
|
|
||||||
* APPLICATION IMPORTS
|
|
||||||
*/
|
|
|
@ -1,109 +1,94 @@
|
||||||
|
|
||||||
// Custom Theming for Angular Material
|
|
||||||
// For more information: https://material.angular.io/guide/theming
|
|
||||||
@use '@angular/material' as mat;
|
@use '@angular/material' as mat;
|
||||||
@import '@angular/material/theming';
|
|
||||||
|
|
||||||
// Plus imports for other components in your app.
|
|
||||||
|
|
||||||
// Include the common styles for Angular Material. We include this here so that you only
|
|
||||||
// have to load a single css file for Angular Material in your app.
|
|
||||||
// Be sure that you only ever include this mixin once!
|
|
||||||
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
|
|
||||||
// The following line adds:
|
|
||||||
// 1. Default typography styles for all components
|
|
||||||
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
|
|
||||||
// If you specify typography styles for the components you use elsewhere, you should delete this line.
|
|
||||||
// If you don't need the default component typographies but still want the hierarchy styles,
|
|
||||||
// you can delete this line and instead use:
|
|
||||||
// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
|
|
||||||
@include mat.all-component-typographies();
|
|
||||||
@include mat.core();
|
@include mat.core();
|
||||||
|
|
||||||
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
// Define your custom palettes
|
||||||
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
$openvidu-components-primary: mat.define-palette(mat.$blue-grey-palette, 500, 300);
|
||||||
// hue. Available color palettes: https://material.io/design/color/
|
$openvidu-components-accent: mat.define-palette(mat.$amber-palette, 500, 700, A100);
|
||||||
$openvidu-components-primary: mat-palette($mat-blue-grey, 500, 300);
|
|
||||||
$openvidu-components-accent: mat-palette($mat-amber, 500, 700, A100);
|
|
||||||
|
|
||||||
// The warn palette is optional (defaults to red).
|
|
||||||
$openvidu-components-warn: mat.define-palette(mat.$red-palette);
|
$openvidu-components-warn: mat.define-palette(mat.$red-palette);
|
||||||
|
|
||||||
// Create the theme object. A theme consists of configurations for individual
|
// Define the theme
|
||||||
// theming systems such as "color" or "typography".
|
$openvidu-components-theme: mat.define-light-theme(
|
||||||
$openvidu-components-theme: mat.define-light-theme((
|
(
|
||||||
color: (
|
color: (
|
||||||
primary: $openvidu-components-primary,
|
primary: $openvidu-components-primary,
|
||||||
accent: $openvidu-components-accent,
|
accent: $openvidu-components-accent,
|
||||||
warn: $openvidu-components-warn,
|
warn: $openvidu-components-warn
|
||||||
)
|
)
|
||||||
));
|
)
|
||||||
|
);
|
||||||
|
|
||||||
// Include theme styles for core and each component used in your app.
|
// Include the non-legacy themes for the components
|
||||||
// Alternatively, you can import and @include the theme mixins for each component
|
|
||||||
// that you are using.
|
|
||||||
@include mat.all-component-themes($openvidu-components-theme);
|
@include mat.all-component-themes($openvidu-components-theme);
|
||||||
|
|
||||||
|
// If you have custom typography configurations, include them as well
|
||||||
|
@include mat.all-component-typographies($openvidu-components-theme);
|
||||||
|
|
||||||
|
// If you need to adjust density, include it as well
|
||||||
|
// @include mat.all-component-density-styles($openvidu-components-theme);
|
||||||
|
|
||||||
// Custom openvidu-components styles
|
// Custom openvidu-components styles
|
||||||
:root {
|
:root {
|
||||||
--ov-primary-color: #303030;
|
--ov-primary-color: #303030;
|
||||||
--ov-secondary-color: #3e3f3f;
|
--ov-secondary-color: #3e3f3f;
|
||||||
--ov-tertiary-color: #598eff;
|
--ov-tertiary-color: #598eff;
|
||||||
--ov-warn-color: #EB5144;
|
--ov-warn-color: #eb5144;
|
||||||
--ov-accent-color: #ffae35;
|
--ov-accent-color: #ffae35;
|
||||||
--ov-light-color: #e6e6e6;
|
--ov-light-color: #e6e6e6;
|
||||||
|
|
||||||
--ov-logo-background-color: #3a3d3d;
|
--ov-logo-background-color: #3a3d3d;
|
||||||
--ov-text-color: #ffffff;
|
--ov-text-color: #ffffff;
|
||||||
|
|
||||||
--ov-panel-text-color: #1d1d1d;
|
--ov-panel-text-color: #1d1d1d;
|
||||||
--ov-panel-background: #ffffff;
|
--ov-panel-background: #ffffff;
|
||||||
|
|
||||||
--ov-buttons-radius: 50%;
|
--ov-buttons-radius: 50%;
|
||||||
--ov-leave-button-radius: 10px;
|
--ov-leave-button-radius: 10px;
|
||||||
--ov-video-radius: 5px;
|
--ov-video-radius: 5px;
|
||||||
--ov-panel-radius: 5px;
|
--ov-panel-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
|
||||||
html, body { height: 100%; overflow: hidden;}
|
html,
|
||||||
body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;}
|
body {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.toolbar img {
|
.toolbar img {
|
||||||
margin: 0 16px;
|
margin: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar #twitter-logo {
|
.toolbar #twitter-logo {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin: 0 16px;
|
margin: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar #twitter-logo:hover {
|
.toolbar #twitter-logo:hover {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button {
|
.back-button {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 70px;
|
top: 70px;
|
||||||
svg {
|
svg {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button a {
|
.back-button a {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,8 +10,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"src/main.ts",
|
"src/main.ts"
|
||||||
"src/polyfills.ts"
|
|
||||||
],
|
],
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*.d.ts"
|
"src/**/*.d.ts"
|
||||||
|
|
|
@ -8,8 +8,7 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"src/test.ts",
|
"src/test.ts"
|
||||||
"src/polyfills.ts"
|
|
||||||
],
|
],
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*.spec.ts",
|
"src/**/*.spec.ts",
|
||||||
|
|
Loading…
Reference in New Issue