@meetelise/chat 1.53.3 → 1.53.5

package/package.json

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

package/public/dist/index.js

@@ -6714,32 +6714,28 @@ xmlns="http://www.w3.org/2000/svg"
             style="transform: translateX(-${100*this.activeIndex}%);"
           >
             ${this.message.media.map((e,t)=>R`
-                <div class="image-item">
-                  <a
-                    class="image-link"
-                    href="${e.url}"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <img
-                      class=${ye({active:t===this.activeIndex})}
-                      src=${e.url}
-                      alt=""
-                    />
-                  </a>
-                  <div class="image-info">
-                    ${e.title?R`<p class="img-header">${e.title}</p>`:""}
-                    ${e.description?R`<p class="img-desc">${e.description}</p>`:""}
-                  </div>
-                </div>
+                <a
+                  class="image-link"
+                  href="${e.url}"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    class=${ye({active:t===this.activeIndex})}
+                    src=${e.url}
+                    alt=""
+                  />
+                </a>
               `)}
           </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
@@ -6750,12 +6746,15 @@ xmlns="http://www.w3.org/2000/svg"
           /></a>`)}
       </div>`:R``}};ic.styles=[Oe,Wu,u`
       /* This element is a flex item in a bubble capped below the chat width.
-         Without min-width: 0 it is at least as wide as all slides' captions
-         side by side, so the carousel spills out of the bubble and the chat. */
+         Without min-width: 0 it can grow to all slides side by side, so the
+         carousel spills out of the bubble and the chat. */
       :host {
         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,18 +6779,11 @@ 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 {
-        width: 100%;
-        max-width: none;
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-      }
       .image-link {
         width: 100%;
         max-width: none;
@@ -6800,11 +6792,22 @@ xmlns="http://www.w3.org/2000/svg"
       .carousel img.active {
         opacity: 1;
       }
-      .button {
+      .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,35 +6819,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;
-      }
-      .image-info {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-      }
-      .image-info p {
-        margin: 0;
-        padding: 0;
-        white-space: wrap;
-        overflow: hidden;
-        word-wrap: break-word;
-      }
-      .image-info .img-header {
-        color: #333;
-        font-size: 14px;
-      }
-      .image-info .img-desc {
-        color: #666;
-        font-size: 12px;
-        max-height: 200px;
-        overflow-y: auto;
+        background-color: rgba(0, 0, 0, 0.8);
       }
     `],nc([ue({attribute:!0})],ic.prototype,"message",void 0),nc([ue({attribute:!0})],ic.prototype,"myPubnub",void 0),nc([ue({attribute:!0})],ic.prototype,"onMount",void 0),nc([de()],ic.prototype,"showMediaAsCarousel",void 0),nc([de()],ic.prototype,"activeIndex",void 0),ic=nc([se("pubnub-media")],ic);function rc(e,t){var n=e.getFullYear()-t.getFullYear()||e.getMonth()-t.getMonth()||e.getDate()-t.getDate()||e.getHours()-t.getHours()||e.getMinutes()-t.getMinutes()||e.getSeconds()-t.getSeconds()||e.getMilliseconds()-t.getMilliseconds();return n<0?-1:n>0?1:n}function oc(e,t){ii(2,arguments);var n=ri(e),i=ri(t),r=rc(n,i),o=Math.abs(function(e,t){ii(2,arguments);var n=rr(e),i=rr(t),r=n.getTime()-zi(n),o=i.getTime()-zi(i);return Math.round((r-o)/864e5)}(n,i));n.setDate(n.getDate()-r*o);var a=r*(o-Number(rc(n,i)===-r));return 0===a?0:a}const ac=u`
   #utilities-container {

package/src/WebComponent/pubnub-media.ts

@@ -12,12 +12,15 @@ export class PubnubMedia extends LitElement {
     pubnubChatStyles,
     css`
       /* This element is a flex item in a bubble capped below the chat width.
-         Without min-width: 0 it is at least as wide as all slides' captions
-         side by side, so the carousel spills out of the bubble and the chat. */
+         Without min-width: 0 it can grow to all slides side by side, so the
+         carousel spills out of the bubble and the chat. */
       :host {
         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,18 +45,11 @@ 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 {
-        width: 100%;
-        max-width: none;
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-      }
       .image-link {
         width: 100%;
         max-width: none;
@@ -62,11 +58,22 @@ export class PubnubMedia extends LitElement {
       .carousel img.active {
         opacity: 1;
       }
-      .button {
+      .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,35 +85,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;
-      }
-      .image-info {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-      }
-      .image-info p {
-        margin: 0;
-        padding: 0;
-        white-space: wrap;
-        overflow: hidden;
-        word-wrap: break-word;
-      }
-      .image-info .img-header {
-        color: #333;
-        font-size: 14px;
-      }
-      .image-info .img-desc {
-        color: #666;
-        font-size: 12px;
-        max-height: 200px;
-        overflow-y: auto;
+        background-color: rgba(0, 0, 0, 0.8);
       }
     `,
   ];
@@ -163,38 +142,30 @@ export class PubnubMedia extends LitElement {
           >
             ${this.message.media.map(
               (image, index) => html`
-                <div class="image-item">
-                  <a
-                    class="image-link"
-                    href="${image.url}"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <img
-                      class=${classMap({ active: index === this.activeIndex })}
-                      src=${image.url}
-                      alt=""
-                    />
-                  </a>
-                  <div class="image-info">
-                    ${image.title
-                      ? html`<p class="img-header">${image.title}</p>`
-                      : ""}
-                    ${image.description
-                      ? html`<p class="img-desc">${image.description}</p>`
-                      : ""}
-                  </div>
-                </div>
+                <a
+                  class="image-link"
+                  href="${image.url}"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    class=${classMap({ active: index === this.activeIndex })}
+                    src=${image.url}
+                    alt=""
+                  />
+                </a>
               `
             )}
           </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

@@ -199,8 +199,8 @@ it("keeps a photo carousel and its arrows inside the message bubble", async () =
   )}`;
   const photos: SimpleMediaChatMessage = {
     timestamp: 100,
-    // Eight captioned photos, as one floor plan can have: the overflow came
-    // from the slides' combined caption widths, so a few short ones hide it.
+    // Eight photos with names and descriptions, as one floor plan can have.
+    // Their names and descriptions are not drawn.
     media: [
       "Living Room",
       "Dining Area",
@@ -238,7 +238,15 @@ 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);
+  expect(media.shadowRoot?.textContent).not.to.contain("Living Room");
 });