frontend-tutorial-framework/src/app/messages/messages.component.ts

// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
// All Rights Reserved. See LICENSE file for details.

import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core';
import { MarkdownService } from '../services/markdown.service';
import { WebSocketService } from '../services/websocket.service';

import { MessagesMessage } from '../message-types/messages-message';
import { MessagesControlCommand } from '../message-types/messages-control-command';
import { config } from '../config';
import { CommandMessage } from '../message-types/command-message';
import { MessageQueueMessage } from '../message-types/message-queue-message';
import { Subject, Observer, BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.scss']
})
export class MessagesComponent implements OnInit {
  @Output() newMessageEvent: EventEmitter<any> = new EventEmitter();
  newMessage: Subject<MessagesMessage> = new Subject<MessagesMessage>();
  messageInQueue = true;

  messages: MessagesMessage[] = [];
  messageQueueAttender: MessageQueueAttender;
  showNextButton: boolean = config.messages.showNextButton;

  command_handlers = {
    'showNextButton': this.showButtonHandler.bind(this)
  };

  constructor(
    private markdownService: MarkdownService,
    private websocketService: WebSocketService,
    private changeDetectorRef: ChangeDetectorRef
  ) {
    this.messageQueueAttender = new MessageQueueAttender(this.newMessage);
  }

  ngOnInit() {
    this.newMessage.subscribe(
      (message) => {
        this.writeMessage(message);
        this.newMessageEvent.emit();
    });
    this.messageQueueAttender.messageInQueue.subscribe(
      (value) => this.messageInQueue = value
    );

    this.websocketService.connect();
    this.websocketService.observeKey<MessagesMessage>('message').subscribe(
      (event) => this.newMessage.next(event.data)
    );
    this.websocketService.observeKey<MessageQueueMessage>('queueMessages').subscribe(
      (event) => this.handleQueueMessage(event.data)
    );
    this.websocketService.observeKey<CommandMessage>('messagecontrol').subscribe(
      (event) => this.command_handlers[event.data.command](event.data)
    );
  }

  writeMessage(message: MessagesMessage) {
    this.transformMessage(message);
    this.messages.push(message);
    this.changeDetectorRef.detectChanges();
  }

  transformMessage(message: MessagesMessage) {
    message.message = this.convertMarkdownToHTML(message.message);
    if (!message.timestamp) {
      message.timestamp = new Date();
    }
  }

  handleQueueMessage(data: MessageQueueMessage) {
    this.messageQueueAttender.queueMessages(data.messages);
  }

  convertMarkdownToHTML(text: string) {
    return this.markdownService.convertToHtml(text);
  }

  showButtonHandler(data: MessagesControlCommand) {
    this.showNextButton = data.value;
  }

  stepFSM() {
    this.websocketService.sendJSON({key: '', trigger: 'step_next'});
  }
}


class MessageQueueAttender {
  public messageInQueue = new BehaviorSubject<boolean>(false);

  private readonly charPerSecond: number;
  private lastMessageLength = 0;
  private queue: MessagesMessage[] = [];

  constructor(private messageEmitter: Observer<MessagesMessage>, wordPerMinute: number = config.messages.messageQueueWPM) {
    const charPerMinute = wordPerMinute * 5;
    this.charPerSecond = charPerMinute / 60;
  }

  queueMessages(messages: Array<MessagesMessage>) {
    this.queue = this.queue.concat(messages);
    this.attendQueue();
  }

  private processMessage() {
    if (this.queue.length > 0) {
      const lastMessage = this.queue.shift();
      this.lastMessageLength = lastMessage.message.length;
      this.messageEmitter.next(lastMessage);
    }
    if (this.queue.length === 0) {
      this.lastMessageLength = 0;
      this.messageInQueue.next(false);
    }
  }

  private attendQueue() {
    if (this.queue.length > 0) {
      this.messageInQueue.next(true);
      const timeoutSeconds = this.lastMessageLength / this.charPerSecond;
      setTimeout(
        () => {
          this.processMessage();
          this.attendQueue();
        },
        timeoutSeconds * 1000
      );
    }
  }
}