@mobilon-dev/chotto 0.3.32 → 0.3.34

package/dist/components/2_feed_elements/ImageMessage/ImageMessage.vue2.js

@@ -1,35 +1,35 @@
-import { defineComponent as se, inject as te, ref as A, computed as p, createElementBlock as m, openBlock as i, unref as a, normalizeStyle as L, normalizeClass as b, createCommentVNode as o, createElementVNode as l, createBlock as u, createVNode as g, withCtx as r, createTextVNode as ae, toDisplayString as x, Transition as v, withModifiers as B, Teleport as ie } from "vue";
-import ne from "../../1_atoms/ContextMenu/ContextMenu.vue.js";
-import oe from "../../1_atoms/LinkPreview/LinkPreview.vue.js";
-import le from "../../1_atoms/EmbedPreview/EmbedPreview.vue.js";
-import me from "../BaseReplyMessage/BaseReplyMessage.vue.js";
-import ge from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
-import re from "../MessageReactions/MessageReactions.vue.js";
-import ue from "../MessageStatusIndicator/MessageStatusIndicator.vue.js";
-import ce from "../../1_atoms/Tooltip/Tooltip.vue.js";
-import { useMessageActions as de } from "../../../hooks/messages/useMessageActions.js";
-import { useMessageLinks as fe } from "../../../hooks/messages/useMessageLinks.js";
-import { useChannelAccentColor as be } from "../../../hooks/messages/useChannelAccentColor.js";
-import { useSubtextTooltip as ve } from "../../../hooks/messages/useSubtextTooltip.js";
-import { getStatus as pe, getStatusTitle as ye } from "../../../functions/getStatusMessage.js";
-import { getMessageClass as we } from "../../../functions/getMessageClass.js";
-import { createReactionHandlers as ke } from "../../../functions/createReactionHandlers.js";
+import { defineComponent as ce, inject as de, ref as f, watch as N, nextTick as j, onMounted as fe, onUnmounted as ve, computed as k, createElementBlock as u, openBlock as i, normalizeStyle as U, normalizeClass as v, unref as a, createCommentVNode as n, createElementVNode as l, createBlock as b, createVNode as r, withCtx as d, createTextVNode as be, toDisplayString as A, Transition as x, withModifiers as D, Teleport as ye } from "vue";
+import we from "../../1_atoms/ContextMenu/ContextMenu.vue.js";
+import pe from "../../1_atoms/LinkPreview/LinkPreview.vue.js";
+import he from "../../1_atoms/EmbedPreview/EmbedPreview.vue.js";
+import ke from "../BaseReplyMessage/BaseReplyMessage.vue.js";
+import xe from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
+import Re from "../MessageReactions/MessageReactions.vue.js";
+import Me from "../MessageStatusIndicator/MessageStatusIndicator.vue.js";
+import Ce from "../../1_atoms/Tooltip/Tooltip.vue.js";
+import { useMessageActions as Te } from "../../../hooks/messages/useMessageActions.js";
+import { useMessageLinks as Ie } from "../../../hooks/messages/useMessageLinks.js";
+import { useChannelAccentColor as Se } from "../../../hooks/messages/useChannelAccentColor.js";
+import { useSubtextTooltip as je } from "../../../hooks/messages/useSubtextTooltip.js";
+import { getStatus as Ae, getStatusTitle as Le } from "../../../functions/getStatusMessage.js";
+import { getMessageClass as Ee } from "../../../functions/getMessageClass.js";
+import { createReactionHandlers as Be } from "../../../functions/createReactionHandlers.js";
 import "../../../functions/parseMarkdown.js";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
-import { useTheme as xe } from "../../../hooks/useTheme.js";
+import { useTheme as Oe } from "../../../hooks/useTheme.js";
 /* empty css                              */
 /* empty css                                              */
