@mobilon-dev/chotto 0.3.62 → 0.3.64

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

@@ -1,36 +1,36 @@
-import { defineComponent as Q, inject as U, ref as b, computed as h, watch as X, onMounted as Y, createElementBlock as i, openBlock as t, unref as a, normalizeStyle as Z, normalizeClass as k, createCommentVNode as n, createElementVNode as m, createBlock as g, toDisplayString as R, createVNode as r, Transition as f, withCtx as d, withModifiers as B, Teleport as _ } from "vue";
-import ee from "../../1_atoms/ContextMenu/ContextMenu.vue.js";
-import se from "../../1_atoms/LinkPreview/LinkPreview.vue.js";
-import te from "../../1_atoms/EmbedPreview/EmbedPreview.vue.js";
-import ae from "../BaseReplyMessage/BaseReplyMessage.vue.js";
-import ie from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
-import ne from "../MessageReactions/MessageReactions.vue.js";
-import le from "../MessageStatusIndicator/MessageStatusIndicator.vue.js";
-import oe from "../MessageSmsInvite/MessageSmsInvite.vue.js";
-import { useMessageActions as me } from "../../../hooks/messages/useMessageActions.js";
-import { useMessageLinks as re } from "../../../hooks/messages/useMessageLinks.js";
-import { useChannelAccentColor as ue } from "../../../hooks/messages/useChannelAccentColor.js";
-import { getStatus as ce, getStatusTitle as ge } from "../../../functions/getStatusMessage.js";
-import { getMessageClass as de } from "../../../functions/getMessageClass.js";
-import { createReactionHandlers as ve } from "../../../functions/createReactionHandlers.js";
+import { defineComponent as Y, inject as Z, ref as y, computed as b, watch as E, onMounted as _, createElementBlock as i, openBlock as t, unref as a, normalizeStyle as ee, normalizeClass as w, createCommentVNode as l, createElementVNode as r, createBlock as g, toDisplayString as I, createVNode as u, Transition as h, withCtx as d, withModifiers as V, Teleport as se } from "vue";
+import te from "../../1_atoms/ContextMenu/ContextMenu.vue.js";
+import ae from "../../1_atoms/LinkPreview/LinkPreview.vue.js";
+import ie from "../../1_atoms/EmbedPreview/EmbedPreview.vue.js";
+import le from "../BaseReplyMessage/BaseReplyMessage.vue.js";
+import ne from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
+import oe from "../MessageReactions/MessageReactions.vue.js";
+import me from "../MessageStatusIndicator/MessageStatusIndicator.vue.js";
+import re from "../MessageSmsInvite/MessageSmsInvite.vue.js";
+import { useMessageActions as ue } from "../../../hooks/messages/useMessageActions.js";
+import { useMessageLinks as ce } from "../../../hooks/messages/useMessageLinks.js";
+import { useChannelAccentColor as ge } from "../../../hooks/messages/useChannelAccentColor.js";
+import { getStatus as de, getStatusTitle as ve } from "../../../functions/getStatusMessage.js";
+import { getMessageClass as ke } from "../../../functions/getMessageClass.js";
+import { createReactionHandlers as fe } from "../../../functions/createReactionHandlers.js";
 import "../../../functions/parseMarkdown.js";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
-import { useTheme as ke } from "../../../hooks/useTheme.js";
+import { useTheme as ye } from "../../../hooks/useTheme.js";
 /* empty css                              */
 /* empty css                                              */
-import { isAnimatedSticker as fe } from "./utils/stickerUtils.js";
+import { isAnimatedSticker as be } from "./utils/stickerUtils.js";
 import "./utils/suppress-lit-warning.js";
