From 6bb27d042373adaaf4f190639a1481b8d4889263 Mon Sep 17 00:00:00 2001 From: DerTyp7 Date: Sun, 12 Nov 2023 18:20:38 +0000 Subject: [PATCH] deploy: 4eb61d3b96c9176b4d564c39a7ed6a0c29bcde3f --- assets/{index-f119df75.js => index-5ca9e7bc.js} | 2 +- assets/index-71eb0657.css | 1 + assets/index-a7e3d413.css | 1 - index.html | 4 ++-- 4 files changed, 4 insertions(+), 4 deletions(-) rename assets/{index-f119df75.js => index-5ca9e7bc.js} (99%) create mode 100644 assets/index-71eb0657.css delete mode 100644 assets/index-a7e3d413.css diff --git a/assets/index-f119df75.js b/assets/index-5ca9e7bc.js similarity index 99% rename from assets/index-f119df75.js rename to assets/index-5ca9e7bc.js index 90f229d..93dc7be 100644 --- a/assets/index-f119df75.js +++ b/assets/index-5ca9e7bc.js @@ -64,4 +64,4 @@ Error generating stack: `+i.message+` * LICENSE.md file in the root directory of this source tree. * * @license MIT - */function lo(e){return e===void 0&&(e=""),new URLSearchParams(typeof e=="string"||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce((t,n)=>{let r=e[n];return t.concat(Array.isArray(r)?r.map(l=>[n,l]):[[n,r]])},[]))}function sh(e,t){let n=lo(e);return t&&t.forEach((r,l)=>{n.has(l)||t.getAll(l).forEach(i=>{n.append(l,i)})}),n}const ah="startTransition",vs=od[ah];function ch(e){let{basename:t,children:n,future:r,window:l}=e,i=k.useRef();i.current==null&&(i.current=yp({window:l,v5Compat:!0}));let o=i.current,[u,s]=k.useState({action:o.action,location:o.location}),{v7_startTransition:a}=r||{},p=k.useCallback(v=>{a&&vs?vs(()=>s(v)):s(v)},[s,a]);return k.useLayoutEffect(()=>o.listen(p),[o,p]),k.createElement(oh,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:o})}var ms;(function(e){e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState"})(ms||(ms={}));var gs;(function(e){e.UseFetcher="useFetcher",e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration"})(gs||(gs={}));function dh(e){let t=k.useRef(lo(e)),n=k.useRef(!1),r=tu(),l=k.useMemo(()=>sh(r.search,n.current?null:t.current),[r.search]),i=Kp(),o=k.useCallback((u,s)=>{const a=lo(typeof u=="function"?u(l):u);n.current=!0,i("?"+a,s)},[i,l]);return[l,o]}var ui=globalThis&&globalThis.__spreadArray||function(e,t,n){if(n||arguments.length===2)for(var r=0,l=t.length,i;r{var a;if(((a=s.channel)==null?void 0:a.id)===(o==null?void 0:o.id)&&s.channel.connection.id===i)return s});return C.jsxs("div",{className:"viewer",children:[t?C.jsx("div",{className:"channelNameContainer",children:C.jsx("h1",{children:o==null?void 0:o.properties.name})}):null,u==null?void 0:u.map((s,a)=>{var p;return r!=0&&a>=r?null:s?n&&(s.properties.inputMuted||s.properties.outputMuted||s.talkStatus==0)?null:C.jsxs("div",{className:"client",children:[s.properties.outputHardware==!1?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"muted_hardware_output"}),C.jsxs("g",{id:"muted_hardware_output.svg",children:[C.jsx("path",{d:"M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35",fill:"#d8d8d8"}),C.jsx("path",{d:"M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.12,45.85H9.54A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.26l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54",fill:"#d8d8d8"}),C.jsx("path",{d:"M85.11,56.6l-7.87,4.54A10,10,0,0,1,77.62,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.93,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.93,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.93,47",fill:"#d8d8d8"}),C.jsx("path",{d:"M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.25,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.25,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25",fill:"#d8d8d8"}),C.jsx("path",{d:"M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z",fill:"#c9070a"})]})]}):s.properties.inputHardware==!1?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"muted_hardware_input"}),C.jsxs("g",{id:"muted_hardware_input.svg",children:[C.jsx("path",{d:"M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z",fill:"#d8d8d8"}),C.jsx("rect",{x:"-5.93",y:"61.89",width:"139.87",height:"14.02",rx:"2.87",ry:"2.87",transform:"translate(-29.97 65.43) rotate(-45)",fill:"#c9070a"})]})]}):s.properties.outputMuted?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"muted_output"}),C.jsxs("g",{id:"muted_output",children:[C.jsx("path",{d:"M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35",fill:"#c9070a"}),C.jsx("path",{d:"M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54",fill:"#c9070a"}),C.jsx("path",{d:"M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.92,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.92,47",fill:"#c9070a"}),C.jsx("path",{d:"M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.24,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.24,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25",fill:"#c9070a"}),C.jsx("path",{d:"M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z",fill:"#c9070a"})]})]}):s.properties.inputMuted?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"muted_input"}),C.jsx("g",{id:"muted_input.svg",children:C.jsx("path",{d:"M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z",fill:"#c9070a"})})]}):s.talkStatus==1?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"player_on_v2"}),C.jsx("g",{id:"player_on_v2.svg",children:C.jsx("path",{d:"M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z",fill:"#00b4df"})})]}):C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"player_off_v2"}),C.jsx("g",{id:"player_off_v2.svg",children:C.jsx("path",{d:"M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z",fill:"#3e4f5e"})})]}),C.jsx("p",{children:s.properties.nickname})]},`${s.id}-${(p=s.channel)==null?void 0:p.connection.id}`):C.jsx("div",{},Math.random())})]})}function gh(){const[e,t]=k.useState(()=>new URL(window.location.href).toString()),n=k.useRef(null),[r,l]=k.useState(5899),[i,o]=k.useState(!0),[u,s]=k.useState(!1),[a,p]=k.useState(0);k.useEffect(()=>{v()},[r,i,u,a]);function v(){const m=new URL(window.location.href);m.hash="",m.searchParams.set("remoteAppPort",r.toString()),m.searchParams.set("showChannelName",i.toString()),m.searchParams.set("hideNonTalking",u.toString()),m.searchParams.set("clientLimit",a.toString()),t(m.toString().replace("?","#/?"))}function h(){navigator.clipboard.writeText(e),n.current&&(n.current.style.animation="tooltipAnimation 200ms",n.current.style.opacity="1",setTimeout(()=>{n.current&&(n.current.style.opacity="0",n.current.style.animation="")},1e3))}return C.jsxs("div",{className:"generator",children:[C.jsxs("div",{className:"headline",children:[C.jsx("h1",{children:"TS5-OBS-Overlay Generator"}),C.jsx("h4",{children:"by DerTyp7"})]}),C.jsxs("div",{className:"instructions",children:[C.jsx("p",{children:"1. Customize your settings"}),C.jsx("p",{children:"2. Copy the generated URL"}),C.jsx("p",{children:"3. Paste the URL into the BrowserSource URL field in OBS"}),C.jsx("a",{href:"#",children:"Click here for detailed instructions"})]}),C.jsxs("div",{className:"output",children:[C.jsx("p",{className:"url",children:C.jsx("code",{children:e})}),C.jsx("button",{onClick:h,className:"copy",children:"Copy"}),C.jsx("div",{ref:n,className:"copiedTooltip",children:"Copied!"})]}),C.jsxs("div",{className:"generatorContent",children:[C.jsxs("div",{className:"configurations",children:[C.jsx("h2",{children:"Configurations"}),C.jsxs("div",{className:"options",children:[C.jsxs("section",{children:[C.jsxs("div",{className:"option",onClick:()=>o(!i),children:[C.jsx("input",{type:"checkbox",checked:i}),C.jsx("label",{children:"Show channel name"})]}),C.jsxs("div",{className:"option",onClick:()=>s(!u),children:[C.jsx("input",{type:"checkbox",checked:u}),C.jsx("label",{children:"Hide non talking clients"})]})]}),C.jsxs("section",{children:[C.jsxs("div",{className:"option",children:[C.jsx("input",{type:"number",value:a,min:0,onChange:m=>p(parseInt(m.target.value))}),C.jsx("label",{children:"Client Limit"})]}),C.jsxs("div",{className:"option",children:[C.jsx("input",{type:"number",value:r,min:0,onChange:m=>l(parseInt(m.target.value))}),C.jsx("label",{children:"RemoteApp-Port"})]})]})]})]}),C.jsx("div",{className:"preview",children:C.jsx(Bc,{remoteAppPort:r,showChannelName:i,hideNonTalking:u,clientLimit:a})})]})]})}function yh(){const[e]=dh();return C.jsxs(uh,{children:[C.jsx(no,{path:"/",element:C.jsx(Bc,{remoteAppPort:parseInt(e.get("remoteAppPort")??"5899"),showChannelName:e.get("showChannelName")==="true",hideNonTalking:e.get("hideNonTalking")==="true",clientLimit:e.get("clientLimit")?parseInt(e.get("clientLimit")??"0"):0})}),C.jsx(no,{path:"/generate",element:C.jsx(gh,{})})]})}si.createRoot(document.getElementById("root")).render(C.jsx(ch,{children:C.jsx(yh,{})})); + */function lo(e){return e===void 0&&(e=""),new URLSearchParams(typeof e=="string"||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce((t,n)=>{let r=e[n];return t.concat(Array.isArray(r)?r.map(l=>[n,l]):[[n,r]])},[]))}function sh(e,t){let n=lo(e);return t&&t.forEach((r,l)=>{n.has(l)||t.getAll(l).forEach(i=>{n.append(l,i)})}),n}const ah="startTransition",vs=od[ah];function ch(e){let{basename:t,children:n,future:r,window:l}=e,i=k.useRef();i.current==null&&(i.current=yp({window:l,v5Compat:!0}));let o=i.current,[u,s]=k.useState({action:o.action,location:o.location}),{v7_startTransition:a}=r||{},p=k.useCallback(v=>{a&&vs?vs(()=>s(v)):s(v)},[s,a]);return k.useLayoutEffect(()=>o.listen(p),[o,p]),k.createElement(oh,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:o})}var ms;(function(e){e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState"})(ms||(ms={}));var gs;(function(e){e.UseFetcher="useFetcher",e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration"})(gs||(gs={}));function dh(e){let t=k.useRef(lo(e)),n=k.useRef(!1),r=tu(),l=k.useMemo(()=>sh(r.search,n.current?null:t.current),[r.search]),i=Kp(),o=k.useCallback((u,s)=>{const a=lo(typeof u=="function"?u(l):u);n.current=!0,i("?"+a,s)},[i,l]);return[l,o]}var ui=globalThis&&globalThis.__spreadArray||function(e,t,n){if(n||arguments.length===2)for(var r=0,l=t.length,i;r{var a;if(((a=s.channel)==null?void 0:a.id)===(o==null?void 0:o.id)&&s.channel.connection.id===i)return s});return C.jsxs("div",{className:"viewer",children:[t?C.jsx("div",{className:"channelNameContainer",children:C.jsx("h1",{children:o==null?void 0:o.properties.name})}):null,u==null?void 0:u.map((s,a)=>{var p;return r!=0&&a>=r?null:s?n&&(s.properties.inputMuted||s.properties.outputMuted||s.talkStatus==0)?null:C.jsxs("div",{className:"client",children:[s.properties.outputHardware==!1?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"muted_hardware_output"}),C.jsxs("g",{id:"muted_hardware_output.svg",children:[C.jsx("path",{d:"M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35",fill:"#d8d8d8"}),C.jsx("path",{d:"M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.12,45.85H9.54A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.26l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54",fill:"#d8d8d8"}),C.jsx("path",{d:"M85.11,56.6l-7.87,4.54A10,10,0,0,1,77.62,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.93,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.93,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.93,47",fill:"#d8d8d8"}),C.jsx("path",{d:"M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.25,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.25,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25",fill:"#d8d8d8"}),C.jsx("path",{d:"M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z",fill:"#c9070a"})]})]}):s.properties.inputHardware==!1?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"muted_hardware_input"}),C.jsxs("g",{id:"muted_hardware_input.svg",children:[C.jsx("path",{d:"M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z",fill:"#d8d8d8"}),C.jsx("rect",{x:"-5.93",y:"61.89",width:"139.87",height:"14.02",rx:"2.87",ry:"2.87",transform:"translate(-29.97 65.43) rotate(-45)",fill:"#c9070a"})]})]}):s.properties.outputMuted?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"muted_output"}),C.jsxs("g",{id:"muted_output",children:[C.jsx("path",{d:"M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35",fill:"#c9070a"}),C.jsx("path",{d:"M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54",fill:"#c9070a"}),C.jsx("path",{d:"M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.92,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.92,47",fill:"#c9070a"}),C.jsx("path",{d:"M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.24,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.24,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25",fill:"#c9070a"}),C.jsx("path",{d:"M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z",fill:"#c9070a"})]})]}):s.properties.inputMuted?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"muted_input"}),C.jsx("g",{id:"muted_input.svg",children:C.jsx("path",{d:"M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z",fill:"#c9070a"})})]}):s.talkStatus==1?C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"player_on_v2"}),C.jsx("g",{id:"player_on_v2.svg",children:C.jsx("path",{d:"M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z",fill:"#00b4df"})})]}):C.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",children:[C.jsx("title",{children:"player_off_v2"}),C.jsx("g",{id:"player_off_v2.svg",children:C.jsx("path",{d:"M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z",fill:"#3e4f5e"})})]}),C.jsx("p",{children:s.properties.nickname})]},`${s.id}-${(p=s.channel)==null?void 0:p.connection.id}`):C.jsx("div",{},Math.random())})]})}function gh(){const[e,t]=k.useState(()=>new URL(window.location.href).toString()),n=k.useRef(null),[r,l]=k.useState(5899),[i,o]=k.useState(!0),[u,s]=k.useState(!1),[a,p]=k.useState(0);k.useEffect(()=>{v()},[r,i,u,a]);function v(){const m=new URL(window.location.href);m.hash="",m.searchParams.set("remoteAppPort",r.toString()),m.searchParams.set("showChannelName",i.toString()),m.searchParams.set("hideNonTalking",u.toString()),m.searchParams.set("clientLimit",a.toString()),t(m.toString().replace("?","#/?"))}function h(){navigator.clipboard.writeText(e),n.current&&(n.current.style.animation="tooltipAnimation 200ms",n.current.style.opacity="1",setTimeout(()=>{n.current&&(n.current.style.opacity="0",n.current.style.animation="")},1e3))}return C.jsxs("div",{className:"generator",children:[C.jsxs("div",{className:"headline",children:[C.jsx("h1",{children:"TS5-OBS-Overlay Generator"}),C.jsx("h4",{children:"by DerTyp7"})]}),C.jsxs("div",{className:"instructions",children:[C.jsx("p",{children:"1. Customize your settings"}),C.jsx("p",{children:"2. Copy the generated URL"}),C.jsx("p",{children:"3. Paste the URL into the BrowserSource URL field in OBS"}),C.jsx("a",{href:"#",children:"Click here for detailed instructions"})]}),C.jsxs("div",{className:"output",children:[C.jsx("p",{className:"url",children:C.jsx("code",{children:e})}),C.jsx("button",{onClick:h,className:"copy",children:"Copy"}),C.jsx("div",{ref:n,className:"copiedTooltip",children:"Copied!"})]}),C.jsxs("div",{className:"generatorContent",children:[C.jsxs("div",{className:"configurations",children:[C.jsx("h2",{children:"Configurations"}),C.jsxs("div",{className:"options",children:[C.jsxs("section",{children:[C.jsxs("div",{className:"option",onClick:()=>o(!i),children:[C.jsx("input",{type:"checkbox",checked:i}),C.jsx("label",{children:"Show channel name"})]}),C.jsxs("div",{className:"option",onClick:()=>s(!u),children:[C.jsx("input",{type:"checkbox",checked:u}),C.jsx("label",{children:"Hide non talking clients"})]})]}),C.jsxs("section",{children:[C.jsxs("div",{className:"option",children:[C.jsx("input",{type:"number",value:a,min:0,onChange:m=>p(parseInt(m.target.value))}),C.jsx("label",{children:"Client Limit"})]}),C.jsxs("div",{className:"option",children:[C.jsx("input",{type:"number",value:r,min:0,onChange:m=>l(parseInt(m.target.value))}),C.jsx("label",{children:"RemoteApp-Port"})]})]})]})]}),C.jsx("div",{className:"preview",children:C.jsx(Bc,{remoteAppPort:r,showChannelName:i,hideNonTalking:u,clientLimit:a})})]})]})}function yh(){const[e]=dh();return C.jsxs(uh,{children:[C.jsx(no,{path:"/",element:C.jsx(Bc,{remoteAppPort:parseInt(e.get("remoteAppPort")??"5899"),showChannelName:e.get("showChannelName")==="true",hideNonTalking:e.get("hideNonTalking")==="true",clientLimit:e.get("clientLimit")?parseInt(e.get("clientLimit")??"0"):0})}),C.jsx(no,{path:"/generate",element:C.jsx(gh,{})})]})}si.createRoot(document.getElementById("root")).render(C.jsx(ch,{children:C.jsx(yh,{})})); diff --git a/assets/index-71eb0657.css b/assets/index-71eb0657.css new file mode 100644 index 0000000..3dee208 --- /dev/null +++ b/assets/index-71eb0657.css @@ -0,0 +1 @@ +.viewer{display:flex;flex-direction:column;padding:.5rem}.viewer h1{font-size:5vw}.viewer h1,.viewer p{background-color:#2f313680;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:20ch;-webkit-user-select:none;user-select:none}.viewer .channelNameContainer{display:flex;align-items:center;margin-bottom:20px}.viewer .client{display:flex;flex-direction:row;gap:0 0;align-items:center;margin:.5rem 0}.viewer .client svg{width:5vw;aspect-ratio:1/1;margin-right:.5rem;filter:drop-shadow(0 0 .75rem rgba(15,15,15,.1))}.viewer .client p{font-size:5vw}@keyframes tooltipAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.generator{background-color:#232528;color:#fff;width:100%;display:flex;height:100%;flex-direction:column;align-items:center;gap:50px;padding:50px 0}.generator .headline{text-align:center;letter-spacing:1.8px}.generator .instructions{border-bottom:2px solid rgba(117,121,119,.4509803922);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px 50px;flex-wrap:wrap;padding-bottom:10px}.generator .instructions p,.generator .instructions a{font-size:.8rem}.generator .instructions p{color:#b4b4b4}.generator .output{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:20px;position:relative;height:50px}.generator .output .url{white-space:nowrap;overflow:auto;font-weight:700;width:500px;padding:5px 10px;background-color:#313136;border-radius:5px;text-align:center}.generator .output .copy{padding:5px 10px;border:2px solid rgba(49,243,153,.4509803922);transition:all .1s ease-in-out}.generator .output .copy:hover{border-color:#42d486;background-color:transparent;color:#fff}.generator .output .copiedTooltip{opacity:0;position:absolute;right:-90px;background-color:#31f399;color:#202024;padding:5px 10px;border-radius:5px;font-size:.8rem;font-weight:700}.generator .generatorContent{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 50px;gap:30px;width:100%}.generator .generatorContent .configurations{display:flex;flex-direction:column;align-items:center;height:100%;flex:1;gap:50px}.generator .generatorContent .configurations .options{display:flex;flex-direction:row;align-items:center;gap:100px;-webkit-user-select:none;user-select:none}.generator .generatorContent .configurations .options section{display:flex;flex-direction:column;align-items:center;justify-content:left;gap:10px}.generator .generatorContent .configurations .options .option{display:flex;flex-direction:row;align-items:center;justify-content:left;column-gap:10px;width:100%}.generator .generatorContent .configurations .options .option input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid #31f399;border-radius:5px;background-color:#202024;outline:none;transition:all .2s ease-in-out;position:relative;color:#fff;text-align:center;cursor:pointer}.generator .generatorContent .configurations .options .option input::-webkit-outer-spin-button,.generator .generatorContent .configurations .options .option input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.generator .generatorContent .configurations .options .option input:checked:after{content:"";position:absolute;width:10px;height:2px;background-color:#31f399;transform:rotate(45deg)}.generator .generatorContent .configurations .options .option input:checked:before{content:"";position:absolute;width:10px;height:2px;background-color:#31f399;transform:rotate(-45deg)}.generator .generatorContent .configurations .options .option input:checked:after,.generator .generatorContent .configurations .options .option input:checked:before{top:7px;left:3px}.generator .generatorContent .configurations .options .option input[type=number]{width:50px;height:25px;cursor:text;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.generator .generatorContent .configurations .options .option label{cursor:pointer}.generator .generatorContent .preview{flex:1;border:2px solid rgba(49,243,153,.4509803922)}.generator .generatorContent .preview .viewer{background-image:url(../images/viewer_example_background.png);background-repeat:no-repeat;background-size:cover;min-height:500px}@media screen and (max-width: 1200px){.generator .generatorContent{flex-direction:column}.generator .generatorContent .preview{width:80%}}@media screen and (max-width: 790px){.generator .output .url{width:300px}.generator .generatorContent .preview{width:100%}}@media screen and (max-width: 600px){.generator .output .url{width:200px}.generator .output .generatorContent .configurations .options{flex-direction:column;gap:30px}}*{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:1rem;margin:0;padding:0;box-sizing:border-box}body,html{min-height:100vh;min-width:100%;display:flex;overflow-x:hidden;color:#fff}#root{height:100%;min-width:100%}h1{font-size:1.8rem}h2{font-size:1.5rem}h3{font-size:1.2rem}h4{font-size:1.1rem}h1,h2,h3,h4,h5,h6{font-weight:700}a{color:#3abe78;font-weight:700;text-decoration:none;transition:all .1s ease-in-out}a:hover{color:#31f399}button{background-color:#202024;color:#fff;font-weight:700;border:2px solid #31f399;border-radius:5px;padding:10px 20px;cursor:pointer;transition:all .3s ease-in-out}button:hover{background-color:#42d486;color:#202024}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:#363638;border-radius:10px}::-webkit-scrollbar-thumb{background:rgba(49,243,153,.4509803922);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#48ee95} diff --git a/assets/index-a7e3d413.css b/assets/index-a7e3d413.css deleted file mode 100644 index 9a179b7..0000000 --- a/assets/index-a7e3d413.css +++ /dev/null @@ -1 +0,0 @@ -.viewer{display:flex;flex-direction:column;padding:.5rem}.viewer h1,.viewer p{background-color:#2f313680;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:20ch;-webkit-user-select:none;user-select:none}.viewer .channelNameContainer{display:flex;align-items:center;margin-bottom:20px}.viewer .client{display:flex;flex-direction:row;gap:0 0;align-items:center;margin:.5rem 0}.viewer .client svg{width:2.1rem;aspect-ratio:1/1;margin-right:.5rem}.viewer .client p{font-size:1.4rem}@keyframes tooltipAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.generator{background-color:#232528;color:#fff;width:100%;display:flex;height:100%;flex-direction:column;align-items:center;gap:50px;padding:50px 0}.generator .headline{text-align:center;letter-spacing:1.8px}.generator .instructions{border-bottom:2px solid rgba(117,121,119,.4509803922);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px 50px;flex-wrap:wrap;padding-bottom:10px}.generator .instructions p,.generator .instructions a{font-size:.8rem}.generator .instructions p{color:#b4b4b4}.generator .output{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:20px;position:relative;height:50px}.generator .output .url{white-space:nowrap;overflow:auto;font-weight:700;width:500px;padding:5px 10px;background-color:#313136;border-radius:5px;text-align:center}.generator .output .copy{padding:5px 10px;border:2px solid rgba(49,243,153,.4509803922);transition:all .1s ease-in-out}.generator .output .copy:hover{border-color:#42d486;background-color:transparent;color:#fff}.generator .output .copiedTooltip{opacity:0;position:absolute;right:-90px;background-color:#31f399;color:#202024;padding:5px 10px;border-radius:5px;font-size:.8rem;font-weight:700}.generator .generatorContent{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 50px;gap:30px;width:100%}.generator .generatorContent .configurations{display:flex;flex-direction:column;align-items:center;height:100%;flex:1;gap:50px}.generator .generatorContent .configurations .options{display:flex;flex-direction:row;align-items:center;gap:100px;-webkit-user-select:none;user-select:none}.generator .generatorContent .configurations .options section{display:flex;flex-direction:column;align-items:center;justify-content:left;gap:10px}.generator .generatorContent .configurations .options .option{display:flex;flex-direction:row;align-items:center;justify-content:left;column-gap:10px;width:100%}.generator .generatorContent .configurations .options .option input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid #31f399;border-radius:5px;background-color:#202024;outline:none;transition:all .2s ease-in-out;position:relative;color:#fff;text-align:center;cursor:pointer}.generator .generatorContent .configurations .options .option input::-webkit-outer-spin-button,.generator .generatorContent .configurations .options .option input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.generator .generatorContent .configurations .options .option input:checked:after{content:"";position:absolute;width:10px;height:2px;background-color:#31f399;transform:rotate(45deg)}.generator .generatorContent .configurations .options .option input:checked:before{content:"";position:absolute;width:10px;height:2px;background-color:#31f399;transform:rotate(-45deg)}.generator .generatorContent .configurations .options .option input:checked:after,.generator .generatorContent .configurations .options .option input:checked:before{top:7px;left:3px}.generator .generatorContent .configurations .options .option input[type=number]{width:50px;height:25px;cursor:text;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.generator .generatorContent .configurations .options .option label{cursor:pointer}.generator .generatorContent .preview{flex:1;border:2px solid rgba(49,243,153,.4509803922)}.generator .generatorContent .preview .viewer{background-image:url(../images/viewer_example_background.png);background-repeat:no-repeat;background-size:cover;min-height:500px}@media screen and (max-width: 1200px){.generator .generatorContent{flex-direction:column}.generator .generatorContent .preview{width:80%}}@media screen and (max-width: 790px){.generator .output .url{width:300px}.generator .generatorContent .preview{width:100%}}@media screen and (max-width: 600px){.generator .output .url{width:200px}.generator .output .generatorContent .configurations .options{flex-direction:column;gap:30px}}*{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:1rem;margin:0;padding:0;box-sizing:border-box}body,html{min-height:100vh;min-width:100%;display:flex;overflow-x:hidden;color:#fff}#root{height:100%;min-width:100%}h1{font-size:1.8rem}h2{font-size:1.5rem}h3{font-size:1.2rem}h4{font-size:1.1rem}h1,h2,h3,h4,h5,h6{font-weight:700}a{color:#3abe78;font-weight:700;text-decoration:none;transition:all .1s ease-in-out}a:hover{color:#31f399}button{background-color:#202024;color:#fff;font-weight:700;border:2px solid #31f399;border-radius:5px;padding:10px 20px;cursor:pointer;transition:all .3s ease-in-out}button:hover{background-color:#42d486;color:#202024}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:#363638;border-radius:10px}::-webkit-scrollbar-thumb{background:rgba(49,243,153,.4509803922);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#48ee95} diff --git a/index.html b/index.html index 8040e99..002e96f 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,8 @@ TS5-OBS-Overlay - - + +