frontend: implement room form with code from old RoomCreatorComponent
This commit is contained in:
juancarmore
parent
56f0f05d5f
commit
76178a9b7f
@ -1 +1,37 @@
|
||||
<p>room-form works!</p>
|
||||
<div class="form-container">
|
||||
<div class="grid">
|
||||
<form [formGroup]="roomForm" novalidate (ngSubmit)="goToVideoRoom()" id="form-room" class="form room-prefix">
|
||||
<div class="form-field">
|
||||
<label for="room-id-input" [ngClass]="{ error: roomForm.get('roomIdPrefix')?.invalid }">
|
||||
<mat-icon matTooltip="Room name prefix">video_camera_front</mat-icon>
|
||||
<span class="hidden">Room ID prefix</span></label
|
||||
>
|
||||
<input
|
||||
formControlName="roomIdPrefix"
|
||||
autocomplete="off"
|
||||
id="room-id-input"
|
||||
type="text"
|
||||
name="roomIdPrefix"
|
||||
class="form-input"
|
||||
placeholder="Room name prefix"
|
||||
/>
|
||||
@if (roomForm.get('roomIdPrefix')?.value) {
|
||||
<button matSuffix mat-icon-button aria-label="Clear" id="clear-room-id-btn" (click)="clearRoomId()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
matTooltip="Generate room ID prefix"
|
||||
mat-icon-button
|
||||
id="room-id-generator-btn"
|
||||
(click)="generateRoomId($event)"
|
||||
>
|
||||
<mat-icon>cached</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<button mat-button id="join-btn" type="submit" [disabled]="roomForm.invalid">JOIN</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,186 @@
|
||||
$formBorderRadius: 0.35rem;
|
||||
$formColor: #e6e6e6;
|
||||
$formError: #770000;
|
||||
$formInputBackgroundColor: #434a52;
|
||||
$formInputHoverBackgroundColor: #3c4249;
|
||||
$formLabelBackgroundColor: #363b41;
|
||||
$formSubmitBackgroundColor: #0087a9;
|
||||
$formSubmitDisabledBackgroundColor: #264b55;
|
||||
|
||||
$formSubmitColor: #eee;
|
||||
$formSubmitDisabledColor: #bdbdbd;
|
||||
|
||||
$formSubmitHoverBackgroundColor: #006a85;
|
||||
$iconFill: #606468;
|
||||
$formGap: 0.375rem;
|
||||
|
||||
.roomError {
|
||||
font-size: 14px;
|
||||
color: $formError;
|
||||
text-shadow: 0.2px 0px #ffffff;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.roomError mat-icon {
|
||||
vertical-align: bottom;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
inline-size: 90%;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 26rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
block-size: 1em;
|
||||
display: inline-block;
|
||||
fill: $iconFill;
|
||||
inline-size: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input {
|
||||
background-image: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: $formGap;
|
||||
}
|
||||
|
||||
.form input[type='password'],
|
||||
.form input[type='text'],
|
||||
.form button[type='submit'] {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.room-prefix {
|
||||
color: $formColor;
|
||||
}
|
||||
|
||||
.room-prefix label.error {
|
||||
background-color: $formError;
|
||||
}
|
||||
.room-prefix label,
|
||||
.room-prefix input[type='text'],
|
||||
.room-prefix input[type='password'] {
|
||||
border-radius: $formBorderRadius;
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
#room-id-input {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.room-prefix button[type='submit'] {
|
||||
border-radius: $formBorderRadius;
|
||||
padding: 0.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.room-prefix button:disabled[type='submit'] {
|
||||
cursor: auto;
|
||||
color: $formSubmitDisabledColor !important;
|
||||
background-color: $formSubmitDisabledBackgroundColor !important;
|
||||
}
|
||||
|
||||
.room-prefix label {
|
||||
background-color: $formLabelBackgroundColor;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-inline: 1.25rem;
|
||||
}
|
||||
|
||||
.room-prefix input[type='password'],
|
||||
.room-prefix input[type='text'] {
|
||||
background-color: $formInputBackgroundColor;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.room-prefix input[type='password']:focus,
|
||||
.room-prefix input[type='password']:hover,
|
||||
.room-prefix input[type='text']:focus,
|
||||
.room-prefix input[type='text']:hover {
|
||||
background-color: $formInputHoverBackgroundColor;
|
||||
}
|
||||
|
||||
.room-prefix button[type='submit'] {
|
||||
background-color: $formSubmitBackgroundColor;
|
||||
color: $formSubmitColor;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.room-prefix button[type='submit']:focus,
|
||||
.room-prefix button[type='submit']:hover {
|
||||
background-color: $formSubmitHoverBackgroundColor;
|
||||
}
|
||||
#clear-room-id-btn {
|
||||
height: auto;
|
||||
background-color: $formInputBackgroundColor;
|
||||
border-radius: 0;
|
||||
color: $formColor;
|
||||
mat-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
#room-id-generator-btn {
|
||||
height: auto;
|
||||
background-color: $formInputBackgroundColor;
|
||||
border-radius: $formBorderRadius;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
color: $formColor;
|
||||
mat-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $formInputHoverBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
.text--center {
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,12 +1,74 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButton, MatIconButton } from '@angular/material/button';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { Router } from '@angular/router';
|
||||
import { HttpService } from '@lib/services';
|
||||
import { MeetRoom, MeetRoomOptions } from '@lib/typings/ce';
|
||||
import { animals, colors, Config, uniqueNamesGenerator } from 'unique-names-generator';
|
||||
|
||||
@Component({
|
||||
selector: 'ov-room-form',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './room-form.component.html',
|
||||
styleUrl: './room-form.component.scss'
|
||||
selector: 'ov-room-form',
|
||||
standalone: true,
|
||||
imports: [MatIconButton, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, CommonModule, MatButton],
|
||||
templateUrl: './room-form.component.html',
|
||||
styleUrl: './room-form.component.scss'
|
||||
})
|
||||
export class RoomFormComponent {
|
||||
roomForm = new FormGroup({
|
||||
roomIdPrefix: new FormControl(this.getRandomName(), [])
|
||||
});
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private httpService: HttpService
|
||||
) {}
|
||||
|
||||
generateRoomId(event: any) {
|
||||
event.preventDefault();
|
||||
this.roomForm.get('roomIdPrefix')?.setValue(this.getRandomName());
|
||||
}
|
||||
|
||||
clearRoomId() {
|
||||
this.roomForm.get('roomIdPrefix')?.setValue('');
|
||||
}
|
||||
|
||||
async goToVideoRoom() {
|
||||
if (!this.roomForm.valid) {
|
||||
console.error('Room name is not valid');
|
||||
return;
|
||||
}
|
||||
|
||||
const roomIdPrefix = this.roomForm.get('roomIdPrefix')?.value!.replace(/ /g, '-');
|
||||
|
||||
try {
|
||||
const MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000; // 24h * 60m * 60s * 1000ms
|
||||
|
||||
const options: MeetRoomOptions = {
|
||||
roomIdPrefix,
|
||||
autoDeletionDate: Date.now() + MILLISECONDS_PER_DAY // Expires 1 day from now
|
||||
};
|
||||
|
||||
const room: MeetRoom = await this.httpService.createRoom(options);
|
||||
|
||||
const accessRoomUrl = new URL(room.moderatorRoomUrl);
|
||||
const secret = accessRoomUrl.searchParams.get('secret');
|
||||
const roomUrl = accessRoomUrl.pathname;
|
||||
|
||||
this.router.navigate([roomUrl], { queryParams: { secret } });
|
||||
} catch (error) {
|
||||
console.error('Error creating room ', error);
|
||||
}
|
||||
}
|
||||
|
||||
private getRandomName(): string {
|
||||
const configName: Config = {
|
||||
dictionaries: [colors, animals],
|
||||
separator: '-',
|
||||
style: 'lowerCase'
|
||||
};
|
||||
return uniqueNamesGenerator(configName).replace(/[^\w-]/g, '');
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user