fix: properly configure individual lightbox galleries per message.

Each message has a gallery id of the index of the message. Each message should be its own gallery, so you can't accidentally page to a different messages attachments. Mirrors discord behavior.

Author: khakers

src/main/jte/macros/MediaAttachment.jte

@@ -5,21 +5,22 @@
 @param Attachment attachment
 @param Message message
 @param boolean nsfw
+@param int galleryIndex = 0
 
 <%--'data-type="video"' must be properly set, otherwise, some videos will download instead of opening the lightbox --%>
 
 @if(attachment.filename().startsWith("SPOILER_"))
     <div class="image spoilerImage">
         <input id="${attachment.id()}" type="checkbox">
         @if(AttachmentFormatUtils.isImage(attachment))
-            <a href="${attachment.url()}" class="glightbox">
+            <a href="${attachment.url()}" class="glightbox" data-gallery="${"gallery"+galleryIndex}">
                 <img class="image img-fluid rounded-2"
                      src="${attachment.url()}"
                      alt="Image ${attachment.filename()} uploaded by ${message.getAuthor().name()}"
                      loading="lazy">
             </a>
         @else
-            <a href="${attachment.url()}" class="glightbox" data-type="video">
+            <a href="${attachment.url()}" class="glightbox" data-type="video" data-gallery="${"gallery"+galleryIndex}">
                 <video class="image img-fluid rounded-2"
                        src="${attachment.url()}"
                        preload="metadata"
@@ -34,14 +35,14 @@
     <div class="image spoilerImage">
         <input id="${attachment.id()}" type="checkbox">
         @if(AttachmentFormatUtils.isImage(attachment))
-            <a href="${attachment.url()}" class="glightbox">
+            <a href="${attachment.url()}" class="glightbox" data-gallery="${"gallery"+galleryIndex}">
                 <img class="image img-fluid rounded-2"
                      src="${attachment.url()}"
                      alt="Image ${attachment.filename()} uploaded by ${message.getAuthor().name()}"
                      loading="lazy">
             </a>
         @else
-            <a href="${attachment.url()}" class="glightbox" data-type="video">
+            <a href="${attachment.url()}" class="glightbox" data-type="video" data-gallery="${"gallery"+galleryIndex}">
                 <video class="image img-fluid rounded-2"
                        src="${attachment.url()}"
                        preload="metadata"
@@ -56,14 +57,14 @@
 @else
     <div class="image">
         @if(AttachmentFormatUtils.isImage(attachment))
-            <a href="${attachment.url()}" class="glightbox">
+            <a href="${attachment.url()}" class="glightbox" data-gallery="${"gallery"+galleryIndex}">
                 <img class="image img-fluid rounded-2"
                      src="${attachment.url()}"
                      alt="Image ${attachment.filename()} uploaded by ${message.getAuthor().name()}"
                      loading="lazy">
             </a>
         @else
-            <a href="${attachment.url()}" class="glightbox" data-type="video">
+            <a href="${attachment.url()}" class="glightbox" data-type="video" data-gallery="${"gallery"+galleryIndex}">
                 <%--                <span>potato</span>--%>
                 <video class="image img-fluid rounded-2" controls src="${attachment.url()}" preload="metadata"></video>
             </a>

src/main/jte/pages/LogEntryView.jte

@@ -76,7 +76,7 @@
                                     <div class="media-attachments mb-2 row" data-gallery="${"gallery"+message.getIndex()}">
                                         @for(var attachment: message.get().getAttachments().stream().filter(AttachmentFormatUtils::isMediaAttachment).toList())
                                             <div class="col-md-auto col-12">
-                                                @template.macros.MediaAttachment(attachment = attachment, message = message.get(), nsfw = modmailLog.isNsfw())
+                                                @template.macros.MediaAttachment(attachment = attachment, message = message.get(), nsfw = modmailLog.isNsfw(), galleryIndex = message.getIndex())
                                             </div>
                                         @endfor
                                     </div>
@@ -153,7 +153,7 @@
                                             <div class="media-attachments mb-2 row" data-gallery="${"gallery"+message.getIndex()}">
                                                 @for(var attachment: message.get().getAttachments().stream().filter(AttachmentFormatUtils::isMediaAttachment).toList())
                                                     <div class="col-md-auto col-12">
-                                                        @template.macros.MediaAttachment(attachment = attachment, message = message.get(), nsfw = modmailLog.isNsfw())
+                                                        @template.macros.MediaAttachment(attachment = attachment, message = message.get(), nsfw = modmailLog.isNsfw(), galleryIndex = message.getIndex())
                                                     </div>
                                                 @endfor
                                             </div>