2 lines
7.6 KiB
JavaScript
2 lines
7.6 KiB
JavaScript
(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3522],{21987:function(e,t,n){"use strict";var o=n(75263).default,r=n(64836).default;t.Z=void 0;var s=r(n(10434)),c=o(n(67294)),i=r(n(28460)),a=c.forwardRef(function(e,t){return c.createElement(i.default,(0,s.default)({ref:t},e,{component:"div"}))});t.Z=a},3522:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return U}});var o=n(85893),r=n(67294),s=n(54907),c=n(15746),i=n(26713),a=n(71230),l=n(22918),d=n(71577),u=n(21987),m=n(11700),h=n(84485),p=n(87685),x=n(58909),v=n(61426),g=n(99519),j=n(90745),f=n(41983),C=n(39664);let{Title:k}=h.Z,S=()=>{let[e,t]=(0,r.useState)("/* Enter custom CSS here */"),[n,s]=(0,r.useState)(null),[c,i]=(0,r.useState)(!1),a=(0,r.useContext)(g.aC),{serverConfig:l,setFieldInConfigState:u}=a||{},{instanceDetails:m}=l,{customStyles:h}=m,S=null,b=()=>{s(null),i(!1),clearTimeout(S),S=null};async function y(){s((0,f.kg)(f.Jk)),await (0,j.Si)({apiPath:j.d$,data:{value:e},onSuccess:t=>{u({fieldName:"customStyles",value:e,path:"instanceDetails"}),s((0,f.kg)(f.zv,t))},onError:e=>{s((0,f.kg)(f.Un,e))}}),S=setTimeout(b,j.sI)}(0,r.useEffect)(()=>{t(h)},[m]);let Z=r.useCallback(e=>{t(e),e===h||c?e===h&&c&&i(!1):i(!0)},[]);return(0,o.jsxs)("div",{className:"edit-custom-css",children:[(0,o.jsx)(k,{level:3,className:"section-title",children:"Customize your page styling with CSS"}),(0,o.jsxs)("p",{className:"description",children:["Customize the look and feel of your Owncast instance by overriding the CSS styles of various components on the page. Refer to the"," ",(0,o.jsx)("a",{href:"https://owncast.online/docs/website/",rel:"noopener noreferrer",target:"_blank",children:"CSS & Components guide"}),"."]}),(0,o.jsx)("p",{className:"description",children:"Please input plain CSS text, as this will be directly injected onto your page during load."}),(0,o.jsx)(p.ZP,{value:e,placeholder:"/* Enter custom CSS here */",theme:x.F,height:"200px",extensions:[(0,v.css)()],onChange:Z}),(0,o.jsx)("br",{}),(0,o.jsxs)("div",{className:"page-content-actions",children:[c&&(0,o.jsx)(d.Z,{type:"primary",onClick:y,children:"Save"}),(0,o.jsx)(C.E,{status:n})]})]})};var b=n(63402),y=n.n(b);let{Panel:Z}=s.Z,E="/appearance",w=[{name:"theme-color-users-0",description:""},{name:"theme-color-users-1",description:""},{name:"theme-color-users-2",description:""},{name:"theme-color-users-3",description:""},{name:"theme-color-users-4",description:""},{name:"theme-color-users-5",description:""},{name:"theme-color-users-6",description:""},{name:"theme-color-users-7",description:""}],T=[{name:"theme-color-palette-0",description:""},{name:"theme-color-palette-1",description:""},{name:"theme-color-palette-2",description:""},{name:"theme-color-palette-3",description:""},{name:"theme-color-palette-4",description:""},{name:"theme-color-palette-5",description:""},{name:"theme-color-palette-6",description:""},{name:"theme-color-palette-7",description:""},{name:"theme-color-palette-8",description:""},{name:"theme-color-palette-9",description:""},{name:"theme-color-palette-10",description:""},{name:"theme-color-palette-11",description:""},{name:"theme-color-palette-12",description:""}],N=[{name:"theme-color-background-main",description:"Background"},{name:"theme-color-action",description:"Action"},{name:"theme-color-action-hover",description:"Action Hover"},{name:"theme-color-components-chat-background",description:"Chat Background"},{name:"theme-color-components-chat-text",description:"Text: Chat"},{name:"theme-color-components-text-on-dark",description:"Text: Light"},{name:"theme-color-components-text-on-light",description:"Text: Dark"},{name:"theme-color-background-header",description:"Header/Footer"},{name:"theme-color-components-content-background",description:"Page Content"},{name:"theme-color-components-scrollbar-background",description:"Scrollbar Background"},{name:"theme-color-components-scrollbar-thumb",description:"Scrollbar Thumb"}],P=[{name:"theme-rounded-corners",description:"Corner radius"}],z=[...T,...N,...w,...P].reduce((e,t)=>(e[t.name]={name:t.name,description:t.description},e),{});function _(e){let{value:t,name:n,description:r,onChange:s}=e;return(0,o.jsxs)(c.Z,{span:3,children:[(0,o.jsx)("input",{type:"color",id:n,name:r,title:r,value:t,className:y().colorPicker,onChange:e=>s(n,e.target.value,r)}),(0,o.jsx)("div",{style:{padding:"2px"},children:r})]},n)}function U(){var e,t,n;let h=(0,r.useContext)(g.aC),{serverConfig:p}=h,{instanceDetails:x}=p,{appearanceVariables:v}=x,[k,b]=(0,r.useState)(),[y,U]=(0,r.useState)(null),I=()=>{U(null),clearTimeout(null)},O=()=>{let e={};[...T,...N,...w,...P].forEach(t=>{let n=getComputedStyle(document.documentElement).getPropertyValue("--".concat(t.name));e[t.name]={value:n.trim(),description:t.description}}),b(e)};(0,r.useEffect)(()=>{O()},[]),(0,r.useEffect)(()=>{if(0===Object.keys(v).length)return;let e=k||{};Object.keys(v).forEach(t=>{var n;e[t]={value:v[t],description:(null===(n=z[t])||void 0===n?void 0:n.description)||""}}),b(e)},[v]);let A=(e,t,n)=>{b({...k,[e]:{value:t,description:n}})},R=async()=>{await (0,j.Si)({apiPath:E,data:{value:{}},onSuccess:()=>{U((0,f.kg)(f.zv,"Updated.")),setTimeout(I,j.sI),O()},onError:e=>{U((0,f.kg)(f.Un,e)),setTimeout(I,j.sI)}})},B=async()=>{let e={};Object.keys(k).forEach(t=>{e[t]=k[t].value}),await (0,j.Si)({apiPath:E,data:{value:e},onSuccess:()=>{U((0,f.kg)(f.zv,"Updated.")),setTimeout(I,j.sI)},onError:e=>{U((0,f.kg)(f.Un,e)),setTimeout(I,j.sI)}})},D=e=>{A("theme-rounded-corners","".concat(e.toString(),"px"),"")};return k?(0,o.jsxs)(i.Z,{direction:"vertical",children:[(0,o.jsx)(m.Z,{children:"Customize Appearance"}),(0,o.jsx)(u.Z,{children:"The following colors are used across the user interface."}),(0,o.jsx)("div",{children:(0,o.jsxs)(s.Z,{defaultActiveKey:["1"],children:[(0,o.jsxs)(Z,{header:(0,o.jsx)(m.Z,{level:3,children:"Section Colors"}),children:[(0,o.jsx)("p",{children:"Certain sections of the interface can be customized by selecting new colors for them."}),(0,o.jsx)(a.Z,{gutter:[16,16],children:N.map(e=>{let{name:t}=e,n=k[t];return(0,o.jsx)(_,{value:n.value,name:t,description:n.description,onChange:A},t)})})]},"1"),(0,o.jsx)(Z,{header:(0,o.jsx)(m.Z,{level:3,children:"Chat User Colors"}),children:(0,o.jsx)(a.Z,{gutter:[16,16],children:w.map(e=>{let{name:t}=e,n=k[t];return(0,o.jsx)(_,{value:n.value,name:t,description:n.description,onChange:A},t)})})},"2"),(0,o.jsx)(Z,{header:(0,o.jsx)(m.Z,{level:3,children:"Theme Colors"}),children:(0,o.jsx)(a.Z,{gutter:[16,16],children:T.map(e=>{let{name:t}=e,n=k[t];return(0,o.jsx)(_,{value:n.value,name:t,description:n.description,onChange:A},t)})})},"3"),(0,o.jsxs)(Z,{header:(0,o.jsx)(m.Z,{level:3,children:"Other Settings"}),children:["How rounded should corners be?",(0,o.jsxs)(a.Z,{gutter:[16,16],children:[(0,o.jsx)(c.Z,{span:12,children:(0,o.jsx)(l.Z,{min:0,max:20,tooltip:{formatter:null},onChange:e=>{D(e)},value:Number((null===(e=k["theme-rounded-corners"])||void 0===e?void 0:null===(t=e.value)||void 0===t?void 0:t.replace("px",""))||0)})}),(0,o.jsx)(c.Z,{span:4,children:(0,o.jsx)("div",{style:{width:"100px",height:"30px",borderRadius:"".concat(null===(n=k["theme-rounded-corners"])||void 0===n?void 0:n.value),backgroundColor:"var(--theme-color-palette-7)"}})})]})]},"4")]})}),(0,o.jsxs)(i.Z,{direction:"horizontal",children:[(0,o.jsx)(d.Z,{type:"primary",onClick:B,children:"Save Colors"}),(0,o.jsx)(d.Z,{type:"ghost",onClick:R,children:"Reset to Defaults"})]}),(0,o.jsx)(C.E,{status:y}),(0,o.jsx)("div",{className:"form-module page-content-module",children:(0,o.jsx)(S,{})})]}):(0,o.jsx)("div",{children:"Loading..."})}},63402:function(e){e.exports={colorPicker:"appearance_colorPicker__9g3hl"}}}]);
|
|
//# sourceMappingURL=3522-113d0edb83dbe0eb.js.map
|