@tycoonsystems/tycoon-modules/modules/streaming/chat/Reaction.js

www.tv.tycoon.systems/documentation

import React from"react";import ChatStyles from"./Chat.module.scss";import{v4 as uuidv4}from"uuid";const DEFAULT_DURATION=5e3,Module=t=>{const[a,r]=React.useState(!1),[e,i]=React.useState(null);var[c,,]=React.useState("favorite");const[u,m]=React.useState([]),v=React.useRef();t._LocalEventEmitter.unsubscribe(e),t._LocalEventEmitter.subscribe(e,e=>{if(e&&"checkNodes"===e.dispatch){var t,a=[...u],r=(new Date).getTime();for(let e=0;e<a.length;e++)a[e]&&a[e].end<r&&((t=document.querySelector(`div[uuid='reaction-${a[e].id}']`))?.remove&&t.remove(),a.splice(e,1),--e);m(a)}}),React.useEffect(()=>{if(!a){const e=uuidv4();i(e),setInterval(()=>{t._LocalEventEmitter.dispatch(e,{dispatch:"checkNodes"})},2500),r(!0)}},[a]);var n=React.useCallback(e=>{t?._loggedIn&&e?.currentTarget?.getAttribute&&(e=e.currentTarget.getAttribute("reaction"),o(e))});const o=(e,t)=>{try{if(v?.current){var a,r,i=document.createElement("div"),c=[...u],n=(new Date).getTime(),o={id:uuidv4(),reaction:e,start:n,duration:DEFAULT_DURATION,end:n+DEFAULT_DURATION},s=(c.push(o),i.setAttribute("uuid","reaction-"+o.id),i.classList.add("reaction_node"),{}),d=.5<+Math.random()?"positive":"negative";for(let e=0;e<10;e++){var l=Math.floor(10*Math.random())+1;s["--rotate"+e]=("positive"==d?"-":"")+l+"deg"}for([a,r]of Object.entries(s))i.style.setProperty(a,r);i.innerHTML=`<div class='material-icons' id='${o.id}' start='${o.start}' end='${o.end}' duration='${o.duration}'>${e}</div>`,v.current.append(i),m(c),console.log(c)}}catch(e){}};return React.createElement("div",{className:ChatStyles.reactionExternalContainer+" Chat_ReactionExternalContainer"},React.createElement("div",{className:"Chat_ReactionNodesContainer",ref:v}),React.createElement("div",{className:ChatStyles.reactionContainer+" Chat_ReactionContainer",style:{background:"#161616"},onClick:n,reaction:c},React.createElement("button",{className:ChatStyles.favorite+" material-icons",style:{background:"black",fontSize:"1.25rem"}},"favorite")))};export default Module;