@meetelise/chat 1.53.4 → 1.53.5

package/package.json

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

package/public/dist/index.js

@@ -6714,24 +6714,18 @@ 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`<div class="controls">
@@ -6752,8 +6746,8 @@ 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;
       }
@@ -6790,14 +6784,6 @@ xmlns="http://www.w3.org/2000/svg"
         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;
@@ -6806,7 +6792,6 @@ xmlns="http://www.w3.org/2000/svg"
       .carousel img.active {
         opacity: 1;
       }
-      /* Covers the photo, not the caption, so the arrows centre on the photo. */
       .controls {
         position: absolute;
         top: 0;
@@ -6836,28 +6821,6 @@ xmlns="http://www.w3.org/2000/svg"
       .button:hover {
         background-color: rgba(0, 0, 0, 0.8);
       }
-      .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;
-      }
     `],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 {
     position: fixed;

package/src/WebComponent/pubnub-media.ts

@@ -12,8 +12,8 @@ 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;
       }
@@ -50,14 +50,6 @@ export class PubnubMedia extends LitElement {
         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;
@@ -66,7 +58,6 @@ export class PubnubMedia extends LitElement {
       .carousel img.active {
         opacity: 1;
       }
-      /* Covers the photo, not the caption, so the arrows centre on the photo. */
       .controls {
         position: absolute;
         top: 0;
@@ -96,28 +87,6 @@ export class PubnubMedia extends LitElement {
       .button:hover {
         background-color: rgba(0, 0, 0, 0.8);
       }
-      .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;
-      }
     `,
   ];
 
@@ -173,28 +142,18 @@ 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>

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",
@@ -248,4 +248,5 @@ it("keeps a photo carousel and its arrows inside the message bubble", async () =
   // 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");
 });