@tycoonsystems/tycoon-modules/modules/comment/parts/AddComment.js

www.tv.tycoon.systems/documentation

import React from"react";import{v4 as uuidv4}from"uuid";import TextareaAutosize from"react-textarea-autosize";import ChatStyles from"@tycoonsystems/tycoon-modules/streaming/chat/Chat.module.scss";import{handleKeyPressChat}from"@tycoonsystems/tycoon-modules/streaming/chat/utility";import WatchPageStyles from"@tycoonsystems/tycoon-modules/streaming/watch/WatchPage.module.scss";const Module=c=>{const[e,a]=React.useState(!1),[r,n]=React.useState(null),[t,s]=React.useState(null),[l,o]=React.useState(null);var[m,,]=React.useState(!1),[,,]=React.useState(!1);const[u,i]=React.useState(!1),d=React.useRef(),h=React.useRef(),C=React.useRef(),{addComment:p,writing:y,handlePost:g,opId:R,opIdType:f}=c;c._LocalEventEmitter.unsubscribe(r),c._LocalEventEmitter.subscribe(r,e=>{e&&("click"===e.dispatch&&e?.e?e?.e?.target?.classList.contains("CommentForceNoBlur")||(i(!1),d?.current&&(d.current.style.height="22px")):"comment_published"===e.dispatch?(d?.current&&(d.current.value=""),i(!1),c?.notifyNewComment&&c.notifyNewComment(e),o({message:e?.message??"Your comment was published",placement:"comment"}),h.current=setTimeout(()=>{o(null),c?.sub&&c?.handleCancelReply&&c.handleCancelReply(e)},3e4)):"error"===e.dispatch&&s({message:e?.message,placement:e?.placement}))}),React.useEffect(()=>{if(!e){const t=uuidv4();document.addEventListener("click",e=>{c?._LocalEventEmitter?.dispatch&&c._LocalEventEmitter.dispatch(t,{dispatch:"click",e:e})}),c?.defaultWriting&&v(null,!0),n(t),a(!0)}},[e]);const v=(e,t)=>{d?.current&&(d.current.style.height="44px",t)&&c?.sub&&""===d?.current?.value&&c?.sub?.author_data?.username&&(d.current.value=`@${c.sub.author_data.username} `,d.current.focus(),t=d?.current?.value?.length,d.current.setSelectionRange(t,t)),i(!0)},S=React.useCallback(t=>{var a=d?.current;if(a){o(null),h?.current&&clearTimeout(h.current);var a=a?.value,e=c?.COMMENT_THRESHOLD??3;if(a?.length>e){s(null);var n=c?.sub?.author,l={};let e="";if("forum"===c?.type&&!C?.current?.value)return null;"forum"===c?.type&&C?.current?.value&&(e=C.current.value,C.current.value=""),g(t,a,r,R,f,n,e,l)}else s({message:`Your comment must be atleast ${e} characters long`,placement:"comment"})}});var b=React.useCallback(e=>{o(null),d?.current&&(d.current.value=""),c?.handleCancelReply&&c.handleCancelReply(e),i(!1)}),N=React.useCallback(e=>{s(null)}),E=React.useCallback(e=>{o(null)});const I=React.useCallback(e=>{if("forum"===c?.type)return i(!0);handleKeyPressChat(e,S)});return React.createElement("div",{className:c.className+" AddComment_Container"},p||y?React.createElement("div",{className:ChatStyles.commentInputContainer+" AddComment_ChatInputContainer CommentForceNoBlur"},!c?.sub||c.sub&&!l?React.createElement("img",{className:""+WatchPageStyles?.watchIcon,src:""+(c?._loggedIn?.icon?c._loggedIn.icon.match(/^https?:.*/)?c._loggedIn.icon:c?.cdn?.static+"/"+c._loggedIn.icon:"img/default/greyIcon.png")}):null,React.createElement("div",{className:ChatStyles.chatInputSendContainer+" AddComment_ChatInputSendContainer CommentForceNoBlur"},"forum"===c?.type?React.createElement("div",{className:ChatStyles.commentInputTitleContainer+" AddComment_InputTitleContainer"},React.createElement("input",{type:"text",placeholder:"Title",className:`${ChatStyles.commentInputTitle} ${ChatStyles.millerText} AddComment_InputTitle`,ref:C,style:{fontStyle:"italic"}})):null,!c?.sub||c.sub&&!l?React.createElement(TextareaAutosize,{className:`${ChatStyles.textCommentInput} ${ChatStyles.highlightBorder} ${"forum"===c?.type?""+ChatStyles.textCommentInputBig:""} ${u&&"forum"===c?.type?""+ChatStyles.textCommentInputBigActive:""} Chat_TextChatInput CommentForceNoBlur`,ref:d,onKeyPress:e=>{I(e,S)},onChange:e=>{0<e?.currentTarget?.value?.length&&i(!0),o(null)},onFocus:v,disabled:m,placeholder:"Add a "+(c?.commentPlaceholder??"comment...")}):null,React.createElement("div",{className:"flex gap-p2 CommentForceNoBlur"},React.createElement("button",{className:`${ChatStyles.send} ${ChatStyles.highlightBorder} ${ChatStyles.commentCancelButton} Chat_Send CommentForceNoBlur`,style:{display:u?"block":"none"},onClick:b,disabled:m},"Cancel"),React.createElement("button",{className:`${ChatStyles.send} ${ChatStyles.highlightBorder} Chat_Send CommentForceNoBlur`,style:{display:u?"block":"none"},onClick:S,disabled:m},"Comment")),t?React.createElement("div",{className:"error CommentForceNoBlur",style:{margin:".25rem",marginBottom:"0"},onClick:N},t.message):null,l?React.createElement("div",{className:"success CommentForceNoBlur",style:{margin:".25rem",marginBottom:"0"},onClick:E},l.message):null)):null)};export default Module;