\n {dateString} (\n \n Link\n \n )\n
\n \n404
This page could not be found.
404
This page could not be found.
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {' '}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};\n","/* eslint-disable prefer-destructuring */\nconst ADMIN_USERNAME = process.env.NEXT_PUBLIC_ADMIN_USERNAME;\nconst ADMIN_STREAMKEY = process.env.NEXT_PUBLIC_ADMIN_STREAMKEY;\nexport const NEXT_PUBLIC_API_HOST = process.env.NEXT_PUBLIC_API_HOST;\n\nconst API_LOCATION = `${NEXT_PUBLIC_API_HOST}api/admin/`;\n\nexport const FETCH_INTERVAL = 15000;\n\n// Current inbound broadcaster info\nexport const STATUS = `${API_LOCATION}status`;\n\n// Disconnect inbound stream\nexport const DISCONNECT = `${API_LOCATION}disconnect`;\n\n// Change the current streaming key in memory\nexport const STREAMKEY_CHANGE = `${API_LOCATION}changekey`;\n\n// Current server config\nexport const SERVER_CONFIG = `${API_LOCATION}serverconfig`;\n\n// Base url to update config settings\nexport const SERVER_CONFIG_UPDATE_URL = `${API_LOCATION}config`;\n\n// Get viewer count over time\nexport const VIEWERS_OVER_TIME = `${API_LOCATION}viewersOverTime`;\n\n// Get active viewer details\nexport const ACTIVE_VIEWER_DETAILS = `${API_LOCATION}viewers`;\n\n// Get currently connected chat clients\nexport const CONNECTED_CLIENTS = `${API_LOCATION}chat/clients`;\n\n// Get list of disabled/blocked chat users\nexport const DISABLED_USERS = `${API_LOCATION}chat/users/disabled`;\n\n// Disable/enable a single user\nexport const USER_ENABLED_TOGGLE = `${API_LOCATION}chat/users/setenabled`;\n\n// Get banned IP addresses\nexport const BANNED_IPS = `${API_LOCATION}chat/users/ipbans`;\n\n// Remove IP ban\nexport const BANNED_IP_REMOVE = `${API_LOCATION}chat/users/ipbans/remove`;\n\n// Disable/enable a single user\nexport const USER_SET_MODERATOR = `${API_LOCATION}chat/users/setmoderator`;\n\n// Get list of moderators\nexport const MODERATORS = `${API_LOCATION}chat/users/moderators`;\n\n// Get hardware stats\nexport const HARDWARE_STATS = `${API_LOCATION}hardwarestats`;\n\n// Get all logs\nexport const LOGS_ALL = `${API_LOCATION}logs`;\n\n// Get warnings + errors\nexport const LOGS_WARN = `${API_LOCATION}logs/warnings`;\n\n// Get chat history\nexport const CHAT_HISTORY = `${API_LOCATION}chat/messages`;\n\n// Get chat history\nexport const UPDATE_CHAT_MESSGAE_VIZ = `/api/admin/chat/messagevisibility`;\n\n// Upload a new custom emoji\nexport const UPLOAD_EMOJI = `${API_LOCATION}emoji/upload`;\n\n// Delete a custom emoji\nexport const DELETE_EMOJI = `${API_LOCATION}emoji/delete`;\n\n// Get all access tokens\nexport const ACCESS_TOKENS = `${API_LOCATION}accesstokens`;\n\n// Delete a single access token\nexport const DELETE_ACCESS_TOKEN = `${API_LOCATION}accesstokens/delete`;\n\n// Create a new access token\nexport const CREATE_ACCESS_TOKEN = `${API_LOCATION}accesstokens/create`;\n\n// Get webhooks\nexport const WEBHOOKS = `${API_LOCATION}webhooks`;\n\n// Delete a single webhook\nexport const DELETE_WEBHOOK = `${API_LOCATION}webhooks/delete`;\n\n// Create a single webhook\nexport const CREATE_WEBHOOK = `${API_LOCATION}webhooks/create`;\n\n// hard coded social icons list\nexport const SOCIAL_PLATFORMS_LIST = `${NEXT_PUBLIC_API_HOST}api/socialplatforms`;\n\n// set external action links\nexport const EXTERNAL_ACTIONS = `${API_LOCATION}api/externalactions`;\n\n// send a message to the fediverse\nexport const FEDERATION_MESSAGE_SEND = `${API_LOCATION}federation/send`;\n\n// Get followers\nexport const FOLLOWERS = `${API_LOCATION}followers`;\n\n// Get followers pending approval\nexport const FOLLOWERS_PENDING = `${API_LOCATION}followers/pending`;\n\n// Get followers who were blocked or rejected\nexport const FOLLOWERS_BLOCKED = `${API_LOCATION}followers/blocked`;\n\n// Approve, reject a follow request\nexport const SET_FOLLOWER_APPROVAL = `${API_LOCATION}followers/approve`;\n\n// List of inbound federated actions that took place.\nexport const FEDERATION_ACTIONS = `${API_LOCATION}federation/actions`;\n\nexport const API_STREAM_HEALTH_METRICS = `${API_LOCATION}metrics/video`;\n\n// Save an array of stream keys\nexport const UPDATE_STREAM_KEYS = `${API_LOCATION}config/streamkeys`;\n\nexport const API_YP_RESET = `${API_LOCATION}yp/reset`;\n\nexport const TEMP_UPDATER_API = LOGS_ALL;\n\nconst GITHUB_RELEASE_URL = 'https://api.github.com/repos/owncast/owncast/releases/latest';\n\ninterface FetchOptions {\n data?: any;\n method?: string;\n auth?: boolean;\n}\n\nexport async function fetchData(url: string, options?: FetchOptions) {\n const { data, method = 'GET', auth = true } = options || {};\n\n // eslint-disable-next-line no-undef\n const requestOptions: RequestInit = {\n method,\n };\n\n if (data) {\n requestOptions.body = JSON.stringify(data);\n }\n\n if (auth && ADMIN_USERNAME && ADMIN_STREAMKEY) {\n const encoded = btoa(`${ADMIN_USERNAME}:${ADMIN_STREAMKEY}`);\n requestOptions.headers = {\n Authorization: `Basic ${encoded}`,\n };\n requestOptions.mode = 'cors';\n requestOptions.credentials = 'include';\n }\n\n try {\n const response = await fetch(url, requestOptions);\n const json = await response.json();\n\n if (!response.ok) {\n const message = json.message || `An error has occurred: ${response.status}`;\n throw new Error(message);\n }\n return json;\n } catch (error) {\n console.error(error);\n return error;\n // console.log(error)\n // throw new Error(error)\n }\n}\n\nexport async function getUnauthedData(url: string, options?: FetchOptions) {\n const opts = {\n method: 'GET',\n auth: false,\n ...options,\n };\n return fetchData(url, opts);\n}\n\nexport async function fetchExternalData(url: string) {\n try {\n const response = await fetch(url, {\n referrerPolicy: 'no-referrer', // Send no referrer header for privacy reasons.\n referrer: '',\n });\n if (!response.ok) {\n const message = `An error has occured: ${response.status}`;\n throw new Error(message);\n }\n const json = await response.json();\n return json;\n } catch (error) {\n console.log(error);\n }\n return {};\n}\n\nexport async function getGithubRelease() {\n return fetchExternalData(GITHUB_RELEASE_URL);\n}\n\n// Stolen from https://gist.github.com/prenagha/98bbb03e27163bc2f5e4\nconst VPAT = /^\\d+(\\.\\d+){0,2}$/;\nfunction upToDate(local, remote) {\n if (!local || !remote || local.length === 0 || remote.length === 0) return false;\n if (local === remote) return true;\n if (VPAT.test(local) && VPAT.test(remote)) {\n const lparts = local.split('.');\n while (lparts.length < 3) lparts.push('0');\n const rparts = remote.split('.');\n while (rparts.length < 3) rparts.push('0');\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < 3; i++) {\n const l = parseInt(lparts[i], 10);\n const r = parseInt(rparts[i], 10);\n if (l === r)\n // eslint-disable-next-line no-continue\n continue;\n return l > r;\n }\n return true;\n }\n return local >= remote;\n}\n\n// Make a request to the server status API and the Github releases API\n// and return a release if it's newer than the server version.\nexport async function upgradeVersionAvailable(currentVersion) {\n const recentRelease = await getGithubRelease();\n let recentReleaseVersion = recentRelease.tag_name;\n\n if (recentReleaseVersion.substr(0, 1) === 'v') {\n recentReleaseVersion = recentReleaseVersion.substr(1);\n }\n\n if (!upToDate(currentVersion, recentReleaseVersion)) {\n return recentReleaseVersion;\n }\n\n return null;\n}\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"OwncastLogo_root__uDVJf\",\"contrast\":\"OwncastLogo_contrast__rDMJY\",\"simple\":\"OwncastLogo_simple___hC9r\"};"],"names":["OwncastLogo","variant","param","rootClassName","cn","styles","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsx","div","className","svg","xmlns","viewBox","g","transform","jsxs","defs","linearGradient","x1","y1","x2","y2","id","gradientTransform","stop","offset","stopColor","stopOpacity","path","fill","d","fillOpacity","ADMIN_USERNAME","process","env","NEXT_PUBLIC_ADMIN_USERNAME","ADMIN_STREAMKEY","NEXT_PUBLIC_ADMIN_STREAMKEY","NEXT_PUBLIC_API_HOST","API_LOCATION","concat","FETCH_INTERVAL","STATUS","SERVER_CONFIG","SERVER_CONFIG_UPDATE_URL","VIEWERS_OVER_TIME","ACTIVE_VIEWER_DETAILS","CONNECTED_CLIENTS","DISABLED_USERS","USER_ENABLED_TOGGLE","BANNED_IPS","BANNED_IP_REMOVE","USER_SET_MODERATOR","MODERATORS","HARDWARE_STATS","LOGS_ALL","LOGS_WARN","CHAT_HISTORY","UPDATE_CHAT_MESSGAE_VIZ","UPLOAD_EMOJI","DELETE_EMOJI","ACCESS_TOKENS","DELETE_ACCESS_TOKEN","CREATE_ACCESS_TOKEN","WEBHOOKS","DELETE_WEBHOOK","CREATE_WEBHOOK","SOCIAL_PLATFORMS_LIST","FEDERATION_MESSAGE_SEND","FOLLOWERS","FOLLOWERS_PENDING","FOLLOWERS_BLOCKED","SET_FOLLOWER_APPROVAL","FEDERATION_ACTIONS","API_STREAM_HEALTH_METRICS","UPDATE_STREAM_KEYS","API_YP_RESET","fetchData","url","options","data","method","auth","requestOptions","body","JSON","stringify","encoded","btoa","headers","Authorization","mode","credentials","response","fetch","json","ok","message","status","error","console","getUnauthedData","opts","fetchExternalData","referrerPolicy","referrer","log","getGithubRelease","VPAT","upgradeVersionAvailable","currentVersion","recentRelease","recentReleaseVersion","tag_name","substr","upToDate","local","remote","length","test","lparts","split","push","rparts","i","l","parseInt","r","module","exports"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"static/chunks/180-396d483f985bbcd6.js","mappings":"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","sources":["webpack://_N_E/./components/common/OwncastLogo/OwncastLogo.tsx","webpack://_N_E/./utils/apis.ts","webpack://_N_E/./components/common/OwncastLogo/OwncastLogo.module.scss","webpack://_N_E/\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {' '}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};\n","/* eslint-disable prefer-destructuring */\nconst ADMIN_USERNAME = process.env.NEXT_PUBLIC_ADMIN_USERNAME;\nconst ADMIN_STREAMKEY = process.env.NEXT_PUBLIC_ADMIN_STREAMKEY;\nexport const NEXT_PUBLIC_API_HOST = process.env.NEXT_PUBLIC_API_HOST;\n\nconst API_LOCATION = `${NEXT_PUBLIC_API_HOST}api/admin/`;\n\nexport const FETCH_INTERVAL = 15000;\n\n// Current inbound broadcaster info\nexport const STATUS = `${API_LOCATION}status`;\n\n// Disconnect inbound stream\nexport const DISCONNECT = `${API_LOCATION}disconnect`;\n\n// Change the current streaming key in memory\nexport const STREAMKEY_CHANGE = `${API_LOCATION}changekey`;\n\n// Current server config\nexport const SERVER_CONFIG = `${API_LOCATION}serverconfig`;\n\n// Base url to update config settings\nexport const SERVER_CONFIG_UPDATE_URL = `${API_LOCATION}config`;\n\n// Get viewer count over time\nexport const VIEWERS_OVER_TIME = `${API_LOCATION}viewersOverTime`;\n\n// Get active viewer details\nexport const ACTIVE_VIEWER_DETAILS = `${API_LOCATION}viewers`;\n\n// Get currently connected chat clients\nexport const CONNECTED_CLIENTS = `${API_LOCATION}chat/clients`;\n\n// Get list of disabled/blocked chat users\nexport const DISABLED_USERS = `${API_LOCATION}chat/users/disabled`;\n\n// Disable/enable a single user\nexport const USER_ENABLED_TOGGLE = `${API_LOCATION}chat/users/setenabled`;\n\n// Get banned IP addresses\nexport const BANNED_IPS = `${API_LOCATION}chat/users/ipbans`;\n\n// Remove IP ban\nexport const BANNED_IP_REMOVE = `${API_LOCATION}chat/users/ipbans/remove`;\n\n// Disable/enable a single user\nexport const USER_SET_MODERATOR = `${API_LOCATION}chat/users/setmoderator`;\n\n// Get list of moderators\nexport const MODERATORS = `${API_LOCATION}chat/users/moderators`;\n\n// Get hardware stats\nexport const HARDWARE_STATS = `${API_LOCATION}hardwarestats`;\n\n// Get all logs\nexport const LOGS_ALL = `${API_LOCATION}logs`;\n\n// Get warnings + errors\nexport const LOGS_WARN = `${API_LOCATION}logs/warnings`;\n\n// Get chat history\nexport const CHAT_HISTORY = `${API_LOCATION}chat/messages`;\n\n// Get chat history\nexport const UPDATE_CHAT_MESSGAE_VIZ = `/api/admin/chat/messagevisibility`;\n\n// Upload a new custom emoji\nexport const UPLOAD_EMOJI = `${API_LOCATION}emoji/upload`;\n\n// Delete a custom emoji\nexport const DELETE_EMOJI = `${API_LOCATION}emoji/delete`;\n\n// Get all access tokens\nexport const ACCESS_TOKENS = `${API_LOCATION}accesstokens`;\n\n// Delete a single access token\nexport const DELETE_ACCESS_TOKEN = `${API_LOCATION}accesstokens/delete`;\n\n// Create a new access token\nexport const CREATE_ACCESS_TOKEN = `${API_LOCATION}accesstokens/create`;\n\n// Get webhooks\nexport const WEBHOOKS = `${API_LOCATION}webhooks`;\n\n// Delete a single webhook\nexport const DELETE_WEBHOOK = `${API_LOCATION}webhooks/delete`;\n\n// Create a single webhook\nexport const CREATE_WEBHOOK = `${API_LOCATION}webhooks/create`;\n\n// hard coded social icons list\nexport const SOCIAL_PLATFORMS_LIST = `${NEXT_PUBLIC_API_HOST}api/socialplatforms`;\n\n// set external action links\nexport const EXTERNAL_ACTIONS = `${API_LOCATION}api/externalactions`;\n\n// send a message to the fediverse\nexport const FEDERATION_MESSAGE_SEND = `${API_LOCATION}federation/send`;\n\n// Get followers\nexport const FOLLOWERS = `${API_LOCATION}followers`;\n\n// Get followers pending approval\nexport const FOLLOWERS_PENDING = `${API_LOCATION}followers/pending`;\n\n// Get followers who were blocked or rejected\nexport const FOLLOWERS_BLOCKED = `${API_LOCATION}followers/blocked`;\n\n// Approve, reject a follow request\nexport const SET_FOLLOWER_APPROVAL = `${API_LOCATION}followers/approve`;\n\n// List of inbound federated actions that took place.\nexport const FEDERATION_ACTIONS = `${API_LOCATION}federation/actions`;\n\nexport const API_STREAM_HEALTH_METRICS = `${API_LOCATION}metrics/video`;\n\n// Save an array of stream keys\nexport const UPDATE_STREAM_KEYS = `${API_LOCATION}config/streamkeys`;\n\nexport const API_YP_RESET = `${API_LOCATION}yp/reset`;\n\nexport const TEMP_UPDATER_API = LOGS_ALL;\n\nconst GITHUB_RELEASE_URL = 'https://api.github.com/repos/owncast/owncast/releases/latest';\n\ninterface FetchOptions {\n data?: any;\n method?: string;\n auth?: boolean;\n}\n\nexport async function fetchData(url: string, options?: FetchOptions) {\n const { data, method = 'GET', auth = true } = options || {};\n\n // eslint-disable-next-line no-undef\n const requestOptions: RequestInit = {\n method,\n };\n\n if (data) {\n requestOptions.body = JSON.stringify(data);\n }\n\n if (auth && ADMIN_USERNAME && ADMIN_STREAMKEY) {\n const encoded = btoa(`${ADMIN_USERNAME}:${ADMIN_STREAMKEY}`);\n requestOptions.headers = {\n Authorization: `Basic ${encoded}`,\n };\n requestOptions.mode = 'cors';\n requestOptions.credentials = 'include';\n }\n\n try {\n const response = await fetch(url, requestOptions);\n const json = await response.json();\n\n if (!response.ok) {\n const message = json.message || `An error has occurred: ${response.status}`;\n throw new Error(message);\n }\n return json;\n } catch (error) {\n console.error(error);\n return error;\n // console.log(error)\n // throw new Error(error)\n }\n}\n\nexport async function getUnauthedData(url: string, options?: FetchOptions) {\n const opts = {\n method: 'GET',\n auth: false,\n ...options,\n };\n return fetchData(url, opts);\n}\n\nexport async function fetchExternalData(url: string) {\n try {\n const response = await fetch(url, {\n referrerPolicy: 'no-referrer', // Send no referrer header for privacy reasons.\n referrer: '',\n });\n if (!response.ok) {\n const message = `An error has occured: ${response.status}`;\n throw new Error(message);\n }\n const json = await response.json();\n return json;\n } catch (error) {\n console.log(error);\n }\n return {};\n}\n\nexport async function getGithubRelease() {\n return fetchExternalData(GITHUB_RELEASE_URL);\n}\n\n// Stolen from https://gist.github.com/prenagha/98bbb03e27163bc2f5e4\nconst VPAT = /^\\d+(\\.\\d+){0,2}$/;\nfunction upToDate(local, remote) {\n if (!local || !remote || local.length === 0 || remote.length === 0) return false;\n if (local === remote) return true;\n if (VPAT.test(local) && VPAT.test(remote)) {\n const lparts = local.split('.');\n while (lparts.length < 3) lparts.push('0');\n const rparts = remote.split('.');\n while (rparts.length < 3) rparts.push('0');\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < 3; i++) {\n const l = parseInt(lparts[i], 10);\n const r = parseInt(rparts[i], 10);\n if (l === r)\n // eslint-disable-next-line no-continue\n continue;\n return l > r;\n }\n return true;\n }\n return local >= remote;\n}\n\n// Make a request to the server status API and the Github releases API\n// and return a release if it's newer than the server version.\nexport async function upgradeVersionAvailable(currentVersion) {\n const recentRelease = await getGithubRelease();\n let recentReleaseVersion = recentRelease.tag_name;\n\n if (recentReleaseVersion.substr(0, 1) === 'v') {\n recentReleaseVersion = recentReleaseVersion.substr(1);\n }\n\n if (!upToDate(currentVersion, recentReleaseVersion)) {\n return recentReleaseVersion;\n }\n\n return null;\n}\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"OwncastLogo_root__uDVJf\",\"contrast\":\"OwncastLogo_contrast__rDMJY\",\"simple\":\"OwncastLogo_simple___hC9r\"};"],"names":["OwncastLogo","variant","param","rootClassName","cn","styles","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsx","div","className","svg","xmlns","viewBox","g","transform","jsxs","defs","linearGradient","x1","y1","x2","y2","id","gradientTransform","stop","offset","stopColor","stopOpacity","path","fill","d","fillOpacity","ADMIN_USERNAME","process","env","NEXT_PUBLIC_ADMIN_USERNAME","ADMIN_STREAMKEY","NEXT_PUBLIC_ADMIN_STREAMKEY","NEXT_PUBLIC_API_HOST","API_LOCATION","concat","FETCH_INTERVAL","STATUS","SERVER_CONFIG","SERVER_CONFIG_UPDATE_URL","VIEWERS_OVER_TIME","ACTIVE_VIEWER_DETAILS","CONNECTED_CLIENTS","DISABLED_USERS","USER_ENABLED_TOGGLE","BANNED_IPS","BANNED_IP_REMOVE","USER_SET_MODERATOR","MODERATORS","HARDWARE_STATS","LOGS_ALL","LOGS_WARN","CHAT_HISTORY","UPDATE_CHAT_MESSGAE_VIZ","UPLOAD_EMOJI","DELETE_EMOJI","ACCESS_TOKENS","DELETE_ACCESS_TOKEN","CREATE_ACCESS_TOKEN","WEBHOOKS","DELETE_WEBHOOK","CREATE_WEBHOOK","SOCIAL_PLATFORMS_LIST","FEDERATION_MESSAGE_SEND","FOLLOWERS","FOLLOWERS_PENDING","FOLLOWERS_BLOCKED","SET_FOLLOWER_APPROVAL","FEDERATION_ACTIONS","API_STREAM_HEALTH_METRICS","UPDATE_STREAM_KEYS","API_YP_RESET","fetchData","url","options","data","method","auth","requestOptions","body","JSON","stringify","encoded","btoa","headers","Authorization","mode","credentials","response","fetch","json","ok","message","status","error","console","getUnauthedData","opts","fetchExternalData","referrerPolicy","referrer","log","getGithubRelease","VPAT","upgradeVersionAvailable","currentVersion","recentRelease","recentReleaseVersion","tag_name","substr","upToDate","local","remote","length","test","lparts","split","push","rparts","i","l","parseInt","r","module","exports"],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/web/_next/static/chunks/2070-698f0e8dafdc2795.js b/static/web/_next/static/chunks/2070-698f0e8dafdc2795.js
new file mode 100644
index 000000000..da08a527b
--- /dev/null
+++ b/static/web/_next/static/chunks/2070-698f0e8dafdc2795.js
@@ -0,0 +1,2 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2070],{32070:function(e,t,s){"use strict";s.r(t),s.d(t,{ChatContainer:function(){return eC}});var a,n,r,o,i,l=s(85893),c=s(26246),d=s(67294),h=s(5152),u=s.n(h),m=s(91951),p=s(59760),x=s.n(p),g=s(94184),_=s.n(g),C=s(94199),f=s(4480),j=s(27722),v=s(99597),y=s(50085),b=s.n(y),N=s(77278);function M(e){let t=new Date(e);if(Number.isNaN(t))return"";let s=(0,N.Xb)(e);if(s>=1){let e=t.toLocaleDateString("en-US",{dateStyle:"medium"});return"".concat(e," at ").concat(t.toLocaleTimeString())}return"".concat(t.toLocaleTimeString())}var w=s(77466),T=s(48976),S=s.n(T);let E=e=>{let{badge:t,userColor:s,title:a}=e;return(0,l.jsx)("span",{style:{color:"var(--theme-color-users-".concat(s,")")},className:S().badge,title:a,children:t})},k=u()(()=>Promise.all([s.e(2074),s.e(7719)]).then(s.t.bind(s,27719,23)),{loadableGenerated:{webpack:()=>[27719]},ssr:!1}),O=e=>{let{userColor:t}=e;return(0,l.jsx)(E,{badge:(0,l.jsx)(k,{}),userColor:t,title:"Moderator"})},D=u()(()=>Promise.all([s.e(2074),s.e(710)]).then(s.t.bind(s,20710,23)),{loadableGenerated:{webpack:()=>[20710]},ssr:!1}),A=e=>{let{userColor:t}=e;return(0,l.jsx)(E,{badge:(0,l.jsx)(D,{}),userColor:t,title:"Moderator"})},B=u()(()=>Promise.all([s.e(173),s.e(164),s.e(4931),s.e(5402),s.e(7524),s.e(6386),s.e(3698),s.e(3013),s.e(4398),s.e(8091),s.e(8270),s.e(4860)]).then(s.bind(s,94860)).then(e=>e.ChatModerationActionMenu),{loadableGenerated:{webpack:()=>[94860]},ssr:!1}),P=u()(()=>Promise.resolve().then(s.bind(s,47049)).then(e=>e.Highlight),{loadableGenerated:{webpack:()=>[47049]},ssr:!1}),U=e=>{let{children:t,user:s}=e,{displayName:a,createdAt:n}=s,r="".concat(a," first joined ").concat(M(n));return(0,l.jsx)(C.Z,{title:r,placement:"topLeft",mouseEnterDelay:1,children:t})},F=e=>{let{message:t,highlightString:s,showModeratorMenu:a,sentBySelf:n,sameUserAsLast:r,isAuthorModerator:o,isAuthorAuthenticated:i}=e,{id:c,body:h,user:u,timestamp:m}=t,{id:p,displayName:x,displayColor:g}=u,y=(0,f.sJ)(w.FI),N="var(--theme-color-users-".concat(g,")"),T="Sent ".concat(M(m)),[S,E]=(0,d.useState)(h),k=[];return o&&k.push((0,l.jsx)(A,{userColor:g},"mod")),i&&k.push((0,l.jsx)(O,{userColor:g},"auth")),(0,d.useEffect)(()=>{E((0,j.p1)(h))},[t]),(0,l.jsx)("div",{className:_()(b().messagePadding,r&&b().messagePaddingCollapsed,"chat-message_user"),children:(0,l.jsxs)("div",{className:_()(b().root,{[b().ownMessage]:n}),style:{borderColor:N},children:[(0,l.jsx)("div",{className:b().background,style:{color:N}}),!r&&(0,l.jsx)(U,{user:u,children:(0,l.jsxs)("div",{className:b().user,style:{color:N},children:[(0,l.jsx)("span",{className:b().userName,children:x}),(0,l.jsx)("span",{children:k})]})}),(0,l.jsx)(C.Z,{title:T,mouseEnterDelay:1,children:(0,l.jsx)(P,{search:s,children:(0,l.jsx)("div",{className:b().message,dangerouslySetInnerHTML:{__html:(0,v.Z)(S)}})})}),a&&(0,l.jsx)("div",{className:b().modMenuWrapper,children:(0,l.jsx)(B,{messageID:c,accessToken:y,userID:p,userDisplayName:x})})]})})};var G=s(55241),L=s(77493),R=s(96391),I=s(26912),H=s.n(I);let W=u()(()=>Promise.all([s.e(7741),s.e(1559)]).then(s.bind(s,51559)).then(e=>e.EmojiPicker),{loadableGenerated:{webpack:()=>[51559]},ssr:!1}),V=u()(()=>Promise.all([s.e(2074),s.e(3366)]).then(s.t.bind(s,73366,23)),{loadableGenerated:{webpack:()=>[73366]},ssr:!1}),Y=u()(()=>Promise.all([s.e(2074),s.e(2348)]).then(s.t.bind(s,92348,23)),{loadableGenerated:{webpack:()=>[92348]},ssr:!1}),J=e=>{let{attributes:t,element:s,children:a}=e,n=(0,R.vt)(),r=(0,R.UE)();return(0,l.jsxs)("span",{...t,contentEditable:!1,children:[(0,l.jsx)("img",{alt:s.alt,src:s.src,title:s.name,style:{display:"inline",maxWidth:"50px",maxHeight:"20px",boxShadow:"".concat(n&&r?"0 0 0 3px #B4D5FF":"none")}}),a]})},X=e=>{let{isVoid:t}=e;return e.isVoid=e=>"image"===e.type||t(e),e.isInline=e=>"image"===e.type,e},z=e=>{let t;if(L.xv.isText(e)){let t=e.text;return t}if(0===e.children.length)t=[{text:""}];else{var s;t=null===(s=e.children)||void 0===s?void 0:s.map(e=>z(e)).join("")}switch(e.type){case"paragraph":return"".concat(t,"
");case"image":return'\n {displayName}\n {badgeNodes}\n
\n \n
\n )}\n \n \n );\n};\n","import { Popover } from 'antd';\nimport React, { FC, useMemo, useState } from 'react';\nimport { useRecoilValue } from 'recoil';\nimport { Transforms, createEditor, BaseEditor, Text, Descendant, Editor, Node, Path } from 'slate';\nimport { Slate, Editable, withReact, ReactEditor, useSelected, useFocused } from 'slate-react';\nimport dynamic from 'next/dynamic';\nimport classNames from 'classnames';\nimport WebsocketService from '../../../services/websocket-service';\nimport { websocketServiceAtom } from '../../stores/ClientConfigStore';\nimport { MessageType } from '../../../interfaces/socket-events';\nimport styles from './ChatTextField.module.scss';\n\n// Lazy loaded components\n\nconst EmojiPicker = dynamic(() => import('./EmojiPicker').then(mod => mod.EmojiPicker), {\n ssr: false,\n});\n\nconst SendOutlined = dynamic(() => import('@ant-design/icons/SendOutlined'), {\n ssr: false,\n});\n\nconst SmileOutlined = dynamic(() => import('@ant-design/icons/SmileOutlined'), {\n ssr: false,\n});\n\ntype CustomElement = { type: 'paragraph' | 'span'; children: CustomText[] } | ImageNode;\ntype CustomText = { text: string };\n\ntype EmptyText = {\n text: string;\n};\n\ntype ImageNode = {\n type: 'image';\n alt: string;\n src: string;\n name: string;\n children: EmptyText[];\n};\n\ndeclare module 'slate' {\n interface CustomTypes {\n Editor: BaseEditor & ReactEditor;\n Element: CustomElement;\n Text: CustomText;\n }\n}\n\nconst Image = p => {\n const { attributes, element, children } = p;\n\n const selected = useSelected();\n const focused = useFocused();\n return (\n \n ${children}
`;\n case 'image':\n return `\n = characterLimit && styles.maxCharacters,\n )}\n >\n \n \n\n
\n \n );\n};\n","var _linearGradient, _path, _path2, _path3, _path4;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nvar SvgModerator = function SvgModerator(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n height: 500,\n viewBox: \"0 0 132.292 132.292\",\n width: 500,\n xmlns: \"http://www.w3.org/2000/svg\"\n }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"moderator_svg__a\",\n gradientUnits: \"userSpaceOnUse\",\n x1: 432.851,\n x2: 464.644,\n y1: 49.977,\n y2: 49.977\n }, /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0,\n stopColor: \"#2087e2\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#b63fff\"\n }))), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n 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\",\n fill: \"url(#moderator_svg__a)\",\n transform: \"matrix(4.16112 0 0 4.16112 -1801.146 -141.814)\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n 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\",\n fill: \"#1d1535\",\n fillOpacity: 0.335\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n 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\",\n fill: \"#e2e8f0\",\n fillOpacity: 0.306\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n 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\",\n fill: \"none\",\n stroke: \"#fff\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n transform: \"matrix(4.16112 0 0 4.16112 -1801.146 -141.814)\"\n })));\n};\nexport default SvgModerator;","import styles from './ChatModeratorNotification.module.scss';\nimport Icon from '../../../assets/images/moderator.svg';\n\nexport const ChatModeratorNotification = () => (\n \n setShowEmojis(!showEmojis)}\n >\n \n
\n \n
\n);\n","/* eslint-disable react/no-danger */\nimport { Highlight } from 'react-highlighter-ts';\nimport { FC } from 'react';\nimport cn from 'classnames';\nimport { ChatMessage } from '../../../interfaces/chat-message.model';\nimport styles from './ChatSystemMessage.module.scss';\n\nexport type ChatSystemMessageProps = {\n message: ChatMessage;\n highlightString: string;\n};\n\nexport const ChatSystemMessage: FC\n \n \n \n
\n);\n","import { FC } from 'react';\nimport dynamic from 'next/dynamic';\nimport styles from './ChatJoinMessage.module.scss';\nimport { ModerationBadge } from '../ChatUserBadge/ModerationBadge';\n\n// Lazy loaded components\n\nconst TeamOutlined = dynamic(() => import('@ant-design/icons/TeamOutlined'), {\n ssr: false,\n});\n\nexport type ChatJoinMessageProps = {\n isAuthorModerator: boolean;\n userColor: number;\n displayName: string;\n};\n\nexport const ChatJoinMessage: FC\n {displayName}\n
\n \n \n \n
\n );\n};\n","import { Button } from 'antd';\nimport dynamic from 'next/dynamic';\nimport { FC, MutableRefObject } from 'react';\nimport { ChatMessage } from '../../../interfaces/chat-message.model';\nimport styles from './ChatContainer.module.scss';\n\n// Lazy loaded components\n\nconst VerticalAlignBottomOutlined = dynamic(\n () => import('@ant-design/icons/VerticalAlignBottomOutlined'),\n {\n ssr: false,\n },\n);\ntype Props = {\n chatContainerRef: MutableRefObject\n
\n);\n","import { FC } from 'react';\nimport styles from './ChatActionMessage.module.scss';\n\n/* eslint-disable react/no-danger */\nexport type ChatActionMessageProps = {\n body: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const ChatActionMessage: FC\n
\n );\n };\n\n const getUserJoinedMessage = (message: ChatMessage) => {\n const {\n user: { displayName, displayColor },\n } = message;\n const isAuthorModerator = checkIsModerator(message);\n return (\n \n
\n \n {oldName}\n is now known as \n {displayName}\n
\n \n {MessagesTable}\n {showInput && (\n
\n );\n};\n\nChatContainer.defaultProps = {\n showInput: true,\n height: 'auto',\n};\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"chatAction\":\"ChatActionMessage_chatAction__x9Xsg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"toBottomWrap\":\"ChatContainer_toBottomWrap__3V5wa\",\"nameChangeView\":\"ChatContainer_nameChangeView__ziyXN\",\"nameChangeText\":\"ChatContainer_nameChangeText__yXG__\",\"plain\":\"ChatContainer_plain__IPS19\",\"chatContainer\":\"ChatContainer_chatContainer__O2lYN\",\"virtuoso\":\"ChatContainer_virtuoso__OS9Kz\",\"chatTextField\":\"ChatContainer_chatTextField__OqCGL\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"ChatJoinMessage_root__vuVXa\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"chatModerationNotification\":\"ChatModeratorNotification_chatModerationNotification__kgFWe\",\"icon\":\"ChatModeratorNotification_icon__7FdGg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"chatSystemMessage\":\"ChatSystemMessage_chatSystemMessage__c6XEN\",\"user\":\"ChatSystemMessage_user__6yHSJ\",\"message\":\"ChatSystemMessage_message__ySq5g\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"ChatTextField_root__4oUkJ\",\"inputWrap\":\"ChatTextField_inputWrap__1mAjD\",\"maxCharacters\":\"ChatTextField_maxCharacters__yGT4s\",\"emojiButton\":\"ChatTextField_emojiButton__ON_Cu\",\"sendButton\":\"ChatTextField_sendButton__MOmD4\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"badge\":\"ChatUserBadge_badge__1EdUp\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"ChatUserMessage_root__79heB\",\"user\":\"ChatUserMessage_user__xUEp9\",\"message\":\"ChatUserMessage_message__MJ9LD\",\"ownMessage\":\"ChatUserMessage_ownMessage__d28A3\",\"background\":\"ChatUserMessage_background__Tfghp\",\"modMenuWrapper\":\"ChatUserMessage_modMenuWrapper__7fblv\",\"messagePadding\":\"ChatUserMessage_messagePadding__Xp1F6\",\"messagePaddingCollapsed\":\"ChatUserMessage_messagePaddingCollapsed__qxN0E\"};"],"names":["_linearGradient","_path","_path2","_path3","_path4","formatTimestamp","sentAt","now","Date","Number","isNaN","diffInDays","getDiffInDaysFromNow","localeDate","toLocaleDateString","dateStyle","concat","toLocaleTimeString","ChatUserBadge","badge","userColor","title","param","jsx_runtime","jsx","span","style","color","className","styles","SafetyCertificateFilled","dynamic","Promise","all","__webpack_require__","e","then","t","bind","ssr","AuthedUserBadge","StarFilled","ModerationBadge","ChatModerationActionMenu","mod","Highlight","resolve","UserTooltip","children","user","displayName","createdAt","content","Tooltip","placement","mouseEnterDelay","ChatUserMessage","message","highlightString","showModeratorMenu","sentBySelf","sameUserAsLast","isAuthorModerator","isAuthorAuthenticated","id","messageId","body","timestamp","userId","displayColor","accessToken","useRecoilValue","accessTokenAtom","formattedTimestamp","formattedMessage","setFormattedMessage","useState","badgeNodes","push","useEffect","decodeHTML","div","cn","jsxs","borderColor","search","dangerouslySetInnerHTML","__html","linkifyHtml","messageID","userID","userDisplayName","EmojiPicker","SendOutlined","SmileOutlined","Image","p","attributes","element","selected","useSelected","focused","useFocused","contentEditable","img","alt","src","name","display","maxWidth","maxHeight","boxShadow","withImages","editor","isVoid","type","isInline","serialize","node","Text","string","text","length","map","n","join","getCharacterCount","count","forEach","child","ChatTextField","defaultText","showEmojis","setShowEmojis","characterCount","setCharacterCount","websocketService","websocketServiceAtom","useMemo","withReact","createEditor","sendMessage","console","log","send","MessageType","Transforms","at","anchor","Editor","focus","createImageNode","insertImage","url","selection","image","select","parentNode","parentPath","path","Node","Path","force","onEmojiSelect","ReactEditor","emoji","onCustomEmojiSelect","onKeyDown","charCount","key","preventDefault","onPaste","clipboardData","getData","renderElement","classNames","Slate","value","Editable","placeholder","width","role","aria-label","autoFocus","Popover","trigger","onOpenChange","open","paddingLeft","button","onClick","_extends","Object","assign","target","i","arguments","source","prototype","hasOwnProperty","call","apply","moderator","props","react","createElement","height","viewBox","xmlns","gradientUnits","x1","x2","y1","y2","offset","stopColor","d","fill","transform","fillOpacity","stroke","strokeLinejoin","strokeWidth","ChatModeratorNotification","Icon","ChatSystemMessage","TeamOutlined","ChatJoinMessage","padding","fontWeight","VerticalAlignBottomOutlined","ScrollToBotBtn","chatContainerRef","messages","Button","icon","current","scrollToIndex","index","behavior","ChatActionMessage","EditFilled","checkIsModerator","scopes","includes","ChatContainer","usernameToHighlight","chatUserId","isModerator","showInput","atBottom","setAtBottom","useRef","getNameChangeViewForMessage","oldName","marginRight","margin","getUserJoinedMessage","getActionMessage","getConnectedInfoMessage","modStatusUpdate","getViewForMessage","_message_user_scopes","shouldCollapseMessages","lastMessage","lastTimestamp","getTime","thisTimestamp","maxTimestampDelta","authenticated","scrollChatToBottom","ref","setTimeout","MessagesTable","Fragment","Virtuoso","data","itemContent","followOutput","isAtBottom","alignToBottom","atBottomThreshold","atBottomStateChange","bottom","defaultProps","module","exports"],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/web/_next/static/chunks/2582.bcfcea5f30938762.js b/static/web/_next/static/chunks/2582.bcfcea5f30938762.js
deleted file mode 100644
index e0e86344d..000000000
--- a/static/web/_next/static/chunks/2582.bcfcea5f30938762.js
+++ /dev/null
@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2582,8864],{63701:function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default={icon:{tag:"svg",attrs:{viewBox:"64 64 896 896",focusable:"false"},children:[{tag:"path",attrs:{d:"M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"}}]},name:"link",theme:"outlined"}},38864:function(e,t,r){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a,n=(a=r(23534))&&a.__esModule?a:{default:a};t.default=n,e.exports=n},23534:function(e,t,r){var a=r(64836),n=r(18698);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=a(r(42122)),u=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!==n(e)&&"function"!=typeof e)return{default:e};var r=o(t);if(r&&r.has(e))return r.get(e);var a={},l=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var f=l?Object.getOwnPropertyDescriptor(e,u):null;f&&(f.get||f.set)?Object.defineProperty(a,u,f):a[u]=e[u]}return a.default=e,r&&r.set(e,a),a}(r(67294)),f=a(r(63701)),c=a(r(92074));function o(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(o=function(e){return e?r:t})(e)}var i=function(e,t){return u.createElement(c.default,(0,l.default)((0,l.default)({},e),{},{ref:t,icon:f.default}))};i.displayName="LinkOutlined";var d=u.forwardRef(i);t.default=d}}]);
-//# sourceMappingURL=2582.bcfcea5f30938762.js.map
\ No newline at end of file
diff --git a/static/web/_next/static/chunks/2582.bcfcea5f30938762.js.map b/static/web/_next/static/chunks/2582.bcfcea5f30938762.js.map
deleted file mode 100644
index 3ac966e69..000000000
--- a/static/web/_next/static/chunks/2582.bcfcea5f30938762.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"static/chunks/2582.bcfcea5f30938762.js","mappings":"sGAEAA,OAAAC,cAAA,CAAAC,EAAA,aAA6C,CAAEC,MAAA,KAE/CD,EAAA,OAAe,CADf,CAAqB,MAAU,iBAAyB,2CAAkD,WAAiB,kBAA0B,8rBAAksB,EAAG,qDCFx1BF,OAAAC,cAAA,CAAAC,EAAA,aAA6C,CAC/CC,MAAA,EACA,GACED,EAAA,OAAe,QAEjB,IAEAE,EAFAC,EAEyCD,CAAzCA,EAF6CE,EAAQ,SAEZF,EAAAG,UAAA,CAAAH,EAAA,CAAuC,QAAAA,CAAA,EAG9EF,EAAA,OAAe,CADjBG,EAEAG,EAAAN,OAAA,CAFAG,yBCRA,IAAAI,EAA6BH,EAAQ,OACrCI,EAAcJ,EAAQ,OACtBN,OAAAC,cAAA,CAAAC,EAAA,aAA6C,CAC7CC,MAAA,EACA,GACAD,EAAA,OAAe,QACf,IAAAS,EAAAF,EAA4CH,EAAQ,QACpDM,EAAAC,SAIAT,CAAA,CAAAU,CAAA,EAAqD,IAAAA,GAAAV,GAAAA,EAAAG,UAAA,CAA6C,OAAAH,CAAA,CAAc,GAAAA,IAAA,GAAAA,GAAAM,WAAAA,EAAAN,IAAA,mBAAAA,EAA8E,OAASW,QAAAX,CAAA,EAAkB,IAAAY,EAAAC,EAAAH,GAAmD,GAAAE,GAAAA,EAAAE,GAAA,CAAAd,GAA+B,OAAAY,EAAAG,GAAA,CAAAf,EAAA,CAAyB,IAAAgB,EAAA,GAAiBC,EAAArB,OAAAC,cAAA,EAAAD,OAAAsB,wBAAA,CAAsF,QAAAC,KAAAnB,EAAuB,GAAAmB,YAAAA,GAAAvB,OAAAwB,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAtB,EAAAmB,GAAA,CAA2E,IAAAI,EAAAN,EAAArB,OAAAsB,wBAAA,CAAAlB,EAAAmB,GAAA,KAAqFI,GAAAA,CAAAA,EAAAR,GAAA,EAAAQ,EAAAC,GAAA,EAAsC5B,OAAAC,cAAA,CAAAmB,EAAAG,EAAAI,GAAmDP,CAAA,CAAAG,EAAA,CAAAnB,CAAA,CAAAmB,EAAA,QAA8BH,EAAAL,OAAA,CAAAX,EAAsBY,GAAaA,EAAAY,GAAA,CAAAxB,EAAAgB,GAA0BA,CAAA,EAJlvBd,EAAQ,QAC5CD,EAAAI,EAA2CH,EAAQ,QACnDuB,EAAApB,EAAuCH,EAAQ,QAC/C,SAAAW,EAAAH,CAAA,EAAiD,sBAAAgB,QAAA,YAAgD,IAAAC,EAAA,IAAAD,QAAuCE,EAAA,IAAAF,QAAsC,OAAAb,EAAA,SAAAH,CAAA,EAAoF,OAAAA,EAAAkB,EAAAD,CAAA,GAA4DjB,EAAA,CAK9T,IAAAmB,EAAA,SAAAC,CAAA,CAAAC,CAAA,EACA,OAAAvB,EAAAwB,aAAA,CAAAP,EAAAd,OAAA,IAAAJ,EAAAI,OAAA,KAAAJ,EAAAI,OAAA,KAAuHmB,GAAA,GAAY,CACnIC,IAAAA,EACAE,KAAAhC,EAAAU,OAAA,GAEA,CACAkB,CAAAA,EAAAK,WAAA,gBACA,IAAAC,EAAA3B,EAAA4B,UAAA,CAAAP,EACA/B,CAAAA,EAAA,OAAe,CAAAqC","sources":["webpack://_N_E/./node_modules/@ant-design/icons-svg/lib/asn/LinkOutlined.js","webpack://_N_E/./node_modules/@ant-design/icons/LinkOutlined.js","webpack://_N_E/./node_modules/@ant-design/icons/lib/icons/LinkOutlined.js","webpack://_N_E/\n
\n )}\n ".concat(t,"
");case"image":return'\n {displayName}\n {badgeNodes}\n
\n \n
\n )}\n \n \n );\n};\n","import { Popover } from 'antd';\nimport React, { FC, useMemo, useState } from 'react';\nimport { useRecoilValue } from 'recoil';\nimport { Transforms, createEditor, BaseEditor, Text, Descendant, Editor, Node, Path } from 'slate';\nimport { Slate, Editable, withReact, ReactEditor, useSelected, useFocused } from 'slate-react';\nimport dynamic from 'next/dynamic';\nimport classNames from 'classnames';\nimport WebsocketService from '../../../services/websocket-service';\nimport { websocketServiceAtom } from '../../stores/ClientConfigStore';\nimport { MessageType } from '../../../interfaces/socket-events';\nimport styles from './ChatTextField.module.scss';\n\n// Lazy loaded components\n\nconst EmojiPicker = dynamic(() => import('./EmojiPicker').then(mod => mod.EmojiPicker), {\n ssr: false,\n});\n\nconst SendOutlined = dynamic(() => import('@ant-design/icons/SendOutlined'), {\n ssr: false,\n});\n\nconst SmileOutlined = dynamic(() => import('@ant-design/icons/SmileOutlined'), {\n ssr: false,\n});\n\ntype CustomElement = { type: 'paragraph' | 'span'; children: CustomText[] } | ImageNode;\ntype CustomText = { text: string };\n\ntype EmptyText = {\n text: string;\n};\n\ntype ImageNode = {\n type: 'image';\n alt: string;\n src: string;\n name: string;\n children: EmptyText[];\n};\n\ndeclare module 'slate' {\n interface CustomTypes {\n Editor: BaseEditor & ReactEditor;\n Element: CustomElement;\n Text: CustomText;\n }\n}\n\nconst Image = p => {\n const { attributes, element, children } = p;\n\n const selected = useSelected();\n const focused = useFocused();\n return (\n \n ${children}
`;\n case 'image':\n return `\n = characterLimit && styles.maxCharacters,\n )}\n >\n \n \n\n
\n \n );\n};\n","var _linearGradient, _path, _path2, _path3, _path4;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nvar SvgModerator = function SvgModerator(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n height: 500,\n viewBox: \"0 0 132.292 132.292\",\n width: 500,\n xmlns: \"http://www.w3.org/2000/svg\"\n }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"moderator_svg__a\",\n gradientUnits: \"userSpaceOnUse\",\n x1: 432.851,\n x2: 464.644,\n y1: 49.977,\n y2: 49.977\n }, /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0,\n stopColor: \"#2087e2\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#b63fff\"\n }))), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n 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\",\n fill: \"url(#moderator_svg__a)\",\n transform: \"matrix(4.16112 0 0 4.16112 -1801.146 -141.814)\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n 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\",\n fill: \"#1d1535\",\n fillOpacity: 0.335\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n 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\",\n fill: \"#e2e8f0\",\n fillOpacity: 0.306\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n 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\",\n fill: \"none\",\n stroke: \"#fff\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n transform: \"matrix(4.16112 0 0 4.16112 -1801.146 -141.814)\"\n })));\n};\nexport default SvgModerator;","import styles from './ChatModeratorNotification.module.scss';\nimport Icon from '../../../assets/images/moderator.svg';\n\nexport const ChatModeratorNotification = () => (\n \n setShowEmojis(!showEmojis)}\n >\n \n
\n \n
\n);\n","/* eslint-disable react/no-danger */\nimport { Highlight } from 'react-highlighter-ts';\nimport { FC } from 'react';\nimport cn from 'classnames';\nimport { ChatMessage } from '../../../interfaces/chat-message.model';\nimport styles from './ChatSystemMessage.module.scss';\n\nexport type ChatSystemMessageProps = {\n message: ChatMessage;\n highlightString: string;\n};\n\nexport const ChatSystemMessage: FC\n \n \n \n
\n);\n","import { FC } from 'react';\nimport dynamic from 'next/dynamic';\nimport { ChatUserBadge } from '../ChatUserBadge/ChatUserBadge';\nimport styles from './ChatJoinMessage.module.scss';\n\n// Lazy loaded components\n\nconst TeamOutlined = dynamic(() => import('@ant-design/icons/TeamOutlined'), {\n ssr: false,\n});\n\nexport type ChatJoinMessageProps = {\n isAuthorModerator: boolean;\n userColor: number;\n displayName: string;\n};\n\nexport const ChatJoinMessage: FC\n {displayName}\n
\n \n \n \n
\n );\n};\n","import { Button } from 'antd';\nimport dynamic from 'next/dynamic';\nimport { FC, MutableRefObject } from 'react';\nimport { ChatMessage } from '../../../interfaces/chat-message.model';\nimport styles from './ChatContainer.module.scss';\n\n// Lazy loaded components\n\nconst VerticalAlignBottomOutlined = dynamic(\n () => import('@ant-design/icons/VerticalAlignBottomOutlined'),\n {\n ssr: false,\n },\n);\ntype Props = {\n chatContainerRef: MutableRefObject\n
\n);\n","import { FC } from 'react';\nimport styles from './ChatActionMessage.module.scss';\n\n/* eslint-disable react/no-danger */\nexport type ChatActionMessageProps = {\n body: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const ChatActionMessage: FC\n
\n );\n };\n\n const getUserJoinedMessage = (message: ChatMessage) => {\n const {\n user: { displayName, displayColor },\n } = message;\n const isAuthorModerator = checkIsModerator(message);\n return (\n \n
\n \n {oldName}\n is now known as \n {displayName}\n
\n \n {MessagesTable}\n {showInput && (\n
\n );\n};\n\nChatContainer.defaultProps = {\n showInput: true,\n height: 'auto',\n};\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"chatAction\":\"ChatActionMessage_chatAction__x9Xsg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"toBottomWrap\":\"ChatContainer_toBottomWrap__3V5wa\",\"nameChangeView\":\"ChatContainer_nameChangeView__ziyXN\",\"nameChangeText\":\"ChatContainer_nameChangeText__yXG__\",\"plain\":\"ChatContainer_plain__IPS19\",\"chatContainer\":\"ChatContainer_chatContainer__O2lYN\",\"virtuoso\":\"ChatContainer_virtuoso__OS9Kz\",\"chatTextField\":\"ChatContainer_chatTextField__OqCGL\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"ChatJoinMessage_root__vuVXa\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"chatModerationNotification\":\"ChatModeratorNotification_chatModerationNotification__kgFWe\",\"icon\":\"ChatModeratorNotification_icon__7FdGg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"chatSystemMessage\":\"ChatSystemMessage_chatSystemMessage__c6XEN\",\"user\":\"ChatSystemMessage_user__6yHSJ\",\"message\":\"ChatSystemMessage_message__ySq5g\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"ChatTextField_root__4oUkJ\",\"inputWrap\":\"ChatTextField_inputWrap__1mAjD\",\"maxCharacters\":\"ChatTextField_maxCharacters__yGT4s\",\"emojiButton\":\"ChatTextField_emojiButton__ON_Cu\",\"sendButton\":\"ChatTextField_sendButton__MOmD4\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"badge\":\"ChatUserBadge_badge__1EdUp\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"ChatUserMessage_root__79heB\",\"user\":\"ChatUserMessage_user__xUEp9\",\"message\":\"ChatUserMessage_message__MJ9LD\",\"ownMessage\":\"ChatUserMessage_ownMessage__d28A3\",\"background\":\"ChatUserMessage_background__Tfghp\",\"modMenuWrapper\":\"ChatUserMessage_modMenuWrapper__7fblv\",\"messagePadding\":\"ChatUserMessage_messagePadding__Xp1F6\",\"messagePaddingCollapsed\":\"ChatUserMessage_messagePaddingCollapsed__qxN0E\"};"],"names":["_linearGradient","_path","_path2","_path3","_path4","formatTimestamp","sentAt","now","Date","Number","isNaN","diffInDays","getDiffInDaysFromNow","localeDate","toLocaleDateString","dateStyle","concat","toLocaleTimeString","ChatUserBadge","badge","userColor","param","color","jsx_runtime","jsx","span","style","borderColor","className","styles","LinkOutlined","dynamic","Promise","all","__webpack_require__","e","then","t","bind","ssr","ChatModerationActionMenu","mod","Highlight","resolve","UserTooltip","children","user","displayName","createdAt","content","Tooltip","title","placement","mouseEnterDelay","ChatUserMessage","message","highlightString","showModeratorMenu","sentBySelf","sameUserAsLast","isAuthorModerator","isAuthorAuthenticated","id","messageId","body","timestamp","userId","displayColor","accessToken","useRecoilValue","accessTokenAtom","formattedTimestamp","formattedMessage","setFormattedMessage","useState","badgeNodes","push","useEffect","decodeHTML","div","cn","jsxs","search","dangerouslySetInnerHTML","__html","linkifyHtml","messageID","userID","userDisplayName","EmojiPicker","SendOutlined","SmileOutlined","Image","p","attributes","element","selected","useSelected","focused","useFocused","contentEditable","img","alt","src","name","display","maxWidth","maxHeight","boxShadow","withImages","editor","isVoid","type","isInline","serialize","node","Text","string","text","length","map","n","join","getCharacterCount","count","forEach","child","ChatTextField","defaultText","showEmojis","setShowEmojis","characterCount","setCharacterCount","websocketService","websocketServiceAtom","useMemo","withReact","createEditor","sendMessage","console","log","send","MessageType","Transforms","at","anchor","Editor","focus","createImageNode","insertImage","url","selection","image","select","parentNode","parentPath","path","Node","Path","force","onEmojiSelect","ReactEditor","emoji","onCustomEmojiSelect","onKeyDown","charCount","key","preventDefault","onPaste","clipboardData","getData","renderElement","classNames","Slate","value","Editable","placeholder","width","role","aria-label","autoFocus","Popover","trigger","onOpenChange","open","paddingLeft","button","onClick","_extends","Object","assign","target","i","arguments","source","prototype","hasOwnProperty","call","apply","moderator","props","react","createElement","height","viewBox","xmlns","gradientUnits","x1","x2","y1","y2","offset","stopColor","d","fill","transform","fillOpacity","stroke","strokeLinejoin","strokeWidth","ChatModeratorNotification","Icon","ChatSystemMessage","TeamOutlined","ChatJoinMessage","padding","fontWeight","VerticalAlignBottomOutlined","ScrollToBotBtn","chatContainerRef","messages","Button","icon","current","scrollToIndex","index","behavior","ChatActionMessage","EditFilled","checkIsModerator","scopes","includes","ChatContainer","usernameToHighlight","chatUserId","isModerator","showInput","atBottom","setAtBottom","useRef","getNameChangeViewForMessage","oldName","marginRight","margin","getUserJoinedMessage","getActionMessage","getConnectedInfoMessage","modStatusUpdate","getViewForMessage","_message_user_scopes","shouldCollapseMessages","lastMessage","lastTimestamp","getTime","thisTimestamp","maxTimestampDelta","authenticated","scrollChatToBottom","ref","setTimeout","MessagesTable","Fragment","Virtuoso","data","itemContent","followOutput","isAtBottom","alignToBottom","atBottomThreshold","atBottomStateChange","bottom","defaultProps","module","exports"],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/web/_next/static/chunks/710.60697d09ba08ff3b.js b/static/web/_next/static/chunks/710.60697d09ba08ff3b.js
new file mode 100644
index 000000000..73f0aa13a
--- /dev/null
+++ b/static/web/_next/static/chunks/710.60697d09ba08ff3b.js
@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[710],{81076:function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default={icon:{tag:"svg",attrs:{viewBox:"64 64 896 896",focusable:"false"},children:[{tag:"path",attrs:{d:"M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"}}]},name:"star",theme:"filled"}},20710:function(e,t,r){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a,n=(a=r(63031))&&a.__esModule?a:{default:a};t.default=n,e.exports=n},63031:function(e,t,r){var a=r(64836),n=r(18698);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var u=a(r(42122)),l=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!==n(e)&&"function"!=typeof e)return{default:e};var r=c(t);if(r&&r.has(e))return r.get(e);var a={},u=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var f=u?Object.getOwnPropertyDescriptor(e,l):null;f&&(f.get||f.set)?Object.defineProperty(a,l,f):a[l]=e[l]}return a.default=e,r&&r.set(e,a),a}(r(67294)),f=a(r(81076)),o=a(r(92074));function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(c=function(e){return e?r:t})(e)}var i=function(e,t){return l.createElement(o.default,(0,u.default)((0,u.default)({},e),{},{ref:t,icon:f.default}))};i.displayName="StarFilled";var d=l.forwardRef(i);t.default=d}}]);
+//# sourceMappingURL=710.60697d09ba08ff3b.js.map
\ No newline at end of file
diff --git a/static/web/_next/static/chunks/710.60697d09ba08ff3b.js.map b/static/web/_next/static/chunks/710.60697d09ba08ff3b.js.map
new file mode 100644
index 000000000..225c57747
--- /dev/null
+++ b/static/web/_next/static/chunks/710.60697d09ba08ff3b.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"static/chunks/710.60697d09ba08ff3b.js","mappings":"gGAEAA,OAAAC,cAAA,CAAAC,EAAA,aAA6C,CAAEC,MAAA,KAE/CD,EAAA,OAAe,CADf,CAAmB,MAAU,iBAAyB,2CAAkD,WAAiB,kBAA0B,4WAAgX,EAAG,mDCFpgBF,OAAAC,cAAA,CAAAC,EAAA,aAA6C,CAC/CC,MAAA,EACA,GACED,EAAA,OAAe,QAEjB,IAEAE,EAFAC,EAEyCD,CAAzCA,EAF2CE,EAAQ,SAEVF,EAAAG,UAAA,CAAAH,EAAA,CAAuC,QAAAA,CAAA,EAG9EF,EAAA,OAAe,CADjBG,EAEAG,EAAAN,OAAA,CAFAG,yBCRA,IAAAI,EAA6BH,EAAQ,OACrCI,EAAcJ,EAAQ,OACtBN,OAAAC,cAAA,CAAAC,EAAA,aAA6C,CAC7CC,MAAA,EACA,GACAD,EAAA,OAAe,QACf,IAAAS,EAAAF,EAA4CH,EAAQ,QACpDM,EAAAC,SAIAT,CAAA,CAAAU,CAAA,EAAqD,IAAAA,GAAAV,GAAAA,EAAAG,UAAA,CAA6C,OAAAH,CAAA,CAAc,GAAAA,IAAA,GAAAA,GAAAM,WAAAA,EAAAN,IAAA,mBAAAA,EAA8E,OAASW,QAAAX,CAAA,EAAkB,IAAAY,EAAAC,EAAAH,GAAmD,GAAAE,GAAAA,EAAAE,GAAA,CAAAd,GAA+B,OAAAY,EAAAG,GAAA,CAAAf,EAAA,CAAyB,IAAAgB,EAAA,GAAiBC,EAAArB,OAAAC,cAAA,EAAAD,OAAAsB,wBAAA,CAAsF,QAAAC,KAAAnB,EAAuB,GAAAmB,YAAAA,GAAAvB,OAAAwB,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAtB,EAAAmB,GAAA,CAA2E,IAAAI,EAAAN,EAAArB,OAAAsB,wBAAA,CAAAlB,EAAAmB,GAAA,KAAqFI,GAAAA,CAAAA,EAAAR,GAAA,EAAAQ,EAAAC,GAAA,EAAsC5B,OAAAC,cAAA,CAAAmB,EAAAG,EAAAI,GAAmDP,CAAA,CAAAG,EAAA,CAAAnB,CAAA,CAAAmB,EAAA,QAA8BH,EAAAL,OAAA,CAAAX,EAAsBY,GAAaA,EAAAY,GAAA,CAAAxB,EAAAgB,GAA0BA,CAAA,EAJlvBd,EAAQ,QAC5CD,EAAAI,EAAyCH,EAAQ,QACjDuB,EAAApB,EAAuCH,EAAQ,QAC/C,SAAAW,EAAAH,CAAA,EAAiD,sBAAAgB,QAAA,YAAgD,IAAAC,EAAA,IAAAD,QAAuCE,EAAA,IAAAF,QAAsC,OAAAb,EAAA,SAAAH,CAAA,EAAoF,OAAAA,EAAAkB,EAAAD,CAAA,GAA4DjB,EAAA,CAK9T,IAAAmB,EAAA,SAAAC,CAAA,CAAAC,CAAA,EACA,OAAAvB,EAAAwB,aAAA,CAAAP,EAAAd,OAAA,IAAAJ,EAAAI,OAAA,KAAAJ,EAAAI,OAAA,KAAuHmB,GAAA,GAAY,CACnIC,IAAAA,EACAE,KAAAhC,EAAAU,OAAA,GAEA,CACAkB,CAAAA,EAAAK,WAAA,cACA,IAAAC,EAAA3B,EAAA4B,UAAA,CAAAP,EACA/B,CAAAA,EAAA,OAAe,CAAAqC","sources":["webpack://_N_E/./node_modules/@ant-design/icons-svg/lib/asn/StarFilled.js","webpack://_N_E/./node_modules/@ant-design/icons/StarFilled.js","webpack://_N_E/./node_modules/@ant-design/icons/lib/icons/StarFilled.js","webpack://_N_E/\n
\n )}\n \n Logs \n row.time}\n pagination={{ pageSize: pageSize || 20 }}\n />\n
\n );\n};\n","import { Alert, Button, Col, Row, Statistic, Typography } from 'antd';\nimport dynamic from 'next/dynamic';\nimport Link from 'next/link';\nimport React, { FC, useContext } from 'react';\nimport { ServerStatusContext } from '../../utils/server-status-context';\n\n// Lazy loaded components\n\nconst CheckCircleOutlined = dynamic(() => import('@ant-design/icons/CheckCircleOutlined'), {\n ssr: false,\n});\n\nconst ExclamationCircleOutlined = dynamic(\n () => import('@ant-design/icons/ExclamationCircleOutlined'),\n {\n ssr: false,\n },\n);\n\nexport type StreamHealthOverviewProps = {\n showTroubleshootButton?: Boolean;\n};\n\nexport const StreamHealthOverview: FC\n \n
\n \n \n Stream health represents {representation}% of all known players. Other player status is\n unknown.\n \n
\n \n \n \n \n )\n }\n />\n \n \n
\n );\n};\n\nStreamHealthOverview.defaultProps = {\n showTroubleshootButton: true,\n};\n","import { getDefaultOptions } from \"../_lib/defaultOptions/index.js\";\nimport differenceInCalendarDays from \"../differenceInCalendarDays/index.js\";\nimport format from \"../format/index.js\";\nimport defaultLocale from \"../_lib/defaultLocale/index.js\";\nimport subMilliseconds from \"../subMilliseconds/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport getTimezoneOffsetInMilliseconds from \"../_lib/getTimezoneOffsetInMilliseconds/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nimport toInteger from \"../_lib/toInteger/index.js\";\n/**\n * @name formatRelative\n * @category Common Helpers\n * @summary Represent the date in words relative to the given base date.\n *\n * @description\n * Represent the date in words relative to the given base date.\n *\n * | Distance to the base date | Result |\n * |---------------------------|---------------------------|\n * | Previous 6 days | last Sunday at 04:30 AM |\n * | Last day | yesterday at 04:30 AM |\n * | Same day | today at 04:30 AM |\n * | Next day | tomorrow at 04:30 AM |\n * | Next 6 days | Sunday at 04:30 AM |\n * | Other | 12/31/2017 |\n *\n * @param {Date|Number} date - the date to format\n * @param {Date|Number} baseDate - the date to compare with\n * @param {Object} [options] - an object with options.\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)\n * @returns {String} the date in words\n * @throws {TypeError} 2 arguments required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `baseDate` must not be Invalid Date\n * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6\n * @throws {RangeError} `options.locale` must contain `localize` property\n * @throws {RangeError} `options.locale` must contain `formatLong` property\n * @throws {RangeError} `options.locale` must contain `formatRelative` property\n *\n * @example\n * // Represent the date of 6 days ago in words relative to the given base date. In this example, today is Wednesday\n * const result = formatRelative(addDays(new Date(), -6), new Date())\n * //=> \"last Thursday at 12:45 AM\"\n */\n\nexport default function formatRelative(dirtyDate, dirtyBaseDate, options) {\n var _ref, _options$locale, _ref2, _ref3, _ref4, _options$weekStartsOn, _options$locale2, _options$locale2$opti, _defaultOptions$local, _defaultOptions$local2;\n\n requiredArgs(2, arguments);\n var date = toDate(dirtyDate);\n var baseDate = toDate(dirtyBaseDate);\n var defaultOptions = getDefaultOptions();\n var locale = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions.locale) !== null && _ref !== void 0 ? _ref : defaultLocale;\n var weekStartsOn = toInteger((_ref2 = (_ref3 = (_ref4 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale2 = options.locale) === null || _options$locale2 === void 0 ? void 0 : (_options$locale2$opti = _options$locale2.options) === null || _options$locale2$opti === void 0 ? void 0 : _options$locale2$opti.weekStartsOn) !== null && _ref4 !== void 0 ? _ref4 : defaultOptions.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : 0);\n\n if (!locale.localize) {\n throw new RangeError('locale must contain localize property');\n }\n\n if (!locale.formatLong) {\n throw new RangeError('locale must contain formatLong property');\n }\n\n if (!locale.formatRelative) {\n throw new RangeError('locale must contain formatRelative property');\n }\n\n var diff = differenceInCalendarDays(date, baseDate);\n\n if (isNaN(diff)) {\n throw new RangeError('Invalid time value');\n }\n\n var token;\n\n if (diff < -6) {\n token = 'other';\n } else if (diff < -1) {\n token = 'lastWeek';\n } else if (diff < 0) {\n token = 'yesterday';\n } else if (diff < 1) {\n token = 'today';\n } else if (diff < 2) {\n token = 'tomorrow';\n } else if (diff < 7) {\n token = 'nextWeek';\n } else {\n token = 'other';\n }\n\n var utcDate = subMilliseconds(date, getTimezoneOffsetInMilliseconds(date));\n var utcBaseDate = subMilliseconds(baseDate, getTimezoneOffsetInMilliseconds(baseDate));\n var formatStr = locale.formatRelative(token, utcDate, utcBaseDate, {\n locale: locale,\n weekStartsOn: weekStartsOn\n });\n return format(date, formatStr, {\n locale: locale,\n weekStartsOn: weekStartsOn\n });\n}","/* eslint-disable camelcase */\n/* eslint-disable react/no-danger */\nimport React, { useState, useEffect, FC } from 'react';\nimport { Collapse, Typography, Skeleton } from 'antd';\nimport format from 'date-fns/format';\n\nimport { fetchExternalData } from '../../utils/apis';\n\nconst { Panel } = Collapse;\nconst { Title, Link } = Typography;\n\nconst OWNCAST_FEED_URL = 'https://owncast.online/news/index.json';\nconst OWNCAST_BASE_URL = 'https://owncast.online';\n\nexport type ArticleProps = {\n title: string;\n url: string;\n content_html: string;\n date_published: string;\n};\n\nconst ArticleItem: FCNo news.
: null;\n\n return (\n \n \n Learn how to point your existing software to your new server and start streaming your\n content.\n \n
\n ),\n },\n {\n icon: \n \n Streaming URL:\n \n {rtmpURL && (\n \n {rtmpURL}\n \n )}\n \n Streaming Keys:\n \n \n View \n \n
\n \n \n Learn how you can add your Owncast stream to other sites you control.\n \n
\n ),\n },\n ];\n\n if (!config?.chatDisabled) {\n data.push({\n icon: \n List yourself in the Owncast Directory and show off your stream. Enable it in{' '}\n settings.\n
\n ),\n });\n }\n\n if (!config?.federation?.enabled) {\n data.push({\n icon: ![\"fediverse\"](\"/img/fediverse-color.png\")
,\n title: 'Add your Owncast instance to the Fediverse',\n content: (\n \n Enable Owncast social features to have your\n instance join the Fediverse, allowing people to follow, share and engage with your live\n stream.\n
\n ),\n });\n }\n\n return (\n <>\n \n \n
\n \n \n No stream is active \n
\n You should start one.
\n- \n
- \n {streamDetails.videoCodec || 'Unknown'} @ {streamDetails.videoBitrate || 'Unknown'} kbps\n \n
- {streamDetails.framerate || 'Unknown'} fps \n
- \n {streamDetails.width} x {streamDetails.height}\n \n
\n
\n );\n });\n\n // inbound\n const { viewerCount, sessionPeakViewerCount } = serverStatusData;\n\n const streamAudioDetailString = `${streamDetails.audioCodec}, ${\n streamDetails.audioBitrate || 'Unknown'\n } kbps`;\n\n const broadcastDate = new Date(broadcaster.time);\n\n return (\n \n
\n
\n );\n}\n\nHome.getLayout = function getLayout(page: ReactElement) {\n return \n \n \n {videoQualitySettings}\n \n\n \n \n \n\n
\n
\n \n \n \n
\n \n
\n\n \n
\n Logs \n row.time}\n pagination={{ pageSize: pageSize || 20 }}\n />\n
\n );\n};\n","import { Alert, Button, Col, Row, Statistic, Typography } from 'antd';\nimport dynamic from 'next/dynamic';\nimport Link from 'next/link';\nimport React, { FC, useContext } from 'react';\nimport { ServerStatusContext } from '../../utils/server-status-context';\n\n// Lazy loaded components\n\nconst CheckCircleOutlined = dynamic(() => import('@ant-design/icons/CheckCircleOutlined'), {\n ssr: false,\n});\n\nconst ExclamationCircleOutlined = dynamic(\n () => import('@ant-design/icons/ExclamationCircleOutlined'),\n {\n ssr: false,\n },\n);\n\nexport type StreamHealthOverviewProps = {\n showTroubleshootButton?: Boolean;\n};\n\nexport const StreamHealthOverview: FC\n \n
\n \n \n Stream health represents {representation}% of all known players. Other player status is\n unknown.\n \n
\n \n \n \n \n )\n }\n />\n \n \n
\n );\n};\n\nStreamHealthOverview.defaultProps = {\n showTroubleshootButton: true,\n};\n","import { getDefaultOptions } from \"../_lib/defaultOptions/index.js\";\nimport differenceInCalendarDays from \"../differenceInCalendarDays/index.js\";\nimport format from \"../format/index.js\";\nimport defaultLocale from \"../_lib/defaultLocale/index.js\";\nimport subMilliseconds from \"../subMilliseconds/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport getTimezoneOffsetInMilliseconds from \"../_lib/getTimezoneOffsetInMilliseconds/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nimport toInteger from \"../_lib/toInteger/index.js\";\n/**\n * @name formatRelative\n * @category Common Helpers\n * @summary Represent the date in words relative to the given base date.\n *\n * @description\n * Represent the date in words relative to the given base date.\n *\n * | Distance to the base date | Result |\n * |---------------------------|---------------------------|\n * | Previous 6 days | last Sunday at 04:30 AM |\n * | Last day | yesterday at 04:30 AM |\n * | Same day | today at 04:30 AM |\n * | Next day | tomorrow at 04:30 AM |\n * | Next 6 days | Sunday at 04:30 AM |\n * | Other | 12/31/2017 |\n *\n * @param {Date|Number} date - the date to format\n * @param {Date|Number} baseDate - the date to compare with\n * @param {Object} [options] - an object with options.\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)\n * @returns {String} the date in words\n * @throws {TypeError} 2 arguments required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `baseDate` must not be Invalid Date\n * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6\n * @throws {RangeError} `options.locale` must contain `localize` property\n * @throws {RangeError} `options.locale` must contain `formatLong` property\n * @throws {RangeError} `options.locale` must contain `formatRelative` property\n *\n * @example\n * // Represent the date of 6 days ago in words relative to the given base date. In this example, today is Wednesday\n * const result = formatRelative(addDays(new Date(), -6), new Date())\n * //=> \"last Thursday at 12:45 AM\"\n */\n\nexport default function formatRelative(dirtyDate, dirtyBaseDate, options) {\n var _ref, _options$locale, _ref2, _ref3, _ref4, _options$weekStartsOn, _options$locale2, _options$locale2$opti, _defaultOptions$local, _defaultOptions$local2;\n\n requiredArgs(2, arguments);\n var date = toDate(dirtyDate);\n var baseDate = toDate(dirtyBaseDate);\n var defaultOptions = getDefaultOptions();\n var locale = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions.locale) !== null && _ref !== void 0 ? _ref : defaultLocale;\n var weekStartsOn = toInteger((_ref2 = (_ref3 = (_ref4 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale2 = options.locale) === null || _options$locale2 === void 0 ? void 0 : (_options$locale2$opti = _options$locale2.options) === null || _options$locale2$opti === void 0 ? void 0 : _options$locale2$opti.weekStartsOn) !== null && _ref4 !== void 0 ? _ref4 : defaultOptions.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : 0);\n\n if (!locale.localize) {\n throw new RangeError('locale must contain localize property');\n }\n\n if (!locale.formatLong) {\n throw new RangeError('locale must contain formatLong property');\n }\n\n if (!locale.formatRelative) {\n throw new RangeError('locale must contain formatRelative property');\n }\n\n var diff = differenceInCalendarDays(date, baseDate);\n\n if (isNaN(diff)) {\n throw new RangeError('Invalid time value');\n }\n\n var token;\n\n if (diff < -6) {\n token = 'other';\n } else if (diff < -1) {\n token = 'lastWeek';\n } else if (diff < 0) {\n token = 'yesterday';\n } else if (diff < 1) {\n token = 'today';\n } else if (diff < 2) {\n token = 'tomorrow';\n } else if (diff < 7) {\n token = 'nextWeek';\n } else {\n token = 'other';\n }\n\n var utcDate = subMilliseconds(date, getTimezoneOffsetInMilliseconds(date));\n var utcBaseDate = subMilliseconds(baseDate, getTimezoneOffsetInMilliseconds(baseDate));\n var formatStr = locale.formatRelative(token, utcDate, utcBaseDate, {\n locale: locale,\n weekStartsOn: weekStartsOn\n });\n return format(date, formatStr, {\n locale: locale,\n weekStartsOn: weekStartsOn\n });\n}","/* eslint-disable camelcase */\n/* eslint-disable react/no-danger */\nimport React, { useState, useEffect, FC } from 'react';\nimport { Collapse, Typography, Skeleton } from 'antd';\nimport format from 'date-fns/format';\n\nimport { fetchExternalData } from '../../utils/apis';\n\nconst { Panel } = Collapse;\nconst { Title, Link } = Typography;\n\nconst OWNCAST_FEED_URL = 'https://owncast.online/news/index.json';\nconst OWNCAST_BASE_URL = 'https://owncast.online';\n\nexport type ArticleProps = {\n title: string;\n url: string;\n content_html: string;\n date_published: string;\n};\n\nconst ArticleItem: FC\n {dateString} (\n \n Link\n \n )\n
\n \nNo news.
: null;\n\n return (\n \n \n Learn how to point your existing software to your new server and start streaming your\n content.\n \n
\n ),\n },\n {\n icon: \n \n Streaming URL:\n \n {rtmpURL && (\n \n {rtmpURL}\n \n )}\n \n Streaming Keys:\n \n \n View \n \n
\n \n \n Learn how you can add your Owncast stream to other sites you control.\n \n
\n ),\n },\n ];\n\n if (!config?.chatDisabled) {\n data.push({\n icon: \n List yourself in the Owncast Directory and show off your stream. Enable it in{' '}\n settings.\n
\n ),\n });\n }\n\n if (!config?.federation?.enabled) {\n data.push({\n icon: ,\n title: 'Add your Owncast instance to the Fediverse',\n content: (\n \n Enable Owncast social features to have your\n instance join the Fediverse, allowing people to follow, share and engage with your live\n stream.\n
\n ),\n });\n }\n\n return (\n <>\n \n \n
\n \n \n No stream is active \n
\n You should start one.
\n- \n
- \n {streamDetails.videoCodec || 'Unknown'} @ {streamDetails.videoBitrate || 'Unknown'} kbps\n \n
- {streamDetails.framerate || 'Unknown'} fps \n
- \n {streamDetails.width} x {streamDetails.height}\n \n
\n
\n );\n });\n\n // inbound\n const { viewerCount, sessionPeakViewerCount } = serverStatusData;\n\n const streamAudioDetailString = `${streamDetails.audioCodec}, ${\n streamDetails.audioBitrate || 'Unknown'\n } kbps`;\n\n const broadcastDate = new Date(broadcaster.time);\n\n return (\n \n
\n
\n );\n}\n\nHome.getLayout = function getLayout(page: ReactElement) {\n return \n \n \n {videoQualitySettings}\n \n\n \n \n \n\n
\n
\n \n \n \n
\n \n
\n\n \n
\n
\n The name will be displayed as the chat user when sending messages with this access token.\n
\n\n Select the permissions this access token will have. It cannot be edited after it's\n created.\n
\n\n \n
\n \n );\n};\n\nconst AccessTokens = () => {\n const [tokens, setTokens] = useState([]);\n const [isTokenModalOpen, setIsTokenModalOpen] = useState(false);\n\n function handleError(error) {\n console.error('error', error);\n }\n\n async function getAccessTokens() {\n try {\n const result = await fetchData(ACCESS_TOKENS);\n setTokens(result);\n } catch (error) {\n handleError(error);\n }\n }\n useEffect(() => {\n getAccessTokens();\n }, []);\n\n async function handleDeleteToken(token) {\n try {\n await fetchData(DELETE_ACCESS_TOKEN, {\n method: 'POST',\n data: { token },\n });\n getAccessTokens();\n } catch (error) {\n handleError(error);\n }\n }\n\n async function handleSaveToken(name: string, scopes: string[]) {\n try {\n const newToken = await fetchData(CREATE_ACCESS_TOKEN, {\n method: 'POST',\n data: { name, scopes },\n });\n setTokens(tokens.concat(newToken));\n } catch (error) {\n handleError(error);\n }\n }\n\n const columns = [\n {\n title: '',\n key: 'delete',\n render: (text, record) => (\n\n Access Tokens \n \n Access tokens are used to allow external, 3rd party tools to perform specific actions on\n your Owncast server. They should be kept secure and never included in client code, instead\n they should be kept on a server that you control.\n \n \n Read more about how to use these tokens, with examples, at{' '}\n \n our documentation\n \n .\n \n\n
\n
\n \n
\n );\n};\n\nAccessTokens.getLayout = function getLayout(page: ReactElement) {\n return \n \n
\n
\n The name will be displayed as the chat user when sending messages with this access token.\n
\n\n Select the permissions this access token will have. It cannot be edited after it's\n created.\n
\n\n \n
\n \n );\n};\n\nconst AccessTokens = () => {\n const [tokens, setTokens] = useState([]);\n const [isTokenModalOpen, setIsTokenModalOpen] = useState(false);\n\n function handleError(error) {\n console.error('error', error);\n }\n\n async function getAccessTokens() {\n try {\n const result = await fetchData(ACCESS_TOKENS);\n setTokens(result);\n } catch (error) {\n handleError(error);\n }\n }\n useEffect(() => {\n getAccessTokens();\n }, []);\n\n async function handleDeleteToken(token) {\n try {\n await fetchData(DELETE_ACCESS_TOKEN, {\n method: 'POST',\n data: { token },\n });\n getAccessTokens();\n } catch (error) {\n handleError(error);\n }\n }\n\n async function handleSaveToken(name: string, scopes: string[]) {\n try {\n const newToken = await fetchData(CREATE_ACCESS_TOKEN, {\n method: 'POST',\n data: { name, scopes },\n });\n setTokens(tokens.concat(newToken));\n } catch (error) {\n handleError(error);\n }\n }\n\n const columns = [\n {\n title: '',\n key: 'delete',\n render: (text, record) => (\n\n Access Tokens \n \n Access tokens are used to allow external, 3rd party tools to perform specific actions on\n your Owncast server. They should be kept secure and never included in client code, instead\n they should be kept on a server that you control.\n \n \n Read more about how to use these tokens, with examples, at{' '}\n \n our documentation\n \n .\n \n\n
\n
\n \n
\n );\n};\n\nAccessTokens.getLayout = function getLayout(page: ReactElement) {\n return \n \n
{color}
: null,\n },\n {\n title: 'Opens',\n dataIndex: 'openExternally',\n key: 'openExternally',\n render: (openExternally: boolean) => (openExternally ? 'In a new tab' : 'In a modal'),\n },\n ];\n\n return (\n \n External Actions \n \n External action URLs are 3rd party UI you can display, embedded, into your Owncast page when\n a user clicks on a button to launch your action.\n \n \n Read more about how to use actions, with examples, at{' '}\n \n our documentation\n \n .\n \n\n `${record.title}-${record.url}`}\n columns={columns}\n dataSource={actions}\n pagination={false}\n />\n
\n \n
\n );\n};\n\nActions.getLayout = function getLayout(page: ReactElement) {\n return \n \n
{color}
: null,\n },\n {\n title: 'Opens',\n dataIndex: 'openExternally',\n key: 'openExternally',\n render: (openExternally: boolean) => (openExternally ? 'In a new tab' : 'In a modal'),\n },\n ];\n\n return (\n \n External Actions \n \n External action URLs are 3rd party UI you can display, embedded, into your Owncast page when\n a user clicks on a button to launch your action.\n \n \n Read more about how to use actions, with examples, at{' '}\n \n our documentation\n \n .\n \n\n `${record.title}-${record.url}`}\n columns={columns}\n dataSource={actions}\n pagination={false}\n />\n
\n \n
\n );\n};\n\nActions.getLayout = function getLayout(page: ReactElement) {\n return \n \n
\n Emojis \n \n Here you can upload new custom emojis for usage in the chat. When uploading a new emoji, the\n filename will be used as emoji name.\n \n\n record.url}\n dataSource={emojis}\n columns={columns}\n pagination={false}\n />\n
\n\n \n \n
\n );\n};\n\nEmoji.getLayout = function getLayout(page: ReactElement) {\n return \n
\n Emojis \n \n Here you can upload new custom emojis for usage in the chat. When uploading a new emoji, the\n filename will be used as emoji name.\n \n\n record.url}\n dataSource={emojis}\n columns={columns}\n pagination={false}\n />\n
\n\n \n \n
\n );\n};\n\nEmoji.getLayout = function getLayout(page: ReactElement) {\n return \n
\n {outcomeIcon}\n \n \n
\n );\n};\n","import React, { useState, useEffect, ReactElement } from 'react';\nimport { Table, Typography, Button } from 'antd';\nimport classNames from 'classnames';\nimport { ColumnsType } from 'antd/es/table';\nimport format from 'date-fns/format';\n\nimport dynamic from 'next/dynamic';\nimport { MessageType } from '../../../types/chat';\nimport {\n CHAT_HISTORY,\n fetchData,\n FETCH_INTERVAL,\n UPDATE_CHAT_MESSGAE_VIZ,\n} from '../../../utils/apis';\nimport { isEmptyObject } from '../../../utils/format';\nimport { MessageVisiblityToggle } from '../../../components/admin/MessageVisiblityToggle';\nimport { UserPopover } from '../../../components/admin/UserPopover';\n\nimport { AdminLayout } from '../../../components/layouts/AdminLayout';\n\nconst { Title } = Typography;\n\n// Lazy loaded components\n\nconst CheckCircleFilled = dynamic(() => import('@ant-design/icons/CheckCircleFilled'), {\n ssr: false,\n});\n\nconst ExclamationCircleFilled = dynamic(() => import('@ant-design/icons/ExclamationCircleFilled'), {\n ssr: false,\n});\n\nfunction createUserNameFilters(messages: MessageType[]) {\n const filtered = messages.reduce((acc, curItem) => {\n const curAuthor = curItem.user.id;\n if (!acc.some(item => item.text === curAuthor)) {\n acc.push({ text: curAuthor, value: curAuthor });\n }\n return acc;\n }, []);\n\n // sort by name\n return filtered.sort((a, b) => {\n const nameA = a.text.toUpperCase(); // ignore upper and lowercase\n const nameB = b.text.toUpperCase(); // ignore upper and lowercase\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n // names must be equal\n return 0;\n });\n}\nexport const OUTCOME_TIMEOUT = 3000;\n\nexport default function Chat() {\n const [messages, setMessages] = useState([]);\n const [selectedRowKeys, setSelectedRows] = useState([]);\n const [bulkProcessing, setBulkProcessing] = useState(false);\n const [bulkOutcome, setBulkOutcome] = useState(null);\n const [bulkAction, setBulkAction] = useState('');\n let outcomeTimeout = null;\n let chatReloadInterval = null;\n\n const getInfo = async () => {\n try {\n const result = await fetchData(CHAT_HISTORY, { auth: true });\n if (isEmptyObject(result)) {\n setMessages([]);\n } else {\n setMessages(result);\n }\n } catch (error) {\n console.log('==== error', error);\n }\n };\n\n useEffect(() => {\n getInfo();\n\n chatReloadInterval = setInterval(() => {\n getInfo();\n }, FETCH_INTERVAL);\n\n return () => {\n clearTimeout(outcomeTimeout);\n clearTimeout(chatReloadInterval);\n };\n }, []);\n\n const nameFilters = createUserNameFilters(messages);\n\n const rowSelection = {\n selectedRowKeys,\n onChange: (selectedKeys: string[]) => {\n setSelectedRows(selectedKeys);\n },\n };\n\n const updateMessage = message => {\n const messageIndex = messages.findIndex(m => m.id === message.id);\n messages.splice(messageIndex, 1, message);\n setMessages([...messages]);\n };\n\n const resetBulkOutcome = () => {\n outcomeTimeout = setTimeout(() => {\n setBulkOutcome(null);\n setBulkAction('');\n }, OUTCOME_TIMEOUT);\n };\n const handleSubmitBulk = async bulkVisibility => {\n setBulkProcessing(true);\n const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, {\n auth: true,\n method: 'POST',\n data: {\n visible: bulkVisibility,\n idArray: selectedRowKeys,\n },\n });\n\n if (result.success && result.message === 'changed') {\n setBulkOutcome(\n Chat Messages \n (record.hiddenAt ? 'hidden' : '')}\n dataSource={messages}\n columns={chatColumns}\n rowKey={row => row.id}\n rowSelection={rowSelection}\n />\n
\n );\n}\n\nChat.getLayout = function getLayout(page: ReactElement) {\n return Manage the messages from viewers that show up on your stream.
\n\n Check multiple messages to change their visibility to: \n\n \n Show\n \n \n Hide\n \n
\n \n {outcomeIcon}\n \n \n
\n );\n};\n","import React, { useState, useEffect, ReactElement } from 'react';\nimport { Table, Typography, Button } from 'antd';\nimport classNames from 'classnames';\nimport { ColumnsType } from 'antd/es/table';\nimport format from 'date-fns/format';\n\nimport dynamic from 'next/dynamic';\nimport { MessageType } from '../../../types/chat';\nimport {\n CHAT_HISTORY,\n fetchData,\n FETCH_INTERVAL,\n UPDATE_CHAT_MESSGAE_VIZ,\n} from '../../../utils/apis';\nimport { isEmptyObject } from '../../../utils/format';\nimport { MessageVisiblityToggle } from '../../../components/admin/MessageVisiblityToggle';\nimport { UserPopover } from '../../../components/admin/UserPopover';\n\nimport { AdminLayout } from '../../../components/layouts/AdminLayout';\n\nconst { Title } = Typography;\n\n// Lazy loaded components\n\nconst CheckCircleFilled = dynamic(() => import('@ant-design/icons/CheckCircleFilled'), {\n ssr: false,\n});\n\nconst ExclamationCircleFilled = dynamic(() => import('@ant-design/icons/ExclamationCircleFilled'), {\n ssr: false,\n});\n\nfunction createUserNameFilters(messages: MessageType[]) {\n const filtered = messages.reduce((acc, curItem) => {\n const curAuthor = curItem.user.id;\n if (!acc.some(item => item.text === curAuthor)) {\n acc.push({ text: curAuthor, value: curAuthor });\n }\n return acc;\n }, []);\n\n // sort by name\n return filtered.sort((a, b) => {\n const nameA = a.text.toUpperCase(); // ignore upper and lowercase\n const nameB = b.text.toUpperCase(); // ignore upper and lowercase\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n // names must be equal\n return 0;\n });\n}\nexport const OUTCOME_TIMEOUT = 3000;\n\nexport default function Chat() {\n const [messages, setMessages] = useState([]);\n const [selectedRowKeys, setSelectedRows] = useState([]);\n const [bulkProcessing, setBulkProcessing] = useState(false);\n const [bulkOutcome, setBulkOutcome] = useState(null);\n const [bulkAction, setBulkAction] = useState('');\n let outcomeTimeout = null;\n let chatReloadInterval = null;\n\n const getInfo = async () => {\n try {\n const result = await fetchData(CHAT_HISTORY, { auth: true });\n if (isEmptyObject(result)) {\n setMessages([]);\n } else {\n setMessages(result);\n }\n } catch (error) {\n console.log('==== error', error);\n }\n };\n\n useEffect(() => {\n getInfo();\n\n chatReloadInterval = setInterval(() => {\n getInfo();\n }, FETCH_INTERVAL);\n\n return () => {\n clearTimeout(outcomeTimeout);\n clearTimeout(chatReloadInterval);\n };\n }, []);\n\n const nameFilters = createUserNameFilters(messages);\n\n const rowSelection = {\n selectedRowKeys,\n onChange: (selectedKeys: string[]) => {\n setSelectedRows(selectedKeys);\n },\n };\n\n const updateMessage = message => {\n const messageIndex = messages.findIndex(m => m.id === message.id);\n messages.splice(messageIndex, 1, message);\n setMessages([...messages]);\n };\n\n const resetBulkOutcome = () => {\n outcomeTimeout = setTimeout(() => {\n setBulkOutcome(null);\n setBulkAction('');\n }, OUTCOME_TIMEOUT);\n };\n const handleSubmitBulk = async bulkVisibility => {\n setBulkProcessing(true);\n const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, {\n auth: true,\n method: 'POST',\n data: {\n visible: bulkVisibility,\n idArray: selectedRowKeys,\n },\n });\n\n if (result.success && result.message === 'changed') {\n setBulkOutcome(\n Chat Messages \n (record.hiddenAt ? 'hidden' : '')}\n dataSource={messages}\n columns={chatColumns}\n rowKey={row => row.id}\n rowSelection={rowSelection}\n />\n
\n );\n}\n\nChat.getLayout = function getLayout(page: ReactElement) {\n return Manage the messages from viewers that show up on your stream.
\n\n Check multiple messages to change their visibility to: \n\n \n Show\n \n \n Hide\n \n
\n \n {\n setSelectedKeys(e.target.value ? [e.target.value] : []);\n confirm({ closeDropdown: false });\n }}\n />\n
\n ),\n onFilter: (value: string, record: Client) => record.user.displayName.includes(value),\n sortDirections: ['descend', 'ascend'] as SortOrder[],\n },\n {\n title: 'Messages sent',\n dataIndex: 'messageCount',\n key: 'messageCount',\n className: 'number-col',\n width: '12%',\n sorter: (a: any, b: any) => a.messageCount - b.messageCount,\n sortDirections: ['descend', 'ascend'] as SortOrder[],\n render: (count: number) => {count}
,\n },\n {\n title: 'Connected Time',\n dataIndex: 'connectedAt',\n key: 'connectedAt',\n defaultSortOrder: 'ascend',\n render: (time: Date) => formatDistanceToNow(new Date(time)),\n sorter: (a: any, b: any) =>\n new Date(b.connectedAt).getTime() - new Date(a.connectedAt).getTime(),\n sortDirections: ['descend', 'ascend'] as SortOrder[],\n },\n {\n title: 'User Agent',\n dataIndex: 'userAgent',\n key: 'userAgent',\n render: (ua: string) => formatUAstring(ua),\n },\n {\n title: 'Location',\n dataIndex: 'geo',\n key: 'geo',\n render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),\n },\n {\n title: '',\n key: 'block',\n className: 'actions-col',\n render: (_, row) => \n Visit the{' '}\n
\n When a stream is active and chat is enabled, connected chat clients will be displayed here.\n
\n );\n\n const connectedUserTabTitle = (\n Connected {online ? `(${clients.length})` : '(offline)'}\n );\n\n const bannedUsersTabTitle = Banned Users ({disabledUsers.length});\n const bannedUsersTable =\n {\n setSelectedKeys(e.target.value ? [e.target.value] : []);\n confirm({ closeDropdown: false });\n }}\n />\n
\n ),\n onFilter: (value: string, record: Client) => record.user.displayName.includes(value),\n sortDirections: ['descend', 'ascend'] as SortOrder[],\n },\n {\n title: 'Messages sent',\n dataIndex: 'messageCount',\n key: 'messageCount',\n className: 'number-col',\n width: '12%',\n sorter: (a: any, b: any) => a.messageCount - b.messageCount,\n sortDirections: ['descend', 'ascend'] as SortOrder[],\n render: (count: number) => {count}
,\n },\n {\n title: 'Connected Time',\n dataIndex: 'connectedAt',\n key: 'connectedAt',\n defaultSortOrder: 'ascend',\n render: (time: Date) => formatDistanceToNow(new Date(time)),\n sorter: (a: any, b: any) =>\n new Date(b.connectedAt).getTime() - new Date(a.connectedAt).getTime(),\n sortDirections: ['descend', 'ascend'] as SortOrder[],\n },\n {\n title: 'User Agent',\n dataIndex: 'userAgent',\n key: 'userAgent',\n render: (ua: string) => formatUAstring(ua),\n },\n {\n title: 'Location',\n dataIndex: 'geo',\n key: 'geo',\n render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),\n },\n {\n title: '',\n key: 'block',\n className: 'actions-col',\n render: (_, row) => \n Visit the{' '}\n
\n When a stream is active and chat is enabled, connected chat clients will be displayed here.\n
\n );\n\n const connectedUserTabTitle = (\n Connected {online ? `(${clients.length})` : '(offline)'}\n );\n\n const bannedUsersTabTitle = Banned Users ({disabledUsers.length});\n const bannedUsersTable =\n \n {title}\n \n
\n );\n};\n\nEditValueArray.defaultProps = {\n maxLength: 50,\n description: null,\n submitStatus: null,\n continuousStatusMessage: null,\n};\n","// This is a wrapper for the Ant Switch component.\n// This one is styled to match the form-textfield component.\n// If `useSubmit` is true then it will automatically post to the config API onChange.\n\nimport React, { useState, useContext, FC } from 'react';\nimport { Switch } from 'antd';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_PROCESSING,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\nimport { FormStatusIndicator } from './FormStatusIndicator';\n\nimport { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';\nimport { ServerStatusContext } from '../../utils/server-status-context';\n\nexport type ToggleSwitchProps = {\n fieldName: string;\n\n apiPath?: string;\n checked?: boolean;\n reversed?: boolean;\n configPath?: string;\n disabled?: boolean;\n label?: string;\n tip?: string;\n useSubmit?: boolean;\n onChange?: (arg: boolean) => void;\n};\n\nexport const ToggleSwitch: FC{description}
\n\n\n {values?.map((tag, index) => {\n const handleClose = () => {\n handleDeleteIndex(index);\n };\n return (\n \n {tag}\n \n );\n })}\n
\n {continuousStatusMessage && (\n \n
\n )}\n \n
\n \n {label && (\n
\n );\n};\nexport default ToggleSwitch;\n\nToggleSwitch.defaultProps = {\n apiPath: '',\n checked: false,\n reversed: false,\n configPath: '',\n disabled: false,\n label: '',\n tip: '',\n useSubmit: false,\n onChange: null,\n};\n","import { Typography } from 'antd';\nimport React, { ReactElement, useContext, useEffect, useState } from 'react';\nimport { TEXTFIELD_TYPE_TEXTAREA } from '../../components/admin/TextField';\nimport { TextFieldWithSubmit } from '../../components/admin/TextFieldWithSubmit';\nimport { ToggleSwitch } from '../../components/admin/ToggleSwitch';\nimport { EditValueArray } from '../../components/admin/EditValueArray';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\n\nimport { UpdateArgs } from '../../types/config-section';\nimport {\n API_CHAT_FORBIDDEN_USERNAMES,\n API_CHAT_SUGGESTED_USERNAMES,\n FIELD_PROPS_CHAT_JOIN_MESSAGES_ENABLED,\n CHAT_ESTABLISHED_USER_MODE,\n FIELD_PROPS_DISABLE_CHAT,\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES,\n TEXTFIELD_PROPS_CHAT_SUGGESTED_USERNAMES,\n TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE,\n} from '../../utils/config-constants';\nimport { ServerStatusContext } from '../../utils/server-status-context';\n\nimport { AdminLayout } from '../../components/layouts/AdminLayout';\n\nexport default function ConfigChat() {\n const { Title } = Typography;\n const [formDataValues, setFormDataValues] = useState(null);\n const [forbiddenUsernameSaveState, setForbiddenUsernameSaveState] = useState\n {label}\n
\n )}\n\n \n
\n \n
\n {tip}
\n\n Chat Settings \n
\n );\n}\n\nConfigChat.getLayout = function getLayout(page: ReactElement) {\n return \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n {title}\n \n
\n );\n};\n\nEditValueArray.defaultProps = {\n maxLength: 50,\n description: null,\n submitStatus: null,\n continuousStatusMessage: null,\n};\n","// This is a wrapper for the Ant Switch component.\n// This one is styled to match the form-textfield component.\n// If `useSubmit` is true then it will automatically post to the config API onChange.\n\nimport React, { useState, useContext, FC } from 'react';\nimport { Switch } from 'antd';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_PROCESSING,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\nimport { FormStatusIndicator } from './FormStatusIndicator';\n\nimport { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';\nimport { ServerStatusContext } from '../../utils/server-status-context';\n\nexport type ToggleSwitchProps = {\n fieldName: string;\n\n apiPath?: string;\n checked?: boolean;\n reversed?: boolean;\n configPath?: string;\n disabled?: boolean;\n label?: string;\n tip?: string;\n useSubmit?: boolean;\n onChange?: (arg: boolean) => void;\n};\n\nexport const ToggleSwitch: FC{description}
\n\n\n {values?.map((tag, index) => {\n const handleClose = () => {\n handleDeleteIndex(index);\n };\n return (\n \n {tag}\n \n );\n })}\n
\n {continuousStatusMessage && (\n \n
\n )}\n \n
\n \n {label && (\n
\n );\n};\nexport default ToggleSwitch;\n\nToggleSwitch.defaultProps = {\n apiPath: '',\n checked: false,\n reversed: false,\n configPath: '',\n disabled: false,\n label: '',\n tip: '',\n useSubmit: false,\n onChange: null,\n};\n","import { Typography } from 'antd';\nimport React, { ReactElement, useContext, useEffect, useState } from 'react';\nimport { TEXTFIELD_TYPE_TEXTAREA } from '../../components/admin/TextField';\nimport { TextFieldWithSubmit } from '../../components/admin/TextFieldWithSubmit';\nimport { ToggleSwitch } from '../../components/admin/ToggleSwitch';\nimport { EditValueArray } from '../../components/admin/EditValueArray';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\n\nimport { UpdateArgs } from '../../types/config-section';\nimport {\n API_CHAT_FORBIDDEN_USERNAMES,\n API_CHAT_SUGGESTED_USERNAMES,\n FIELD_PROPS_CHAT_JOIN_MESSAGES_ENABLED,\n CHAT_ESTABLISHED_USER_MODE,\n FIELD_PROPS_DISABLE_CHAT,\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES,\n TEXTFIELD_PROPS_CHAT_SUGGESTED_USERNAMES,\n TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE,\n} from '../../utils/config-constants';\nimport { ServerStatusContext } from '../../utils/server-status-context';\n\nimport { AdminLayout } from '../../components/layouts/AdminLayout';\n\nexport default function ConfigChat() {\n const { Title } = Typography;\n const [formDataValues, setFormDataValues] = useState(null);\n const [forbiddenUsernameSaveState, setForbiddenUsernameSaveState] = useState\n {label}\n
\n )}\n\n \n
\n \n
\n {tip}
\n\n Chat Settings \n
\n );\n}\n\nConfigChat.getLayout = function getLayout(page: ReactElement) {\n return \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n {title}\n \n
\n );\n};\n\nEditValueArray.defaultProps = {\n maxLength: 50,\n description: null,\n submitStatus: null,\n continuousStatusMessage: null,\n};\n","// This is a wrapper for the Ant Switch component.\n// This one is styled to match the form-textfield component.\n// If `useSubmit` is true then it will automatically post to the config API onChange.\n\nimport React, { useState, useContext, FC } from 'react';\nimport { Switch } from 'antd';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_PROCESSING,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\nimport { FormStatusIndicator } from './FormStatusIndicator';\n\nimport { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';\nimport { ServerStatusContext } from '../../utils/server-status-context';\n\nexport type ToggleSwitchProps = {\n fieldName: string;\n\n apiPath?: string;\n checked?: boolean;\n reversed?: boolean;\n configPath?: string;\n disabled?: boolean;\n label?: string;\n tip?: string;\n useSubmit?: boolean;\n onChange?: (arg: boolean) => void;\n};\n\nexport const ToggleSwitch: FC{description}
\n\n\n {values?.map((tag, index) => {\n const handleClose = () => {\n handleDeleteIndex(index);\n };\n return (\n \n {tag}\n \n );\n })}\n
\n {continuousStatusMessage && (\n \n
\n )}\n \n
\n \n {label && (\n
\n );\n};\nexport default ToggleSwitch;\n\nToggleSwitch.defaultProps = {\n apiPath: '',\n checked: false,\n reversed: false,\n configPath: '',\n disabled: false,\n label: '',\n tip: '',\n useSubmit: false,\n onChange: null,\n};\n","/* eslint-disable react/no-unescaped-entities */\nimport { Typography, Modal, Button, Row, Col, Alert } from 'antd';\nimport React, { ReactElement, useContext, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n TEXTFIELD_TYPE_TEXT,\n TEXTFIELD_TYPE_TEXTAREA,\n TEXTFIELD_TYPE_URL,\n} from '../../components/admin/TextField';\nimport { TextFieldWithSubmit } from '../../components/admin/TextFieldWithSubmit';\nimport { ToggleSwitch } from '../../components/admin/ToggleSwitch';\nimport { EditValueArray } from '../../components/admin/EditValueArray';\nimport { UpdateArgs } from '../../types/config-section';\nimport {\n FIELD_PROPS_ENABLE_FEDERATION,\n TEXTFIELD_PROPS_FEDERATION_LIVE_MESSAGE,\n TEXTFIELD_PROPS_FEDERATION_DEFAULT_USER,\n FIELD_PROPS_FEDERATION_IS_PRIVATE,\n FIELD_PROPS_SHOW_FEDERATION_ENGAGEMENT,\n TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL,\n FIELD_PROPS_FEDERATION_BLOCKED_DOMAINS,\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n API_FEDERATION_BLOCKED_DOMAINS,\n FIELD_PROPS_FEDERATION_NSFW,\n} from '../../utils/config-constants';\nimport { ServerStatusContext } from '../../utils/server-status-context';\nimport { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';\n\nimport { AdminLayout } from '../../components/layouts/AdminLayout';\n\nconst FederationInfoModal = ({ cancelPressed, okPressed }) => (\n \n {label}\n
\n )}\n\n \n
\n \n
\n {tip}
\n- \n
- \n These features are brand new. Given the variability of interfacing with the rest of the\n world, bugs are possible. Please report anything that you think isn't working quite right.\n \n
- You must always host your Owncast server with SSL using a https url. \n
- \n You should not change your server name URL or social username once people begin following\n you, as your server will be seen as a completely different user on the Fediverse, and the\n old user will disappear.\n \n
- \n Turning on Private mode will allow you to manually approve each follower and limit\n the visibility of your posts to followers only.\n \n
\n
\n Configure Social Features \n \n
\n {isInfoModalOpen && (\n
\n );\n};\n\nConfigFederation.getLayout = function getLayout(page: ReactElement) {\n return \n Owncast provides the ability for people to follow and engage with your instance. It's a\n great way to promote alerting, sharing and engagement of your stream.\n
\n\n Once enabled you'll alert your followers when you go live as well as gain the ability to\n compose custom posts to share any information you like.\n
\n\n \n Read more about the specifics of these social features.\n \n
\n\n \n {title}\n \n
\n );\n};\n\nEditValueArray.defaultProps = {\n maxLength: 50,\n description: null,\n submitStatus: null,\n continuousStatusMessage: null,\n};\n","// This is a wrapper for the Ant Switch component.\n// This one is styled to match the form-textfield component.\n// If `useSubmit` is true then it will automatically post to the config API onChange.\n\nimport React, { useState, useContext, FC } from 'react';\nimport { Switch } from 'antd';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_PROCESSING,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\nimport { FormStatusIndicator } from './FormStatusIndicator';\n\nimport { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';\nimport { ServerStatusContext } from '../../utils/server-status-context';\n\nexport type ToggleSwitchProps = {\n fieldName: string;\n\n apiPath?: string;\n checked?: boolean;\n reversed?: boolean;\n configPath?: string;\n disabled?: boolean;\n label?: string;\n tip?: string;\n useSubmit?: boolean;\n onChange?: (arg: boolean) => void;\n};\n\nexport const ToggleSwitch: FC{description}
\n\n\n {values?.map((tag, index) => {\n const handleClose = () => {\n handleDeleteIndex(index);\n };\n return (\n \n {tag}\n \n );\n })}\n
\n {continuousStatusMessage && (\n \n
\n )}\n \n
\n \n {label && (\n
\n );\n};\nexport default ToggleSwitch;\n\nToggleSwitch.defaultProps = {\n apiPath: '',\n checked: false,\n reversed: false,\n configPath: '',\n disabled: false,\n label: '',\n tip: '',\n useSubmit: false,\n onChange: null,\n};\n","/* eslint-disable react/no-unescaped-entities */\nimport { Typography, Modal, Button, Row, Col, Alert } from 'antd';\nimport React, { ReactElement, useContext, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n TEXTFIELD_TYPE_TEXT,\n TEXTFIELD_TYPE_TEXTAREA,\n TEXTFIELD_TYPE_URL,\n} from '../../components/admin/TextField';\nimport { TextFieldWithSubmit } from '../../components/admin/TextFieldWithSubmit';\nimport { ToggleSwitch } from '../../components/admin/ToggleSwitch';\nimport { EditValueArray } from '../../components/admin/EditValueArray';\nimport { UpdateArgs } from '../../types/config-section';\nimport {\n FIELD_PROPS_ENABLE_FEDERATION,\n TEXTFIELD_PROPS_FEDERATION_LIVE_MESSAGE,\n TEXTFIELD_PROPS_FEDERATION_DEFAULT_USER,\n FIELD_PROPS_FEDERATION_IS_PRIVATE,\n FIELD_PROPS_SHOW_FEDERATION_ENGAGEMENT,\n TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL,\n FIELD_PROPS_FEDERATION_BLOCKED_DOMAINS,\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n API_FEDERATION_BLOCKED_DOMAINS,\n FIELD_PROPS_FEDERATION_NSFW,\n} from '../../utils/config-constants';\nimport { ServerStatusContext } from '../../utils/server-status-context';\nimport { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';\n\nimport { AdminLayout } from '../../components/layouts/AdminLayout';\n\nconst FederationInfoModal = ({ cancelPressed, okPressed }) => (\n \n {label}\n
\n )}\n\n \n
\n \n
\n {tip}
\n- \n
- \n These features are brand new. Given the variability of interfacing with the rest of the\n world, bugs are possible. Please report anything that you think isn't working quite right.\n \n
- You must always host your Owncast server with SSL using a https url. \n
- \n You should not change your server name URL or social username once people begin following\n you, as your server will be seen as a completely different user on the Fediverse, and the\n old user will disappear.\n \n
- \n Turning on Private mode will allow you to manually approve each follower and limit\n the visibility of your posts to followers only.\n \n
\n
\n Configure Social Features \n \n
\n {isInfoModalOpen && (\n
\n );\n};\n\nConfigFederation.getLayout = function getLayout(page: ReactElement) {\n return \n Owncast provides the ability for people to follow and engage with your instance. It's a\n great way to promote alerting, sharing and engagement of your stream.\n
\n\n Once enabled you'll alert your followers when you go live as well as gain the ability to\n compose custom posts to share any information you like.\n
\n\n \n Read more about the specifics of these social features.\n \n
\n\n {label && (\n
\n );\n};\nexport default ToggleSwitch;\n\nToggleSwitch.defaultProps = {\n apiPath: '',\n checked: false,\n reversed: false,\n configPath: '',\n disabled: false,\n label: '',\n tip: '',\n useSubmit: false,\n onChange: null,\n};\n","import { Button, Typography } from 'antd';\nimport React, { useState, useContext, useEffect } from 'react';\nimport { ServerStatusContext } from '../../../utils/server-status-context';\nimport { TextField } from '../TextField';\nimport { FormStatusIndicator } from '../FormStatusIndicator';\nimport {\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n DISCORD_CONFIG_FIELDS,\n} from '../../../utils/config-constants';\nimport { ToggleSwitch } from '../ToggleSwitch';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_SUCCESS,\n} from '../../../utils/input-statuses';\nimport { UpdateArgs } from '../../../types/config-section';\n\nconst { Title } = Typography;\n\nexport const ConfigNotify = () => {\n const serverStatusData = useContext(ServerStatusContext);\n const { serverConfig, setFieldInConfigState } = serverStatusData || {};\n const { notifications } = serverConfig || {};\n const { discord } = notifications || {};\n\n const { enabled, webhook, goLiveMessage } = discord || {};\n\n const [formDataValues, setFormDataValues] = useState\n {label}\n
\n )}\n\n \n
\n \n
\n {tip}
\n\n Let your Discord channel know each time you go live.\n
\n\n
\n
\n \n
\n\n \n Viewers can opt into being notified when you go live with their browser.\n
\nNot all browsers support this.
\n\n
\n \n Enabling the Fediverse social features will not just alert people to when you go live, but\n also enable other functionality.\n
\n\n Fediverse social features:{' '}\n \n {formDataValues.enabled ? 'Enabled' : 'Disabled'}\n \n
\n\n \n\n
\n Let your viewers know when you go live by supporting any of the below notification channels.{' '}\n
Build your own notifications by using custom webhooks.
\n\n \n\n {label && (\n
\n );\n};\nexport default ToggleSwitch;\n\nToggleSwitch.defaultProps = {\n apiPath: '',\n checked: false,\n reversed: false,\n configPath: '',\n disabled: false,\n label: '',\n tip: '',\n useSubmit: false,\n onChange: null,\n};\n","import { Button, Typography } from 'antd';\nimport React, { useState, useContext, useEffect } from 'react';\nimport { ServerStatusContext } from '../../../utils/server-status-context';\nimport { TextField } from '../TextField';\nimport { FormStatusIndicator } from '../FormStatusIndicator';\nimport {\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n DISCORD_CONFIG_FIELDS,\n} from '../../../utils/config-constants';\nimport { ToggleSwitch } from '../ToggleSwitch';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_SUCCESS,\n} from '../../../utils/input-statuses';\nimport { UpdateArgs } from '../../../types/config-section';\n\nconst { Title } = Typography;\n\nexport const ConfigNotify = () => {\n const serverStatusData = useContext(ServerStatusContext);\n const { serverConfig, setFieldInConfigState } = serverStatusData || {};\n const { notifications } = serverConfig || {};\n const { discord } = notifications || {};\n\n const { enabled, webhook, goLiveMessage } = discord || {};\n\n const [formDataValues, setFormDataValues] = useState\n {label}\n
\n )}\n\n \n
\n \n
\n {tip}
\n\n Let your Discord channel know each time you go live.\n
\n\n
\n
\n \n
\n\n \n Viewers can opt into being notified when you go live with their browser.\n
\nNot all browsers support this.
\n\n
\n \n Enabling the Fediverse social features will not just alert people to when you go live, but\n also enable other functionality.\n
\n\n Fediverse social features:{' '}\n \n {formDataValues.enabled ? 'Enabled' : 'Disabled'}\n \n
\n\n \n\n
\n Let your viewers know when you go live by supporting any of the below notification channels.{' '}\n
Build your own notifications by using custom webhooks.
\n\n \n\n
\n );\n};\n","import React, { useState, useContext, useEffect } from 'react';\nimport { Typography, Table, Button, Modal, Input } from 'antd';\nimport { ColumnsType } from 'antd/lib/table';\nimport dynamic from 'next/dynamic';\nimport { SocialDropdown } from '../../SocialDropdown';\nimport { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../utils/apis';\nimport { ServerStatusContext } from '../../../../utils/server-status-context';\nimport {\n API_SOCIAL_HANDLES,\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n DEFAULT_SOCIAL_HANDLE,\n OTHER_SOCIAL_HANDLE_OPTION,\n} from '../../../../utils/config-constants';\nimport { SocialHandle, UpdateArgs } from '../../../../types/config-section';\nimport {\n isValidMatrixAccount,\n isValidAccount,\n isValidUrl,\n DEFAULT_TEXTFIELD_URL_PATTERN,\n} from '../../../../utils/urls';\nimport { TextField } from '../../TextField';\nimport { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../../utils/input-statuses';\nimport { FormStatusIndicator } from '../../FormStatusIndicator';\n\nconst { Title } = Typography;\n\n// Lazy loaded components\n\nconst CaretDownOutlined = dynamic(() => import('@ant-design/icons/CaretDownOutlined'), {\n ssr: false,\n});\n\nconst CaretUpOutlined = dynamic(() => import('@ant-design/icons/CaretUpOutlined'), {\n ssr: false,\n});\n\nconst DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {\n ssr: false,\n});\n\n// eslint-disable-next-line react/function-component-definition\nexport default function EditSocialLinks() {\n const [availableIconsList, setAvailableIconsList] = useState([]);\n const [currentSocialHandles, setCurrentSocialHandles] = useState([]);\n\n const [displayModal, setDisplayModal] = useState(false);\n const [displayOther, setDisplayOther] = useState(false);\n const [modalProcessing, setModalProcessing] = useState(false);\n const [editId, setEditId] = useState(-1);\n\n // current data inside modal\n const [modalDataState, setModalDataState] = useState(DEFAULT_SOCIAL_HANDLE);\n\n const [submitStatus, setSubmitStatus] = useState(null);\n\n const serverStatusData = useContext(ServerStatusContext);\n const { serverConfig, setFieldInConfigState } = serverStatusData || {};\n\n const { instanceDetails } = serverConfig;\n const { socialHandles: initialSocialHandles } = instanceDetails;\n\n let resetTimer = null;\n\n const PLACEHOLDERS = {\n mastodon: 'https://mastodon.social/@username',\n twitter: 'https://twitter.com/username',\n };\n\n const getAvailableIcons = async () => {\n try {\n const result = await fetchData(SOCIAL_PLATFORMS_LIST, { auth: false });\n const list = Object.keys(result).map(item => ({\n key: item,\n ...result[item],\n }));\n setAvailableIconsList(list);\n } catch (error) {\n console.log(error);\n // do nothing\n }\n };\n\n const isPredefinedSocial = (platform: string) =>\n availableIconsList.find(item => item.key === platform) || false;\n\n const selectedOther =\n modalDataState.platform !== '' &&\n !availableIconsList.find(item => item.key === modalDataState.platform);\n\n useEffect(() => {\n getAvailableIcons();\n }, []);\n\n useEffect(() => {\n if (instanceDetails.socialHandles) {\n setCurrentSocialHandles(initialSocialHandles);\n }\n }, [instanceDetails]);\n\n const resetStates = () => {\n setSubmitStatus(null);\n resetTimer = null;\n clearTimeout(resetTimer);\n };\n const resetModal = () => {\n setDisplayModal(false);\n setEditId(-1);\n setDisplayOther(false);\n setModalProcessing(false);\n setModalDataState({ ...DEFAULT_SOCIAL_HANDLE });\n };\n\n const handleModalCancel = () => {\n resetModal();\n };\n\n const updateModalState = (fieldName: string, value: string) => {\n setModalDataState({\n ...modalDataState,\n [fieldName]: value,\n });\n };\n const handleDropdownSelect = (value: string) => {\n if (value === OTHER_SOCIAL_HANDLE_OPTION) {\n setDisplayOther(true);\n updateModalState('platform', '');\n } else {\n setDisplayOther(false);\n updateModalState('platform', value);\n }\n };\n const handleOtherNameChange = event => {\n const { value } = event.target;\n updateModalState('platform', value);\n };\n\n const handleUrlChange = ({ value }: UpdateArgs) => {\n updateModalState('url', value);\n };\n\n // posts all the variants at once as an array obj\n const postUpdateToAPI = async (postValue: any) => {\n await postConfigUpdateToAPI({\n apiPath: API_SOCIAL_HANDLES,\n data: { value: postValue },\n onSuccess: () => {\n setFieldInConfigState({\n fieldName: 'socialHandles',\n value: postValue,\n path: 'instanceDetails',\n });\n\n // close modal\n setModalProcessing(false);\n handleModalCancel();\n\n setSubmitStatus(createInputStatus(STATUS_SUCCESS));\n\n resetTimer = setTimeout(resetStates, RESET_TIMEOUT);\n },\n onError: (message: string) => {\n setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));\n setModalProcessing(false);\n resetTimer = setTimeout(resetStates, RESET_TIMEOUT);\n },\n });\n };\n\n // on Ok, send all of dataState to api\n // show loading\n // close modal when api is done\n const handleModalOk = () => {\n setModalProcessing(true);\n const postData = currentSocialHandles.length ? [...currentSocialHandles] : [];\n if (editId === -1) {\n postData.push(modalDataState);\n } else {\n postData.splice(editId, 1, modalDataState);\n }\n postUpdateToAPI(postData);\n };\n\n const handleDeleteItem = (index: number) => {\n const postData = [...currentSocialHandles];\n postData.splice(index, 1);\n postUpdateToAPI(postData);\n };\n\n const handleMoveItemUp = (index: number) => {\n if (index <= 0 || index >= currentSocialHandles.length) {\n return;\n }\n const postData = [...currentSocialHandles];\n const tmp = postData[index - 1];\n postData[index - 1] = postData[index];\n postData[index] = tmp;\n postUpdateToAPI(postData);\n };\n\n const handleMoveItemDown = (index: number) => {\n if (index < 0 || index >= currentSocialHandles.length - 1) {\n return;\n }\n const postData = [...currentSocialHandles];\n const tmp = postData[index + 1];\n postData[index + 1] = postData[index];\n postData[index] = tmp;\n postUpdateToAPI(postData);\n };\n\n const socialHandlesColumns: ColumnsType\n If you are looking for a platform name not on this list, please select Other and type in\n your own name. A logo will not be provided.\n
\n\n\n
\n \n Social Platform\n
\n \n \n {iconList.map(item => {\n const { platform, icon, key } = item;\n\n return (\n \n \n 
\n \n {platform}\n \n );\n })}\n \n Other...\n \n \n
\n \n
\n );\n }\n const { icon, platform: platformName } = platformInfo;\n return (\n \n {platform}\n \n {url}\n \n
\n\n \n \n \n
\n );\n },\n },\n {\n title: '',\n dataIndex: '',\n key: 'edit',\n render: (data, record, index) => (\n \n {platformName}\n \n {url}\n \n
\n\n {\n const platformInfo = currentSocialHandles[index];\n setEditId(index);\n setModalDataState({ ...platformInfo });\n setDisplayModal(true);\n if (!isPredefinedSocial(platformInfo.platform)) {\n setDisplayOther(true);\n }\n }}\n >\n Edit\n \n
\n ),\n },\n ];\n\n const isValid = (url: string, platform: string) => {\n if (platform === 'xmpp') {\n return isValidAccount(url, 'xmpp');\n }\n if (platform === 'matrix') {\n return isValidMatrixAccount(url);\n }\n\n return isValidUrl(url);\n };\n\n const okButtonProps = {\n disabled: !isValid(modalDataState.url, modalDataState.platform),\n };\n\n const otherField = (\n \n \n
\n );\n\n return (\n \n
\n \n \n Your Social Handles\n \n `${record.platform}-${record.url}`}\n columns={socialHandlesColumns}\n dataSource={currentSocialHandles}\n />\n\n \n
\n {\n resetModal();\n setDisplayModal(true);\n }}\n >\n Add a new social link\n \n
\n );\n}\n","import React, { ReactElement } from 'react';\nimport { Typography } from 'antd';\nimport EditSocialLinks from '../../components/admin/config/general/EditSocialLinks';\n\nimport { AdminLayout } from '../../components/layouts/AdminLayout';\n\nconst { Title } = Typography;\n\nexport default function ConfigSocialThings() {\n return (\n \n Add all your social media handles and links to your other profiles here.\n
\n\n\n
\n
\n \n \n
\n
\n Social Items \n\n
\n );\n}\n\nConfigSocialThings.getLayout = function getLayout(page: ReactElement) {\n return \n
\n );\n};\n","import React, { useState, useContext, useEffect } from 'react';\nimport { Typography, Table, Button, Modal, Input } from 'antd';\nimport { ColumnsType } from 'antd/lib/table';\nimport dynamic from 'next/dynamic';\nimport { SocialDropdown } from '../../SocialDropdown';\nimport { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../utils/apis';\nimport { ServerStatusContext } from '../../../../utils/server-status-context';\nimport {\n API_SOCIAL_HANDLES,\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n DEFAULT_SOCIAL_HANDLE,\n OTHER_SOCIAL_HANDLE_OPTION,\n} from '../../../../utils/config-constants';\nimport { SocialHandle, UpdateArgs } from '../../../../types/config-section';\nimport {\n isValidMatrixAccount,\n isValidAccount,\n isValidUrl,\n DEFAULT_TEXTFIELD_URL_PATTERN,\n} from '../../../../utils/urls';\nimport { TextField } from '../../TextField';\nimport { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../../utils/input-statuses';\nimport { FormStatusIndicator } from '../../FormStatusIndicator';\n\nconst { Title } = Typography;\n\n// Lazy loaded components\n\nconst CaretDownOutlined = dynamic(() => import('@ant-design/icons/CaretDownOutlined'), {\n ssr: false,\n});\n\nconst CaretUpOutlined = dynamic(() => import('@ant-design/icons/CaretUpOutlined'), {\n ssr: false,\n});\n\nconst DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {\n ssr: false,\n});\n\n// eslint-disable-next-line react/function-component-definition\nexport default function EditSocialLinks() {\n const [availableIconsList, setAvailableIconsList] = useState([]);\n const [currentSocialHandles, setCurrentSocialHandles] = useState([]);\n\n const [displayModal, setDisplayModal] = useState(false);\n const [displayOther, setDisplayOther] = useState(false);\n const [modalProcessing, setModalProcessing] = useState(false);\n const [editId, setEditId] = useState(-1);\n\n // current data inside modal\n const [modalDataState, setModalDataState] = useState(DEFAULT_SOCIAL_HANDLE);\n\n const [submitStatus, setSubmitStatus] = useState(null);\n\n const serverStatusData = useContext(ServerStatusContext);\n const { serverConfig, setFieldInConfigState } = serverStatusData || {};\n\n const { instanceDetails } = serverConfig;\n const { socialHandles: initialSocialHandles } = instanceDetails;\n\n let resetTimer = null;\n\n const PLACEHOLDERS = {\n mastodon: 'https://mastodon.social/@username',\n twitter: 'https://twitter.com/username',\n };\n\n const getAvailableIcons = async () => {\n try {\n const result = await fetchData(SOCIAL_PLATFORMS_LIST, { auth: false });\n const list = Object.keys(result).map(item => ({\n key: item,\n ...result[item],\n }));\n setAvailableIconsList(list);\n } catch (error) {\n console.log(error);\n // do nothing\n }\n };\n\n const isPredefinedSocial = (platform: string) =>\n availableIconsList.find(item => item.key === platform) || false;\n\n const selectedOther =\n modalDataState.platform !== '' &&\n !availableIconsList.find(item => item.key === modalDataState.platform);\n\n useEffect(() => {\n getAvailableIcons();\n }, []);\n\n useEffect(() => {\n if (instanceDetails.socialHandles) {\n setCurrentSocialHandles(initialSocialHandles);\n }\n }, [instanceDetails]);\n\n const resetStates = () => {\n setSubmitStatus(null);\n resetTimer = null;\n clearTimeout(resetTimer);\n };\n const resetModal = () => {\n setDisplayModal(false);\n setEditId(-1);\n setDisplayOther(false);\n setModalProcessing(false);\n setModalDataState({ ...DEFAULT_SOCIAL_HANDLE });\n };\n\n const handleModalCancel = () => {\n resetModal();\n };\n\n const updateModalState = (fieldName: string, value: string) => {\n setModalDataState({\n ...modalDataState,\n [fieldName]: value,\n });\n };\n const handleDropdownSelect = (value: string) => {\n if (value === OTHER_SOCIAL_HANDLE_OPTION) {\n setDisplayOther(true);\n updateModalState('platform', '');\n } else {\n setDisplayOther(false);\n updateModalState('platform', value);\n }\n };\n const handleOtherNameChange = event => {\n const { value } = event.target;\n updateModalState('platform', value);\n };\n\n const handleUrlChange = ({ value }: UpdateArgs) => {\n updateModalState('url', value);\n };\n\n // posts all the variants at once as an array obj\n const postUpdateToAPI = async (postValue: any) => {\n await postConfigUpdateToAPI({\n apiPath: API_SOCIAL_HANDLES,\n data: { value: postValue },\n onSuccess: () => {\n setFieldInConfigState({\n fieldName: 'socialHandles',\n value: postValue,\n path: 'instanceDetails',\n });\n\n // close modal\n setModalProcessing(false);\n handleModalCancel();\n\n setSubmitStatus(createInputStatus(STATUS_SUCCESS));\n\n resetTimer = setTimeout(resetStates, RESET_TIMEOUT);\n },\n onError: (message: string) => {\n setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));\n setModalProcessing(false);\n resetTimer = setTimeout(resetStates, RESET_TIMEOUT);\n },\n });\n };\n\n // on Ok, send all of dataState to api\n // show loading\n // close modal when api is done\n const handleModalOk = () => {\n setModalProcessing(true);\n const postData = currentSocialHandles.length ? [...currentSocialHandles] : [];\n if (editId === -1) {\n postData.push(modalDataState);\n } else {\n postData.splice(editId, 1, modalDataState);\n }\n postUpdateToAPI(postData);\n };\n\n const handleDeleteItem = (index: number) => {\n const postData = [...currentSocialHandles];\n postData.splice(index, 1);\n postUpdateToAPI(postData);\n };\n\n const handleMoveItemUp = (index: number) => {\n if (index <= 0 || index >= currentSocialHandles.length) {\n return;\n }\n const postData = [...currentSocialHandles];\n const tmp = postData[index - 1];\n postData[index - 1] = postData[index];\n postData[index] = tmp;\n postUpdateToAPI(postData);\n };\n\n const handleMoveItemDown = (index: number) => {\n if (index < 0 || index >= currentSocialHandles.length - 1) {\n return;\n }\n const postData = [...currentSocialHandles];\n const tmp = postData[index + 1];\n postData[index + 1] = postData[index];\n postData[index] = tmp;\n postUpdateToAPI(postData);\n };\n\n const socialHandlesColumns: ColumnsType\n If you are looking for a platform name not on this list, please select Other and type in\n your own name. A logo will not be provided.\n
\n\n\n
\n \n Social Platform\n
\n \n \n {iconList.map(item => {\n const { platform, icon, key } = item;\n\n return (\n \n \n \n \n {platform}\n \n );\n })}\n \n Other...\n \n \n
\n \n
\n );\n }\n const { icon, platform: platformName } = platformInfo;\n return (\n \n {platform}\n \n {url}\n \n
\n\n \n \n \n
\n );\n },\n },\n {\n title: '',\n dataIndex: '',\n key: 'edit',\n render: (data, record, index) => (\n \n {platformName}\n \n {url}\n \n
\n\n {\n const platformInfo = currentSocialHandles[index];\n setEditId(index);\n setModalDataState({ ...platformInfo });\n setDisplayModal(true);\n if (!isPredefinedSocial(platformInfo.platform)) {\n setDisplayOther(true);\n }\n }}\n >\n Edit\n \n
\n ),\n },\n ];\n\n const isValid = (url: string, platform: string) => {\n if (platform === 'xmpp') {\n return isValidAccount(url, 'xmpp');\n }\n if (platform === 'matrix') {\n return isValidMatrixAccount(url);\n }\n\n return isValidUrl(url);\n };\n\n const okButtonProps = {\n disabled: !isValid(modalDataState.url, modalDataState.platform),\n };\n\n const otherField = (\n \n \n
\n );\n\n return (\n \n
\n \n \n Your Social Handles\n \n `${record.platform}-${record.url}`}\n columns={socialHandlesColumns}\n dataSource={currentSocialHandles}\n />\n\n \n
\n {\n resetModal();\n setDisplayModal(true);\n }}\n >\n Add a new social link\n \n
\n );\n}\n","import React, { ReactElement } from 'react';\nimport { Typography } from 'antd';\nimport EditSocialLinks from '../../components/admin/config/general/EditSocialLinks';\n\nimport { AdminLayout } from '../../components/layouts/AdminLayout';\n\nconst { Title } = Typography;\n\nexport default function ConfigSocialThings() {\n return (\n \n Add all your social media handles and links to your other profiles here.\n
\n\n\n
\n
\n \n \n
\n
\n Social Items \n\n
\n );\n}\n\nConfigSocialThings.getLayout = function getLayout(page: ReactElement) {\n return \n {label && (\n
\n );\n};\nexport default ToggleSwitch;\n\nToggleSwitch.defaultProps = {\n apiPath: '',\n checked: false,\n reversed: false,\n configPath: '',\n disabled: false,\n label: '',\n tip: '',\n useSubmit: false,\n onChange: null,\n};\n","import { Popconfirm, Select, Typography } from 'antd';\nimport React, { FC, useContext, useEffect, useState } from 'react';\nimport { AlertMessageContext } from '../../utils/alert-message-context';\nimport {\n API_VIDEO_CODEC,\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n} from '../../utils/config-constants';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\nimport { ServerStatusContext } from '../../utils/server-status-context';\nimport { FormStatusIndicator } from './FormStatusIndicator';\n\nexport type CodecSelectorProps = {};\n\nexport const CodecSelector: FC\n {label}\n
\n )}\n\n \n
\n \n
\n {tip}
\n\n If you have access to specific hardware with the drivers and software installed for them,\n you may be able to improve your video encoding performance.\n
\n \n
\n setConfirmPopupOpen(false)}\n okText=\"Yes\"\n cancelText=\"No\"\n >\n \n {items}\n \n \n
\n \n );\n};\n","import React, { useContext, useState, useEffect, FC } from 'react';\nimport { Typography, Slider } from 'antd';\nimport { ServerStatusContext } from '../../utils/server-status-context';\nimport { AlertMessageContext } from '../../utils/alert-message-context';\nimport {\n API_VIDEO_SEGMENTS,\n RESET_TIMEOUT,\n postConfigUpdateToAPI,\n} from '../../utils/config-constants';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_PROCESSING,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\nimport { FormStatusIndicator } from './FormStatusIndicator';\n\nconst { Title } = Typography;\n\nconst SLIDER_MARKS = {\n 0: 'Lowest',\n 1: '',\n 2: '',\n 3: '',\n 4: 'Highest',\n};\n\nconst SLIDER_COMMENTS = {\n 0: 'Lowest latency, lowest error tolerance (Not recommended, may not work for all content/configurations.)',\n 1: 'Low latency, low error tolerance',\n 2: 'Medium latency, medium error tolerance (Default)',\n 3: 'High latency, high error tolerance',\n 4: 'Highest latency, highest error tolerance',\n};\n\n// eslint-disable-next-line import/prefer-default-export\nexport const VideoLatency: FC = () => {\n const [submitStatus, setSubmitStatus] = useState\n {description}\n
\n\n \n Latency Buffer\n \n
\n );\n};\n","// This content populates the video variant modal, which is spawned from the variants table. This relies on the `dataState` prop fed in by the table.\nimport React, { FC } from 'react';\nimport { Popconfirm, Row, Col, Slider, Collapse, Typography, Alert, Button } from 'antd';\nimport classNames from 'classnames';\nimport dynamic from 'next/dynamic';\nimport { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';\nimport { TextField } from './TextField';\nimport {\n DEFAULT_VARIANT_STATE,\n VIDEO_VARIANT_SETTING_DEFAULTS,\n VIDEO_NAME_DEFAULTS,\n ENCODER_PRESET_SLIDER_MARKS,\n ENCODER_PRESET_TOOLTIPS,\n VIDEO_BITRATE_DEFAULTS,\n VIDEO_BITRATE_SLIDER_MARKS,\n FRAMERATE_SLIDER_MARKS,\n FRAMERATE_DEFAULTS,\n FRAMERATE_TOOLTIPS,\n} from '../../utils/config-constants';\nimport { ToggleSwitch } from './ToggleSwitch';\n\nconst { Panel } = Collapse;\n\n// Lazy loaded components\n\nconst ExclamationCircleFilled = dynamic(() => import('@ant-design/icons/ExclamationCircleFilled'), {\n ssr: false,\n});\n\nexport type VideoVariantFormProps = {\n dataState: VideoVariant;\n onUpdateField: FieldUpdaterFunc;\n};\n\nexport const VideoVariantForm: FC\n While it's natural to want to keep your latency as low as possible, you may experience\n reduced error tolerance and stability the lower you go. The lowest setting is not\n recommended.\n
\n\n For interactive live streams you may want to experiment with a lower latency, for\n non-interactive broadcasts you may want to increase it.{' '}\n
\n SLIDER_COMMENTS[value]}\n onChange={handleChange}\n min={0}\n max={4}\n marks={SLIDER_MARKS}\n defaultValue={selectedOption}\n value={selectedOption}\n />\n
\n {SLIDER_COMMENTS[selectedOption]}
\n\n \n \n Video Bitrate \n
\n \n \n \n \n
\n {videoPassthroughEnabled && (\n \n }>\n Read more about how each of these settings can impact the performance of your\n server.\n \n
\n \n }\n />\n \n NOTE: Video Passthrough for this output stream variant is enabled, disabling the\n below video encoding settings.\n
\n )}\n\n\n CPU or GPU Utilization \n
\n \n \n Reduce to improve server performance, or increase it to improve video quality.\n
\n\n ENCODER_PRESET_TOOLTIPS[value]}\n onChange={handleVideoCpuUsageLevelChange}\n min={1}\n max={Object.keys(ENCODER_PRESET_SLIDER_MARKS).length}\n marks={ENCODER_PRESET_SLIDER_MARKS}\n defaultValue={dataState.cpuUsageLevel}\n value={dataState.cpuUsageLevel}\n disabled={dataState.videoPassthrough}\n />\n
\n {cpuUsageNote()}
\n\n This could mean GPU or CPU usage depending on your server environment.\n
\n
\n
{VIDEO_BITRATE_DEFAULTS.tip}
\n\n `${value} ${VIDEO_BITRATE_DEFAULTS.unit}`}\n disabled={dataState.videoPassthrough}\n defaultValue={dataState.videoBitrate}\n value={dataState.videoBitrate}\n onChange={handleVideoBitrateChange}\n step={VIDEO_BITRATE_DEFAULTS.incrementBy}\n min={VIDEO_BITRATE_DEFAULTS.min}\n max={VIDEO_BITRATE_DEFAULTS.max}\n marks={VIDEO_BITRATE_SLIDER_MARKS}\n />\n
\n {selectedVideoBRnote()}
\n\n
\n Resolution \n
\n
\n \n \n Resizing your content will take additional resources on your server. If you wish\n to optionally resize your content for this stream output then you should either\n set the width or the height to keep your aspect ratio.
\n
\n
\n
\n Video Passthrough \n
\n \n \n
\n \n Enabling video passthrough may allow for less hardware utilization, but may also\n make your stream unplayable.\n
\n\n All other settings for this stream output will be disabled if passthrough is\n used.\n
\n\n
\n
\n \n
\n \n \n
\n Use Video Passthrough?
\n*{VIDEO_VARIANT_SETTING_DEFAULTS.videoPassthrough.tip}
\n \n\n Frame rate \n
\n {FRAMERATE_DEFAULTS.tip}
\n\n `${value} ${FRAMERATE_DEFAULTS.unit}`}\n defaultValue={dataState.framerate}\n value={dataState.framerate}\n onChange={handleFramerateChange}\n step={FRAMERATE_DEFAULTS.incrementBy}\n min={FRAMERATE_DEFAULTS.min}\n max={FRAMERATE_DEFAULTS.max}\n marks={FRAMERATE_SLIDER_MARKS}\n disabled={dataState.videoPassthrough}\n />\n
\n {selectedFramerateNote()}
\n\n
\n
\n Video configuration \n \n \n \n \n \n \n
\n
\n );\n}\n\nConfigVideoSettings.getLayout = function getLayout(page: ReactElement) {\n return \n Before changing your video configuration{' '}\n
\n
\n \n \n
\n\n \n
\n \n {label && (\n
\n );\n};\nexport default ToggleSwitch;\n\nToggleSwitch.defaultProps = {\n apiPath: '',\n checked: false,\n reversed: false,\n configPath: '',\n disabled: false,\n label: '',\n tip: '',\n useSubmit: false,\n onChange: null,\n};\n","import { Popconfirm, Select, Typography } from 'antd';\nimport React, { FC, useContext, useEffect, useState } from 'react';\nimport { AlertMessageContext } from '../../utils/alert-message-context';\nimport {\n API_VIDEO_CODEC,\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n} from '../../utils/config-constants';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\nimport { ServerStatusContext } from '../../utils/server-status-context';\nimport { FormStatusIndicator } from './FormStatusIndicator';\n\nexport type CodecSelectorProps = {};\n\nexport const CodecSelector: FC\n {label}\n
\n )}\n\n \n
\n \n
\n {tip}
\n\n If you have access to specific hardware with the drivers and software installed for them,\n you may be able to improve your video encoding performance.\n
\n \n
\n setConfirmPopupOpen(false)}\n okText=\"Yes\"\n cancelText=\"No\"\n >\n \n {items}\n \n \n
\n \n );\n};\n","import React, { useContext, useState, useEffect, FC } from 'react';\nimport { Typography, Slider } from 'antd';\nimport { ServerStatusContext } from '../../utils/server-status-context';\nimport { AlertMessageContext } from '../../utils/alert-message-context';\nimport {\n API_VIDEO_SEGMENTS,\n RESET_TIMEOUT,\n postConfigUpdateToAPI,\n} from '../../utils/config-constants';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_PROCESSING,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\nimport { FormStatusIndicator } from './FormStatusIndicator';\n\nconst { Title } = Typography;\n\nconst SLIDER_MARKS = {\n 0: 'Lowest',\n 1: '',\n 2: '',\n 3: '',\n 4: 'Highest',\n};\n\nconst SLIDER_COMMENTS = {\n 0: 'Lowest latency, lowest error tolerance (Not recommended, may not work for all content/configurations.)',\n 1: 'Low latency, low error tolerance',\n 2: 'Medium latency, medium error tolerance (Default)',\n 3: 'High latency, high error tolerance',\n 4: 'Highest latency, highest error tolerance',\n};\n\n// eslint-disable-next-line import/prefer-default-export\nexport const VideoLatency: FC = () => {\n const [submitStatus, setSubmitStatus] = useState\n {description}\n
\n\n \n Latency Buffer\n \n
\n );\n};\n","// This content populates the video variant modal, which is spawned from the variants table. This relies on the `dataState` prop fed in by the table.\nimport React, { FC } from 'react';\nimport { Popconfirm, Row, Col, Slider, Collapse, Typography, Alert, Button } from 'antd';\nimport classNames from 'classnames';\nimport dynamic from 'next/dynamic';\nimport { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';\nimport { TextField } from './TextField';\nimport {\n DEFAULT_VARIANT_STATE,\n VIDEO_VARIANT_SETTING_DEFAULTS,\n VIDEO_NAME_DEFAULTS,\n ENCODER_PRESET_SLIDER_MARKS,\n ENCODER_PRESET_TOOLTIPS,\n VIDEO_BITRATE_DEFAULTS,\n VIDEO_BITRATE_SLIDER_MARKS,\n FRAMERATE_SLIDER_MARKS,\n FRAMERATE_DEFAULTS,\n FRAMERATE_TOOLTIPS,\n} from '../../utils/config-constants';\nimport { ToggleSwitch } from './ToggleSwitch';\n\nconst { Panel } = Collapse;\n\n// Lazy loaded components\n\nconst ExclamationCircleFilled = dynamic(() => import('@ant-design/icons/ExclamationCircleFilled'), {\n ssr: false,\n});\n\nexport type VideoVariantFormProps = {\n dataState: VideoVariant;\n onUpdateField: FieldUpdaterFunc;\n};\n\nexport const VideoVariantForm: FC\n While it's natural to want to keep your latency as low as possible, you may experience\n reduced error tolerance and stability the lower you go. The lowest setting is not\n recommended.\n
\n\n For interactive live streams you may want to experiment with a lower latency, for\n non-interactive broadcasts you may want to increase it.{' '}\n
\n SLIDER_COMMENTS[value]}\n onChange={handleChange}\n min={0}\n max={4}\n marks={SLIDER_MARKS}\n defaultValue={selectedOption}\n value={selectedOption}\n />\n
\n {SLIDER_COMMENTS[selectedOption]}
\n\n \n \n Video Bitrate \n
\n \n \n \n \n
\n {videoPassthroughEnabled && (\n \n }>\n Read more about how each of these settings can impact the performance of your\n server.\n \n
\n \n }\n />\n \n NOTE: Video Passthrough for this output stream variant is enabled, disabling the\n below video encoding settings.\n
\n )}\n\n\n CPU or GPU Utilization \n
\n \n \n Reduce to improve server performance, or increase it to improve video quality.\n
\n\n ENCODER_PRESET_TOOLTIPS[value]}\n onChange={handleVideoCpuUsageLevelChange}\n min={1}\n max={Object.keys(ENCODER_PRESET_SLIDER_MARKS).length}\n marks={ENCODER_PRESET_SLIDER_MARKS}\n defaultValue={dataState.cpuUsageLevel}\n value={dataState.cpuUsageLevel}\n disabled={dataState.videoPassthrough}\n />\n
\n {cpuUsageNote()}
\n\n This could mean GPU or CPU usage depending on your server environment.\n
\n
\n
{VIDEO_BITRATE_DEFAULTS.tip}
\n\n `${value} ${VIDEO_BITRATE_DEFAULTS.unit}`}\n disabled={dataState.videoPassthrough}\n defaultValue={dataState.videoBitrate}\n value={dataState.videoBitrate}\n onChange={handleVideoBitrateChange}\n step={VIDEO_BITRATE_DEFAULTS.incrementBy}\n min={VIDEO_BITRATE_DEFAULTS.min}\n max={VIDEO_BITRATE_DEFAULTS.max}\n marks={VIDEO_BITRATE_SLIDER_MARKS}\n />\n
\n {selectedVideoBRnote()}
\n\n
\n Resolution \n
\n
\n \n \n Resizing your content will take additional resources on your server. If you wish\n to optionally resize your content for this stream output then you should either\n set the width or the height to keep your aspect ratio.
\n
\n
\n
\n Video Passthrough \n
\n \n \n
\n \n Enabling video passthrough may allow for less hardware utilization, but may also\n make your stream unplayable.\n
\n\n All other settings for this stream output will be disabled if passthrough is\n used.\n
\n\n
\n
\n \n
\n \n \n
\n Use Video Passthrough?
\n*{VIDEO_VARIANT_SETTING_DEFAULTS.videoPassthrough.tip}
\n \n\n Frame rate \n
\n {FRAMERATE_DEFAULTS.tip}
\n\n `${value} ${FRAMERATE_DEFAULTS.unit}`}\n defaultValue={dataState.framerate}\n value={dataState.framerate}\n onChange={handleFramerateChange}\n step={FRAMERATE_DEFAULTS.incrementBy}\n min={FRAMERATE_DEFAULTS.min}\n max={FRAMERATE_DEFAULTS.max}\n marks={FRAMERATE_SLIDER_MARKS}\n disabled={dataState.videoPassthrough}\n />\n
\n {selectedFramerateNote()}
\n\n
\n
\n Video configuration \n \n \n \n \n \n \n
\n
\n );\n}\n\nConfigVideoSettings.getLayout = function getLayout(page: ReactElement) {\n return \n Before changing your video configuration{' '}\n
\n
\n \n \n
\n\n \n
\n \n \n {title}\n \n
\n );\n};\n\nEditValueArray.defaultProps = {\n maxLength: 50,\n description: null,\n submitStatus: null,\n continuousStatusMessage: null,\n};\n","// This is a wrapper for the Ant Switch component.\n// This one is styled to match the form-textfield component.\n// If `useSubmit` is true then it will automatically post to the config API onChange.\n\nimport React, { useState, useContext, FC } from 'react';\nimport { Switch } from 'antd';\nimport {\n createInputStatus,\n StatusState,\n STATUS_ERROR,\n STATUS_PROCESSING,\n STATUS_SUCCESS,\n} from '../../utils/input-statuses';\nimport { FormStatusIndicator } from './FormStatusIndicator';\n\nimport { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';\nimport { ServerStatusContext } from '../../utils/server-status-context';\n\nexport type ToggleSwitchProps = {\n fieldName: string;\n\n apiPath?: string;\n checked?: boolean;\n reversed?: boolean;\n configPath?: string;\n disabled?: boolean;\n label?: string;\n tip?: string;\n useSubmit?: boolean;\n onChange?: (arg: boolean) => void;\n};\n\nexport const ToggleSwitch: FC{description}
\n\n\n {values?.map((tag, index) => {\n const handleClose = () => {\n handleDeleteIndex(index);\n };\n return (\n \n {tag}\n \n );\n })}\n
\n {continuousStatusMessage && (\n \n
\n )}\n \n
\n \n {label && (\n
\n );\n};\nexport default ToggleSwitch;\n\nToggleSwitch.defaultProps = {\n apiPath: '',\n checked: false,\n reversed: false,\n configPath: '',\n disabled: false,\n label: '',\n tip: '',\n useSubmit: false,\n onChange: null,\n};\n","import React, { FC } from 'react';\nimport { Select } from 'antd';\nimport { SocialHandleDropdownItem } from '../../types/config-section';\nimport { OTHER_SOCIAL_HANDLE_OPTION } from '../../utils/config-constants';\n\nexport type DropdownProps = {\n iconList: SocialHandleDropdownItem[];\n selectedOption: string;\n onSelected: any;\n};\n\nexport const SocialDropdown: FC\n {label}\n
\n )}\n\n \n
\n \n
\n {tip}
\n\n
\n );\n};\n","import React, { useState, useContext, useEffect } from 'react';\nimport { Typography, Table, Button, Modal, Input } from 'antd';\nimport { ColumnsType } from 'antd/lib/table';\nimport dynamic from 'next/dynamic';\nimport { SocialDropdown } from '../../SocialDropdown';\nimport { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../utils/apis';\nimport { ServerStatusContext } from '../../../../utils/server-status-context';\nimport {\n API_SOCIAL_HANDLES,\n postConfigUpdateToAPI,\n RESET_TIMEOUT,\n DEFAULT_SOCIAL_HANDLE,\n OTHER_SOCIAL_HANDLE_OPTION,\n} from '../../../../utils/config-constants';\nimport { SocialHandle, UpdateArgs } from '../../../../types/config-section';\nimport {\n isValidMatrixAccount,\n isValidAccount,\n isValidUrl,\n DEFAULT_TEXTFIELD_URL_PATTERN,\n} from '../../../../utils/urls';\nimport { TextField } from '../../TextField';\nimport { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../../utils/input-statuses';\nimport { FormStatusIndicator } from '../../FormStatusIndicator';\n\nconst { Title } = Typography;\n\n// Lazy loaded components\n\nconst CaretDownOutlined = dynamic(() => import('@ant-design/icons/CaretDownOutlined'), {\n ssr: false,\n});\n\nconst CaretUpOutlined = dynamic(() => import('@ant-design/icons/CaretUpOutlined'), {\n ssr: false,\n});\n\nconst DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {\n ssr: false,\n});\n\n// eslint-disable-next-line react/function-component-definition\nexport default function EditSocialLinks() {\n const [availableIconsList, setAvailableIconsList] = useState([]);\n const [currentSocialHandles, setCurrentSocialHandles] = useState([]);\n\n const [displayModal, setDisplayModal] = useState(false);\n const [displayOther, setDisplayOther] = useState(false);\n const [modalProcessing, setModalProcessing] = useState(false);\n const [editId, setEditId] = useState(-1);\n\n // current data inside modal\n const [modalDataState, setModalDataState] = useState(DEFAULT_SOCIAL_HANDLE);\n\n const [submitStatus, setSubmitStatus] = useState(null);\n\n const serverStatusData = useContext(ServerStatusContext);\n const { serverConfig, setFieldInConfigState } = serverStatusData || {};\n\n const { instanceDetails } = serverConfig;\n const { socialHandles: initialSocialHandles } = instanceDetails;\n\n let resetTimer = null;\n\n const PLACEHOLDERS = {\n mastodon: 'https://mastodon.social/@username',\n twitter: 'https://twitter.com/username',\n };\n\n const getAvailableIcons = async () => {\n try {\n const result = await fetchData(SOCIAL_PLATFORMS_LIST, { auth: false });\n const list = Object.keys(result).map(item => ({\n key: item,\n ...result[item],\n }));\n setAvailableIconsList(list);\n } catch (error) {\n console.log(error);\n // do nothing\n }\n };\n\n const isPredefinedSocial = (platform: string) =>\n availableIconsList.find(item => item.key === platform) || false;\n\n const selectedOther =\n modalDataState.platform !== '' &&\n !availableIconsList.find(item => item.key === modalDataState.platform);\n\n useEffect(() => {\n getAvailableIcons();\n }, []);\n\n useEffect(() => {\n if (instanceDetails.socialHandles) {\n setCurrentSocialHandles(initialSocialHandles);\n }\n }, [instanceDetails]);\n\n const resetStates = () => {\n setSubmitStatus(null);\n resetTimer = null;\n clearTimeout(resetTimer);\n };\n const resetModal = () => {\n setDisplayModal(false);\n setEditId(-1);\n setDisplayOther(false);\n setModalProcessing(false);\n setModalDataState({ ...DEFAULT_SOCIAL_HANDLE });\n };\n\n const handleModalCancel = () => {\n resetModal();\n };\n\n const updateModalState = (fieldName: string, value: string) => {\n setModalDataState({\n ...modalDataState,\n [fieldName]: value,\n });\n };\n const handleDropdownSelect = (value: string) => {\n if (value === OTHER_SOCIAL_HANDLE_OPTION) {\n setDisplayOther(true);\n updateModalState('platform', '');\n } else {\n setDisplayOther(false);\n updateModalState('platform', value);\n }\n };\n const handleOtherNameChange = event => {\n const { value } = event.target;\n updateModalState('platform', value);\n };\n\n const handleUrlChange = ({ value }: UpdateArgs) => {\n updateModalState('url', value);\n };\n\n // posts all the variants at once as an array obj\n const postUpdateToAPI = async (postValue: any) => {\n await postConfigUpdateToAPI({\n apiPath: API_SOCIAL_HANDLES,\n data: { value: postValue },\n onSuccess: () => {\n setFieldInConfigState({\n fieldName: 'socialHandles',\n value: postValue,\n path: 'instanceDetails',\n });\n\n // close modal\n setModalProcessing(false);\n handleModalCancel();\n\n setSubmitStatus(createInputStatus(STATUS_SUCCESS));\n\n resetTimer = setTimeout(resetStates, RESET_TIMEOUT);\n },\n onError: (message: string) => {\n setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));\n setModalProcessing(false);\n resetTimer = setTimeout(resetStates, RESET_TIMEOUT);\n },\n });\n };\n\n // on Ok, send all of dataState to api\n // show loading\n // close modal when api is done\n const handleModalOk = () => {\n setModalProcessing(true);\n const postData = currentSocialHandles.length ? [...currentSocialHandles] : [];\n if (editId === -1) {\n postData.push(modalDataState);\n } else {\n postData.splice(editId, 1, modalDataState);\n }\n postUpdateToAPI(postData);\n };\n\n const handleDeleteItem = (index: number) => {\n const postData = [...currentSocialHandles];\n postData.splice(index, 1);\n postUpdateToAPI(postData);\n };\n\n const handleMoveItemUp = (index: number) => {\n if (index <= 0 || index >= currentSocialHandles.length) {\n return;\n }\n const postData = [...currentSocialHandles];\n const tmp = postData[index - 1];\n postData[index - 1] = postData[index];\n postData[index] = tmp;\n postUpdateToAPI(postData);\n };\n\n const handleMoveItemDown = (index: number) => {\n if (index < 0 || index >= currentSocialHandles.length - 1) {\n return;\n }\n const postData = [...currentSocialHandles];\n const tmp = postData[index + 1];\n postData[index + 1] = postData[index];\n postData[index] = tmp;\n postUpdateToAPI(postData);\n };\n\n const socialHandlesColumns: ColumnsType\n If you are looking for a platform name not on this list, please select Other and type in\n your own name. A logo will not be provided.\n
\n\n\n
\n \n Social Platform\n
\n \n \n {iconList.map(item => {\n const { platform, icon, key } = item;\n\n return (\n \n \n \n \n {platform}\n \n );\n })}\n \n Other...\n \n \n
\n \n
\n );\n }\n const { icon, platform: platformName } = platformInfo;\n return (\n \n {platform}\n \n {url}\n \n
\n\n \n \n \n
\n );\n },\n },\n {\n title: '',\n dataIndex: '',\n key: 'edit',\n render: (data, record, index) => (\n \n {platformName}\n \n {url}\n \n
\n\n {\n const platformInfo = currentSocialHandles[index];\n setEditId(index);\n setModalDataState({ ...platformInfo });\n setDisplayModal(true);\n if (!isPredefinedSocial(platformInfo.platform)) {\n setDisplayOther(true);\n }\n }}\n >\n Edit\n \n
\n ),\n },\n ];\n\n const isValid = (url: string, platform: string) => {\n if (platform === 'xmpp') {\n return isValidAccount(url, 'xmpp');\n }\n if (platform === 'matrix') {\n return isValidMatrixAccount(url);\n }\n\n return isValidUrl(url);\n };\n\n const okButtonProps = {\n disabled: !isValid(modalDataState.url, modalDataState.platform),\n };\n\n const otherField = (\n \n \n
\n );\n\n return (\n \n
\n \n \n Your Social Handles\n \n `${record.platform}-${record.url}`}\n columns={socialHandlesColumns}\n dataSource={currentSocialHandles}\n />\n\n \n
\n {\n resetModal();\n setDisplayModal(true);\n }}\n >\n Add a new social link\n \n
\n );\n}\n","import React, { FC } from 'react';\nimport cn from 'classnames';\nimport styles from './OwncastLogo.module.scss';\n\nexport type LogoProps = {\n variant: 'simple' | 'contrast';\n};\n\nexport const OwncastLogo: FC\n Add all your social media handles and links to your other profiles here.\n
\n\n\n
\n
\n \n \n
\n
\n \n \n \n \n \n \n \n \n