-const he = ["messageId"], Re = ["src"], Me = {
+const ze = ["messageId"], Fe = ["src"], Ve = {
   key: 1,
   class: "image-message__subtext"
-}, Ce = ["src", "alt"], Te = {
+}, $e = {
+  key: 0,
+  class: "image-message__blur-wrapper"
+}, He = ["src", "alt"], We = ["src", "alt"], Ne = ["src", "alt"], Ue = {
   key: 0,
   class: "image-message__info-container"
-}, Ie = { class: "image-message__time" }, Se = {
-  key: 1,
-  class: "image-message__text-container"
-}, je = ["innerHTML"], Ae = ["src", "alt"], _e = /* @__PURE__ */ se({
+}, De = { class: "image-message__time" }, Pe = ["innerHTML"], qe = ["src", "alt"], fs = /* @__PURE__ */ ce({
   __name: "ImageMessage",
   props: {
     message: {
@@ -55,33 +55,65 @@ const he = ["messageId"], Re = ["src"], Me = {
     }
   },
   emits: ["action", "reply"],
-  setup(e, { emit: E }) {
-    const $ = te("chatAppId"), { getTheme: h } = xe($), t = e, R = E, y = A(!1), {
-      isOpenMenu: w,
-      buttonMenuVisible: F,
-      showMenu: V,
-      hideMenu: M,
-      clickAction: O,
-      viewsAction: C,
-      handleClickReplied: N
-    } = de(t.message, R), c = A(!1), { linkedHtml: D, inNewWindow: T } = fe(() => t.message.text), H = () => {
-      V(), c.value = !0;
-    }, P = p(() => t.message.reply && t.message.text ? "0" : t.message.text ? "8px 8px 0 0" : t.message.reply ? "0 0 8px 8px" : "8px"), U = p(() => pe(t.message.status)), q = p(() => ye(t.message.status, t.message.statusMsg)), { bubbleStyle: z } = be(
-      p(() => t.message),
+  setup(e, { emit: P }) {
+    const q = de("chatAppId"), { getTheme: L } = Oe(q), s = e, E = P, C = f(!1), {
+      isOpenMenu: T,
+      buttonMenuVisible: G,
+      showMenu: J,
+      hideMenu: K,
+      clickAction: Q,
+      viewsAction: B,
+      handleClickReplied: X
+    } = Te(s.message, E), R = f(!1), { linkedHtml: O, inNewWindow: z } = Ie(() => s.message.text), c = f(null), g = f(null), y = f(0), I = f(0);
+    N(
+      () => O.value,
+      () => {
+        w(), j(() => {
+          o && g.value && o.observe(g.value);
+        });
+      }
+    );
+    const w = () => {
+      j(() => {
+        c.value && (y.value = c.value.offsetWidth), g.value && (I.value = g.value.offsetWidth);
+      });
+    };
+    let o = null, M = null;
+    fe(() => {
+      w(), M = () => w(), window.addEventListener("resize", M), typeof ResizeObserver < "u" && (o = new ResizeObserver(() => {
+        w();
+      }), c.value && o.observe(c.value), g.value && o.observe(g.value));
+    }), ve(() => {
+      M && window.removeEventListener("resize", M), o && o.disconnect();
+    }), N(
+      () => [s.message.text, s.message.url],
+      () => {
+        w(), j(() => {
+          o && (o.disconnect(), c.value && o.observe(c.value), g.value && o.observe(g.value));
+        });
+      },
+      { immediate: !0 }
+    );
+    const F = k(() => s.message.text && I.value > y.value && y.value > 0), Y = () => {
+      J(), R.value = !0;
+    }, V = () => {
+      K(), R.value = !1;
+    }, Z = k(() => s.message.reply && s.message.text ? "0" : s.message.text ? I.value > y.value && y.value > 0 ? "0" : "8px 8px 0 0" : s.message.reply ? "0 0 8px 8px" : "8px"), _ = k(() => Ae(s.message.status)), ee = k(() => Le(s.message.status, s.message.statusMsg)), { bubbleStyle: se } = Se(
+      k(() => s.message),
       { cssVariable: "--chotto-imagemessage-right-bg", position: "right" }
     );
-    function I(d) {
-      return we(d.position, "image-message");
+    function $(p) {
+      return Ee(p.position, "image-message");
     }
-    const W = () => y.value = !1, G = async () => {
-      var d, s;
-      if (t.message.url)
+    const te = () => C.value = !1, ae = async () => {
+      var p, t;
+      if (s.message.url)
         try {
-          const n = await fetch(t.message.url, {
+          const m = await fetch(s.message.url, {
             headers: {
               Accept: "image/*"
             }
-          }), Y = n.headers.get("content-type") || "", Z = await n.blob(), k = ((s = (d = t.message.url.split(".").pop()) == null ? void 0 : d.split("?")[0]) == null ? void 0 : s.toLowerCase()) || "", _ = {
+          }), me = m.headers.get("content-type") || "", ge = await m.blob(), S = ((t = (p = s.message.url.split(".").pop()) == null ? void 0 : p.split("?")[0]) == null ? void 0 : t.toLowerCase()) || "", ue = {
             "image/jpeg": "jpg",
             "image/jpg": "jpg",
             "image/png": "png",
@@ -90,177 +122,195 @@ const he = ["messageId"], Re = ["src"], Me = {
             "image/svg+xml": "svg",
             "image/bmp": "bmp"
           };
-          let S = k && ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"].includes(k) ? k : _[Y] || "jpg";
-          const ee = t.message.alt ? t.message.alt.includes(".") ? t.message.alt : `${t.message.alt}.${S}` : `image-${t.message.messageId}.${S}`, j = window.URL.createObjectURL(Z), f = document.createElement("a");
-          f.href = j, f.download = ee, document.body.appendChild(f), f.click(), document.body.removeChild(f), window.URL.revokeObjectURL(j);
-        } catch (n) {
-          console.error("Ошибка при скачивании изображения:", n);
+          let H = S && ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"].includes(S) ? S : ue[me] || "jpg";
+          const re = s.message.alt ? s.message.alt.includes(".") ? s.message.alt : `${s.message.alt}.${H}` : `image-${s.message.messageId}.${H}`, W = window.URL.createObjectURL(ge), h = document.createElement("a");
+          h.href = W, h.download = re, document.body.appendChild(h), h.click(), document.body.removeChild(h), window.URL.revokeObjectURL(W);
+        } catch (m) {
+          console.error("Ошибка при скачивании изображения:", m);
         }
-    }, { onToggleReaction: J, onAddReaction: K, onRemoveReaction: Q } = ke(R), X = ve(() => t.message, () => t.subtextTooltipData);
-    return (d, s) => (i(), m("div", {
-      class: b(["image-message", [
-        I(e.message),
+    }, { onToggleReaction: ie, onAddReaction: ne, onRemoveReaction: le } = Be(E), oe = je(() => s.message, () => s.subtextTooltipData);
+    return (p, t) => (i(), u("div", {
+      class: v(["image-message", [
+        $(e.message),
         e.applyStyle(e.message)
       ]]),
       messageId: e.message.messageId,
-      style: L(a(z)),
-      onMouseleave: s[5] || (s[5] = //@ts-ignore
-      (...n) => a(M) && a(M)(...n))
+      style: U(a(se)),
+      onMouseleave: V
     }, [
-      e.message.avatar && e.isFirstInSeries ? (i(), m("img", {
+      e.message.avatar && e.isFirstInSeries ? (i(), u("img", {
         key: 0,
         class: "image-message__avatar",
         src: e.message.avatar,
         height: "32",
         width: "32"
-      }, null, 8, Re)) : o("", !0),
-      e.message.subText && e.isFirstInSeries ? (i(), m("p", Me, [
-        g(ce, {
-          text: a(X),
+      }, null, 8, Fe)) : n("", !0),
+      e.message.subText && e.isFirstInSeries ? (i(), u("p", Ve, [
+        r(Ce, {
+          text: a(oe),
           position: e.message.position === "left" ? "right" : "left",
           offset: 8
         }, {
-          default: r(() => [
-            ae(x(e.message.subText), 1)
+          default: d(() => [
+            be(A(e.message.subText), 1)
           ]),
           _: 1
         }, 8, ["text", "position"])
-      ])) : o("", !0),
+      ])) : n("", !0),
       l("div", {
-        class: b(["image-message__content", { "is-first": e.isFirstInSeries, "with-avatar-indent": !e.isFirstInSeries && e.message.avatar }])
+        class: v(["image-message__content", { "is-first": e.isFirstInSeries, "with-avatar-indent": !e.isFirstInSeries && e.message.avatar }])
       }, [
-        e.message.reply ? (i(), u(me, {
+        e.message.reply ? (i(), b(ke, {
           key: 0,
           style: { margin: "10px 10px 4px 16px" },
-          class: b(e.message.position),
+          class: v(e.message.position),
           message: e.message.reply,
-          onReply: a(N)
-        }, null, 8, ["class", "message", "onReply"])) : o("", !0),
+          onReply: a(X)
+        }, null, 8, ["class", "message", "onReply"])) : n("", !0),
         l("div", {
-          class: "image-message__preview-button",
-          onClick: s[1] || (s[1] = (n) => y.value = !0),
-          onMouseenter: H,
-          onMouseleave: s[2] || (s[2] = (n) => c.value = !c.value)
+          class: v(["image-message__preview-button", { "image-message__preview-button--blur-edges": F.value }]),
+          onClick: t[1] || (t[1] = (m) => C.value = !0),
+          onMouseenter: Y,
+          onMouseleave: V
         }, [
+          F.value ? (i(), u("div", $e, [
+            l("img", {
+              class: "image-message__blur-left",
+              src: e.message.url,
+              alt: e.message.alt
+            }, null, 8, He),
+            l("img", {
+              class: "image-message__blur-right",
+              src: e.message.url,
+              alt: e.message.alt
+            }, null, 8, We)
+          ])) : n("", !0),
           l("img", {
+            ref_key: "imageRef",
+            ref: c,
             class: "image-message__preview-image",
-            style: L({ borderRadius: P.value }),
+            style: U({ borderRadius: Z.value }),
             src: e.message.url,
             alt: e.message.alt
-          }, null, 12, Ce),
-          g(v, { name: "modal-fade" }, {
-            default: r(() => [
-              c.value ? (i(), m("div", Te, [
-                e.message.views ? (i(), m("div", {
+          }, null, 12, Ne),
+          r(x, { name: "modal-fade" }, {
+            default: d(() => [
+              R.value ? (i(), u("div", Ue, [
+                e.message.views ? (i(), u("div", {
                   key: 0,
                   class: "image-message__views",
-                  onClick: s[0] || (s[0] = B(
+                  onClick: t[0] || (t[0] = D(
                     //@ts-ignore
-                    (...n) => a(C) && a(C)(...n),
+                    (...m) => a(B) && a(B)(...m),
                     ["stop"]
                   ))
                 }, [
-                  s[6] || (s[6] = l("span", { class: "pi pi-eye" }, null, -1)),
-                  l("p", null, x(e.message.views), 1)
-                ])) : o("", !0),
-                l("span", Ie, x(e.message.time), 1),
-                g(ue, {
+                  t[4] || (t[4] = l("span", { class: "pi pi-eye" }, null, -1)),
+                  l("p", null, A(e.message.views), 1)
+                ])) : n("", !0),
+                l("span", De, A(e.message.time), 1),
+                r(Me, {
                   "base-class": "image-message",
-                  "message-class": I(e.message),
+                  "message-class": $(e.message),
                   "message-status": e.message.status,
-                  "status-class": U.value,
-                  "status-title": q.value
+                  "status-class": _.value,
+                  "status-title": ee.value
                 }, null, 8, ["message-class", "message-status", "status-class", "status-title"])
-              ])) : o("", !0)
+              ])) : n("", !0)
             ]),
             _: 1
           }),
-          g(v, { name: "modal-fade" }, {
-            default: r(() => [
-              c.value ? (i(), m("button", {
+          r(x, { name: "modal-fade" }, {
+            default: d(() => [
+              R.value ? (i(), u("button", {
                 key: 0,
                 class: "image-message__download-button",
-                onClick: B(G, ["stop"])
-              }, [...s[7] || (s[7] = [
+                onClick: D(ae, ["stop"])
+              }, [...t[5] || (t[5] = [
                 l("span", { class: "pi pi-download" }, null, -1)
-              ])])) : o("", !0)
+              ])])) : n("", !0)
             ]),
             _: 1
           })
-        ], 32),
-        g(v, { name: "modal-fade" }, {
-          default: r(() => [
-            a(F) && e.message.actions ? (i(), m("button", {
+        ], 34),
+        r(x, { name: "modal-fade" }, {
+          default: d(() => [
+            a(G) && e.message.actions ? (i(), u("button", {
               key: 0,
               class: "image-message__menu-button",
-              onClick: s[3] || (s[3] = (n) => w.value = !a(w))
-            }, [...s[8] || (s[8] = [
+              onClick: t[2] || (t[2] = (m) => T.value = !a(T))
+            }, [...t[6] || (t[6] = [
               l("span", { class: "pi pi-ellipsis-h" }, null, -1)
-            ])])) : o("", !0)
+            ])])) : n("", !0)
           ]),
           _: 1
         }),
-        g(v, { name: "context-menu" }, {
-          default: r(() => [
-            a(w) && e.message.actions ? (i(), u(ne, {
+        r(x, { name: "context-menu" }, {
+          default: d(() => [
+            a(T) && e.message.actions ? (i(), b(we, {
               key: 0,
               class: "image-message__context-menu",
               actions: e.message.actions,
-              onClick: a(O)
-            }, null, 8, ["actions", "onClick"])) : o("", !0)
+              onClick: a(Q)
+            }, null, 8, ["actions", "onClick"])) : n("", !0)
           ]),
           _: 1
         }),
-        e.message.text ? (i(), m("div", Se, [
+        e.message.text ? (i(), u("div", {
+          key: 1,
+          ref_key: "textRef",
+          ref: g,
+          class: "image-message__text-container"
+        }, [
           l("p", {
-            onClick: s[4] || (s[4] = //@ts-ignore
-            (...n) => a(T) && a(T)(...n)),
-            innerHTML: a(D)
-          }, null, 8, je)
-        ])) : o("", !0),
-        e.message.linkPreview ? (i(), u(oe, {
+            onClick: t[3] || (t[3] = //@ts-ignore
+            (...m) => a(z) && a(z)(...m)),
+            innerHTML: a(O)
+          }, null, 8, Pe)
+        ], 512)) : n("", !0),
+        e.message.linkPreview ? (i(), b(pe, {
           key: 2,
-          class: b(["image-message__link-preview", e.message.position]),
+          class: v(["image-message__link-preview", e.message.position]),
           "link-preview": e.message.linkPreview
-        }, null, 8, ["class", "link-preview"])) : o("", !0),
-        e.message.embed ? (i(), u(le, {
+        }, null, 8, ["class", "link-preview"])) : n("", !0),
+        e.message.embed ? (i(), b(he, {
           key: 3,
-          class: b(e.message.position),
+          class: v(e.message.position),
           embed: e.message.embed
-        }, null, 8, ["class", "embed"])) : o("", !0),
-        g(re, {
+        }, null, 8, ["class", "embed"])) : n("", !0),
+        r(Re, {
           reactions: e.message.reactions,
           "message-id": e.message.messageId,
           enabled: e.reactionsEnabled,
-          onToggleReaction: a(J),
-          onAddReaction: a(K),
-          onRemoveReaction: a(Q)
+          onToggleReaction: a(ie),
+          onAddReaction: a(ne),
+          onRemoveReaction: a(le)
         }, null, 8, ["reactions", "message-id", "enabled", "onToggleReaction", "onAddReaction", "onRemoveReaction"])
       ], 2),
-      (i(), u(ie, { to: "body" }, [
-        g(v, { name: "modal-fade" }, {
-          default: r(() => [
-            y.value ? (i(), u(ge, {
+      (i(), b(ye, { to: "body" }, [
+        r(x, { name: "modal-fade" }, {
+          default: d(() => [
+            C.value ? (i(), b(xe, {
               key: 0,
-              "data-theme": a(h)().theme ? a(h)().theme : "light",
-              onClose: W
+              "data-theme": a(L)().theme ? a(L)().theme : "light",
+              onClose: te
             }, {
-              default: r(() => [
+              default: d(() => [
                 l("img", {
                   class: "image-message__modal-image",
                   src: e.message.url,
                   alt: e.message.alt
-                }, null, 8, Ae)
+                }, null, 8, qe)
               ]),
               _: 1
-            }, 8, ["data-theme"])) : o("", !0)
+            }, 8, ["data-theme"])) : n("", !0)
           ]),
           _: 1
         })
       ]))
-    ], 46, he));
+    ], 46, ze));
   }
 });
 export {
-  _e as default
+  fs as default
 };

package/dist/components/2_feed_elements/VideoMessage/VideoMessage.vue.js

@@ -1,7 +1,7 @@
 import o from "./VideoMessage.vue2.js";
 /* empty css                  */
-import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-1af2fb62"]]);
+import e from "../../../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e357b0de"]]);
 export {
-  r as default
+  a as default
 };

package/dist/components/2_feed_elements/VideoMessage/VideoMessage.vue2.js

@@ -80,7 +80,7 @@ const Se = ["messageId"], Ie = ["src"], Ae = {
     ie([S, g], ([u, s]) => {
       u ? s && (s.pause(), s.currentTime = 0) : s && (s.play(), s.currentTime = 0);
     });
-    const J = w(() => t.message.reply && t.message.text ? "0" : t.message.text ? "8px 8px 0 0" : t.message.reply ? "0 0 8px 8px" : "8px"), K = () => x.value = !1, { onToggleReaction: Q, onAddReaction: X, onRemoveReaction: Y } = Me(M), Z = async () => {
+    const J = w(() => t.message.reply && t.message.text ? "0" : t.message.text ? "5px 5px 0 0" : t.message.reply ? "0 0 5px 5px" : "8px"), K = () => x.value = !1, { onToggleReaction: Q, onAddReaction: X, onRemoveReaction: Y } = Me(M), Z = async () => {
       var u, s;
       if (t.message.url)
         try {