AltitudeWeb/frontend/src/app/pages/altitude/chat/chat.component.ts

import {AfterViewInit, Component, inject, OnDestroy, OnInit, signal} from '@angular/core';
import {Subscription} from 'rxjs';
import {ChatService} from '@pages/altitude/chat/service/chat.service';
import {HeaderComponent} from '@header/header.component';
import {MiniMessageInteractionService} from '@pages/altitude/chat/mini-message/mini-message-interaction.service';
import {FullSizeComponent} from '@shared-components/full-size/full-size.component';
import {ChatBoxComponent} from '@pages/altitude/chat/components/chat/chat-box.component';
import {ServerListComponent} from '@pages/altitude/chat/components/server-list/server-list.component';
import {ChatInfoComponent} from '@pages/altitude/chat/components/chat-info/chat-info.component';

@Component({
  selector: 'app-chat',
  imports: [
    HeaderComponent,
    FullSizeComponent,
    ChatBoxComponent,
    ServerListComponent,
    ChatInfoComponent
  ],
  templateUrl: './chat.component.html',
  styleUrl: './chat.component.scss',
  providers: [MiniMessageInteractionService]
})
export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
  private sub?: Subscription;
  private readonly chatService: ChatService = inject(ChatService)
  protected readonly messages = this.chatService.messages;
  protected readonly servers = this.chatService.servers;
  protected readonly selectedServer = this.chatService.selectedServer;
  protected readonly showFullscreenPrompt = signal(true);

  constructor(private interaction: MiniMessageInteractionService) {
    interaction.clicks$.subscribe(({action, value}) => {
      if (action === 'run_command') {
        alert(value);
      }
    });
  }

  public onSelectedServerChange(server: string) {
    this.chatService.selectServer(server);
  }

  protected enterFullscreen(): void {
    this.showFullscreenPrompt.set(false);

    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().catch(() => {
        // Ignore fullscreen request failures.
      });
    }
  }

  protected skipFullscreen(): void {
    this.showFullscreenPrompt.set(false);
  }


  ngOnInit(): void {
    this.chatService.connect();
  }

  ngAfterViewInit(): void {
    document.documentElement.requestFullscreen().catch(() => {
      console.error('Failed to enter fullscreen');
    });
  }

  ngOnDestroy(): void {
    this.sub?.unsubscribe();
    this.chatService.disconnect();

    if (document.fullscreenElement) {
      document.exitFullscreen().catch(() => {
        console.error('Failed to exit fullscreen');
      });
    }
  }
}