@mobilon-dev/chotto 0.3.111 → 0.3.112

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

@@ -1,45 +1,52 @@
-import { defineComponent as Be, inject as ze, ref as d, watch as te, nextTick as U, onMounted as He, onUnmounted as Ne, computed as b, createElementBlock as m, openBlock as n, normalizeStyle as O, normalizeClass as h, unref as t, createCommentVNode as o, createElementVNode as l, createBlock as f, createVNode as g, withCtx as y, createTextVNode as Ve, toDisplayString as C, Fragment as ae, Transition as R, withModifiers as ne, Teleport as ie } from "vue";
-import We from "../../1_atoms/ContextMenu/ContextMenu.vue.js";
-import $e from "../../1_atoms/LinkPreview/LinkPreview.vue.js";
-import De from "../../1_atoms/EmbedPreview/EmbedPreview.vue.js";
-import qe from "../FeedReplyQuote/FeedReplyQuote.vue.js";
-import Qe from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
-import Ge from "../MessageReactions/MessageReactions.vue.js";
-import oe from "../MessageStatusIndicator/MessageStatusIndicator.vue.js";
-import Je from "../MessageSmsInvite/MessageSmsInvite.vue.js";
-import Ke from "../DeletedMessageContent/DeletedMessageContent.vue.js";
-import Xe from "../../1_atoms/Tooltip/Tooltip.vue.js";
-import { useMessageActions as Ye } from "../../../hooks/messages/useMessageActions.js";
-import { useMessageHoverActions as Ze } from "../../../hooks/messages/useMessageHoverActions.js";
-import { useMessageReactionsInFeed as _e } from "../../../hooks/messages/useMessageReactionsInFeed.js";
-import { useMessageMenuActions as es } from "../../../hooks/messages/useMessageMenuActions.js";
-import { useMessageLinks as ss } from "../../../hooks/messages/useMessageLinks.js";
-import { useChannelAccentColor as ts } from "../../../hooks/messages/useChannelAccentColor.js";
-import { useSubtextTooltip as as } from "../../../hooks/messages/useSubtextTooltip.js";
-import { useStartReply as ns } from "../../../hooks/messages/useStartReply.js";
-import { useTheme as is } from "../../../hooks/useTheme.js";
+import { defineComponent as as, inject as ns, ref as b, computed as r, watch as K, nextTick as Q, onMounted as ls, onUnmounted as os, createElementBlock as o, openBlock as l, normalizeStyle as j, normalizeClass as k, unref as a, createCommentVNode as i, createElementVNode as m, createBlock as p, createVNode as v, withCtx as M, createTextVNode as is, toDisplayString as R, Fragment as O, renderList as ms, withModifiers as A, Transition as L, Teleport as ke } from "vue";
+import us from "../../1_atoms/ContextMenu/ContextMenu.vue.js";
+import rs from "../../1_atoms/LinkPreview/LinkPreview.vue.js";
+import gs from "../../1_atoms/EmbedPreview/EmbedPreview.vue.js";
+import cs from "../FeedReplyQuote/FeedReplyQuote.vue.js";
+import ds from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
+import vs from "../MessageReactions/MessageReactions.vue.js";
+import Me from "../MessageStatusIndicator/MessageStatusIndicator.vue.js";
+import fs from "../MessageSmsInvite/MessageSmsInvite.vue.js";
+import bs from "../DeletedMessageContent/DeletedMessageContent.vue.js";
+import ys from "../../1_atoms/Tooltip/Tooltip.vue.js";
+import { useMessageActions as hs } from "../../../hooks/messages/useMessageActions.js";
+import { useMessageHoverActions as ps } from "../../../hooks/messages/useMessageHoverActions.js";
+import { useMessageReactionsInFeed as ws } from "../../../hooks/messages/useMessageReactionsInFeed.js";
+import { useMessageMenuActions as ks } from "../../../hooks/messages/useMessageMenuActions.js";
+import { useMessageLinks as Ms } from "../../../hooks/messages/useMessageLinks.js";
+import { useChannelAccentColor as Rs } from "../../../hooks/messages/useChannelAccentColor.js";
+import { useSubtextTooltip as xs } from "../../../hooks/messages/useSubtextTooltip.js";
+import { useStartReply as Is } from "../../../hooks/messages/useStartReply.js";
+import { useTheme as Cs } from "../../../hooks/useTheme.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../locale/useLocale.js";
 /* empty css                                                            */
