UNPKG

@tycoonsystems/tycoon-modules

Version:
1 lines 8.11 kB
function _extends(){return(_extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a,n=arguments[t];for(a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}import React from"react";import{v4 as uuidv4}from"uuid";import WatchPageStyles from"@tycoonsystems/tycoon-modules/streaming/watch/WatchPage.module.scss";import Link from"next/link";import{createMarkup}from"@tycoonsystems/tycoon-modules/article/utility";import{AddComment}from".";import{getPostChildren}from"@tycoonsystems/tycoon-modules/utility/utility/comment";import{resolveImage}from"@tycoonsystems/tycoon-modules/utility/utility/image";import{resolveSimpleTimeAgo}from"@tycoonsystems/tycoon-modules/utility/utility/date";const Module=n=>{const[e,a]=React.useState(!1),[t,s]=React.useState(null),[l,o]=React.useState(null),[i,c]=React.useState(!1),[r,m]=React.useState(-1),[u,d]=React.useState(null),[p,h]=React.useState(null),[y,R]=React.useState(0);var[g,,]=React.useState(!0);const[P,_]=React.useState(!1),[C,S]=React.useState(!1),[E,v]=React.useState({}),[k,f]=React.useState(null),L=React.useRef(),{commentData:b,i:w}=n;n._LocalEventEmitter.unsubscribe(t),n._LocalEventEmitter.subscribe(t,e=>{e&&"resize_window"===e.dispatch&&("short"===(e=W(!0))&&L?.current?.classList?.remove&&L?.current?.classList?.contains("Post_PostMarkupContainerInternalShowLess")?(L.current.classList.remove("Post_PostMarkupContainerInternalShowLess"),c(!1)):"long"===e&&L?.current?.classList?.add&&!L?.current?.classList?.contains("Post_PostMarkupContainerInternalShowLess")&&L.current.classList.add("Post_PostMarkupContainerInternalShowLess"))}),React.useEffect(()=>{if(!e){const t=uuidv4();try{window.addEventListener("resize_window",function(e){n._LocalEventEmitter.dispatch(t,{dispatch:"resize_window"})})}catch(e){}s(t),a(!0)}},[e]);var N=React.useCallback(e=>{if(e){if(i)return c(!1),L?.current?.classList.contains("Post_PostMarkupContainerInternalShowLess")||L.current.classList.add("Post_PostMarkupContainerInternalShowLess"),!0;c(!0),L?.current?.classList.contains("Post_PostMarkupContainerInternalShowLess")&&L.current.classList.remove("Post_PostMarkupContainerInternalShowLess")}});const W=e=>{if((-1===r||r<(new Date).getTime()-2500)&&L?.current&&(!i||e)){e=!i&&"short"===l&&50<L.current.clientHeight?50:L.current.clientHeight;if(L.current.scrollHeight-2.5>e){if("long"!==l)return o("long"),m((new Date).getTime()),"long"}else if("short"!==l)return o("short"),m((new Date).getTime()),"short"}return l};var M=React.useCallback(e=>{d(!1),setTimeout(()=>{d(!0)},25)},[u]);const I=React.useCallback(e=>{d(!1)}),x=(React.useEffect(()=>{W()},[i,L?.current,l]),React.useEffect(()=>{0<b?.replies?.length&&!p&&(h(b.replies.length),R(3<b.replies.length?3:b.replies.length))},[b,p]),e=>{S(!0),n?.notifyNewComment&&n.notifyNewComment(e)});var D=React.useMemo(()=>React.createElement("div",null,u?React.createElement("div",{className:WatchPageStyles.commentReplyExternalContainer+" Post_ReplyExternalContainer"},React.createElement(AddComment,_extends({},n,{addComment:!0,opId:n?.opId??b?.id??null,opIdType:"comment",handleCancelReply:I,sub:n?.sub,defaultWriting:!0,notifyNewComment:x}))):null),[u]);var B=React.useCallback(e=>{(async e=>{var t,a;P||(_(!0),a=(t={...E})?.limit?t.limit+15:30,e=await getPostChildren(e,n,b?.id,"comment",a),_(!1),console.log(e),e?.replies&&(void 0!==t?.replies?.length&&e.replies.length!==t?.replies?.length&&(t.limit=e?.limit??a),t.replies=e.replies,v(t)))})(e)}),T=React.useCallback(e=>{C||S(!0)}),A=b?.id??b?.reply_id,A=(A&&(n._LocalEventEmitter.unsubscribe(b?.id),n._LocalEventEmitter.unsubscribe(A),n._LocalEventEmitter.subscribe(A,t=>{var e;t&&("comment_published"===t.dispatch?E?.replies&&((e={...E}).replies.push(t.comment),v(e)):"comment_update"===t.dispatch&&t?.replies&&(e={limit:E?.limit??15,replies:t.replies},v(e),-1<(e=t.replies.findIndex(e=>e.reply_id==t.reply_id)))&&f(t.replies[e]))})),k??b),$=E?.replies??b?.replies??[];return console.log(b,E),React.createElement("div",{className:n.className+" ReadComment_Container"},b?React.createElement("div",{className:WatchPageStyles.metaAuthorMetaContainer+" gap-p10",comment:b?.id},React.createElement(Link,{href:"/p?u="+b?.author_data?.id,style:{display:"block"}},React.createElement("img",{className:""+WatchPageStyles.watchIcon,src:""+resolveImage(n,null,b?.author_data?.icon)})),React.createElement("div",{className:WatchPageStyles.commentDataContainer+" Post_CommentDataContainer",style:{width:"100%"}},React.createElement("div",{className:WatchPageStyles.commentDataAuthorContainer+" Post_CommentDataAuthorContainer"},React.createElement(Link,{href:"/p?u="+b?.author_data?.id,style:{display:"block",maxWidth:"fit-content"}},React.createElement("h5",{className:""+WatchPageStyles.username},""+(b?.author_data?.username??""))),React.createElement("div",null,"•"),React.createElement("div",{className:WatchPageStyles.commentDataAuthorContainerTime+" Post_CommentDataAuthorContainerTime"},resolveSimpleTimeAgo(b?.creation))),React.createElement("div",{className:WatchPageStyles?.PostMarkupContainer+" Post_MarkupContainer"},React.createElement("div",{className:WatchPageStyles?.PostMarkupContainerInternal+" Post_MarkupContainerInternal Post_PostMarkupContainerInternalShowLess "+w,dangerouslySetInnerHTML:{__html:createMarkup(b.contents)},ref:L})),"long"===l?i?React.createElement("button",{onClick:N,className:WatchPageStyles.PostShowLess+" Post_ShowLess"},"Show less"):React.createElement("button",{onClick:N,className:WatchPageStyles.PostReadMore+" Post_ReadMore"},"Read More"):null,React.createElement("div",{className:WatchPageStyles.commentActionPalleteContainer+" Post_CommentActionPalleteContainer"},React.createElement("div",{className:WatchPageStyles?.likeDislikeContainer+" "+WatchPageStyles?.likeDislikeContainerSmall},React.createElement("button",{className:WatchPageStyles?.like+" Ecommerce_CommandPanelButton",onClick:n?.handleInitiateAction,action:"like",m:b?.id??b?.reply_id,usetype:"post",existing:""+A?.liked},React.createElement("div",{className:`material-icons ${A?.liked?"":"material-icons-outlined"} Ecommerce_Like_Icon`},"thumb_up")),React.createElement("button",{className:WatchPageStyles?.dislike+" Ecommerce_CommandPanelButton",onClick:n?.handleInitiateAction,action:"dislike",m:b?.id??b?.reply_id,usetype:"post",existing:""+A?.disliked},React.createElement("div",{className:`material-icons ${A?.disliked?"":"material-icons-outlined"} Ecommerce_Dislike_Icon`},"thumb_down"))),React.createElement("button",{onClick:M,className:`${WatchPageStyles.SimpleButton} ${WatchPageStyles.ReplyButton} Post_SimpleButton`,style:{display:n?.preventReply||u?"none":"block"}},"Reply")),0<y&&b?.replies?.map?C?React.createElement("div",{className:`${WatchPageStyles.commentSubReplies} Post_CommentSubReplies ${WatchPageStyles.readCommentsListContainer} Post_ReadCommentsListContainer`},$.map((e,t)=>React.createElement("div",{key:t},React.createElement(Module,_extends({},n,{commentData:e,j:t,opId:b?.id,sub:e,notifyNewComment:x}))))):0<b?.replies?.length?React.createElement("div",{onClick:T,className:WatchPageStyles.SimpleButton+" Post_SimpleButton flex gap-p2 Post_BeginLoadMoreContainer",style:{cursor:"pointer",marginTop:".5rem",maxWidth:"fit-content"}},React.createElement("div",{className:"material-icons"},"expand_more"),React.createElement("button",{className:WatchPageStyles.LoadReplies+" Post_LoadReplies"},b.replies.length," ",1===b?.replies?.length?"reply":"replies")):null:null,C&&0<y&&0<b?.replies?.length&&g?P?React.createElement("div",{className:"spinner spinnerBig opacity1 spinnerRelative"}):React.createElement("div",{className:WatchPageStyles.SimpleButton+" Post_SimpleButton flex gap-p2 Post_LoadMoreContainer",onClick:B,style:{cursor:"pointer",marginTop:".5rem",maxWidth:"fit-content"}},React.createElement("div",{className:"material-icons"},"expand_more"),React.createElement("button",{className:WatchPageStyles.SimpleButton+" Post_LoadMore",style:{margin:0,padding:".125rem .5rem",borderRadius:"1rem"}},"Load more")):null,D)):null)};export default Module;