@geekapps/silo-elements-nextjs 0.2.58 → 0.2.60

package/dist/index.js

@@ -1280,6 +1280,14 @@ function Video({
   const [storyboardCues, setStoryboardCues] = useState(
     []
   );
+  const [ratingCounts, setRatingCounts] = useState(
+    () => ({ LOVE: parsed.rating?.counts?.LOVE ?? 0, LIKE: parsed.rating?.counts?.LIKE ?? 0, DISLIKE: parsed.rating?.counts?.DISLIKE ?? 0 })
+  );
+  const [userReaction, setUserReaction] = useState(parsed.rating?.userReaction ?? null);
+  const userReactionRef = useRef(userReaction);
+  userReactionRef.current = userReaction;
+  const onReactRef = useRef(parsed.rating?.onReact);
+  onReactRef.current = parsed.rating?.onReact;
   const [preview, setPreview] = useState(null);
   const [duration, setDuration] = useState(0);
   const [currentTime, setCurrentTime] = useState(0);
@@ -2782,23 +2790,34 @@ function Video({
                             ] }),
                             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
                               parsed.rating && (() => {
-                                const r = parsed.rating;
-                                const reactions = [
+                                const REACTIONS = [
                                   { key: "LOVE", emoji: "\u2764\uFE0F" },
                                   { key: "LIKE", emoji: "\u{1F44D}" },
                                   { key: "DISLIKE", emoji: "\u{1F44E}" }
                                 ];
                                 return /* @__PURE__ */ jsxs(Fragment, { children: [
-                                  reactions.map(({ key, emoji }) => {
-                                    const count = r.counts?.[key] ?? 0;
-                                    const active = r.userReaction === key;
+                                  REACTIONS.map(({ key, emoji }) => {
+                                    const count = ratingCounts[key] ?? 0;
+                                    const active = userReaction === key;
                                     return /* @__PURE__ */ jsxs(
                                       "button",
                                       {
                                         type: "button",
                                         onClick: (e) => {
                                           e.stopPropagation();
-                                          r.onReact?.(active ? null : key);
+                                          const next = active ? null : key;
+                                          setUserReaction(next);
+                                          setRatingCounts((prev) => {
+                                            const updated = { ...prev };
+                                            const prev_reaction = userReactionRef.current;
+                                            if (active) updated[key] = Math.max(0, (updated[key] ?? 0) - 1);
+                                            else {
+                                              if (prev_reaction) updated[prev_reaction] = Math.max(0, (updated[prev_reaction] ?? 0) - 1);
+                                              updated[key] = (updated[key] ?? 0) + 1;
+                                            }
+                                            return updated;
+                                          });
+                                          onReactRef.current?.(next);
                                         },
                                         className: `flex items-center gap-0.5 rounded px-1.5 py-1 text-[11px] transition hover:bg-white/10 ${active ? "opacity-100" : "opacity-50 hover:opacity-80"}`,
                                         "aria-label": key.toLowerCase(),