@mobilon-dev/chotto 0.3.81 → 0.3.82

package/dist/components/2_chatinput_elements/FilePreview/FilePreview.vue.js

@@ -1,7 +1,7 @@
 import o from "./FilePreview.vue2.js";
 /* empty css                 */
 import r from "../../../_virtual/_plugin-vue_export-helper.js";
-const i = /* @__PURE__ */ r(o, [["__scopeId", "data-v-b83aa92d"]]);
+const i = /* @__PURE__ */ r(o, [["__scopeId", "data-v-94cf2f67"]]);
 export {
   i as default
 };

package/dist/components/2_chatinput_elements/FilePreview/FilePreview.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as M, inject as P, ref as s, computed as I, onMounted as x, createElementBlock as n, openBlock as o, createElementVNode as i, createBlock as h, withDirectives as k, vShow as g, createCommentVNode as r, toDisplayString as c, Teleport as A, createVNode as L, Transition as U, withCtx as T, unref as N } from "vue";
+import { defineComponent as V, inject as $, ref as s, computed as I, onMounted as x, createElementBlock as n, openBlock as o, createElementVNode as i, createBlock as h, withDirectives as k, vShow as g, createCommentVNode as r, toDisplayString as c, Teleport as A, createVNode as L, Transition as U, withCtx as T, unref as N } from "vue";
 import z from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
