96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
import { Component, OnDestroy, OnInit } from '@angular/core';
|
|
import { io, Socket } from "socket.io-client";
|
|
import { EventService } from "./services/event.service";
|
|
import {EventStateChanged, ServerEvent, VersusBeginEvent} from "../types/server-event";
|
|
import { ApiService } from "./services/api.service";
|
|
import { ActivatedRoute, Router } from "@angular/router";
|
|
import { filter, map, takeUntil } from "rxjs/operators";
|
|
import { ToastService } from "./toast.service";
|
|
import { VoiceService } from "./services/voice.service";
|
|
import {delay, delayWhen, Subject} from "rxjs";
|
|
import { getAudioPath } from "./helper/tts.helper";
|
|
import {animate, keyframes, style, transition, trigger} from "@angular/animations";
|
|
import {environment} from "../environments/environment";
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
templateUrl: './app.component.html',
|
|
styleUrls: ['./app.component.scss'],
|
|
animations: [
|
|
trigger(
|
|
'enterAnimation', [
|
|
transition(':enter', [
|
|
style({transform: 'translateX(100%)', opacity: 0}),
|
|
animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
|
|
]),
|
|
transition(':leave', [
|
|
style({transform: 'translateX(0)', opacity: 1}),
|
|
animate('2000ms', style({transform: 'translateX(100%)', opacity: 0}))
|
|
])
|
|
]
|
|
)]
|
|
})
|
|
export class AppComponent implements OnInit, OnDestroy {
|
|
title = 'thanksgiving';
|
|
connection = io(environment.WEBSOCK_URL, { transports: ['websocket']});
|
|
destroyed = new Subject<void>();
|
|
versusData: VersusBeginEvent|null = null;
|
|
audioSrc: string;
|
|
|
|
constructor(
|
|
private eventService: EventService,
|
|
private apiService: ApiService,
|
|
private router: Router,
|
|
private toastService: ToastService,
|
|
private voiceService: VoiceService,
|
|
private routeSnapshot: ActivatedRoute) {
|
|
}
|
|
|
|
|
|
ngOnInit(): void {
|
|
this.connection.on('events', (data: ServerEvent<any>) => {
|
|
console.log(`event:`);
|
|
console.log(data);
|
|
this.eventService.emit(data);
|
|
});
|
|
this.apiService.getAppState('main').pipe(takeUntil(this.destroyed),delay(300)).subscribe((result) => {
|
|
if(this.router.url.indexOf('admin') === -1 || window.location.href.indexOf('admin') === -1) {
|
|
this.router.navigate([`/${result.value}`]).then(() => {
|
|
console.log(`navigated to ${result.value}`);
|
|
})
|
|
}
|
|
});
|
|
this.eventService.stateChangedEvent.pipe(
|
|
map(e => e.data),
|
|
).subscribe(result => {
|
|
this.router.navigate([`${result.value}`])
|
|
})
|
|
this.eventService.notificationEvent.subscribe((event) => {
|
|
this.toastService.showToast(event.data.text, event.data.timeout);
|
|
});
|
|
this.voiceService.voiceSubject.pipe(takeUntil(this.destroyed)).subscribe((text) => {
|
|
console.log(text);
|
|
this.audioSrc = text;
|
|
})
|
|
this.setupVersusHandler();
|
|
}
|
|
ngOnDestroy() {
|
|
this.destroyed.complete();
|
|
}
|
|
|
|
onAudioEnded() {
|
|
this.voiceService.audioEnded();
|
|
}
|
|
|
|
private setupVersusHandler() {
|
|
this.eventService.versusBegin.pipe(takeUntil(this.destroyed)).subscribe(r => {
|
|
if (this.router.url.indexOf('admin') === -1) {
|
|
this.versusData = r.data;
|
|
}
|
|
})
|
|
this.eventService.versusEnd.pipe(takeUntil(this.destroyed)).subscribe((r) => {
|
|
console.log(r);
|
|
this.versusData = null;
|
|
})
|
|
}
|
|
}
|