animated-fluent-emojis/dist/animated-fluent-emojis.es.js

Animated Fluent Emojis is a React component library that brings Microsoft's Fluent emojis to life in your web applications. This library offers an easy way to integrate expressive and engaging animated emojis, enhancing user experience and visual appeal i

import { jsx as w } from "react/jsx-runtime";
import { useState as h, useRef as M, useEffect as E, useMemo as v } from "react";
async function C() {
  return (await fetch(
    "https://cdn.animated-fluent-emojis.com/manifest.json"
  )).json();
}
async function I() {
  return (await C()).categories.reduce(
    (t, n) => ({
      ...t,
      ...Object.fromEntries(
        n.emoticons.map((i) => [
          i.id,
          { ...i, category: n.title }
        ])
      )
    }),
    {}
  );
}
const j = I();
async function L(e) {
  const n = (await j)[e];
  if (!n) throw new Error(`Emoji with id "${e}" not found`);
  return n.category;
}
async function S(e, t) {
  const i = (await j)[e];
  if (!i) throw new Error(`Emoji with id "${e}" not found`);
  return `
    @keyframes emoji-${e}-${t} {
      0% { transform: translateY(0); }
      100% { transform: translateY(-${i.animation.framesCount * t}px); }
    }
  `;
}
const x = (e, t, n, i, r) => {
  const [a, s] = h(
    !i
  ), [m, l] = h(!1), u = M(0), f = M(null);
  E(() => {
    if (!e) return;
    const o = () => {
      u.current += 1, typeof n == "number" && u.current >= n && !a && s(!0);
    }, d = () => {
      a || s(!0);
    }, c = f.current;
    return c && (c.addEventListener(
      "animationiteration",
      o
    ), c.addEventListener("animationend", d)), () => {
      c && (c.removeEventListener(
        "animationiteration",
        o
      ), c.removeEventListener("animationend", d));
    };
  }, [e, n, a]), E(() => {
    if (!t || !a || !e) return;
    const o = f.current;
    o && (m ? o.style.animationPlayState = "running" : (o.style.animationPlayState = "paused", o.style.transform = `translateY(-${(e.animation.firstFrame - 1) * r}px)`));
  }, [m, t, a, e, r]);
  const g = v(() => e ? {
    width: r,
    animationName: `emoji-${e.id}-${r}`,
    animationDuration: `${e.animation.framesCount / e.animation.fps}s`,
    animationTimingFunction: `steps(${e.animation.framesCount})`,
    animationIterationCount: a && t ? "infinite" : n,
    animationPlayState: i && !a || a && t && m ? "running" : "paused",
    transform: `translateY(-${(e.animation.firstFrame - 1) * r}px)`
  } : {}, [
    e,
    r,
    a,
    t,
    n,
    i,
    m
  ]);
  return {
    isInitialAnimationComplete: a,
    animationStyle: g,
    handleMouseEnter: () => l(!0),
    handleMouseLeave: () => l(!1),
    imageRef: f
  };
}, F = (e) => {
  const [t, n] = h(null), [i, r] = h("");
  return E(() => {
    (async () => {
      try {
        const s = await j;
        n(s[e]), r(await L(e));
      } catch (s) {
        console.error("Error fetching emoji data:", s), n(null), r("");
      }
    })();
  }, [e]), { emoji: t, categoryFolder: i };
}, A = "_emojiImage_1jsok_1", _ = "_animateOnHover_1jsok_9", p = {
  emojiImage: A,
  animateOnHover: _
}, R = ({
  id: e,
  size: t = 100,
  playOnHover: n = !1,
  animationIterations: i = 2,
  autoPlay: r = !0
}) => {
  const { emoji: a, categoryFolder: s } = F(e), {
    isInitialAnimationComplete: m,
    animationStyle: l,
    handleMouseEnter: u,
    handleMouseLeave: f,
    imageRef: g
  } = x(
    a,
    n,
    i,
    r,
    t
  );
  if (E(() => {
    if (!a) return;
    const y = `emoji-style-${e}-${t}`;
    let o = document.getElementById(y);
    return o || (o = document.createElement("style"), o.id = y, document.head.appendChild(o)), S(e, t).then((d) => {
      o && (o.innerHTML = d);
    }), () => {
      o && document.head.contains(o) && document.head.removeChild(o);
    };
  }, [e, t, a]), !a)
    return null;
  const $ = {
    width: `${t}px`,
    height: `${t}px`,
    display: "inline-block",
    overflow: "hidden"
  };
  return /* @__PURE__ */ w(
    "span",
    {
      title: a.description,
      style: $,
      className: `${p.emojiContainer} ${m && n ? p.animateOnHover : ""}`,
      onMouseEnter: u,
      onMouseLeave: f,
      children: /* @__PURE__ */ w(
        "img",
        {
          ref: g,
          alt: a.description,
          draggable: "false",
          src: `https://cdn.animated-fluent-emojis.com/sprites/${s}/${e}.png`,
          style: l,
          className: p.emojiImage
        }
      )
    }
  );
};
export {
  R as Emoji
};
//# sourceMappingURL=animated-fluent-emojis.es.js.map