Compare commits
No commits in common. "660fd4eb9cd7069a0cd3242325cee8e0540b5f35" and "ce6f59b5439723d018951d975b42adfda0525614" have entirely different histories.
660fd4eb9c
...
ce6f59b543
|
|
@ -6,20 +6,6 @@
|
||||||
</div>
|
</div>
|
||||||
</app-header>
|
</app-header>
|
||||||
|
|
||||||
@if (showFullscreenPrompt()) {
|
|
||||||
<div class="fullscreen-prompt-backdrop">
|
|
||||||
<div class="fullscreen-prompt">
|
|
||||||
<h2>Enter fullscreen?</h2>
|
|
||||||
<p>Would you like to view chat in fullscreen mode?</p>
|
|
||||||
|
|
||||||
<div class="fullscreen-prompt-actions">
|
|
||||||
<button type="button" class="secondary" (click)="skipFullscreen()">No thanks</button>
|
|
||||||
<button type="button" (click)="enterFullscreen()">Go fullscreen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<app-full-size [hideFooter]="true">
|
<app-full-size [hideFooter]="true">
|
||||||
<section class="darkmodeSection full-height">
|
<section class="darkmodeSection full-height">
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,3 @@
|
||||||
.fullscreen-prompt-backdrop {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 10000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
background: rgb(0 0 0 / 70%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullscreen-prompt {
|
|
||||||
width: min(420px, 100%);
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 14px;
|
|
||||||
background: #1f1f1f;
|
|
||||||
color: #ffffff;
|
|
||||||
box-shadow: 0 20px 60px rgb(0 0 0 / 45%);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 0 22px;
|
|
||||||
color: rgb(255 255 255 / 75%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullscreen-prompt-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #4f8cff;
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
&.secondary {
|
|
||||||
background: rgb(255 255 255 / 14%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-layout {
|
.page-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import {AfterViewInit, Component, inject, OnDestroy, OnInit, signal} from '@angular/core';
|
import {Component, inject, OnDestroy, OnInit} from '@angular/core';
|
||||||
import {Subscription} from 'rxjs';
|
import {Subscription} from 'rxjs';
|
||||||
import {ChatService} from '@pages/altitude/chat/service/chat.service';
|
import {ChatService} from '@pages/altitude/chat/service/chat.service';
|
||||||
import {HeaderComponent} from '@header/header.component';
|
import {HeaderComponent} from '@header/header.component';
|
||||||
|
|
@ -7,7 +7,6 @@ import {FullSizeComponent} from '@shared-components/full-size/full-size.componen
|
||||||
import {ChatBoxComponent} from '@pages/altitude/chat/components/chat/chat-box.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 {ServerListComponent} from '@pages/altitude/chat/components/server-list/server-list.component';
|
||||||
import {ChatInfoComponent} from '@pages/altitude/chat/components/chat-info/chat-info.component';
|
import {ChatInfoComponent} from '@pages/altitude/chat/components/chat-info/chat-info.component';
|
||||||
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-chat',
|
selector: 'app-chat',
|
||||||
|
|
@ -22,66 +21,31 @@ import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
|
||||||
styleUrl: './chat.component.scss',
|
styleUrl: './chat.component.scss',
|
||||||
providers: [MiniMessageInteractionService]
|
providers: [MiniMessageInteractionService]
|
||||||
})
|
})
|
||||||
export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
|
export class ChatComponent implements OnInit, OnDestroy {
|
||||||
private sub?: Subscription;
|
private sub?: Subscription;
|
||||||
private readonly chatService: ChatService = inject(ChatService)
|
private readonly chatService: ChatService = inject(ChatService)
|
||||||
protected readonly messages = this.chatService.messages;
|
protected readonly messages = this.chatService.messages;
|
||||||
protected readonly servers = this.chatService.servers;
|
protected readonly servers = this.chatService.servers;
|
||||||
protected readonly selectedServer = this.chatService.selectedServer;
|
protected readonly selectedServer = this.chatService.selectedServer;
|
||||||
protected readonly showFullscreenPrompt = signal(false);
|
|
||||||
protected readonly isMobile = signal(false);
|
|
||||||
|
|
||||||
constructor(private interaction: MiniMessageInteractionService, private breakpointObserver: BreakpointObserver) {
|
constructor(private interaction: MiniMessageInteractionService) {
|
||||||
interaction.clicks$.subscribe(({action, value}) => {
|
interaction.clicks$.subscribe(({action, value}) => {
|
||||||
if (action === 'run_command') {
|
if (action === 'run_command') {
|
||||||
alert(value);
|
alert(value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.breakpointObserver
|
|
||||||
.observe([Breakpoints.Handset])
|
|
||||||
.subscribe(result => {
|
|
||||||
this.isMobile.set(result.matches);
|
|
||||||
this.showFullscreenPrompt.set(this.isMobile());
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public onSelectedServerChange(server: string) {
|
public onSelectedServerChange(server: string) {
|
||||||
this.chatService.selectServer(server);
|
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 {
|
ngOnInit(): void {
|
||||||
this.chatService.connect();
|
this.chatService.connect();
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit(): void {
|
|
||||||
document.documentElement.requestFullscreen().catch(() => {
|
|
||||||
console.error('Failed to enter fullscreen');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
this.sub?.unsubscribe();
|
this.sub?.unsubscribe();
|
||||||
this.chatService.disconnect();
|
this.chatService.disconnect(); // triggers onCompletion server-side, cleans up the emitter
|
||||||
|
|
||||||
if (document.fullscreenElement) {
|
|
||||||
document.exitFullscreen().catch(() => {
|
|
||||||
console.error('Failed to exit fullscreen');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user