-const ye = ["messageId"], be = ["src"], he = {
+const we = ["messageId"], he = ["src"], Me = {
   key: 1,
   class: "sticker-message__subtext"
-}, we = ["src"], Me = ["src", "alt"], Se = {
+}, Se = ["src"], Ce = ["src"], Re = ["src", "alt"], Ie = {
   key: 0,
   class: "sticker-message__info-container"
-}, Ce = { class: "sticker-message__time" }, Re = ["href"], xe = {
+}, Te = { class: "sticker-message__time" }, xe = ["href"], pe = {
   key: 1,
   class: "sticker-message__text-container"
-}, Te = ["innerHTML"], Ie = ["src"], Ae = ["src", "alt"], Ze = /* @__PURE__ */ Q({
+}, Le = ["innerHTML"], Ae = ["src"], Fe = ["src"], Be = ["src", "alt"], ts = /* @__PURE__ */ Y({
   __name: "StickerMessage",
   props: {
     message: {
@@ -56,55 +56,65 @@ const ye = ["messageId"], be = ["src"], he = {
     }
   },
   emits: ["action", "reply", "sms-invite"],
-  setup(e, { emit: V }) {
-    const p = U("chatAppId"), { getTheme: x } = ke(p), u = b(!1), w = b(!1);
-    async function T() {
-      if (!(u.value || w.value)) {
-        w.value = !0;
+  setup(e, { emit: $ }) {
+    const H = Z("chatAppId"), { getTheme: T } = ye(H), c = y(!1), M = y(!1);
+    async function x() {
+      if (!(c.value || M.value)) {
+        M.value = !0;
         try {
-          await import("./libs/tgs-player/lottie-player.esm.js"), await import("./libs/tgs-player/tgs-player.esm.js"), u.value = !0;
-        } catch (c) {
-          console.error("Failed to load TGS libraries:", c);
+          await import("./libs/tgs-player/lottie-player.esm.js"), await import("./libs/tgs-player/tgs-player.esm.js"), c.value = !0;
+        } catch (m) {
+          console.error("Failed to load TGS libraries:", m);
         } finally {
-          w.value = !1;
+          M.value = !1;
         }
       }
     }
-    const l = e, M = V, S = b(!1), {
-      isOpenMenu: C,
-      buttonMenuVisible: E,
-      showMenu: H,
-      hideMenu: I,
-      clickAction: N,
-      viewsAction: A,
-      handleClickReplied: P
-    } = me(l.message, M), v = b(!1), { linkedHtml: O, inNewWindow: F } = re(() => l.message.text), $ = () => {
-      H(), v.value = !0;
-    }, j = h(() => ce(l.message.status)), q = h(() => ge(l.message.status, l.message.statusMsg)), { bubbleStyle: z } = ue(
-      h(() => l.message),
+    const n = e, S = $, C = y(!1), {
+      isOpenMenu: R,
+      buttonMenuVisible: N,
+      showMenu: P,
+      hideMenu: p,
+      clickAction: j,
+      viewsAction: L,
+      handleClickReplied: O
+    } = ue(n.message, S), v = y(!1), { linkedHtml: q, inNewWindow: A } = ce(() => n.message.text), z = () => {
+      P(), v.value = !0;
+    }, D = b(() => de(n.message.status)), G = b(() => ve(n.message.status, n.message.statusMsg)), { bubbleStyle: W } = ge(
+      b(() => n.message),
       { cssVariable: "--chotto-stickermessage-right-bg", position: "right" }
-    ), y = h(() => fe(l.message.url, l.message.isAnimated));
-    X(y, (c) => {
-      c && !u.value && T();
-    }, { immediate: !0 }), Y(() => {
-      y.value && !u.value && T();
+    ), k = b(() => be(n.message.url, n.message.isAnimated)), f = y(!1), F = b(() => {
+      if (k.value) return !1;
+      const m = String(n.message.url || "").toLowerCase();
+      return !/\.(webp|png|jpe?g|gif|bmp|svg)(\?|#|$)/.test(m);
     });
-    function L(c) {
-      return de(c.position, "sticker-message");
+    E(
+      () => n.message.url,
+      () => {
+        f.value = !1;
+      },
+      { immediate: !0 }
+    ), E(k, (m) => {
+      m && !c.value && x();
+    }, { immediate: !0 }), _(() => {
+      k.value && !c.value && x();
+    });
+    function B(m) {
+      return ke(m.position, "sticker-message");
     }
-    const D = () => S.value = !1, { onToggleReaction: G, onAddReaction: W, onRemoveReaction: J } = ve(M);
-    function K() {
-      M("sms-invite", l.message);
+    const J = () => C.value = !1, { onToggleReaction: K, onAddReaction: Q, onRemoveReaction: U } = fe(S);
+    function X() {
+      S("sms-invite", n.message);
     }
-    return (c, s) => (t(), i("div", {
-      class: k(["sticker-message", [
-        L(e.message),
+    return (m, s) => (t(), i("div", {
+      class: w(["sticker-message", [
+        B(e.message),
         e.applyStyle(e.message)
       ]]),
       messageId: e.message.messageId,
-      style: Z(a(z)),
-      onMouseleave: s[5] || (s[5] = //@ts-ignore
-      (...o) => a(I) && a(I)(...o))
+      style: ee(a(W)),
+      onMouseleave: s[7] || (s[7] = //@ts-ignore
+      (...o) => a(p) && a(p)(...o))
     }, [
       e.message.avatar && e.isFirstInSeries ? (t(), i("img", {
         key: 0,
@@ -112,65 +122,75 @@ const ye = ["messageId"], be = ["src"], he = {
         src: e.message.avatar,
         height: "32",
         width: "32"
-      }, null, 8, be)) : n("", !0),
-      e.message.subText && e.isFirstInSeries ? (t(), i("p", he, R(e.message.subText), 1)) : n("", !0),
-      m("div", {
-        class: k(["sticker-message__content", { "is-first": e.isFirstInSeries, "with-avatar-indent": !e.isFirstInSeries && e.message.avatar }])
+      }, null, 8, he)) : l("", !0),
+      e.message.subText && e.isFirstInSeries ? (t(), i("p", Me, I(e.message.subText), 1)) : l("", !0),
+      r("div", {
+        class: w(["sticker-message__content", { "is-first": e.isFirstInSeries, "with-avatar-indent": !e.isFirstInSeries && e.message.avatar }])
       }, [
-        e.message.reply ? (t(), g(ae, {
+        e.message.reply ? (t(), g(le, {
           key: 0,
           style: { margin: "10px 10px 4px 16px" },
-          class: k(e.message.position),
+          class: w(e.message.position),
           message: e.message.reply,
-          onReply: a(P)
-        }, null, 8, ["class", "message", "onReply"])) : n("", !0),
-        m("div", {
+          onReply: a(O)
+        }, null, 8, ["class", "message", "onReply"])) : l("", !0),
+        r("div", {
           class: "sticker-message__preview-button",
-          onClick: s[1] || (s[1] = (o) => S.value = !0),
-          onMouseenter: $,
-          onMouseleave: s[2] || (s[2] = (o) => v.value = !v.value)
+          onClick: s[2] || (s[2] = (o) => C.value = !0),
+          onMouseenter: z,
+          onMouseleave: s[3] || (s[3] = (o) => v.value = !v.value)
         }, [
-          y.value && u.value ? (t(), i("tgs-player", {
+          k.value && c.value ? (t(), i("tgs-player", {
             key: 0,
             class: "sticker-message__preview-image-animated",
             src: e.message.url,
             autoplay: "",
             loop: "",
             mode: "normal"
-          }, null, 8, we)) : (t(), i("img", {
+          }, null, 8, Se)) : F.value && !f.value ? (t(), i("video", {
             key: 1,
             class: "sticker-message__preview-image",
             src: e.message.url,
+            autoplay: "",
+            loop: "",
+            muted: "",
+            playsinline: "",
+            preload: "metadata",
+            onError: s[0] || (s[0] = (o) => f.value = !0)
+          }, null, 40, Ce)) : (t(), i("img", {
+            key: 2,
+            class: "sticker-message__preview-image",
+            src: e.message.url,
             alt: e.message.alt
-          }, null, 8, Me)),
-          r(f, { name: "modal-fade" }, {
+          }, null, 8, Re)),
+          u(h, { name: "modal-fade" }, {
             default: d(() => [
-              v.value ? (t(), i("div", Se, [
+              v.value ? (t(), i("div", Ie, [
                 e.message.views ? (t(), i("div", {
                   key: 0,
                   class: "sticker-message__views",
-                  onClick: s[0] || (s[0] = B(
+                  onClick: s[1] || (s[1] = V(
                     //@ts-ignore
-                    (...o) => a(A) && a(A)(...o),
+                    (...o) => a(L) && a(L)(...o),
                     ["stop"]
                   ))
                 }, [
-                  s[6] || (s[6] = m("span", { class: "pi pi-eye" }, null, -1)),
-                  m("p", null, R(e.message.views), 1)
-                ])) : n("", !0),
-                m("span", Ce, R(e.message.time), 1),
-                r(le, {
+                  s[8] || (s[8] = r("span", { class: "pi pi-eye" }, null, -1)),
+                  r("p", null, I(e.message.views), 1)
+                ])) : l("", !0),
+                r("span", Te, I(e.message.time), 1),
+                u(me, {
                   "base-class": "sticker-message",
-                  "message-class": L(e.message),
+                  "message-class": B(e.message),
                   "message-status": e.message.status,
-                  "status-class": j.value,
-                  "status-title": q.value
+                  "status-class": D.value,
+                  "status-title": G.value
                 }, null, 8, ["message-class", "message-status", "status-class", "status-title"])
-              ])) : n("", !0)
+              ])) : l("", !0)
             ]),
             _: 1
           }),
-          r(f, { name: "modal-fade" }, {
+          u(h, { name: "modal-fade" }, {
             default: d(() => [
               v.value ? (t(), i("a", {
                 key: 0,
@@ -178,102 +198,112 @@ const ye = ["messageId"], be = ["src"], he = {
                 href: e.message.url,
                 download: "",
                 target: "_blank",
-                onClick: B(() => "//Предотвращаем всплытие события клика", ["stop"])
-              }, [...s[7] || (s[7] = [
-                m("span", { class: "pi pi-download" }, null, -1)
-              ])], 8, Re)) : n("", !0)
+                onClick: V(() => "//Предотвращаем всплытие события клика", ["stop"])
+              }, [...s[9] || (s[9] = [
+                r("span", { class: "pi pi-download" }, null, -1)
+              ])], 8, xe)) : l("", !0)
             ]),
             _: 1
           })
         ], 32),
-        r(f, { name: "modal-fade" }, {
+        u(h, { name: "modal-fade" }, {
           default: d(() => [
-            a(E) && e.message.actions ? (t(), i("button", {
+            a(N) && e.message.actions ? (t(), i("button", {
               key: 0,
               class: "sticker-message__menu-button",
-              onClick: s[3] || (s[3] = (o) => C.value = !a(C))
-            }, [...s[8] || (s[8] = [
-              m("span", { class: "pi pi-ellipsis-h" }, null, -1)
-            ])])) : n("", !0)
+              onClick: s[4] || (s[4] = (o) => R.value = !a(R))
+            }, [...s[10] || (s[10] = [
+              r("span", { class: "pi pi-ellipsis-h" }, null, -1)
+            ])])) : l("", !0)
           ]),
           _: 1
         }),
-        r(f, { name: "context-menu" }, {
+        u(h, { name: "context-menu" }, {
           default: d(() => [
-            a(C) && e.message.actions ? (t(), g(ee, {
+            a(R) && e.message.actions ? (t(), g(te, {
               key: 0,
               class: "sticker-message__context-menu",
               actions: e.message.actions,
-              onClick: a(N)
-            }, null, 8, ["actions", "onClick"])) : n("", !0)
+              onClick: a(j)
+            }, null, 8, ["actions", "onClick"])) : l("", !0)
           ]),
           _: 1
         }),
-        e.message.text ? (t(), i("div", xe, [
-          m("p", {
-            onClick: s[4] || (s[4] = //@ts-ignore
-            (...o) => a(F) && a(F)(...o)),
-            innerHTML: a(O)
-          }, null, 8, Te)
-        ])) : n("", !0),
-        r(oe, {
+        e.message.text ? (t(), i("div", pe, [
+          r("p", {
+            onClick: s[5] || (s[5] = //@ts-ignore
+            (...o) => a(A) && a(A)(...o)),
+            innerHTML: a(q)
+          }, null, 8, Le)
+        ])) : l("", !0),
+        u(re, {
           status: e.message.status,
           "has-messenger-account": e.message.hasMessengerAccount,
           channel: e.channel,
-          onSmsInvite: K
+          onSmsInvite: X
         }, null, 8, ["status", "has-messenger-account", "channel"]),
-        e.message.linkPreview ? (t(), g(se, {
+        e.message.linkPreview ? (t(), g(ae, {
           key: 2,
-          class: k(["sticker-message__link-preview", e.message.position]),
+          class: w(["sticker-message__link-preview", e.message.position]),
           "link-preview": e.message.linkPreview
-        }, null, 8, ["class", "link-preview"])) : n("", !0),
-        e.message.embed ? (t(), g(te, {
+        }, null, 8, ["class", "link-preview"])) : l("", !0),
+        e.message.embed ? (t(), g(ie, {
           key: 3,
-          class: k(e.message.position),
+          class: w(e.message.position),
           embed: e.message.embed
-        }, null, 8, ["class", "embed"])) : n("", !0),
-        r(ne, {
+        }, null, 8, ["class", "embed"])) : l("", !0),
+        u(oe, {
           reactions: e.message.reactions,
           "message-id": e.message.messageId,
           enabled: e.reactionsEnabled,
-          onToggleReaction: a(G),
-          onAddReaction: a(W),
-          onRemoveReaction: a(J)
+          onToggleReaction: a(K),
+          onAddReaction: a(Q),
+          onRemoveReaction: a(U)
         }, null, 8, ["reactions", "message-id", "enabled", "onToggleReaction", "onAddReaction", "onRemoveReaction"])
       ], 2),
-      (t(), g(_, { to: "body" }, [
-        r(f, { name: "modal-fade" }, {
+      (t(), g(se, { to: "body" }, [
+        u(h, { name: "modal-fade" }, {
           default: d(() => [
-            S.value ? (t(), g(ie, {
+            C.value ? (t(), g(ne, {
               key: 0,
-              "data-theme": a(x)().theme ? a(x)().theme : "light",
+              "data-theme": a(T)().theme ? a(T)().theme : "light",
               title: e.message.alt,
-              onClose: D
+              onClose: J
             }, {
               default: d(() => [
-                y.value && u.value ? (t(), i("tgs-player", {
+                k.value && c.value ? (t(), i("tgs-player", {
                   key: 0,
                   class: "sticker-message__modal-image-animated",
                   src: e.message.url,
                   autoplay: "",
                   loop: "",
                   mode: "normal"
-                }, null, 8, Ie)) : (t(), i("img", {
+                }, null, 8, Ae)) : F.value && !f.value ? (t(), i("video", {
                   key: 1,
                   class: "sticker-message__modal-image",
                   src: e.message.url,
+                  autoplay: "",
+                  loop: "",
+                  muted: "",
+                  playsinline: "",
+                  preload: "metadata",
+                  onError: s[6] || (s[6] = (o) => f.value = !0)
+                }, null, 40, Fe)) : (t(), i("img", {
+                  key: 2,
+                  class: "sticker-message__modal-image",
+                  src: e.message.url,
                   alt: e.message.alt
-                }, null, 8, Ae))
+                }, null, 8, Be))
               ]),
               _: 1
-            }, 8, ["data-theme", "title"])) : n("", !0)
+            }, 8, ["data-theme", "title"])) : l("", !0)
           ]),
           _: 1
         })
       ]))
-    ], 46, ye));
+    ], 46, we));
   }
 });
 export {
-  Ze as default
+  ts as default
 };