@@ -8,19 +8,20 @@ import { useTheme as B } from "../../../hooks/useTheme.js";
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-const D = { class: "preview__container" }, j = { class: "preview__block" }, F = ["src"], O = ["src"], q = {
+import { safeMediaPlay as D } from "../../../functions/safeMediaPlay.js";
+const j = { class: "preview__container" }, F = { class: "preview__block" }, O = ["src"], q = ["src"], G = {
   key: 2,
   style: { display: "flex", gap: "5px" }
-}, G = ["src"], H = { class: "pi pi-play" }, J = { class: "pi pi-pause" }, K = { key: 3 }, Q = { class: "preview__control-block" }, R = { class: "preview__information" }, W = { class: "preview__name" }, X = {
+}, H = ["src"], J = { class: "pi pi-play" }, K = { class: "pi pi-pause" }, Q = { key: 3 }, R = { class: "preview__control-block" }, W = { class: "preview__information" }, X = { class: "preview__name" }, Y = {
   key: 0,
   class: "preview__size"
-}, Y = {
+}, Z = {
   key: 1,
   class: "preview__audio-time"
-}, Z = {
+}, ee = {
   key: 2,
   class: "preview__audio-time"
-}, ee = { class: "preview__reset" }, ie = ["src"], te = ["src"], ce = /* @__PURE__ */ M({
+}, ie = { class: "preview__reset" }, te = ["src"], le = ["src"], pe = /* @__PURE__ */ V({
   __name: "FilePreview",
   props: {
     fileInfo: {
@@ -30,56 +31,56 @@ const D = { class: "preview__container" }, j = { class: "preview__block" }, F =
   },
   emits: ["reset"],
   setup(t, { emit: C }) {
-    const b = P("chatAppId"), { getTheme: p } = B(b), E = C, e = s(), a = s(), u = s(!1), v = s(0), _ = s(0), d = s(!1), S = () => d.value = !1;
-    function V() {
-      e.value && (u.value ? e.value.pause() : e.value.play(), u.value = !u.value);
+    const b = $("chatAppId"), { getTheme: p } = B(b), E = C, e = s(), a = s(), u = s(!1), d = s(0), _ = s(0), v = s(!1), M = () => v.value = !1;
+    function P() {
+      e.value && (u.value ? e.value.pause() : D(e.value), u.value = !u.value);
     }
     const w = (m) => {
       const l = Math.floor(m / 60), f = Math.floor(m % 60);
       return `${l.toString().padStart(2, "0")}:${f.toString().padStart(2, "0")}`;
-    }, $ = I(() => e.value ? w(_.value) : "0:00"), y = I(() => e.value || a.value ? w(v.value) : "0:00");
+    }, S = I(() => e.value ? w(_.value) : "0:00"), y = I(() => e.value || a.value ? w(d.value) : "0:00");
     return x(() => {
       e.value != null && (e.value.addEventListener("loadedmetadata", () => {
         e.value != null && (e.value.duration == 1 / 0 || Number.isNaN(e.value.duration)) && (e.value.currentTime = 1e101, e.value.addEventListener("timeupdate", () => {
-          e.value && (e.value.currentTime = 0, v.value = e.value.duration);
-        }, { once: !0 })), v.value = e.value != null ? e.value.duration : 0;
+          e.value && (e.value.currentTime = 0, d.value = e.value.duration);
+        }, { once: !0 })), d.value = e.value != null ? e.value.duration : 0;
       }), e.value.addEventListener("timeupdate", () => {
         _.value = e.value != null ? e.value.currentTime : 0;
       })), a.value && a.value.addEventListener("loadedmetadata", () => {
-        a.value && (v.value = a.value.duration, (a.value.duration == 1 / 0 || Number.isNaN(a.value.duration)) && (a.value.currentTime = 1e101, a.value.addEventListener("timeupdate", () => {
-          a.value && (a.value.currentTime = 0, v.value = a.value.duration);
+        a.value && (d.value = a.value.duration, (a.value.duration == 1 / 0 || Number.isNaN(a.value.duration)) && (a.value.currentTime = 1e101, a.value.addEventListener("timeupdate", () => {
+          a.value && (a.value.currentTime = 0, d.value = a.value.duration);
         }, { once: !0 })));
       });
-    }), (m, l) => (o(), n("div", D, [
-      i("div", j, [
+    }), (m, l) => (o(), n("div", j, [
+      i("div", F, [
         t.fileInfo.isImage ? (o(), n("div", {
           key: 0,
           style: { position: "relative" },
-          onClick: l[0] || (l[0] = (f) => d.value = !0)
+          onClick: l[0] || (l[0] = (f) => v.value = !0)
         }, [
           i("img", {
             src: t.fileInfo.previewUrl,
             alt: "Image Preview",
             class: "preview__image"
-          }, null, 8, F),
+          }, null, 8, O),
           l[3] || (l[3] = i("div", { class: "preview__shadow" }, [
             i("span", { class: "pi pi-plus-circle" })
           ], -1))
         ])) : t.fileInfo.isVideo ? (o(), n("div", {
           key: 1,
           style: { position: "relative" },
-          onClick: l[1] || (l[1] = (f) => d.value = !0)
+          onClick: l[1] || (l[1] = (f) => v.value = !0)
         }, [
           i("video", {
             ref_key: "video",
             ref: a,
             src: t.fileInfo.previewUrl,
             class: "preview__video"
-          }, null, 8, O),
+          }, null, 8, q),
           l[4] || (l[4] = i("div", { class: "preview__shadow" }, [
             i("span", { class: "pi pi-play" })
           ], -1))
-        ])) : t.fileInfo.isAudio ? (o(), n("div", q, [
+        ])) : t.fileInfo.isAudio ? (o(), n("div", G, [
           l[5] || (l[5] = i("span", {
             class: "pi pi-headphones",
             style: { "font-size": "1rem", margin: "auto" }
@@ -88,33 +89,33 @@ const D = { class: "preview__container" }, j = { class: "preview__block" }, F =
             ref_key: "audio",
             ref: e,
             src: t.fileInfo.previewUrl
-          }, null, 8, G),
+          }, null, 8, H),
           i("button", {
             class: "preview__audio-control",
-            onClick: V
+            onClick: P
           }, [
-            k(i("span", H, null, 512), [
+            k(i("span", J, null, 512), [
               [g, !u.value]
             ]),
-            k(i("span", J, null, 512), [
+            k(i("span", K, null, 512), [
               [g, u.value]
             ])
           ])
-        ])) : (o(), n("div", K, [...l[6] || (l[6] = [
+        ])) : (o(), n("div", Q, [...l[6] || (l[6] = [
           i("span", {
             class: "pi pi-file",
             style: { "font-size": "2.5rem" }
           }, null, -1)
         ])]))
       ]),
-      i("div", Q, [
-        i("div", R, [
-          i("span", W, c(t.fileInfo.fileName), 1),
-          !t.fileInfo.isAudio && !t.fileInfo.isVideo ? (o(), n("span", X, c(t.fileInfo.fileSize), 1)) : r("", !0),
-          t.fileInfo.isAudio ? (o(), n("span", Y, c(`${$.value} / ${y.value}`), 1)) : r("", !0),
-          t.fileInfo.isVideo ? (o(), n("span", Z, c(y.value), 1)) : r("", !0)
+      i("div", R, [
+        i("div", W, [
+          i("span", X, c(t.fileInfo.fileName), 1),
+          !t.fileInfo.isAudio && !t.fileInfo.isVideo ? (o(), n("span", Y, c(t.fileInfo.fileSize), 1)) : r("", !0),
+          t.fileInfo.isAudio ? (o(), n("span", Z, c(`${S.value} / ${y.value}`), 1)) : r("", !0),
+          t.fileInfo.isVideo ? (o(), n("span", ee, c(y.value), 1)) : r("", !0)
         ]),
-        i("div", ee, [
+        i("div", ie, [
           i("span", {
             class: "pi pi-times",
             onClick: l[2] || (l[2] = (f) => E("reset"))
@@ -124,11 +125,11 @@ const D = { class: "preview__container" }, j = { class: "preview__block" }, F =
       (o(), h(A, { to: "body" }, [
         L(U, { name: "modal-fade" }, {
           default: T(() => [
-            d.value ? (o(), h(z, {
+            v.value ? (o(), h(z, {
               key: 0,
               theme: N(p)().theme ? N(p)().theme : "",
               title: t.fileInfo.fileName,
-              onClose: S
+              onClose: M
             }, {
               default: T(() => [
                 t.fileInfo.isVideo ? (o(), n("video", {
@@ -137,13 +138,13 @@ const D = { class: "preview__container" }, j = { class: "preview__block" }, F =
                   src: t.fileInfo.previewUrl,
                   controls: "",
                   autoplay: ""
-                }, null, 8, ie)) : r("", !0),
+                }, null, 8, te)) : r("", !0),
                 t.fileInfo.isImage ? (o(), n("img", {
                   key: 1,
                   class: "preview__modal-image",
                   src: t.fileInfo.previewUrl,
                   alt: "Image Preview"
-                }, null, 8, te)) : r("", !0)
+                }, null, 8, le)) : r("", !0)
               ]),
               _: 1
             }, 8, ["theme", "title"])) : r("", !0)
@@ -155,5 +156,5 @@ const D = { class: "preview__container" }, j = { class: "preview__block" }, F =
   }
 });
 export {
-  ce as default
+  pe as default
 };

package/dist/components/2_chatinput_elements/StickerPicker/StickerPicker.vue.js

@@ -1,7 +1,7 @@
 import o from "./StickerPicker.vue2.js";
 /* empty css                   */
 import r from "../../../_virtual/_plugin-vue_export-helper.js";
-const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-3384ea35"]]);
+const i = /* @__PURE__ */ r(o, [["__scopeId", "data-v-bbb6923b"]]);
 export {
-  c as default
+  i as default
 };

package/dist/components/2_chatinput_elements/StickerPicker/StickerPicker.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as Pe, ref as i, inject as Ee, computed as d, watchEffect as Fe, watch as z, onMounted as Le, onUnmounted as Ue, createElementBlock as a, openBlock as o, Fragment as X, createCommentVNode as C, createVNode as P, unref as E, normalizeClass as Q, createElementVNode as F, Transition as Z, withCtx as x, withDirectives as $e, renderList as ee, toDisplayString as te, vShow as Oe, normalizeStyle as Ae } from "vue";
-import { useMessageDraft as Be } from "../../../hooks/useMessageDraft.js";
+import { defineComponent as Ee, ref as i, inject as Fe, computed as p, watchEffect as Le, watch as z, onMounted as Ue, onUnmounted as $e, createElementBlock as a, openBlock as o, Fragment as X, createCommentVNode as C, createVNode as P, unref as E, normalizeClass as Z, createElementVNode as F, Transition as x, withCtx as ee, withDirectives as Oe, renderList as te, toDisplayString as se, vShow as Ae, normalizeStyle as Be } from "vue";
+import { useMessageDraft as De } from "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
 /* empty css                              */
@@ -7,22 +7,22 @@ import "../../../hooks/useTheme.js";
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-import se from "./icons/StickerIcon.vue.js";
+import re from "./icons/StickerIcon.vue.js";
 import { isAnimatedSticker as L } from "../../2_feed_elements/StickerMessage/utils/stickerUtils.js";
 import "../../2_feed_elements/StickerMessage/utils/suppress-lit-warning.js";
-const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseenter", "onMouseleave"], Ne = ["src"], Ve = ["src", "alt"], Re = {
+const We = { class: "sticker-picker__container" }, Ne = ["onClick", "onMouseenter", "onMouseleave"], Ve = ["src"], Re = ["src", "alt"], He = {
   key: 2,
   class: "sticker-picker__tab-icon-placeholder"
-}, He = { class: "sticker-picker__content" }, Ie = {
+}, Ie = { class: "sticker-picker__content" }, je = {
   key: 0,
   class: "sticker-picker__empty"
-}, je = {
+}, ze = {
   key: 1,
   class: "sticker-picker__grid"
-}, ze = ["onClick", "onMouseenter"], Xe = ["src"], Ye = ["src", "alt"], Ge = ["src"], Ke = ["src", "alt"], qe = {
+}, Xe = ["onClick", "onMouseenter"], Ye = ["src"], Ge = ["src", "alt"], Ke = ["src"], qe = ["src", "alt"], Je = {
   key: 2,
   class: "sticker-picker__preview-label"
-}, Je = 700, nt = /* @__PURE__ */ Pe({
+}, Qe = 700, ut = /* @__PURE__ */ Ee({
   __name: "StickerPicker",
   props: {
     state: { default: "active" },
@@ -31,7 +31,7 @@ const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseente
     emptyText: { default: "Нет доступных стикеров" }
   },
   setup(U) {
-    const l = U, $ = i(null), O = i(null), A = i(null), B = i(null), u = i(!1), p = i(0), m = Ee("chatAppId"), { getMessage: re, setMessageFile: le, setForceSendMessage: ae } = Be(m), y = i("#5F5F5F"), b = i("#404040"), D = i(!1);
+    const l = U, $ = i(null), O = i(null), A = i(null), B = i(null), u = i(!1), d = i(0), m = Fe("chatAppId"), { getMessage: le, setMessageFile: ae, setForceSendMessage: oe } = De(m), y = i("#5F5F5F"), b = i("#404040"), D = i(!1);
     let h = null;
     const W = () => {
       if (!m) {
@@ -43,10 +43,10 @@ const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseente
         y.value = "#5F5F5F", b.value = "#404040";
         return;
       }
-      const t = window.getComputedStyle(e), s = t.getPropertyValue("--chotto-stickerpicker-button-span-color").trim(), r = t.getPropertyValue("--chotto-stickerpicker-button-span-hover-color").trim();
-      y.value = s || "#5F5F5F", b.value = r || "#404040";
-    }, oe = d(() => D.value ? b.value : y.value);
-    Fe(() => {
+      const t = window.getComputedStyle(e), r = t.getPropertyValue("--chotto-stickerpicker-button-span-color").trim(), s = t.getPropertyValue("--chotto-stickerpicker-button-span-hover-color").trim();
+      y.value = r || "#5F5F5F", b.value = s || "#404040";
+    }, ie = p(() => D.value ? b.value : y.value);
+    Le(() => {
       W();
     });
     const n = i(null), N = i({}), w = i(null), v = i(/* @__PURE__ */ new Map()), k = i(/* @__PURE__ */ new Map());
@@ -64,25 +64,25 @@ const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseente
         }
       }
     }
-    const ie = () => {
+    const ce = () => {
       if (!l.stickers || !Array.isArray(l.stickers) || l.stickers.length === 0)
         return { hasTabs: !1, tabs: [] };
-      const e = l.stickers[0], t = Array.isArray(e), s = e && typeof e == "object" && "stickers" in e;
+      const e = l.stickers[0], t = Array.isArray(e), r = e && typeof e == "object" && "stickers" in e;
       return t ? {
         hasTabs: !0,
-        tabs: l.stickers.map((r, c) => ({
+        tabs: l.stickers.map((s, c) => ({
           id: `tab-${c}`,
           label: `Set ${c + 1}`,
-          stickers: r,
-          iconUrl: r && r.length > 0 ? r[0].url : null
+          stickers: s,
+          iconUrl: s && s.length > 0 ? s[0].url : null
         }))
-      } : s && "stickers" in e ? {
+      } : r && "stickers" in e ? {
         hasTabs: !0,
-        tabs: l.stickers.map((r, c) => ({
-          id: r.id || `tab-${c}`,
-          label: r.label || `Set ${c + 1}`,
-          stickers: r.stickers || [],
-          iconUrl: r.iconUrl || (r.stickers && r.stickers.length > 0 ? r.stickers[0].url : null)
+        tabs: l.stickers.map((s, c) => ({
+          id: s.id || `tab-${c}`,
+          label: s.label || `Set ${c + 1}`,
+          stickers: s.stickers || [],
+          iconUrl: s.iconUrl || (s.stickers && s.stickers.length > 0 ? s.stickers[0].url : null)
         }))
       } : {
         hasTabs: !0,
@@ -93,61 +93,62 @@ const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseente
           iconUrl: l.stickers.length > 0 ? l.stickers[0].url : null
         }]
       };
-    }, R = d(() => ie()), ce = d(() => R.value.hasTabs && R.value.tabs.length > 0), _ = d(() => R.value.tabs), H = d(() => {
+    }, R = p(() => ce()), ne = p(() => R.value.hasTabs && R.value.tabs.length > 0), _ = p(() => R.value.tabs), H = p(() => {
       var e;
-      return _.value.length === 0 ? [] : ((e = _.value[p.value]) == null ? void 0 : e.stickers) || [];
-    }), G = d(() => {
-      const e = H.value.some((s) => L(s.url)), t = _.value.some((s) => s.iconUrl && L(s.iconUrl));
+      return _.value.length === 0 ? [] : ((e = _.value[d.value]) == null ? void 0 : e.stickers) || [];
+    }), G = p(() => {
+      const e = H.value.some((r) => L(r.url)), t = _.value.some((r) => r.iconUrl && L(r.iconUrl));
       return e || t;
     });
     z(G, (e) => {
       e && !f.value && Y();
     }, { immediate: !0 });
-    const I = (e) => L(e.url), ne = (e, t) => {
+    const I = (e) => L(e.url), ue = (e, t) => {
       t ? v.value.set(e, t) : v.value.delete(e);
-    }, ue = (e, t) => {
+    }, ve = (e, t) => {
       t ? k.value.set(e, t) : k.value.delete(e);
-    }, ve = (e) => {
-      const t = k.value.get(e);
-      t && typeof t.play == "function" && t.play();
+    }, K = (e) => {
+      if (!(!e || typeof e.play != "function"))
+        try {
+          e.play();
+        } catch {
+        }
     }, fe = (e) => {
+      K(k.value.get(e));
+    }, ke = (e) => {
       const t = k.value.get(e);
       t && typeof t.pause == "function" && t.pause();
     };
-    z(p, () => {
+    z(d, () => {
       v.value.clear();
     }), z(() => l.stickers, () => {
-      p.value >= _.value.length && (p.value = 0);
+      d.value >= _.value.length && (d.value = 0);
     }, { deep: !0 });
-    const ke = (e) => {
+    const de = (e) => {
       if (!e) return "image";
       const t = e.toLowerCase();
       return t.endsWith(".tgs") || t.endsWith(".webp") ? "sticker" : "image";
-    }, K = (e) => {
+    }, q = (e) => {
       if (l.state === "disabled") return;
-      const t = ke(e.url);
-      le({
+      const t = de(e.url);
+      ae({
         url: e.url,
         name: e.alt || `sticker.${t === "sticker" ? e.url.toLowerCase().endsWith(".tgs") ? "tgs" : "webp" : "png"}`,
         type: t
-      }), ae(!0), l.mode === "click" && (u.value = !1);
+      }), oe(!0), l.mode === "click" && (u.value = !1);
     }, pe = (e, t) => {
-      if (I(e) && f.value) {
-        const s = v.value.get(t);
-        s && typeof s.play == "function" && s.play();
-      }
-      S(), w.value = setTimeout(() => {
-        he(e);
-      }, Je);
-    }, de = () => {
+      I(e) && f.value && K(v.value.get(t)), S(), w.value = setTimeout(() => {
+        _e(e);
+      }, Qe);
+    }, me = () => {
       v.value.forEach((e) => {
         e && typeof e.pause == "function" && e.pause();
       }), S(), g();
-    }, me = (e) => {
-      S(), g(), K(e);
+    }, he = (e) => {
+      S(), g(), q(e);
     }, S = () => {
       w.value && (clearTimeout(w.value), w.value = null);
-    }, he = (e) => {
+    }, _e = (e) => {
       n.value = e, N.value = {
         left: "50%",
         top: "50%",
@@ -155,9 +156,9 @@ const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseente
       };
     }, g = () => {
       n.value = null, N.value = {};
-    }, _e = () => {
-      n.value && (K(n.value), g());
-    }, q = () => {
+    }, ge = () => {
+      n.value && (q(n.value), g());
+    }, J = () => {
       l.state === "active" && (u.value = !0);
     }, j = () => {
       v.value.forEach((e) => {
@@ -165,37 +166,37 @@ const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseente
       }), k.value.forEach((e) => {
         e && typeof e.pause == "function" && e.pause();
       }), u.value = !1;
-    }, ge = () => {
-      l.mode === "click" && (u.value = !u.value, u.value && q());
     }, ye = () => {
-      l.mode === "hover" && (T = !0, q());
+      l.mode === "click" && (u.value = !u.value, u.value && J());
     }, be = () => {
+      l.mode === "hover" && (T = !0, J());
+    }, we = () => {
       l.mode === "hover" && (T = !1, setTimeout(() => {
         !M && !T && j();
       }, 150));
-    }, we = () => {
-      D.value = !0, ye();
     }, Te = () => {
-      D.value = !1, be();
+      D.value = !0, be();
     }, Me = () => {
-      l.mode === "hover" && (M = !0);
+      D.value = !1, we();
     }, Se = () => {
+      l.mode === "hover" && (M = !0);
+    }, Ce = () => {
       l.mode === "hover" && (M = !1, setTimeout(() => {
         !T && !M && j();
       }, 150));
-    }, Ce = (e) => {
+    }, Pe = (e) => {
       if (!A.value) return;
       const t = e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
       A.value.scrollLeft += t;
-    }, J = (e) => {
+    }, Q = (e) => {
       l.mode === "click" && u.value && O.value && $.value && e.target instanceof Node && !O.value.contains(e.target) && !$.value.contains(e.target) && j(), n.value && B.value && e.target instanceof Node && !B.value.contains(e.target) && g();
     };
-    return Le(() => {
-      if (document.addEventListener("click", J), W(), m) {
+    return Ue(() => {
+      if (document.addEventListener("click", Q), W(), m) {
         const e = document.getElementById(m);
         e && (h = new MutationObserver((t) => {
-          t.forEach((s) => {
-            s.type === "attributes" && s.attributeName === "data-theme" && W();
+          t.forEach((r) => {
+            r.type === "attributes" && r.attributeName === "data-theme" && W();
           });
         }), h.observe(e, {
           attributes: !0,
@@ -203,110 +204,110 @@ const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseente
         }));
       }
       G.value && !f.value && Y();
-    }), Ue(() => {
-      document.removeEventListener("click", J), S(), g(), h && (h.disconnect(), h = null), v.value.forEach((e) => {
+    }), $e(() => {
+      document.removeEventListener("click", Q), S(), g(), h && (h.disconnect(), h = null), v.value.forEach((e) => {
         e && typeof e.pause == "function" && e.pause();
       }), v.value.clear(), k.value.forEach((e) => {
         e && typeof e.pause == "function" && e.pause();
       }), k.value.clear();
     }), (e, t) => (o(), a(X, null, [
-      E(re)().isRecording ? C("", !0) : (o(), a("button", {
+      E(le)().isRecording ? C("", !0) : (o(), a("button", {
         key: 0,
         ref_key: "stickerButton",
         ref: O,
-        class: Q(["button", { "button-disabled": U.state === "disabled" }]),
-        onClick: ge,
-        onMouseenter: we,
-        onMouseleave: Te
+        class: Z(["button", { "button-disabled": U.state === "disabled" }]),
+        onClick: ye,
+        onMouseenter: Te,
+        onMouseleave: Me
       }, [
         F("span", null, [
-          P(E(se), { fill: oe.value }, null, 8, ["fill"])
+          P(E(re), { fill: ie.value }, null, 8, ["fill"])
         ])
       ], 34)),
-      P(Z, null, {
-        default: x(() => [
-          $e(F("div", {
+      P(x, null, {
+        default: ee(() => [
+          Oe(F("div", {
             ref_key: "stickerPicker",
             ref: $,
             class: "sticker-picker",
-            onMouseenter: Me,
-            onMouseleave: Se
+            onMouseenter: Se,
+            onMouseleave: Ce
           }, [
-            F("div", De, [
-              ce.value ? (o(), a("div", {
+            F("div", We, [
+              ne.value ? (o(), a("div", {
                 key: 0,
                 ref_key: "tabsContainer",
                 ref: A,
                 class: "sticker-picker__tabs",
-                onWheelPassive: Ce
+                onWheelPassive: Pe
               }, [
-                (o(!0), a(X, null, ee(_.value, (s, r) => (o(), a("button", {
-                  key: r,
-                  class: Q(["sticker-picker__tab", { "sticker-picker__tab--active": p.value === r }]),
-                  onClick: (c) => p.value = r,
-                  onMouseenter: (c) => ve(r),
-                  onMouseleave: (c) => fe(r)
+                (o(!0), a(X, null, te(_.value, (r, s) => (o(), a("button", {
+                  key: s,
+                  class: Z(["sticker-picker__tab", { "sticker-picker__tab--active": d.value === s }]),
+                  onClick: (c) => d.value = s,
+                  onMouseenter: (c) => fe(s),
+                  onMouseleave: (c) => ke(s)
                 }, [
-                  s.iconUrl && E(L)(s.iconUrl) && f.value ? (o(), a("tgs-player", {
+                  r.iconUrl && E(L)(r.iconUrl) && f.value ? (o(), a("tgs-player", {
                     key: 0,
                     ref_for: !0,
-                    ref: (c) => ue(r, c),
-                    src: s.iconUrl,
+                    ref: (c) => ve(s, c),
+                    src: r.iconUrl,
                     class: "sticker-picker__tab-icon sticker-picker__tab-icon-animated",
                     loop: "",
                     mode: "normal"
-                  }, null, 8, Ne)) : s.iconUrl ? (o(), a("img", {
+                  }, null, 8, Ve)) : r.iconUrl ? (o(), a("img", {
                     key: 1,
-                    src: s.iconUrl,
-                    alt: s.label || `Tab ${r + 1}`,
+                    src: r.iconUrl,
+                    alt: r.label || `Tab ${s + 1}`,
                     class: "sticker-picker__tab-icon"
-                  }, null, 8, Ve)) : (o(), a("span", Re, [
-                    P(E(se))
+                  }, null, 8, Re)) : (o(), a("span", He, [
+                    P(E(re))
                   ]))
-                ], 42, We))), 128))
+                ], 42, Ne))), 128))
               ], 544)) : C("", !0),
-              F("div", He, [
-                H.value.length === 0 ? (o(), a("div", Ie, te(U.emptyText), 1)) : (o(), a("div", je, [
-                  (o(!0), a(X, null, ee(H.value, (s, r) => (o(), a("button", {
-                    key: r,
+              F("div", Ie, [
+                H.value.length === 0 ? (o(), a("div", je, se(U.emptyText), 1)) : (o(), a("div", ze, [
+                  (o(!0), a(X, null, te(H.value, (r, s) => (o(), a("button", {
+                    key: s,
                     class: "sticker-picker__item",
-                    onClick: (c) => me(s),
-                    onMouseenter: (c) => pe(s, r),
-                    onMouseleave: de
+                    onClick: (c) => he(r),
+                    onMouseenter: (c) => pe(r, s),
+                    onMouseleave: me
                   }, [
-                    I(s) && f.value ? (o(), a("tgs-player", {
+                    I(r) && f.value ? (o(), a("tgs-player", {
                       key: 0,
                       ref_for: !0,
-                      ref: (c) => ne(r, c),
-                      src: s.url,
+                      ref: (c) => ue(s, c),
+                      src: r.url,
                       class: "sticker-picker__image sticker-picker__image-animated",
                       loop: "",
                       mode: "normal"
-                    }, null, 8, Xe)) : (o(), a("img", {
+                    }, null, 8, Ye)) : (o(), a("img", {
                       key: 1,
-                      src: s.url,
-                      alt: s.alt || `Sticker ${r + 1}`,
+                      src: r.url,
+                      alt: r.alt || `Sticker ${s + 1}`,
                       class: "sticker-picker__image"
-                    }, null, 8, Ye))
-                  ], 40, ze))), 128))
+                    }, null, 8, Ge))
+                  ], 40, Xe))), 128))
                 ]))
               ])
             ])
           ], 544), [
-            [Oe, u.value]
+            [Ae, u.value]
           ])
         ]),
         _: 1
       }),
-      P(Z, { name: "preview" }, {
-        default: x(() => [
+      P(x, { name: "preview" }, {
+        default: ee(() => [
           n.value ? (o(), a("div", {
             key: 0,
             ref_key: "previewElement",
             ref: B,
             class: "sticker-picker__preview",
-            style: Ae(N.value),
-            onClick: _e
+            style: Be(N.value),
+            onClick: ge
           }, [
             I(n.value) && f.value ? (o(), a("tgs-player", {
               key: 0,
@@ -315,13 +316,13 @@ const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseente
               autoplay: "",
               loop: "",
               mode: "normal"
-            }, null, 8, Ge)) : (o(), a("img", {
+            }, null, 8, Ke)) : (o(), a("img", {
               key: 1,
               src: n.value.url,
               alt: n.value.alt || "Preview",
               class: "sticker-picker__preview-image"
-            }, null, 8, Ke)),
-            n.value.alt ? (o(), a("div", qe, te(n.value.alt), 1)) : C("", !0)
+            }, null, 8, qe)),
+            n.value.alt ? (o(), a("div", Je, se(n.value.alt), 1)) : C("", !0)
           ], 4)) : C("", !0)
         ]),
         _: 1
@@ -330,5 +331,5 @@ const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseente
   }
 });
 export {
-  nt as default
+  ut as default
 };