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

toju-app/src/app/domains/direct-message/feature/dm-chat/dm-chat.component.ts

@@ -45,6 +45,8 @@ import {
   LinkMetadataService,
   type ChatMessageEmbedRemoveEvent
 } from '../../../chat';
+import { stepLightboxIndex } from '../../../chat/domain/rules/chat-message-lightbox.rules';
+import { ChatLightboxState, ChatMessageImageLightboxEvent } from '../../../chat/feature/chat-messages/models/chat-messages.model';
 import type {
   DirectMessageStatus,
   LinkMetadata,
@@ -102,7 +104,8 @@ export class DmChatComponent {
   readonly gifPickerAnchorRight = signal(16);
   readonly linkMetadataByMessageId = signal<Record<string, LinkMetadata[]>>({});
   readonly replyTo = signal<Message | null>(null);
-  readonly lightboxAttachment = signal<Attachment | null>(null);
+  readonly lightboxState = signal<ChatLightboxState | null>(null);
+  readonly galleryAttachments = signal<Attachment[] | null>(null);
   readonly imageContextMenu = signal<ChatMessageImageContextMenuEvent | null>(null);
   readonly routeConversationId = toSignal(this.route.paramMap.pipe(map((params) => params.get('conversationId'))), {
     initialValue: this.route.snapshot.paramMap.get('conversationId')
@@ -395,14 +398,55 @@ export class DmChatComponent {
     }));
   }
 
-  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 {