Many new functionalities

client/src/app/chat-page.component.ts

@@ -1,16 +1,17 @@
 import { CommonModule } from '@angular/common';
-import { Component, computed, effect, inject } from '@angular/core';
+import { Component, computed, effect, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
+import { PeerVideoModalComponent } from './peer-video-modal.component';
 import { ChatSessionService } from './chat-session.service';
 import { JsonFileViewerComponent } from './json-file-viewer.component';
-import type { ChatEntry, ConnectionState } from './models';
+import type { ChatEntry, ConnectionState, PeerSummary } from './models';
 
 @Component({
   selector: 'app-chat-page',
-  imports: [CommonModule, FormsModule, RouterLink, JsonFileViewerComponent],
+  imports: [CommonModule, FormsModule, RouterLink, JsonFileViewerComponent, PeerVideoModalComponent],
   templateUrl: './chat-page.component.html',
   styleUrl: './chat-page.component.scss',
 })
@@ -20,8 +21,22 @@ export class ChatPageComponent {
   private readonly routeParamMap = toSignal(this.route.paramMap, {
     initialValue: this.route.snapshot.paramMap,
   });
+  private composerSelectionStart = 0;
+  private composerSelectionEnd = 0;
 
   messageText = '';
+  readonly forwardingEntryId = signal<string | null>(null);
+  readonly emojiPickerOpen = signal(false);
+  readonly emojiOptions = [
+    '😀', '😁', '😂', '🤣', '😊',
+    '😉', '😍', '😘', '😎', '🤔',
+    '😅', '😭', '😡', '😴', '🙃',
+    '👍', '👎', '👏', '🙏', '🤝',
+    '🎉', '🔥', '❤️', '💡', '✅',
+    '🚀', '👀', '📹', '📎', '💬',
+    '🌍', '⚡', '⭐', '🎵', '📷',
+    '🗑️', '⏩', '🛑', '🙌', '👌',
+  ];
   readonly peerId = computed(() => this.routeParamMap().get('peerId') ?? '');
   readonly peer = computed(() => this.session.peers().find((item) => item.id === this.peerId()) ?? null);
   readonly currentUser = computed(() => this.session.currentUser());
@@ -30,6 +45,10 @@ export class ChatPageComponent {
       .messages()
       .filter((entry) => entry.peerId === this.peerId()),
   );
+  readonly remoteVideoStream = computed(() => this.session.remoteVideoStreamForPeer(this.peerId()));
+  readonly remoteVideoModalVisible = computed(
+    () => this.session.remoteVideoModalPeerId() === this.peerId() && !!this.remoteVideoStream(),
+  );
   readonly webRtcState = computed<ConnectionState>(() => {
     const selectedPeer = this.peer();
 
@@ -85,6 +104,19 @@ export class ChatPageComponent {
 
     await this.session.sendText(peerId, this.messageText);
     this.messageText = '';
+    this.emojiPickerOpen.set(false);
+    this.composerSelectionStart = 0;
+    this.composerSelectionEnd = 0;
+  }
+
+  async requestGeneratedImage(): Promise<void> {
+    const peerId = this.peerId();
+
+    if (!peerId) {
+      return;
+    }
+
+    await this.session.requestGeneratedImage(peerId, this.messageText);
   }
 
   handleComposerEnter(event: Event): void {
@@ -106,6 +138,37 @@ export class ChatPageComponent {
     this.session.notifyTypingActivity(peerId, text);
   }
 
+  trackComposerSelection(textarea: HTMLTextAreaElement): void {
+    this.composerSelectionStart = textarea.selectionStart ?? this.messageText.length;
+    this.composerSelectionEnd = textarea.selectionEnd ?? this.composerSelectionStart;
+  }
+
+  toggleEmojiPicker(event?: Event): void {
+    event?.stopPropagation();
+    this.emojiPickerOpen.update((open) => !open);
+  }
+
+  insertEmoji(emoji: string, textarea: HTMLTextAreaElement): void {
+    const selectionStart = textarea.selectionStart ?? this.composerSelectionStart;
+    const selectionEnd = textarea.selectionEnd ?? this.composerSelectionEnd;
+    const before = this.messageText.slice(0, selectionStart);
+    const after = this.messageText.slice(selectionEnd);
+
+    this.messageText = `${before}${emoji}${after}`;
+    this.emojiPickerOpen.set(false);
+    this.handleMessageTextChange(this.messageText);
+
+    const nextSelection = selectionStart + emoji.length;
+    this.composerSelectionStart = nextSelection;
+    this.composerSelectionEnd = nextSelection;
+
+    queueMicrotask(() => {
+      textarea.focus();
+      textarea.setSelectionRange(nextSelection, nextSelection);
+      this.trackComposerSelection(textarea);
+    });
+  }
+
   async sendFile(peerId: string, input: HTMLInputElement): Promise<void> {
     const file = input.files?.item(0);
 
@@ -126,10 +189,64 @@ export class ChatPageComponent {
     await this.session.deleteConversation(peerId);
   }
 
+  toggleForwardMenu(entry: ChatEntry, event?: Event): void {
+    event?.stopPropagation();
+
+    if (entry.kind === 'system' || entry.direction === 'system' || this.forwardTargets(entry).length === 0) {
+      this.forwardingEntryId.set(null);
+      return;
+    }
+
+    this.forwardingEntryId.update((currentEntryId) => (currentEntryId === entry.id ? null : entry.id));
+  }
+
+  isForwardMenuOpen(entryId: string): boolean {
+    return this.forwardingEntryId() === entryId;
+  }
+
+  forwardTargets(entry: ChatEntry): PeerSummary[] {
+    if (entry.kind === 'system' || entry.direction === 'system') {
+      return [];
+    }
+
+    return this.session.peers().filter((peer) => peer.id !== entry.peerId);
+  }
+
+  async forwardEntry(entry: ChatEntry, targetPeerId: string, select: HTMLSelectElement): Promise<void> {
+    if (!targetPeerId) {
+      return;
+    }
+
+    await this.session.forwardMessage(targetPeerId, entry);
+    select.value = '';
+    this.forwardingEntryId.set(null);
+  }
+
+  async toggleCameraStream(peerId: string): Promise<void> {
+    if (this.session.isStreamingCameraToPeer(peerId)) {
+      await this.session.stopCameraStream(peerId);
+      return;
+    }
+
+    await this.session.startCameraStream(peerId);
+  }
+
   isImageEntry(entry: ChatEntry): boolean {
     return entry.kind === 'file' && !!entry.downloadUrl && (entry.fileMimeType?.startsWith('image/') ?? false);
   }
 
+  isVideoEntry(entry: ChatEntry): boolean {
+    if (entry.kind !== 'file' || !entry.downloadUrl) {
+      return false;
+    }
+
+    if (entry.fileMimeType?.startsWith('video/')) {
+      return true;
+    }
+
+    return /\.(mp4|webm|ogg|ogv|mov|m4v)$/i.test(entry.fileName ?? '');
+  }
+
   isIncomingJsonFileEntry(entry: ChatEntry): boolean {
     return (
       entry.kind === 'file' &&
@@ -160,11 +277,29 @@ export class ChatPageComponent {
     return this.indicatorTone(this.webRtcState()) === 'offline';
   }
 
+  isStreamingCameraToSelectedPeer(): boolean {
+    const peerId = this.peerId();
+
+    return !!peerId && this.session.isStreamingCameraToPeer(peerId);
+  }
+
+  closeRemoteVideoModal(): void {
+    const peerId = this.peerId();
+
+    if (!peerId) {
+      return;
+    }
+
+    this.session.dismissRemoteVideoModal(peerId);
+  }
+
   async switchPeer(peerId: string): Promise<void> {
     if (!peerId || peerId === this.peerId()) {
       return;
     }
 
+    this.forwardingEntryId.set(null);
+    this.emojiPickerOpen.set(false);
     this.session.selectPeer(peerId);
     await this.router.navigate(['/chat', peerId]);
   }