1 line
11 KiB
JavaScript
1 line
11 KiB
JavaScript
import{A as e,B as t,C as n,H as r,J as i,M as a,P as o,R as s,S as c,W as l,Y as u,_ as d,a as f,c as p,k as m,l as h,m as g,n as _,o as v,r as y,s as b,w as x,x as S}from"./ui-CzB-gjVP.js";import{t as C}from"./arrow-right-BaPiev--.js";import{t as w}from"./cloud-DZf51awA.js";import{t as T}from"./hash-ORiZzY9V.js";import{t as E}from"./monitor-play-Bo4SAxB6.js";import{t as D}from"./radio-tower-UMy9OSpZ.js";import{t as O}from"./server-eXVtBH0Y.js";import{t as k}from"./shield-check-PAk2q1NC.js";import{t as A}from"./video-C1co3G53.js";import{i as j,o as M}from"./index-D9mHcT7c.js";var N=m(`<div class="mt-6 flex flex-col items-center gap-3 border border-dashed border-line px-6 py-14 text-center"><div><p class=font-medium></p><p class="mt-1 text-sm text-muted-foreground">`),P=m(`<div class="flex items-center gap-2.5"><span class="size-2 bg-success pulse"></span><span class="mono-label text-muted-foreground">SyncLive / 对标 SyncTV · fan-out`),F=m(`<h1 class="display mt-6 text-[clamp(3.4rem,9vw,7.75rem)] will-change-transform"data-parallax=10><span class=block>一路推流，</span><span class=block><span class=text-acid-lime>多端扇出</span><span class="mono-label ml-3 align-top text-acid-lime sm:ml-5">/ fan-out`),I=m(`<p class="mt-6 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg">Cloudflare Realtime 与 SRS 双 SFU 分发，浏览器经服务端反代直连，凭证不出服务端。`),L=m(`<div class="mt-3 flex flex-wrap items-center gap-x-5 gap-y-1.5 border-t border-line/70 pt-3"><span class="mono-label flex items-center gap-1.5 text-muted-foreground">role <span class=text-acid-cyan></span></span><span class="mono-label text-muted-foreground">publish · <span></span></span><span class="mono-label text-muted-foreground">chat · <span>`),R=m(`<div class="relative max-w-3xl border border-line bg-card/60 p-3 backdrop-blur-sm will-change-transform sm:p-4"data-parallax=6><div class="flex flex-col gap-2 sm:flex-row"><div class="flex h-11 flex-1 items-center gap-2.5 border border-line bg-background/70 px-3 transition-colors focus-within:border-ring"><input class="field-mono h-full w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground/50"placeholder=输入房间名 aria-label=房间名>`),z=m(`<div class="grid max-w-3xl grid-cols-3 divide-x divide-line/80 border border-line bg-card/40 will-change-transform"data-parallax=4><div class="px-4 py-3 sm:px-5"><p class="display text-3xl sm:text-4xl dark:text-primary"></p><p class="mono-label mt-1.5 text-muted-foreground">sfu backends</p></div><div class="px-4 py-3 sm:px-5"><p class="display text-3xl sm:text-4xl dark:text-primary"></p><p class="mono-label mt-1.5 text-muted-foreground">online rooms</p></div><div class="px-4 py-3 sm:px-5"><p class="display text-3xl sm:text-4xl dark:text-primary">4</p><p class="mono-label mt-1.5 text-muted-foreground">protocols`),B=m(`<div class="flex items-end justify-between gap-4 border-b border-line pb-4"><div><p class="mono-label text-muted-foreground">online rooms</p><h2 class="display mt-1.5 text-3xl sm:text-4xl">在线房间`),V=m(`<div class=mt-2>`),H=m(`<div class="relative border border-line bg-card/50 p-4 sm:p-5"><div class="flex items-center justify-between gap-2"><div class="flex items-center gap-2"><h2 class=font-semibold>Signal Stack</h2></div></div><div class="mt-4 space-y-2.5"></div><div class="mt-4 border-t border-line/70 pt-4"><p class="micro-label text-muted-foreground">distribution protocols</p><div class="mt-2.5 flex flex-wrap gap-1.5"></div></div><div class="mt-4 flex items-start gap-2.5 border border-line/70 bg-background/40 p-3"><p class="text-xs leading-relaxed text-muted-foreground">凭据由服务端代理注入，浏览器不持有 SFU 密钥。`),U=m(`<div class=relative><section class="relative overflow-hidden"><div class=spotlight aria-hidden=true></div><div class="ghost-text display pointer-events-none absolute -top-8 right-0 hidden text-[24vw] leading-none will-change-transform xl:block"data-parallax=-40 aria-hidden=true>SFU</div><div class="relative mx-auto max-w-[1400px] px-4 pt-14 pb-12 sm:px-6 sm:pt-20"></div></section><section class="mx-auto grid max-w-[1400px] gap-10 px-4 py-14 sm:px-6 lg:grid-cols-[minmax(0,1fr)_360px]"><div class=min-w-0></div><aside class=min-w-0>`),W=m(`<div class="group -mx-3 grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-2 border-b border-line/80 py-4 transition-colors hover:bg-accent/40 sm:mx-0 sm:-mx-4 sm:grid-cols-[3rem_auto_minmax(0,1fr)_auto] sm:gap-4 sm:px-4"><span class="hidden font-mono text-xs text-muted-foreground/70 sm:block"></span><div class=min-w-0><p class="display truncate text-xl transition-colors sm:text-2xl dark:group-hover:text-primary"></p><p class="mono-label mt-1 text-muted-foreground"> targets · </p></div><div class="col-span-2 flex gap-2 sm:col-span-1">`),G=m(`<p class="text-sm text-muted-foreground">正在读取后端配置…`),K=m(`<div><div class="flex min-w-0 items-center gap-3"><span class="flex size-9 shrink-0 items-center justify-center border border-line bg-background text-foreground/80"></span><div class=min-w-0><p class="truncate text-sm font-medium"></p><p class="micro-label mt-0.5 text-muted-foreground"></p></div></div><div class="flex shrink-0 items-center gap-2.5">`),q=[`WHIP`,`WHEP`,`HLS`,`FLV`];function J(e){return e===`BACKEND_KIND_CLOUDFLARE`?w:O}function Y(e){return e.targets?.length??0}function X(e){return(()=>{var t=N(),r=t.firstChild,i=r.firstChild,a=i.nextSibling;return n(t,s(E,{class:`size-6 text-muted-foreground/60`}),r),n(i,()=>e.authed?`暂无在线房间`:`房间列表需登录`),n(a,()=>e.authed?`创建一个房间后，分发拓扑会出现在这里。`:`登录后可查看与管理房间分发拓扑。`),n(t,s(o,{get when(){return!e.authed},get children(){return s(M,{to:`/login`,class:`btn btn-outline btn-sm mt-1`,children:`去登录`})}}),null),t})()}var Z=()=>{let c=j(),[m,w]=l([]),[E,O]=l([]),[M,N]=l(``),Z;u(()=>{d.getConfig().then(e=>w(e.backends||[])).catch(()=>{});let e=Z;if(e&&!window.matchMedia(`(prefers-reduced-motion: reduce)`).matches){let t=Array.from(e.querySelectorAll(`[data-parallax]`)),n=0,r=0,a=0,o=0,s=0,c=t=>{let i=e.getBoundingClientRect();n=(t.clientX-i.left)/i.width-.5,r=(t.clientY-i.top)/i.height-.5,e.style.setProperty(`--mx`,`${t.clientX-i.left}px`),e.style.setProperty(`--my`,`${t.clientY-i.top}px`)},l=()=>{n=0,r=0},u=()=>{a+=(n-a)*.08,o+=(r-o)*.08;for(let e of t){let t=Number(e.dataset.parallax||0);e.style.transform=`translate3d(${(a*t).toFixed(2)}px, ${(o*t).toFixed(2)}px, 0)`}s=requestAnimationFrame(u)};e.addEventListener(`mousemove`,c),e.addEventListener(`mouseleave`,l),s=requestAnimationFrame(u),i(()=>{e.removeEventListener(`mousemove`,c),e.removeEventListener(`mouseleave`,l),cancelAnimationFrame(s)})}}),t(()=>{g.check()&&g.isAuthed()&&d.listRooms().then(e=>O(e.rooms||[])).catch(()=>{})});let Q=e=>c({to:e,search:{room:M()}});return(()=>{var t=U(),i=t.firstChild,l=i.firstChild.nextSibling.nextSibling,u=i.nextSibling,d=u.firstChild,w=d.nextSibling;return e(e=>Z=e,i),n(l,s(h,{get children(){return P()}}),null),n(l,s(h,{delay:1,get children(){return F()}}),null),n(l,s(h,{delay:2,get children(){return I()}}),null),n(l,s(h,{delay:3,class:`mt-10`,get children(){var e=R(),t=e.firstChild,i=t.firstChild,a=i.firstChild;return n(e,s(f,{}),t),n(i,s(T,{class:`size-4 shrink-0 text-muted-foreground`}),a),a.$$keydown=e=>{e.key===`Enter`&&Q(`/room`)},a.$$input=e=>N(e.currentTarget.value),n(t,s(y,{class:`h-11 sm:w-auto`,onClick:()=>Q(`/room`),get children(){return[`进入房间`,s(C,{class:`size-4`})]}}),null),n(t,s(y,{variant:`outline`,class:`h-11`,onClick:()=>Q(`/publish`),get children(){return[s(A,{class:`size-4`}),`开始直播`]}}),null),n(e,s(o,{get when(){return g.isAuthed()},get children(){var e=L(),t=e.firstChild,i=t.firstChild.nextSibling,a=t.nextSibling,o=a.firstChild.nextSibling,s=a.nextSibling.firstChild.nextSibling;return n(i,()=>g.role()),n(o,()=>g.can(`room:publish`)?`ON`:`OFF`),n(s,()=>g.can(`room:chat`)?`ON`:`OFF`),r(e=>{var t=g.can(`room:publish`)?`text-success`:`opacity-50`,n=g.can(`room:chat`)?`text-success`:`opacity-50`;return t!==e.e&&S(o,e.e=t),n!==e.t&&S(s,e.t=n),e},{e:void 0,t:void 0}),e}}),null),r(()=>a.value=M()),e}}),null),n(l,s(h,{delay:4,class:`mt-12`,get children(){var e=z(),t=e.firstChild,r=t.firstChild,i=t.nextSibling.firstChild;return n(r,()=>m().length||`–`),n(i,(()=>{var e=x(()=>!!g.isAuthed());return()=>e()?E().length:`–`})()),e}}),null),n(t,s(b,{items:[`WHIP → SFU`,`SRS FAN-OUT`,`WHEP / HLS / FLV`,`CLOUDFLARE REALTIME`,`WEBRTC LOW-LATENCY`,`一路推流 · 多端扇出`,`FAN-OUT CONSOLE`]}),u),n(d,s(h,{get children(){var e=B();return e.firstChild,n(e,s(y,{variant:`ghost`,size:`sm`,class:`hidden sm:inline-flex`,onClick:()=>c({to:`/rooms`}),get children(){return[`全部`,s(C,{class:`size-3.5`})]}}),null),e}}),null),n(d,s(o,{get when(){return E().length>0},get fallback(){return s(X,{get authed(){return g.isAuthed()}})},get children(){var e=V();return n(e,s(a,{get each(){return E()},children:(e,t)=>s(h,{get delay(){return Math.min(t()+1,5)},get children(){var r=W(),i=r.firstChild,a=i.nextSibling,o=a.firstChild,l=o.nextSibling,u=l.firstChild,d=a.nextSibling;return n(i,()=>String(t()+1).padStart(2,`0`)),n(r,s(v,{get active(){return Y(e)>0}}),a),n(o,()=>e.name),n(l,()=>Y(e),u),n(l,()=>Y(e)>0?`live`:`idle`,null),n(d,s(y,{size:`sm`,variant:`outline`,class:`flex-1 sm:flex-none`,onClick:()=>c({to:`/room`,search:{room:e.name}}),children:`进入`}),null),n(d,s(y,{size:`sm`,class:`flex-1 sm:flex-none`,onClick:()=>c({to:`/publish`,search:{room:e.name}}),children:`直播`}),null),r}})})),e}}),null),n(w,s(h,{get children(){var e=H(),t=e.firstChild,i=t.firstChild,c=i.firstChild,l=t.nextSibling,u=l.nextSibling,d=u.firstChild.nextSibling,h=u.nextSibling,g=h.firstChild;return n(e,s(f,{}),t),n(i,s(D,{class:`size-4 text-acid-lime`}),c),n(t,s(_,{variant:`muted`,get children(){return[x(()=>m().length),` 路`]}}),null),n(l,s(o,{get when(){return m().length>0},get fallback(){return G()},get children(){return s(a,{get each(){return m()},children:e=>{let t=J(e.kind);return(()=>{var i=K(),a=i.firstChild,o=a.firstChild,c=o.nextSibling.firstChild,l=c.nextSibling,u=a.nextSibling;return n(o,s(t,{class:`size-4`})),n(c,()=>e.name),n(l,()=>e.primary?`primary sfu`:`standby`),n(u,s(p,{get active(){return e.configured}}),null),n(u,s(_,{get variant(){return e.configured?`success`:`muted`},get children(){return e.configured?`在线`:`未配置`}}),null),r(()=>S(i,`flex items-center justify-between gap-3 border p-3 transition-colors ${e.configured?`border-line bg-background/50`:`border-line/60 bg-background/20 opacity-70`}`)),i})()}})}})),n(d,s(a,{each:q,children:e=>s(_,{variant:`outline`,class:`font-mono`,children:e})})),n(h,s(k,{class:`mt-px size-4 shrink-0 text-success`}),g),e}})),t})()};c([`input`,`keydown`]);export{Z as Home}; |