Take control over your live stream video by running it yourself. Streaming + chat out of the box.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1 lines
16 KiB

(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2093],{92093:function(e,t,a){"use strict";a.r(t),a.d(t,{ChatContainer:function(){return eG}});var s,n,r,o,l,i=a(85893),c=a(26246),d=a(67294),u=a(4511),h=a(28997),m=a(45761),g=a.n(m),p=a(94184),_=a.n(p),x=a(94199),C=a(4480),j=a(5152),f=a.n(j),b=a(63108),v=a(41366),N=a(4693);class E extends N.M{match(e){let{highlightString:t}=this.options;if(!t)return null;let a=e.match(t);return a?{index:a.index,length:a[0].length,match:a[0],valid:!0}:null}replaceWith(e,t){let{key:a}=t;return d.createElement("mark",{key:a},e)}asTag(){return"mark"}}var M=a(75774),w=a.n(M),y=a(63516);function S(e){let t=new Date(e);if(Number.isNaN(t))return"";let a=(0,y.Xb)(e);if(a>=1){let e=t.toLocaleDateString("en-US",{dateStyle:"medium"});return"".concat(e," at ").concat(t.toLocaleTimeString())}return"".concat(t.toLocaleTimeString())}var T=a(44974),k=a(73295),G=a.n(k);let A=e=>{let{badge:t,userColor:a,title:s}=e;return(0,i.jsx)("span",{style:{color:"var(--theme-color-users-".concat(a,")")},className:G().badge,title:s,children:t})},D=f()(()=>Promise.all([a.e(2074),a.e(7719)]).then(a.t.bind(a,27719,23)),{loadableGenerated:{webpack:()=>[27719]},ssr:!1}),B=e=>{let{userColor:t}=e;return(0,i.jsx)(A,{badge:(0,i.jsx)(D,{}),userColor:t,title:"Authenticated"})},O=f()(()=>Promise.all([a.e(2074),a.e(710)]).then(a.t.bind(a,20710,23)),{loadableGenerated:{webpack:()=>[20710]},ssr:!1}),F=e=>{let{userColor:t}=e;return(0,i.jsx)(A,{badge:(0,i.jsx)(O,{}),userColor:t,title:"Moderator"})},P=f()(()=>Promise.all([a.e(2074),a.e(6133)]).then(a.t.bind(a,56133,23)),{loadableGenerated:{webpack:()=>[56133]},ssr:!1}),I=e=>{let{userColor:t}=e;return(0,i.jsx)(A,{badge:(0,i.jsx)(P,{}),userColor:t,title:"Bot"})},L=f()(()=>Promise.all([a.e(173),a.e(5874),a.e(4931),a.e(5402),a.e(1382),a.e(4041),a.e(3698),a.e(3013),a.e(4398),a.e(8091),a.e(2659),a.e(9991)]).then(a.bind(a,39991)).then(e=>e.ChatModerationActionMenu),{loadableGenerated:{webpack:()=>[39991]},ssr:!1}),R=e=>{let{children:t,user:a}=e,{displayName:s,createdAt:n}=a,r="".concat(s," first joined ").concat(S(n));return(0,i.jsx)(x.Z,{title:r,placement:"topLeft",mouseEnterDelay:1,children:t})},U=e=>{let{message:t,highlightString:a,showModeratorMenu:s,sentBySelf:n,sameUserAsLast:r,isAuthorModerator:o,isAuthorAuthenticated:l,isAuthorBot:c}=e,{id:d,body:u,user:h,timestamp:m}=t,{id:g,displayName:p,displayColor:j}=h,f=(0,C.sJ)(T.FI),N="var(--theme-color-users-".concat(j,")"),M="Sent ".concat(S(m)),y=[];return o&&y.push((0,i.jsx)(F,{userColor:j},"mod")),l&&y.push((0,i.jsx)(B,{userColor:j},"auth")),c&&y.push((0,i.jsx)(I,{userColor:j},"bot")),(0,i.jsx)("div",{className:_()(w().messagePadding,r&&w().messagePaddingCollapsed,"chat-message_user"),children:(0,i.jsxs)("div",{className:_()(w().root,{[w().ownMessage]:n}),style:{borderColor:N},children:[(0,i.jsx)("div",{className:w().background,style:{color:N}}),!r&&(0,i.jsx)(R,{user:h,children:(0,i.jsxs)("div",{className:w().user,style:{color:N},children:[(0,i.jsx)("span",{className:w().userName,children:p}),(0,i.jsx)("span",{className:w().userBadges,children:y})]})}),(0,i.jsx)(x.Z,{title:M,mouseEnterDelay:1,children:(0,i.jsx)(b.wZ,{className:w().message,content:u,matchers:[new v.xc("url",{customTLDs:["online"]}),new E("highlight",{highlightString:a})]})}),s&&(0,i.jsx)("div",{className:w().modMenuWrapper,children:(0,i.jsx)(L,{messageID:d,accessToken:f,userID:g,userDisplayName:p})})]})})};var W=a(55241),V=a(61512),H=a.n(V),Z=a(14866),J=a.n(Z);let z=f()(()=>Promise.all([a.e(7741),a.e(344)]).then(a.bind(a,20344)).then(e=>e.EmojiPicker),{loadableGenerated:{webpack:()=>[20344]},ssr:!1}),K=f()(()=>Promise.all([a.e(2074),a.e(3366)]).then(a.t.bind(a,73366,23)),{loadableGenerated:{webpack:()=>[73366]},ssr:!1}),q=f()(()=>Promise.all([a.e(2074),a.e(2348)]).then(a.t.bind(a,92348,23)),{loadableGenerated:{webpack:()=>[92348]},ssr:!1}),X=e=>{let{defaultText:t,enabled:a,focusInput:s}=e,[n,r]=(0,d.useState)(!1),[o,l]=(0,d.useState)(null==t?void 0:t.length),c=(0,C.sJ)(T.Gt),u=(0,d.useRef)(t||""),[m,g]=(0,d.useState)(0),[,p]=(0,d.useReducer)(e=>e+1,0),x=()=>u.current.length,j=()=>{if(!c){console.log("websocketService is not defined");return}let e=u.current;e=e.replace(/^<p>|<\/p>$/g,""),c.send({type:h.C.CHAT,body:e}),u.current="",l(0),p()},f=e=>{let t=[u.current.slice(0,m),e,u.current.slice(m)].join("");u.current=t,p()};return(0,i.jsx)("div",{id:"chat-input",className:J().root,children:(0,i.jsxs)("div",{className:_()(J().inputWrap,o>=300&&J().maxCharacters),children:[(0,i.jsx)(W.Z,{content:(0,i.jsx)(z,{onEmojiSelect:e=>{f(e)},onCustomEmojiSelect:(e,t)=>{let a='<img src="'.concat(t,'" alt="').concat(e,'" title=').concat(e,' class="emoji" />');f(a)}}),trigger:"click",placement:"topRight",onOpenChange:e=>r(e),open:n}),(0,i.jsx)(H(),{id:"chat-input-content-editable",html:u.current,placeholder:a?"Send a message to chat":"Chat is disabled",disabled:!a,onKeyDown:e=>{let t=x()+1;if("Enter"===e.key){e.preventDefault(),j();return}if("Backspace"===e.key||"Delete"===e.key){l(t-1);return}"a"===e.key&&e.ctrlKey||(t+1>300&&e.preventDefault(),l(t+1))},onPaste:e=>{e.preventDefault();let t="",a=!!(e.clipboardData&&"object"==typeof e.clipboardData&&"function"==typeof e.clipboardData.getData);a&&(t=e.clipboardData.getData("text/plain"));let s=document.createElement("textarea");s.innerHTML=t,f(t=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=String(e);return(t=(t=(t=(t=(t=(t=(t=(t=(t=t.replace(/&nbsp;/gi," ")).replace(/&amp;/gi,"&")).replace(/<br>/gi,"\n")).replace(/<div>/gi,"\n")).replace(/<p>/gi,"\n")).replace(/\u200C{2}/gi,"")).split("\n").map(function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.trim()}).join("\n")).replace(/\n\n+/g,"\n\n")).replace(/[ ]+/g," ")).trim()}(t=s.innerText))},onChange:e=>{u.current=e.target.value},onBlur:()=>{g(function(e){let t=window.getSelection();if(0===t.rangeCount)return 0;let a=t.getRangeAt(0),s=a.cloneRange(),n=document.createElement("div");return s.selectNodeContents(e),s.setEnd(a.endContainer,a.endOffset),n.appendChild(s.cloneContents()),n.innerHTML.length}(document.getElementById("chat-input-content-editable")))},onFocus:()=>{m&&(!function(e,t){try{let a=document.createRange(),s=window.getSelection();a.selectNode(e),a.setStart(e.childNodes[0],t),a.collapse(!0),s.removeAllRanges(),s.addRange(a)}catch(e){console.debug(e)}}(document.getElementById("chat-input-content-editable"),m),g(0))},autoFocus:s,style:{width:"100%"},role:"textbox","aria-label":"Chat text input"}),a&&(0,i.jsxs)("div",{style:{display:"flex",paddingLeft:"5px"},children:[(0,i.jsx)("button",{type:"button",className:J().emojiButton,title:"Emoji picker button",onClick:()=>r(!n),children:(0,i.jsx)(q,{})}),(0,i.jsx)("button",{type:"button",className:J().sendButton,title:"Send message Button",onClick:j,children:(0,i.jsx)(K,{})})]})]})})};var Y=a(71368),Q=a.n(Y);function $(){return($=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var s in a)Object.prototype.hasOwnProperty.call(a,s)&&(e[s]=a[s])}return e}).apply(this,arguments)}var ee=function(e){return d.createElement("svg",$({xmlns:"http://www.w3.org/2000/svg",width:500,height:500,viewBox:"0 0 132.292 132.292"},e),s||(s=d.createElement("linearGradient",{id:"moderator_svg__a",x1:432.851,x2:464.644,y1:49.977,y2:49.977,gradientUnits:"userSpaceOnUse"},d.createElement("stop",{offset:0,stopColor:"#2087e2"}),d.createElement("stop",{offset:1,stopColor:"#b63fff"}))),n||(n=d.createElement("path",{fill:"url(#moderator_svg__a)",d:"M438.672 34.08h20.151a5.82 5.82 45 0 1 5.82 5.821v20.151a5.82 5.82 135 0 1-5.82 5.821h-20.15a5.82 5.82 45 0 1-5.822-5.82V39.9a5.82 5.82 135 0 1 5.821-5.82z",transform:"matrix(4.16112 0 0 4.16112 -1801.146 -141.814)"})),r||(r=d.createElement("path",{fill:"#1d1535",fillOpacity:.335,d:"M121.11 29.551c-6.93 47.444-30.074 104.618-77.642 79.674l25.83 23.067h38.772c13.377 0 24.22-10.845 24.22-24.222V40.864z"})),o||(o=d.createElement("path",{fill:"#e2e8f0",fillOpacity:.306,d:"M66.775 13.257s-7.129 57.999-.63 99.312c6.565 41.724-81.568-74.394-49.619-79.203 31.949-4.809 50.249-20.11 50.249-20.11z"})),l||(l=d.createElement("path",{fill:"none",stroke:"#fff",strokeLinejoin:"round",strokeWidth:2,d:"M435.995 42.072c6.797.447 12.753-4.806 12.753-4.806s5.955 5.253 12.752 4.806c-.581 12.745-7.495 20.586-12.752 20.628-5.188.042-12.172-7.883-12.753-20.628z",transform:"matrix(4.16112 0 0 4.16112 -1801.146 -141.814)"})))};let et=()=>(0,i.jsxs)("div",{className:Q().chatModerationNotification,children:[(0,i.jsx)(ee,{className:Q().icon}),"You are now a moderator."]});var ea=a(61120),es=a.n(ea);let en=e=>{let{message:{body:t,user:{displayName:a}},highlightString:s}=e;return(0,i.jsxs)("div",{className:_()([es().chatSystemMessage,"chat-message_system"]),children:[(0,i.jsx)("div",{className:es().user,children:(0,i.jsx)("span",{className:es().userName,children:a})}),(0,i.jsx)(b.wZ,{className:es().message,content:t,matchers:[new v.xc("url",{customTLDs:["online"]}),new E("highlight",{highlightString:s})]})]})};var er=a(56654),eo=a.n(er);let el=f()(()=>Promise.all([a.e(2074),a.e(8725)]).then(a.t.bind(a,8725,23)),{loadableGenerated:{webpack:()=>[8725]},ssr:!1}),ei=e=>{let{isAuthorModerator:t,userColor:a,displayName:s}=e;return(0,i.jsxs)("div",{className:eo().root,children:[(0,i.jsxs)("span",{style:{color:"var(--theme-color-users-".concat(a,")")},children:[(0,i.jsx)("span",{className:eo().icon,children:(0,i.jsx)(el,{})}),(0,i.jsx)("span",{className:eo().user,children:s}),t&&(0,i.jsx)("span",{className:eo().moderatorBadge,children:(0,i.jsx)(F,{userColor:a})})]}),"joined the chat."]})};var ec=a(71577);let ed=f()(()=>Promise.all([a.e(2074),a.e(437)]).then(a.t.bind(a,20437,23)),{loadableGenerated:{webpack:()=>[20437]},ssr:!1}),eu=e=>{let{onClick:t}=e;return(0,i.jsx)("div",{className:g().toBottomWrap,id:"scroll-to-chat-bottom",children:(0,i.jsx)(ec.Z,{type:"default",style:{color:"currentColor"},icon:(0,i.jsx)(ed,{}),onClick:t,children:"Go to last message"})})};var eh=a(88881),em=a.n(eh);let eg=e=>{let{body:t}=e;return(0,i.jsx)("div",{dangerouslySetInnerHTML:{__html:t},className:em().chatAction})};var ep=a(71230),e_=a(15746),ex=a(24093),eC=a(31654),ej=a.n(eC);let ef=f()(()=>a.e(9069).then(a.bind(a,49069)),{loadableGenerated:{webpack:()=>[49069]},ssr:!1}),eb=f()(()=>a.e(5584).then(a.bind(a,15584)),{loadableGenerated:{webpack:()=>[15584]},ssr:!1}),ev=f()(()=>a.e(7268).then(a.bind(a,97268)),{loadableGenerated:{webpack:()=>[97268]},ssr:!1}),eN=e=>{let t,{message:a}=e,{body:s,title:n,image:r,link:o,type:l}=a;switch(l.toString()){case"FEDIVERSE_ENGAGEMENT_FOLLOW":t=ef;break;case"FEDIVERSE_ENGAGEMENT_LIKE":t=eb;break;case"FEDIVERSE_ENGAGEMENT_REPOST":t=ev}return(0,i.jsx)("div",{className:_()([ej().follower,"chat-message_social"]),children:(0,i.jsx)("a",{href:o,target:"_blank",rel:"noreferrer",children:(0,i.jsxs)(ep.Z,{wrap:!1,children:[(0,i.jsxs)(e_.Z,{span:6,className:ej().avatarColumn,children:[(0,i.jsx)(ex.C,{src:r,alt:"Avatar",className:ej().avatar,size:"large",children:n.charAt(0).toUpperCase()}),(0,i.jsx)(t,{className:ej().icon})]}),(0,i.jsxs)(e_.Z,{children:[(0,i.jsx)(ep.Z,{className:ej().account,children:n}),(0,i.jsx)(ep.Z,{className:ej().body,dangerouslySetInnerHTML:{__html:s}})]})]})})})};var eE=a(44964),eM=a.n(eE);let ew=f()(()=>Promise.all([a.e(2074),a.e(1668)]).then(a.t.bind(a,51668,23)),{loadableGenerated:{webpack:()=>[51668]},ssr:!1}),ey=e=>{let{message:t}=e,{oldName:a,user:s}=t,{displayName:n,displayColor:r}=s,o="var(--theme-color-users-".concat(r,")");return(0,i.jsxs)("div",{className:eM().nameChangeView,children:[(0,i.jsx)("div",{className:eM().icon,children:(0,i.jsx)(ew,{})}),(0,i.jsxs)("div",{className:eM().nameChangeText,children:[(0,i.jsx)("span",{style:{color:o},children:a}),(0,i.jsx)("span",{className:eM().plain,children:" is now known as "}),(0,i.jsx)("span",{style:{color:o},children:n})]})]})};var eS=a(25449),eT=a(69183);function ek(e){let{user:t}=e,a=new eS.n(t);return a.isModerator}let eG=e=>{let{messages:t,usernameToHighlight:a,chatUserId:s,isModerator:n,showInput:r,height:o,chatAvailable:l,focusInput:m=!0}=e,[p,_]=(0,d.useState)(!1),[x,C]=(0,d.useState)(!1),j=(0,d.useRef)(null),f=(0,d.useRef)(null),b=new Set;(0,d.useEffect)(()=>()=>{clearTimeout(f.current)},[]);let v=e=>(0,i.jsx)(eN,{message:e}),N=e=>{let{user:{displayName:t,displayColor:a}}=e,s=ek(e);return(0,i.jsx)(ei,{displayName:t,userColor:a,isAuthorModerator:s})},E=e=>{let{body:t}=e;return(0,i.jsx)(eg,{body:t})},M=e=>{let t=ek(e);return t?(0,i.jsx)(et,{}):(0,i.jsx)("div",{style:{width:"1px",height:"1px"}})},w=(e,r)=>{var o,l,c;let d=function(e,t,a){if(e.length<2)return!1;let s=e[t];if(!s||!s.user)return!1;let{user:{id:n}}=s,r=e[t-1];if((null==r?void 0:r.type)!==h.C.CHAT||!(null==r?void 0:r.timestamp)||!s.timestamp)return!1;let o=new Date(null==r?void 0:r.timestamp).getTime(),l=new Date(s.timestamp).getTime();return!(l-o>4e4)&&n===(null==r?void 0:r.user.id)&&!(a.size>=5)}(t,e,b);d?b.add(r.id):b.clear();let u=ek(r);return(0,i.jsx)(U,{message:r,showModeratorMenu:n,highlightString:a,sentBySelf:(null===(o=r.user)||void 0===o?void 0:o.id)===s,sameUserAsLast:d,isAuthorModerator:u,isAuthorBot:null===(l=r.user)||void 0===l?void 0:l.isBot,isAuthorAuthenticated:null===(c=r.user)||void 0===c?void 0:c.authenticated},r.id)},y=(e,t)=>{switch(t.type){case h.C.CHAT:return w(e,t);case h.C.NAME_CHANGE:return(0,i.jsx)(ey,{message:t});case h.C.CONNECTED_USER_INFO:return M(t);case h.C.USER_JOINED:return N(t);case h.C.CHAT_ACTION:return E(t);case h.C.SYSTEM:return(0,i.jsx)(en,{message:t,highlightString:a},t.id);case h.C.FEDIVERSE_ENGAGEMENT_FOLLOW:case h.C.FEDIVERSE_ENGAGEMENT_LIKE:case h.C.FEDIVERSE_ENGAGEMENT_REPOST:return v(t);default:return null}},S=e=>{clearTimeout(f.current),f.current=setTimeout(()=>{var t;null===(t=e.current)||void 0===t||t.scrollTo({top:1/0,left:0,behavior:"auto"}),C(!0)},150),_(!1)};(0,d.useEffect)(()=>{setTimeout(()=>{S(j)},500)},[]);let T=(0,d.useMemo)(()=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(c.OO,{id:"virtuoso",style:{height:o},className:g().virtuoso,ref:j,data:t,itemContent:(e,t)=>y(e,t),initialTopMostItemIndex:t.length-1,followOutput:()=>!!x&&(_(!1),S(j),"smooth"),alignToBottom:!0,atBottomThreshold:70,atBottomStateChange:e=>{C(e),e?_(!1):_(!0)}}),p&&(0,i.jsx)(eu,{onClick:()=>{S(j)}})]}),[t,a,s,n,p,x]);return(0,i.jsx)(u.SV,{fallbackRender:e=>{let{error:t,resetErrorBoundary:a}=e;return(0,i.jsx)(eT.A,{componentName:"ChatContainer",message:t.message,retryFunction:a})},children:(0,i.jsxs)("div",{id:"chat-container",className:g().chatContainer,children:[T,r&&(0,i.jsx)("div",{className:g().chatTextField,children:(0,i.jsx)(X,{enabled:l,focusInput:m})})]})})};eG.defaultProps={showInput:!0,height:"auto"}},88881:function(e){e.exports={chatAction:"ChatActionMessage_chatAction__x9Xsg"}},45761:function(e){e.exports={toBottomWrap:"ChatContainer_toBottomWrap__3V5wa",show:"ChatContainer_show__OBPqg",chatContainer:"ChatContainer_chatContainer__O2lYN",virtuoso:"ChatContainer_virtuoso__OS9Kz",chatTextField:"ChatContainer_chatTextField__OqCGL"}},56654:function(e){e.exports={root:"ChatJoinMessage_root__vuVXa",moderatorBadge:"ChatJoinMessage_moderatorBadge__HF66k",user:"ChatJoinMessage_user__kYpU9",icon:"ChatJoinMessage_icon__TzTHn"}},71368:function(e){e.exports={chatModerationNotification:"ChatModeratorNotification_chatModerationNotification__kgFWe",icon:"ChatModeratorNotification_icon__7FdGg"}},44964:function(e){e.exports={nameChangeView:"ChatNameChangeMessage_nameChangeView__z4WoO",nameChangeText:"ChatNameChangeMessage_nameChangeText__PTEQP",plain:"ChatNameChangeMessage_plain__heTPn",icon:"ChatNameChangeMessage_icon__TWCil"}},31654:function(e){e.exports={follower:"ChatSocialMessage_follower__TyNGH",avatar:"ChatSocialMessage_avatar__QbcNk",avatarColumn:"ChatSocialMessage_avatarColumn__inCWq",body:"ChatSocialMessage_body__aY2Oa",account:"ChatSocialMessage_account__uGSKr",icon:"ChatSocialMessage_icon__fiCk6"}},61120:function(e){e.exports={chatSystemMessage:"ChatSystemMessage_chatSystemMessage__c6XEN",user:"ChatSystemMessage_user__6yHSJ",message:"ChatSystemMessage_message__ySq5g"}},14866:function(e){e.exports={root:"ChatTextField_root__4oUkJ",inputWrap:"ChatTextField_inputWrap__1mAjD",maxCharacters:"ChatTextField_maxCharacters__yGT4s",emojiButton:"ChatTextField_emojiButton__ON_Cu",sendButton:"ChatTextField_sendButton__MOmD4"}},73295:function(e){e.exports={badge:"ChatUserBadge_badge__1EdUp"}},75774:function(e){e.exports={root:"ChatUserMessage_root__79heB",user:"ChatUserMessage_user__xUEp9",userBadges:"ChatUserMessage_userBadges__L6wat",message:"ChatUserMessage_message__MJ9LD",ownMessage:"ChatUserMessage_ownMessage__d28A3",background:"ChatUserMessage_background__Tfghp",modMenuWrapper:"ChatUserMessage_modMenuWrapper__7fblv",messagePadding:"ChatUserMessage_messagePadding__Xp1F6",messagePaddingCollapsed:"ChatUserMessage_messagePaddingCollapsed__qxN0E"}}}]);