feat: Add deafen to pc, fix mobiel view, fix freeze on startup

toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.ts

@@ -34,12 +34,15 @@ import { ChatMessageComposerComponent } from './components/message-composer/chat
 import { KlipyGifPickerComponent } from '../klipy-gif-picker/klipy-gif-picker.component';
 import { ChatMessageListComponent } from './components/message-list/chat-message-list.component';
 import { ChatMessageOverlaysComponent } from './components/message-overlays/chat-message-overlays.component';
+import { stepLightboxIndex } from '../../domain/rules/chat-message-lightbox.rules';
 import {
+  ChatLightboxState,
   ChatMessageComposerSubmitEvent,
   ChatMessageDeleteEvent,
   ChatMessageEditEvent,
   ChatMessageEmbedRemoveEvent,
   ChatMessageImageContextMenuEvent,
+  ChatMessageImageLightboxEvent,
   ChatMessageReactionEvent,
   ChatMessageReplyEvent
 } from './models/chat-messages.model';
@@ -94,7 +97,8 @@ export class ChatMessagesComponent {
   readonly klipyGifPickerAnchorRight = signal(16);
   readonly replyTo = signal<Message | null>(null);
   readonly showKlipyGifPicker = signal(false);
-  readonly lightboxAttachment = signal<Attachment | null>(null);
+  readonly lightboxState = signal<ChatLightboxState | null>(null);
+  readonly galleryAttachments = signal<Attachment[] | null>(null);
   readonly imageContextMenu = signal<ChatMessageImageContextMenuEvent | null>(null);
 
   constructor() {
@@ -284,14 +288,55 @@ export class ChatMessagesComponent {
     return Math.max(0, viewportWidth - 32);
   }
 
-  openLightbox(attachment: Attachment): void {
-    if (attachment.available && attachment.objectUrl) {
-      this.lightboxAttachment.set(attachment);
+  openLightbox(event: ChatMessageImageLightboxEvent): void {
+    const attachments = event.attachments.filter((attachment) => attachment.available && attachment.objectUrl);
+    const index = attachments.findIndex((attachment) => attachment.id === event.attachment.id);
+
+    if (index < 0) {
+      return;
     }
+
+    this.lightboxState.set({
+      attachments,
+      index
+    });
   }
 
   closeLightbox(): void {
-    this.lightboxAttachment.set(null);
+    this.lightboxState.set(null);
+  }
+
+  stepLightbox(delta: number): void {
+    const state = this.lightboxState();
+
+    if (!state) {
+      return;
+    }
+
+    const nextIndex = stepLightboxIndex(state.index, delta, state.attachments.length);
+
+    if (nextIndex === null) {
+      return;
+    }
+
+    this.lightboxState.set({
+      attachments: state.attachments,
+      index: nextIndex
+    });
+  }
+
+  openImageGallery(attachments: Attachment[]): void {
+    const availableImages = attachments.filter((attachment) => attachment.available && attachment.objectUrl);
+
+    if (availableImages.length < 2) {
+      return;
+    }
+
+    this.galleryAttachments.set(availableImages);
+  }
+
+  closeImageGallery(): void {
+    this.galleryAttachments.set(null);
   }
 
   openImageContextMenu(event: ChatMessageImageContextMenuEvent): void {