-import { buildReplyPayload as le } from "../../../hooks/messages/buildReplyPayload.js";
-import { getStatus as os, getStatusTitle as ls } from "../../../functions/getStatusMessage.js";
-import { getMessageClass as ms } from "../../../functions/getMessageClass.js";
-import { createReactionHandlers as rs } from "../../../functions/createReactionHandlers.js";
+import { buildReplyPayload as Re } from "../../../hooks/messages/buildReplyPayload.js";
+import { getImageMessageItems as Ts } from "../../../hooks/messages/getImageMessageItems.js";
+import { getStatus as Ss, getStatusTitle as As } from "../../../functions/getStatusMessage.js";
+import { getMessageClass as Ls } from "../../../functions/getMessageClass.js";
+import { createReactionHandlers as Es } from "../../../functions/createReactionHandlers.js";
 import "../../../functions/parseMarkdown.js";
-const us = ["messageId"], gs = ["src"], cs = {
+const Us = ["messageId"], Ps = ["src"], js = {
   key: 1,
   class: "image-message__subtext"
-}, ds = { class: "image-message__info-container" }, fs = {
+}, Os = { class: "image-message__info-container" }, Bs = {
   key: 0,
   class: "image-message__time"
-}, vs = {
+}, Fs = ["onClick"], Ns = ["src", "alt"], zs = {
+  key: 0,
+  class: "image-message__album-overflow"
+}, Hs = {
   key: 0,
   class: "image-message__blur-wrapper"
-}, bs = ["src", "alt"], ys = ["src", "alt"], hs = ["src", "alt"], ws = {
+}, Vs = ["src", "alt"], $s = ["src", "alt"], Ds = ["src", "alt"], Ws = {
   key: 0,
   class: "image-message__info-container"
-}, ps = { class: "image-message__time" }, Ms = ["innerHTML"], ks = ["src", "alt"], Zs = /* @__PURE__ */ Be({
+}, _s = { class: "image-message__time" }, qs = ["innerHTML"], Ks = { class: "image-message__modal-body" }, Qs = ["src", "alt"], Gs = {
+  key: 2,
+  class: "image-message__modal-counter"
+}, B = 4, Ct = /* @__PURE__ */ as({
   __name: "ImageMessage",
   props: {
     message: {
@@ -83,81 +90,118 @@ const us = ["messageId"], gs = ["src"], cs = {
     }
   },
   emits: ["action", "reply", "sms-invite"],
-  setup(e, { emit: me }) {
-    const P = ze("chatAppId"), { getTheme: F } = is(P || ""), { menuActions: x } = es(() => s.message), { hoverActionsEnabled: re, reactionsActive: B } = Ze(
-      () => s.channel,
-      () => s.reactionsEnabled,
-      () => s.message
-    ), { startReply: ue } = ns(P || ""), s = e, S = me, T = d(!1), {
-      isOpenMenu: ge,
-      buttonMenuVisible: z,
-      menuAnchorRef: ce,
-      menuRef: de,
-      menuStyle: fe,
-      menuTheme: ve,
-      showMenu: be,
-      hideMenu: ye,
-      openMenu: he,
-      toggleMenu: H,
-      onMenuMouseEnter: we,
-      onMenuMouseLeave: pe,
-      clickAction: Me,
-      viewsAction: N,
-      handleClickReplied: ke
-    } = Ye(s.message, S, {
-      onReply: () => ue(le(s.message, "message.image"))
-    }), w = d(!1), { linkedHtml: V, inNewWindow: W } = ss(() => s.message.text), v = d(null), c = d(null), p = d(0), A = d(0);
-    te(
-      () => V.value,
+  setup(e, { emit: xe }) {
+    const G = ns("chatAppId"), { getTheme: J } = Cs(G || ""), { menuActions: E } = ks(() => t.message), { hoverActionsEnabled: Ie, reactionsActive: X } = ps(
+      () => t.channel,
+      () => t.reactionsEnabled,
+      () => t.message
+    ), { startReply: Ce } = Is(G || ""), t = e, F = xe, x = b(!1), y = b(0), g = r(() => Ts(t.message)), d = r(() => g.value.length > 1), N = r(() => g.value.slice(0, B)), z = r(() => Math.max(0, g.value.length - B)), Te = r(() => String(Math.min(g.value.length, B))), H = r(() => {
+      const s = g.value[0];
+      return (s == null ? void 0 : s.imagePreviewUrl) || (s == null ? void 0 : s.url) || "";
+    }), V = r(() => g.value[y.value] || g.value[0]), Se = r(() => {
+      var s;
+      return ((s = V.value) == null ? void 0 : s.url) || "";
+    }), $ = r(() => {
+      var s;
+      return ((s = V.value) == null ? void 0 : s.filename) || t.message.alt;
+    }), Ae = r(() => d.value ? $.value || `${y.value + 1} / ${g.value.length}` : $.value);
+    function Y(s) {
+      y.value = s, x.value = !0;
+    }
+    function Le() {
+      d.value || Y(0);
+    }
+    function Ee(s) {
+      const n = z.value > 0 && s === N.value.length - 1;
+      Y(n ? B : s);
+    }
+    function Z() {
+      const s = g.value.length;
+      s < 2 || (y.value = (y.value - 1 + s) % s);
+    }
+    function ee() {
+      const s = g.value.length;
+      s < 2 || (y.value = (y.value + 1) % s);
+    }
+    function D(s) {
+      !x.value || !d.value || (s.key === "ArrowLeft" ? (s.preventDefault(), Z()) : s.key === "ArrowRight" && (s.preventDefault(), ee()));
+    }
+    K(x, (s) => {
+      s ? window.addEventListener("keydown", D) : window.removeEventListener("keydown", D);
+    });
+    const {
+      isOpenMenu: Ue,
+      buttonMenuVisible: se,
+      menuAnchorRef: Pe,
+      menuRef: je,
+      menuStyle: Oe,
+      menuTheme: Be,
+      showMenu: Fe,
+      hideMenu: Ne,
+      openMenu: ze,
+      toggleMenu: te,
+      onMenuMouseEnter: He,
+      onMenuMouseLeave: Ve,
+      clickAction: $e,
+      viewsAction: ae,
+      handleClickReplied: De
+    } = hs(t.message, F, {
+      onReply: () => Ce(Re(t.message, "message.image"))
+    }), I = b(!1), { linkedHtml: ne, inNewWindow: le } = Ms(() => t.message.text), w = b(null), f = b(null), C = b(0), W = b(0);
+    K(
+      () => ne.value,
       () => {
-        M(), U(() => {
-          r && c.value && r.observe(c.value);
+        T(), Q(() => {
+          c && f.value && c.observe(f.value);
         });
       }
     );
-    const M = () => {
-      U(() => {
-        v.value && (p.value = v.value.offsetWidth), c.value && (A.value = c.value.offsetWidth);
+    const T = () => {
+      Q(() => {
+        w.value && (C.value = w.value.offsetWidth), f.value && (W.value = f.value.offsetWidth);
       });
     };
-    let r = null, I = null;
-    He(() => {
-      M(), I = () => M(), window.addEventListener("resize", I), typeof ResizeObserver < "u" && (r = new ResizeObserver(() => {
-        M();
-      }), v.value && r.observe(v.value), c.value && r.observe(c.value));
-    }), Ne(() => {
-      I && window.removeEventListener("resize", I), r && r.disconnect();
-    }), te(
-      () => [s.message.text, s.message.url, s.message.imagePreviewUrl],
+    let c = null, U = null;
+    ls(() => {
+      T(), U = () => T(), window.addEventListener("resize", U), typeof ResizeObserver < "u" && (c = new ResizeObserver(() => {
+        T();
+      }), w.value && c.observe(w.value), f.value && c.observe(f.value));
+    }), os(() => {
+      U && window.removeEventListener("resize", U), c && c.disconnect(), window.removeEventListener("keydown", D);
+    }), K(
+      () => [t.message.text, t.message.url, t.message.imagePreviewUrl, t.message.items],
       () => {
-        M(), U(() => {
-          r && (r.disconnect(), v.value && r.observe(v.value), c.value && r.observe(c.value));
+        T(), Q(() => {
+          c && (c.disconnect(), w.value && c.observe(w.value), f.value && c.observe(f.value));
         });
       },
       { immediate: !0 }
     );
-    const $ = b(() => s.message.text && A.value > p.value && p.value > 0), Re = () => {
-      be(), w.value = !0;
-    }, D = (u) => {
-      ye(u), z.value || (w.value = !1);
-    }, xe = () => {
-      pe(), w.value = !1;
-    }, E = b(() => s.message.imagePreviewUrl || s.message.url), Ie = b(() => s.message.reply && s.message.text ? "0" : s.message.text ? A.value > p.value && p.value > 0 ? "0" : "var(--chotto-imagemessage-preview-with-caption-border-radius, 7px 7px 0 0)" : s.message.reply ? "var(--chotto-imagemessage-preview-with-reply-border-radius, 0 0 7px 7px)" : "var(--chotto-imagemessage-preview-border-radius, 7px)"), q = b(() => os(s.message.status)), Q = b(() => ls(s.message.status, s.message.statusMsg)), { bubbleStyle: Ce } = ts(
-      b(() => s.message),
+    const oe = r(() => d.value ? !1 : !!t.message.text && W.value > C.value && C.value > 0), We = () => {
+      Fe(), I.value = !0;
+    }, ie = (s) => {
+      Ne(s), se.value || (I.value = !1);
+    }, _e = () => {
+      Ve(), I.value = !1;
+    }, me = r(() => t.message.reply && t.message.text ? "0" : t.message.text ? W.value > C.value && C.value > 0 ? "0" : "var(--chotto-imagemessage-preview-with-caption-border-radius, 7px 7px 0 0)" : t.message.reply ? "var(--chotto-imagemessage-preview-with-reply-border-radius, 0 0 7px 7px)" : "var(--chotto-imagemessage-preview-border-radius, 7px)"), ue = r(() => Ss(t.message.status)), re = r(() => As(t.message.status, t.message.statusMsg)), { bubbleStyle: qe } = Rs(
+      r(() => t.message),
       { cssVariable: "--chotto-imagemessage-right-bg", position: "right" }
     );
-    function L(u) {
-      return ms(u.position, "image-message");
+    function _(s) {
+      return Ls(s.position, "image-message");
     }
-    const Se = () => T.value = !1, Te = async () => {
-      var u, a;
-      if (s.message.url)
+    const Ke = () => {
+      x.value = !1;
+    }, Qe = r(() => x.value ? V.value : g.value[0]), Ge = async () => {
+      var n, u;
+      const s = Qe.value;
+      if (s != null && s.url)
         try {
-          const i = await fetch(s.message.url, {
+          const h = await fetch(s.url, {
             headers: {
               Accept: "image/*"
             }
-          }), Ue = i.headers.get("content-type") || "", Oe = await i.blob(), j = ((a = (u = s.message.url.split(".").pop()) == null ? void 0 : u.split("?")[0]) == null ? void 0 : a.toLowerCase()) || "", Pe = {
+          }), he = h.headers.get("content-type") || "", es = await h.blob(), q = ((u = (n = s.url.split(".").pop()) == null ? void 0 : n.split("?")[0]) == null ? void 0 : u.toLowerCase()) || "", ss = {
             "image/jpeg": "jpg",
             "image/jpg": "jpg",
             "image/png": "png",
@@ -166,266 +210,310 @@ const us = ["messageId"], gs = ["src"], cs = {
             "image/svg+xml": "svg",
             "image/bmp": "bmp"
           };
-          let ee = j && ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"].includes(j) ? j : Pe[Ue] || "jpg";
-          const Fe = s.message.alt ? s.message.alt.includes(".") ? s.message.alt : `${s.message.alt}.${ee}` : `image-${s.message.messageId}.${ee}`, se = window.URL.createObjectURL(Oe), k = document.createElement("a");
-          k.href = se, k.download = Fe, document.body.appendChild(k), k.click(), document.body.removeChild(k), window.URL.revokeObjectURL(se);
-        } catch (i) {
-          console.error("Ошибка при скачивании изображения:", i);
+          let pe = q && ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"].includes(q) ? q : ss[he] || "jpg";
+          const P = s.filename || t.message.alt, ts = P ? P.includes(".") ? P : `${P}.${pe}` : `image-${t.message.messageId}.${pe}`, we = window.URL.createObjectURL(es), S = document.createElement("a");
+          S.href = we, S.download = ts, document.body.appendChild(S), S.click(), document.body.removeChild(S), window.URL.revokeObjectURL(we);
+        } catch (h) {
+          console.error("Ошибка при скачивании изображения:", h);
         }
-    }, { onToggleReaction: G, onAddReaction: J, onRemoveReaction: K } = rs(S), X = d(null), Y = d(null), Ae = b(() => {
-      var a;
-      const u = (a = Y.value) == null ? void 0 : a.$el;
-      return u instanceof HTMLElement ? u : null;
-    }), { showReactions: Ee, onContentPointerEnter: Z, onContentPointerLeave: _ } = _e({
-      message: () => s.message,
-      messageId: () => s.message.messageId,
-      reactions: () => s.message.reactions,
-      reactionsActive: B,
-      reactionsMode: () => s.reactionsMode,
-      reply: () => le(s.message, "message.image"),
-      menuEnabled: () => x.value.length > 0,
-      contentRef: X,
-      chipsRef: Ae,
+    }, { onToggleReaction: ge, onAddReaction: ce, onRemoveReaction: de } = Es(F), ve = b(null), fe = b(null), Je = r(() => {
+      var n;
+      const s = (n = fe.value) == null ? void 0 : n.$el;
+      return s instanceof HTMLElement ? s : null;
+    }), { showReactions: Xe, onContentPointerEnter: be, onContentPointerLeave: ye } = ws({
+      message: () => t.message,
+      messageId: () => t.message.messageId,
+      reactions: () => t.message.reactions,
+      reactionsActive: X,
+      reactionsMode: () => t.reactionsMode,
+      reply: () => Re(t.message, "message.image"),
+      menuEnabled: () => E.value.length > 0,
+      contentRef: ve,
+      chipsRef: Je,
       handlers: {
-        onToggleReaction: G,
-        onAddReaction: J,
-        onRemoveReaction: K,
-        onMenu: he
+        onToggleReaction: ge,
+        onAddReaction: ce,
+        onRemoveReaction: de,
+        onMenu: ze
       }
-    }), Le = as(() => s.message, () => s.subtextTooltipData);
-    function je() {
-      S("sms-invite", s.message);
+    }), Ye = xs(() => t.message, () => t.subtextTooltipData);
+    function Ze() {
+      F("sms-invite", t.message);
     }
-    return (u, a) => (n(), m("div", {
+    return (s, n) => (l(), o("div", {
       ref_key: "menuAnchorRef",
-      ref: ce,
-      class: h(["image-message", [
-        L(e.message),
+      ref: Pe,
+      class: k(["image-message", [
+        _(e.message),
         e.applyStyle(e.message)
       ]]),
       messageId: e.message.messageId,
-      style: O(t(Ce)),
-      onMouseleave: D
+      style: j(a(qe)),
+      onMouseleave: ie
     }, [
-      e.message.avatar && e.isFirstInSeries ? (n(), m("img", {
+      e.message.avatar && e.isFirstInSeries ? (l(), o("img", {
         key: 0,
         class: "image-message__avatar",
         src: e.message.avatar,
         height: "32",
         width: "32"
-      }, null, 8, gs)) : o("", !0),
-      e.message.subText && e.isFirstInSeries ? (n(), m("p", cs, [
-        g(Xe, {
-          text: t(Le),
+      }, null, 8, Ps)) : i("", !0),
+      e.message.subText && e.isFirstInSeries ? (l(), o("p", js, [
+        v(ys, {
+          text: a(Ye),
           position: e.message.position === "left" ? "right" : "left",
           offset: 8
         }, {
-          default: y(() => [
-            Ve(C(e.message.subText), 1)
+          default: M(() => [
+            is(R(e.message.subText), 1)
           ]),
           _: 1
         }, 8, ["text", "position"])
-      ])) : o("", !0),
-      l("div", {
+      ])) : i("", !0),
+      m("div", {
         ref_key: "contentRef",
-        ref: X,
-        class: h(["image-message__content", { "is-first": e.isFirstInSeries, "with-avatar-indent": !e.isFirstInSeries && e.message.avatar, "has-caption": !!e.message.text }]),
-        onPointerenter: a[4] || (a[4] = //@ts-ignore
-        (...i) => t(Z) && t(Z)(...i)),
-        onPointerleave: a[5] || (a[5] = //@ts-ignore
-        (...i) => t(_) && t(_)(...i))
+        ref: ve,
+        class: k(["image-message__content", { "is-first": e.isFirstInSeries, "with-avatar-indent": !e.isFirstInSeries && e.message.avatar, "has-caption": !!e.message.text }]),
+        onPointerenter: n[3] || (n[3] = //@ts-ignore
+        (...u) => a(be) && a(be)(...u)),
+        onPointerleave: n[4] || (n[4] = //@ts-ignore
+        (...u) => a(ye) && a(ye)(...u))
       }, [
-        a[9] || (a[9] = l("div", {
+        n[8] || (n[8] = m("div", {
           class: "image-message__bottom-shadow",
           "aria-hidden": "true"
         }, null, -1)),
-        e.message.deleted ? (n(), m(ae, { key: 0 }, [
-          g(Ke),
-          l("div", ds, [
-            e.message.time ? (n(), m("span", fs, C(e.message.time), 1)) : o("", !0),
-            g(oe, {
+        e.message.deleted ? (l(), o(O, { key: 0 }, [
+          v(bs),
+          m("div", Os, [
+            e.message.time ? (l(), o("span", Bs, R(e.message.time), 1)) : i("", !0),
+            v(Me, {
               "base-class": "image-message",
-              "message-class": L(e.message),
+              "message-class": _(e.message),
               "message-status": e.message.status,
-              "status-class": q.value,
-              "status-title": Q.value
+              "status-class": ue.value,
+              "status-title": re.value
             }, null, 8, ["message-class", "message-status", "status-class", "status-title"])
           ])
-        ], 64)) : (n(), m(ae, { key: 1 }, [
-          e.message.reply ? (n(), f(qe, {
+        ], 64)) : (l(), o(O, { key: 1 }, [
+          e.message.reply ? (l(), p(cs, {
             key: 0,
             style: { margin: "10px 10px 4px 16px" },
-            class: h(e.message.position),
+            class: k(e.message.position),
             message: e.message.reply,
-            onReply: t(ke)
-          }, null, 8, ["class", "message", "onReply"])) : o("", !0),
-          l("div", {
-            class: h(["image-message__preview-button", { "image-message__preview-button--blur-edges": $.value }]),
-            onClick: a[1] || (a[1] = (i) => T.value = !0),
-            onMouseenter: Re,
-            onMouseleave: D
+            onReply: a(De)
+          }, null, 8, ["class", "message", "onReply"])) : i("", !0),
+          m("div", {
+            class: k(["image-message__preview-button", {
+              "image-message__preview-button--blur-edges": oe.value,
+              "image-message__preview-button--album": d.value
+            }]),
+            style: j(d.value ? { borderRadius: me.value } : void 0),
+            onClick: Le,
+            onMouseenter: We,
+            onMouseleave: ie
           }, [
-            $.value ? (n(), m("div", vs, [
-              l("img", {
-                class: "image-message__blur-left",
-                src: E.value,
-                alt: e.message.alt
-              }, null, 8, bs),
-              l("img", {
-                class: "image-message__blur-right",
-                src: E.value,
+            d.value ? (l(), o("div", {
+              key: 0,
+              class: k(["image-message__album", "image-message__album--" + Te.value])
+            }, [
+              (l(!0), o(O, null, ms(N.value, (u, h) => (l(), o("button", {
+                key: (u.url || "") + "-" + h,
+                type: "button",
+                class: "image-message__album-tile",
+                onClick: A((he) => Ee(h), ["stop"])
+              }, [
+                m("img", {
+                  class: "image-message__album-image",
+                  src: u.imagePreviewUrl || u.url,
+                  alt: u.filename
+                }, null, 8, Ns),
+                z.value > 0 && h === N.value.length - 1 ? (l(), o("span", zs, "+" + R(z.value), 1)) : i("", !0)
+              ], 8, Fs))), 128))
+            ], 2)) : (l(), o(O, { key: 1 }, [
+              oe.value ? (l(), o("div", Hs, [
+                m("img", {
+                  class: "image-message__blur-left",
+                  src: H.value,
+                  alt: e.message.alt
+                }, null, 8, Vs),
+                m("img", {
+                  class: "image-message__blur-right",
+                  src: H.value,
+                  alt: e.message.alt
+                }, null, 8, $s)
+              ])) : i("", !0),
+              m("img", {
+                ref_key: "imageRef",
+                ref: w,
+                class: "image-message__preview-image",
+                style: j({ borderRadius: me.value }),
+                src: H.value,
                 alt: e.message.alt
-              }, null, 8, ys)
-            ])) : o("", !0),
-            l("img", {
-              ref_key: "imageRef",
-              ref: v,
-              class: "image-message__preview-image",
-              style: O({ borderRadius: Ie.value }),
-              src: E.value,
-              alt: e.message.alt
-            }, null, 12, hs),
-            g(R, { name: "modal-fade" }, {
-              default: y(() => [
-                w.value ? (n(), m("div", ws, [
-                  e.message.views ? (n(), m("div", {
+              }, null, 12, Ds)
+            ], 64)),
+            v(L, { name: "modal-fade" }, {
+              default: M(() => [
+                I.value ? (l(), o("div", Ws, [
+                  e.message.views ? (l(), o("div", {
                     key: 0,
                     class: "image-message__views",
-                    onClick: a[0] || (a[0] = ne(
+                    onClick: n[0] || (n[0] = A(
                       //@ts-ignore
-                      (...i) => t(N) && t(N)(...i),
+                      (...u) => a(ae) && a(ae)(...u),
                       ["stop"]
                     ))
                   }, [
-                    a[6] || (a[6] = l("span", { class: "pi pi-eye" }, null, -1)),
-                    l("p", null, C(e.message.views), 1)
-                  ])) : o("", !0),
-                  l("span", ps, C(e.message.time), 1),
-                  g(oe, {
+                    n[5] || (n[5] = m("span", { class: "pi pi-eye" }, null, -1)),
+                    m("p", null, R(e.message.views), 1)
+                  ])) : i("", !0),
+                  m("span", _s, R(e.message.time), 1),
+                  v(Me, {
                     "base-class": "image-message",
-                    "message-class": L(e.message),
+                    "message-class": _(e.message),
                     "message-status": e.message.status,
-                    "status-class": q.value,
-                    "status-title": Q.value
+                    "status-class": ue.value,
+                    "status-title": re.value
                   }, null, 8, ["message-class", "message-status", "status-class", "status-title"])
-                ])) : o("", !0)
+                ])) : i("", !0)
               ]),
               _: 1
             }),
-            g(R, { name: "modal-fade" }, {
-              default: y(() => [
-                w.value ? (n(), m("button", {
+            v(L, { name: "modal-fade" }, {
+              default: M(() => [
+                I.value ? (l(), o("button", {
                   key: 0,
                   class: "image-message__download-button",
-                  onClick: ne(Te, ["stop"])
-                }, [...a[7] || (a[7] = [
-                  l("span", { class: "pi pi-download" }, null, -1)
-                ])])) : o("", !0)
+                  onClick: A(Ge, ["stop"])
+                }, [...n[6] || (n[6] = [
+                  m("span", { class: "pi pi-download" }, null, -1)
+                ])])) : i("", !0)
               ]),
               _: 1
             })
-          ], 34),
-          g(R, { name: "modal-fade" }, {
-            default: y(() => [
-              t(z) && t(x).length && !e.reactionsEnabled && t(re) ? (n(), m("button", {
+          ], 38),
+          v(L, { name: "modal-fade" }, {
+            default: M(() => [
+              a(se) && a(E).length && !e.reactionsEnabled && a(Ie) ? (l(), o("button", {
                 key: 0,
                 class: "image-message__menu-button",
-                onClick: a[2] || (a[2] = //@ts-ignore
-                (...i) => t(H) && t(H)(...i))
-              }, [...a[8] || (a[8] = [
-                l("span", { class: "pi pi-ellipsis-h" }, null, -1)
-              ])])) : o("", !0)
+                onClick: n[1] || (n[1] = //@ts-ignore
+                (...u) => a(te) && a(te)(...u))
+              }, [...n[7] || (n[7] = [
+                m("span", { class: "pi pi-ellipsis-h" }, null, -1)
+              ])])) : i("", !0)
             ]),
             _: 1
           }),
-          (n(), f(ie, { to: "body" }, [
-            g(R, { name: "context-menu" }, {
-              default: y(() => [
-                t(ge) && t(x).length ? (n(), f(We, {
+          (l(), p(ke, { to: "body" }, [
+            v(L, { name: "context-menu" }, {
+              default: M(() => [
+                a(Ue) && a(E).length ? (l(), p(us, {
                   key: 0,
                   ref_key: "menuRef",
-                  ref: de,
+                  ref: je,
                   class: "image-message__context-menu message-actions-menu",
-                  style: O(t(fe)),
-                  "data-theme": t(ve),
-                  actions: t(x),
-                  onClick: t(Me),
-                  onMouseenter: t(we),
-                  onMouseleave: xe
-                }, null, 8, ["style", "data-theme", "actions", "onClick", "onMouseenter"])) : o("", !0)
+                  style: j(a(Oe)),
+                  "data-theme": a(Be),
+                  actions: a(E),
+                  onClick: a($e),
+                  onMouseenter: a(He),
+                  onMouseleave: _e
+                }, null, 8, ["style", "data-theme", "actions", "onClick", "onMouseenter"])) : i("", !0)
               ]),
               _: 1
             })
           ])),
-          e.message.text ? (n(), m("div", {
+          e.message.text ? (l(), o("div", {
             key: 1,
             ref_key: "textRef",
-            ref: c,
+            ref: f,
             class: "image-message__text-container"
           }, [
-            l("p", {
-              onClick: a[3] || (a[3] = //@ts-ignore
-              (...i) => t(W) && t(W)(...i)),
-              innerHTML: t(V)
-            }, null, 8, Ms)
-          ], 512)) : o("", !0),
-          g(Je, {
+            m("p", {
+              onClick: n[2] || (n[2] = //@ts-ignore
+              (...u) => a(le) && a(le)(...u)),
+              innerHTML: a(ne)
+            }, null, 8, qs)
+          ], 512)) : i("", !0),
+          v(fs, {
             status: e.message.status,
             "has-messenger-account": e.message.hasMessengerAccount,
             channel: e.channel,
-            onSmsInvite: je
+            onSmsInvite: Ze
           }, null, 8, ["status", "has-messenger-account", "channel"]),
-          e.message.linkPreview ? (n(), f($e, {
+          e.message.linkPreview ? (l(), p(rs, {
             key: 2,
-            class: h(["image-message__link-preview", e.message.position]),
+            class: k(["image-message__link-preview", e.message.position]),
             "link-preview": e.message.linkPreview
-          }, null, 8, ["class", "link-preview"])) : o("", !0),
-          e.message.embed ? (n(), f(De, {
+          }, null, 8, ["class", "link-preview"])) : i("", !0),
+          e.message.embed ? (l(), p(gs, {
             key: 3,
-            class: h(e.message.position),
+            class: k(e.message.position),
             embed: e.message.embed
-          }, null, 8, ["class", "embed"])) : o("", !0),
-          t(Ee) ? (n(), f(Ge, {
+          }, null, 8, ["class", "embed"])) : i("", !0),
+          a(Xe) ? (l(), p(vs, {
             key: 4,
             ref_key: "reactionsRef",
-            ref: Y,
+            ref: fe,
             reactions: e.message.reactions,
             "message-id": e.message.messageId,
-            enabled: t(B),
+            enabled: a(X),
             mode: e.reactionsMode,
             "current-user-id": e.currentUserId,
             "reaction-user-names": e.reactionUserNames,
-            onToggleReaction: t(G),
-            onAddReaction: t(J),
-            onRemoveReaction: t(K)
-          }, null, 8, ["reactions", "message-id", "enabled", "mode", "current-user-id", "reaction-user-names", "onToggleReaction", "onAddReaction", "onRemoveReaction"])) : o("", !0)
+            onToggleReaction: a(ge),
+            onAddReaction: a(ce),
+            onRemoveReaction: a(de)
+          }, null, 8, ["reactions", "message-id", "enabled", "mode", "current-user-id", "reaction-user-names", "onToggleReaction", "onAddReaction", "onRemoveReaction"])) : i("", !0)
         ], 64))
       ], 34),
-      (n(), f(ie, { to: "body" }, [
-        g(R, { name: "modal-fade" }, {
-          default: y(() => [
-            T.value && !e.message.deleted ? (n(), f(Qe, {
+      (l(), p(ke, { to: "body" }, [
+        v(L, { name: "modal-fade" }, {
+          default: M(() => [
+            x.value && !e.message.deleted ? (l(), p(ds, {
               key: 0,
-              "data-theme": t(F)().theme ? t(F)().theme : "light",
-              title: e.message.alt,
-              onClose: Se
+              "data-theme": a(J)().theme ? a(J)().theme : "light",
+              title: Ae.value,
+              onClose: Ke
             }, {
-              default: y(() => [
-                l("img", {
-                  class: "image-message__modal-image",
-                  src: e.message.url,
-                  alt: e.message.alt
-                }, null, 8, ks)
+              default: M(() => [
+                m("div", Ks, [
+                  d.value ? (l(), o("button", {
+                    key: 0,
+                    type: "button",
+                    class: "image-message__modal-nav image-message__modal-nav--prev",
+                    "aria-label": "Предыдущее изображение",
+                    onClick: A(Z, ["stop"])
+                  }, [...n[9] || (n[9] = [
+                    m("span", { class: "pi pi-chevron-left" }, null, -1)
+                  ])])) : i("", !0),
+                  m("img", {
+                    class: "image-message__modal-image",
+                    src: Se.value,
+                    alt: $.value
+                  }, null, 8, Qs),
+                  d.value ? (l(), o("button", {
+                    key: 1,
+                    type: "button",
+                    class: "image-message__modal-nav image-message__modal-nav--next",
+                    "aria-label": "Следующее изображение",
+                    onClick: A(ee, ["stop"])
+                  }, [...n[10] || (n[10] = [
+                    m("span", { class: "pi pi-chevron-right" }, null, -1)
+                  ])])) : i("", !0),
+                  d.value ? (l(), o("span", Gs, R(y.value + 1) + " / " + R(g.value.length), 1)) : i("", !0)
+                ])
               ]),
               _: 1
-            }, 8, ["data-theme", "title"])) : o("", !0)
+            }, 8, ["data-theme", "title"])) : i("", !0)
           ]),
           _: 1
         })
       ]))
-    ], 46, us));
+    ], 46, Us));
   }
 });
 export {
-  Zs as default
+  Ct as default
 };