@meetelise/chat 1.53.3 → 1.53.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.53.3",
+  "version": "1.53.4",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/MeetElise/chat-ui#readme",

package/public/dist/index.js

@@ -6734,12 +6734,14 @@ xmlns="http://www.w3.org/2000/svg"
                 </div>
               `)}
           </div>
-          ${this.message.media.length>1?R` <button class="button prev" @click=${this.prevImage}>
+          ${this.message.media.length>1?R`<div class="controls">
+                <button class="button prev" @click=${this.prevImage}>
                   &#10094;
                 </button>
                 <button class="button next" @click=${this.nextImage}>
                   &#10095;
-                </button>`:""}
+                </button>
+              </div>`:""}
         </div>
       </div>`:R`<div class="message-inner-body">
         ${this.message.media.map(e=>R`<a
@@ -6756,6 +6758,9 @@ xmlns="http://www.w3.org/2000/svg"
         min-width: 0;
       }
       .carousel {
+        /* Every photo is drawn in a box of this shape, so slides of
+           different shapes neither resize the card nor move the arrows. */
+        --photo-aspect-ratio: 4 / 3;
         position: relative;
         max-width: 400px;
         height: max-content;
@@ -6780,8 +6785,9 @@ xmlns="http://www.w3.org/2000/svg"
         flex-shrink: 0;
         opacity: 0.5;
         transition: opacity 0.5s ease;
-        height: 100%;
+        aspect-ratio: var(--photo-aspect-ratio);
         object-fit: contain;
+        background-color: #f2f2f2;
         display: block;
       }
       .image-item {
@@ -6800,11 +6806,23 @@ xmlns="http://www.w3.org/2000/svg"
       .carousel img.active {
         opacity: 1;
       }
-      .button {
+      /* Covers the photo, not the caption, so the arrows centre on the photo. */
+      .controls {
         position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        background-color: rgba(0, 0, 0, 0.1);
+        top: 0;
+        left: 0;
+        width: 100%;
+        aspect-ratio: var(--photo-aspect-ratio);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 2px;
+        box-sizing: border-box;
+        pointer-events: none;
+      }
+      .button {
+        pointer-events: auto;
+        background-color: rgba(0, 0, 0, 0.6);
         color: white;
         border: none;
         border-radius: 2px;
@@ -6816,13 +6834,7 @@ xmlns="http://www.w3.org/2000/svg"
         transition: background-color 0.3s ease;
       }
       .button:hover {
-        background-color: rgba(0, 0, 0, 0.5);
-      }
-      .prev {
-        left: 2px;
-      }
-      .next {
-        right: 2px;
+        background-color: rgba(0, 0, 0, 0.8);
       }
       .image-info {
         display: flex;

package/src/WebComponent/pubnub-media.ts

@@ -18,6 +18,9 @@ export class PubnubMedia extends LitElement {
         min-width: 0;
       }
       .carousel {
+        /* Every photo is drawn in a box of this shape, so slides of
+           different shapes neither resize the card nor move the arrows. */
+        --photo-aspect-ratio: 4 / 3;
         position: relative;
         max-width: 400px;
         height: max-content;
@@ -42,8 +45,9 @@ export class PubnubMedia extends LitElement {
         flex-shrink: 0;
         opacity: 0.5;
         transition: opacity 0.5s ease;
-        height: 100%;
+        aspect-ratio: var(--photo-aspect-ratio);
         object-fit: contain;
+        background-color: #f2f2f2;
         display: block;
       }
       .image-item {
@@ -62,11 +66,23 @@ export class PubnubMedia extends LitElement {
       .carousel img.active {
         opacity: 1;
       }
-      .button {
+      /* Covers the photo, not the caption, so the arrows centre on the photo. */
+      .controls {
         position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        background-color: rgba(0, 0, 0, 0.1);
+        top: 0;
+        left: 0;
+        width: 100%;
+        aspect-ratio: var(--photo-aspect-ratio);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 2px;
+        box-sizing: border-box;
+        pointer-events: none;
+      }
+      .button {
+        pointer-events: auto;
+        background-color: rgba(0, 0, 0, 0.6);
         color: white;
         border: none;
         border-radius: 2px;
@@ -78,13 +94,7 @@ export class PubnubMedia extends LitElement {
         transition: background-color 0.3s ease;
       }
       .button:hover {
-        background-color: rgba(0, 0, 0, 0.5);
-      }
-      .prev {
-        left: 2px;
-      }
-      .next {
-        right: 2px;
+        background-color: rgba(0, 0, 0, 0.8);
       }
       .image-info {
         display: flex;
@@ -189,12 +199,14 @@ export class PubnubMedia extends LitElement {
             )}
           </div>
           ${this.message.media.length > 1
-            ? html` <button class="button prev" @click=${this.prevImage}>
+            ? html`<div class="controls">
+                <button class="button prev" @click=${this.prevImage}>
                   &#10094;
                 </button>
                 <button class="button next" @click=${this.nextImage}>
                   &#10095;
-                </button>`
+                </button>
+              </div>`
             : ""}
         </div>
       </div>`;

package/src/pubnub-chat.test.ts

@@ -238,7 +238,14 @@ it("keeps a photo carousel and its arrows inside the message bubble", async () =
   const next = media.shadowRoot
     ?.querySelector(".next")
     ?.getBoundingClientRect();
-  if (!bubble || !carousel || !next) throw new Error("Expected a carousel");
+  const photo = media.shadowRoot
+    ?.querySelector("img.active")
+    ?.getBoundingClientRect();
+  if (!bubble || !carousel || !next || !photo)
+    throw new Error("Expected a carousel");
   expect(carousel.right).to.be.at.most(bubble.right);
   expect(next.right).to.be.at.most(bubble.right);
+  // Centred on the photo, not on the photo and its caption together.
+  const centreY = (box: DOMRect) => (box.top + box.bottom) / 2;
+  expect(centreY(next)).to.be.closeTo(centreY(photo), 1);
 });