frontend: Add version, logo and background image to ContextService and refactor code
This commit is contained in:
juancarmore
parent
d1d3a1d96d
commit
b5b39ac560
@ -11,6 +11,9 @@ export interface ContextData {
|
||||
edition: Edition;
|
||||
leaveRedirectUrl: string;
|
||||
parentDomain: string;
|
||||
version: string;
|
||||
openviduLogoUrl: string;
|
||||
backgroundImageUrl: string;
|
||||
}
|
||||
|
||||
export enum ApplicationMode {
|
||||
|
||||
@ -1,171 +1,150 @@
|
||||
<div class="section1">
|
||||
<mat-toolbar id="header">
|
||||
@if (isUserLogged) {
|
||||
<div id="logout-content">
|
||||
<span>Hi {{ username }}, do you want to logout?</span>
|
||||
<button matTooltip="Logout" mat-icon-button id="logout-btn" (click)="logout()">
|
||||
<mat-icon>logout</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</mat-toolbar>
|
||||
<div class="openvidu-slogan-container">
|
||||
<a href="https://openvidu.io/" target="_blank">
|
||||
<img id="form-img" src="assets/images/openvidu_logo.png" />
|
||||
</a>
|
||||
<h4 id="slogan-text">Videoconference rooms in one click</h4>
|
||||
</div>
|
||||
@if (!loading) {
|
||||
<div class="form-container">
|
||||
<div class="grid">
|
||||
@if (isPrivateAccess && !isUserLogged) {
|
||||
<form
|
||||
[formGroup]="loginForm"
|
||||
novalidate
|
||||
(ngSubmit)="login()"
|
||||
id="form-login"
|
||||
class="form login"
|
||||
>
|
||||
<div class="form-field" id="login-username">
|
||||
<label for="login-username" [ngClass]="{ error: loginError }">
|
||||
<mat-icon matTooltip="Username">person</mat-icon>
|
||||
<span class="hidden">Username</span>
|
||||
</label>
|
||||
<input
|
||||
formControlName="username"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
name="username"
|
||||
class="form-input"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field" id="login-password">
|
||||
<label for="login-password" [ngClass]="{ error: loginError }">
|
||||
<mat-icon matTooltip="Password">lock</mat-icon>
|
||||
<span class="hidden">Password</span>
|
||||
</label>
|
||||
<input
|
||||
formControlName="password"
|
||||
type="password"
|
||||
name="password"
|
||||
class="form-input"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
@if (loginError) {
|
||||
<div class="roomError" id="login-error">Authentication failed. Try again.</div>
|
||||
}
|
||||
<div class="form-field">
|
||||
<button
|
||||
mat-button
|
||||
id="join-btn"
|
||||
type="submit"
|
||||
[disabled]="loginForm.invalid"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
@if (serverConnectionError) {
|
||||
<div class="roomError" id="serverConnectionError">
|
||||
<mat-icon>error</mat-icon>
|
||||
<span>Server connection failed!</span>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
}
|
||||
@if (isUserLogged || !isPrivateAccess) {
|
||||
<form
|
||||
[formGroup]="roomForm"
|
||||
novalidate
|
||||
(ngSubmit)="goToVideoRoom()"
|
||||
id="form-room"
|
||||
class="form login"
|
||||
>
|
||||
<div class="form-field">
|
||||
<label for="room-name-input" [ngClass]="{ error: roomForm.get('roomNamePrefix')?.invalid }">
|
||||
<mat-icon matTooltip="Room name">video_camera_front</mat-icon>
|
||||
<span class="hidden">Room Name</span></label
|
||||
>
|
||||
<input
|
||||
formControlName="roomNamePrefix"
|
||||
autocomplete="off"
|
||||
id="room-name-input"
|
||||
type="text"
|
||||
name="roomNamePrefix"
|
||||
class="form-input"
|
||||
placeholder="Room Name"
|
||||
(keydown)="keyDown($event)"
|
||||
/>
|
||||
@if (roomForm.get('roomNamePrefix')?.value) {
|
||||
<button matSuffix mat-icon-button aria-label="Clear" id="clear-room-name-btn" (click)="clearRoomName()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
matTooltip="Generate room name prefix"
|
||||
mat-icon-button
|
||||
id="room-name-generator-btn"
|
||||
(click)="generateRoomName($event)"
|
||||
>
|
||||
<mat-icon>cached</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
@if (roomForm.get('roomNamePrefix')?.hasError('required')) {
|
||||
<div
|
||||
class="roomError"
|
||||
id="requiredNameError"
|
||||
>
|
||||
Room name is required
|
||||
</div>
|
||||
}
|
||||
@if (roomForm.get('roomNamePrefix')?.hasError('minlength')) {
|
||||
<div class="roomError" id="shortNameError">
|
||||
Room name is too short!
|
||||
</div>
|
||||
}
|
||||
<div class="form-field">
|
||||
<button
|
||||
mat-button
|
||||
id="join-btn"
|
||||
type="submit"
|
||||
[disabled]="roomForm.invalid"
|
||||
>
|
||||
JOIN
|
||||
</button>
|
||||
</div>
|
||||
@if (serverConnectionError) {
|
||||
<div class="roomError" id="serverConnectionError">
|
||||
<mat-icon>error</mat-icon>
|
||||
<span>Server connection failed!</span>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="section1" [style]="{ '--background-image-url': 'url(' + backgroundImageUrl + ')' }">
|
||||
<mat-toolbar id="header">
|
||||
@if (isUserLogged) {
|
||||
<div id="logout-content">
|
||||
<span>Hi {{ username }}, do you want to logout?</span>
|
||||
<button matTooltip="Logout" mat-icon-button id="logout-btn" (click)="logout()">
|
||||
<mat-icon>logout</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</mat-toolbar>
|
||||
<div class="openvidu-slogan-container">
|
||||
<a href="https://openvidu.io/" target="_blank">
|
||||
<img id="form-img" [src]="openviduLogoUrl" />
|
||||
</a>
|
||||
<h4 id="slogan-text">Videoconference rooms in one click</h4>
|
||||
</div>
|
||||
@if (!loading) {
|
||||
<div class="form-container">
|
||||
<div class="grid">
|
||||
@if (isPrivateAccess && !isUserLogged) {
|
||||
<form [formGroup]="loginForm" novalidate (ngSubmit)="login()" id="form-login" class="form login">
|
||||
<div class="form-field" id="login-username">
|
||||
<label for="login-username" [ngClass]="{ error: loginError }">
|
||||
<mat-icon matTooltip="Username">person</mat-icon>
|
||||
<span class="hidden">Username</span>
|
||||
</label>
|
||||
<input
|
||||
formControlName="username"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
name="username"
|
||||
class="form-input"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field" id="login-password">
|
||||
<label for="login-password" [ngClass]="{ error: loginError }">
|
||||
<mat-icon matTooltip="Password">lock</mat-icon>
|
||||
<span class="hidden">Password</span>
|
||||
</label>
|
||||
<input
|
||||
formControlName="password"
|
||||
type="password"
|
||||
name="password"
|
||||
class="form-input"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
@if (loginError) {
|
||||
<div class="roomError" id="login-error">Authentication failed. Try again.</div>
|
||||
}
|
||||
<div class="form-field">
|
||||
<button mat-button id="join-btn" type="submit" [disabled]="loginForm.invalid">Login</button>
|
||||
</div>
|
||||
@if (serverConnectionError) {
|
||||
<div class="roomError" id="serverConnectionError">
|
||||
<mat-icon>error</mat-icon>
|
||||
<span>Server connection failed!</span>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
}
|
||||
@if (isUserLogged || !isPrivateAccess) {
|
||||
<form
|
||||
[formGroup]="roomForm"
|
||||
novalidate
|
||||
(ngSubmit)="goToVideoRoom()"
|
||||
id="form-room"
|
||||
class="form login"
|
||||
>
|
||||
<div class="form-field">
|
||||
<label for="room-name-input" [ngClass]="{ error: roomForm.get('roomNamePrefix')?.invalid }">
|
||||
<mat-icon matTooltip="Room name">video_camera_front</mat-icon>
|
||||
<span class="hidden">Room Name</span></label
|
||||
>
|
||||
<input
|
||||
formControlName="roomNamePrefix"
|
||||
autocomplete="off"
|
||||
id="room-name-input"
|
||||
type="text"
|
||||
name="roomNamePrefix"
|
||||
class="form-input"
|
||||
placeholder="Room Name"
|
||||
(keydown)="keyDown($event)"
|
||||
/>
|
||||
@if (roomForm.get('roomNamePrefix')?.value) {
|
||||
<button
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
id="clear-room-name-btn"
|
||||
(click)="clearRoomName()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
matTooltip="Generate room name prefix"
|
||||
mat-icon-button
|
||||
id="room-name-generator-btn"
|
||||
(click)="generateRoomName($event)"
|
||||
>
|
||||
<mat-icon>cached</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
@if (roomForm.get('roomNamePrefix')?.hasError('required')) {
|
||||
<div class="roomError" id="requiredNameError">Room name is required</div>
|
||||
}
|
||||
@if (roomForm.get('roomNamePrefix')?.hasError('minlength')) {
|
||||
<div class="roomError" id="shortNameError">Room name is too short!</div>
|
||||
}
|
||||
<div class="form-field">
|
||||
<button mat-button id="join-btn" type="submit" [disabled]="roomForm.invalid">JOIN</button>
|
||||
</div>
|
||||
@if (serverConnectionError) {
|
||||
<div class="roomError" id="serverConnectionError">
|
||||
<mat-icon>error</mat-icon>
|
||||
<span>Server connection failed!</span>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<mat-toolbar class="footer">
|
||||
<span>
|
||||
Photo by
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://unsplash.com/@danielleone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
|
||||
>
|
||||
Daniel Leone
|
||||
</a>
|
||||
on
|
||||
<a
|
||||
href="https://unsplash.com/s/photos/mountain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
|
||||
target="_blank"
|
||||
>
|
||||
Unsplash
|
||||
</a>
|
||||
</span>
|
||||
<div id="meet-version">
|
||||
<span>{{ version }}</span>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
</div>
|
||||
<mat-toolbar class="footer">
|
||||
<span>
|
||||
Photo by
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://unsplash.com/@danielleone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
|
||||
>
|
||||
Daniel Leone
|
||||
</a>
|
||||
on
|
||||
<a
|
||||
href="https://unsplash.com/s/photos/mountain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
|
||||
target="_blank"
|
||||
>
|
||||
Unsplash
|
||||
</a>
|
||||
</span>
|
||||
<div id="meet-version">
|
||||
<span>{{ version }}</span>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@ $formGap: 0.375rem;
|
||||
.section1 {
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
|
||||
url('/assets/images/bg.webp') top center no-repeat;
|
||||
var(--background-image-url) top center no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
@ -14,10 +14,9 @@ import { NgClass } from '@angular/common';
|
||||
import { MatToolbar } from '@angular/material/toolbar';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { HttpService } from '../../services/http/http.service';
|
||||
import { ContextService, HttpService } from '../../services/index';
|
||||
import { OpenViduMeetRoom, OpenViduMeetRoomOptions } from '../../typings/ce/room';
|
||||
import { animals, colors, Config, uniqueNamesGenerator } from 'unique-names-generator';
|
||||
import packageInfo from '../../../../../../package.json';
|
||||
|
||||
@Component({
|
||||
selector: 'app-room-creator',
|
||||
@ -27,9 +26,12 @@ import packageInfo from '../../../../../../package.json';
|
||||
imports: [MatToolbar, MatIconButton, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, NgClass, MatButton]
|
||||
})
|
||||
export class RoomCreatorComponent implements OnInit, OnDestroy {
|
||||
version = '';
|
||||
openviduLogoUrl = '';
|
||||
backgroundImageUrl = '';
|
||||
|
||||
roomForm: FormGroup;
|
||||
loginForm: FormGroup;
|
||||
version = '';
|
||||
isPrivateAccess = false;
|
||||
username = '';
|
||||
loginError = false;
|
||||
@ -44,7 +46,8 @@ export class RoomCreatorComponent implements OnInit, OnDestroy {
|
||||
private httpService: HttpService,
|
||||
// private callService: ConfigService,
|
||||
private fb: FormBuilder,
|
||||
private route: ActivatedRoute
|
||||
private route: ActivatedRoute,
|
||||
private contextService: ContextService
|
||||
) {
|
||||
this.loginForm = this.fb.group({
|
||||
username: [
|
||||
@ -60,7 +63,9 @@ export class RoomCreatorComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this.version = packageInfo.version;
|
||||
this.version = this.contextService.getVersion();
|
||||
this.openviduLogoUrl = this.contextService.getOpenViduLogoUrl();
|
||||
this.backgroundImageUrl = this.contextService.getBackgroundImageUrl();
|
||||
this.subscribeToQueryParams();
|
||||
|
||||
try {
|
||||
|
||||
@ -26,7 +26,10 @@ export class ContextService {
|
||||
mode: ApplicationMode.STANDALONE,
|
||||
edition: Edition.CE,
|
||||
leaveRedirectUrl: '',
|
||||
parentDomain: ''
|
||||
parentDomain: '',
|
||||
version: '',
|
||||
openviduLogoUrl: '',
|
||||
backgroundImageUrl: ''
|
||||
};
|
||||
|
||||
private log;
|
||||
@ -38,6 +41,30 @@ export class ContextService {
|
||||
this.log = this.loggerService.get('OpenVidu Meet - ContextService');
|
||||
}
|
||||
|
||||
setVersion(version: string): void {
|
||||
this.context.version = version;
|
||||
}
|
||||
|
||||
getVersion(): string {
|
||||
return this.context.version;
|
||||
}
|
||||
|
||||
setOpenViduLogoUrl(openviduLogoUrl: string): void {
|
||||
this.context.openviduLogoUrl = openviduLogoUrl;
|
||||
}
|
||||
|
||||
getOpenViduLogoUrl(): string {
|
||||
return this.context.openviduLogoUrl;
|
||||
}
|
||||
|
||||
setBackgroundImageUrl(backgroundImageUrl: string): void {
|
||||
this.context.backgroundImageUrl = backgroundImageUrl;
|
||||
}
|
||||
|
||||
getBackgroundImageUrl(): string {
|
||||
return this.context.backgroundImageUrl;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the application mode.
|
||||
* @param mode - An ApplicationMode value representing the application mode.
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { ContextService } from 'shared-meet-components';
|
||||
import packageInfo from '../../package.json';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
@ -8,6 +10,12 @@ import { RouterOutlet } from '@angular/router';
|
||||
standalone: true,
|
||||
imports: [RouterOutlet]
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'OpenVidu Meet';
|
||||
export class AppComponent implements OnInit {
|
||||
constructor(private contextService: ContextService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.contextService.setVersion(packageInfo.version);
|
||||
this.contextService.setOpenViduLogoUrl('assets/images/openvidu_logo.png');
|
||||
this.contextService.setBackgroundImageUrl('/assets/images/bg.webp');
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user