https://dashboard.mux.com/assets/LiveStreamsListContainer-DARzlQ5L.js

1import{a as n,R as c,j as e,b as ce,y as z,r as A,L as le,F as K,a3 as Q,l as de}from"./react-DwuEVfNv.js";import{t as C,c as g,aI as he,aJ as ue,r as U,c9 as Z,s as S,g as ge,d6 as pe,gb as G,k as v,aa as P,cO as me,q as R,am as F,fO as xe,kg as V,_ as B,$ as M,ba as ve,bc as fe,bd as je,be,bZ as Se,ab as ee,ah as q,co as ye,eB as we,cr as ke,aD as Ce,cd as Le,ce as Ie,kh as Re,aF as te,ki as Ae,aG as Pe,c0 as Te,c3 as Ee,c1 as $e,ae as _e,a8 as ze,aw as se,iO as Me,iK as re,c4 as De,jx as Ne,dU as Oe,bX as Fe,bQ as Be,bR as O,bS as qe,bT as $,jy as He,aj as Ue,jo as Ge,eT as Ve,eS as Y,gc as Ye,cL as W,m as We,c5 as J,kj as ae,f as H,ck as ie,fx as Je,bU as Xe,a3 as Ke,gg as Qe,cM as Ze,kk as et,bi as tt,bj as st,bk as rt,bA as at,bl as it,bm as nt,j as X}from"./index-DQzPtNsy.js";import{f as ne}from"./json-65i6w4xc.js";import{a as ot,S as ct,M as lt,D as dt,C as ht,A as ut}from"./APIRequestBar-DWeEkCua.js";import"./d3-q0zOtUjj.js";import"./FullScreenDrawer-CxfJUNTJ.js";import"./CodeBlock-BfKgAAeG.js";import"./redacted-Bf0D5Xnx.js";import"./PermissionsSelector-DKuXI2Jt.js";n.div(["position:relative;width:100%;height:8px;border-radius:4px;background:",";overflow:hidden;"],C(g,{light:"gray10",dark:"gray60"}));n.div(["color:",";"],g.text.default);n.div(["position:absolute;height:100%;width:",";background-color:",";"],t=>`${t.$progress}%`,C(g,{light:"green60",dark:"blue30"}));function gt(t,i,r){const[s,o]=c.useState(t),[d,l]=c.useState(!1),[f,p]=c.useState(!1),x=c.useRef(s),h=c.useRef(null),y=c.useRef(i),j=c.useRef(r);return c.useEffect(()=>{y.current=i,j.current=r}),c.useEffect(()=>{if(f&&x.current===s)return;f||p(!0);async function w(){l(!0);const a=await y.current[s]?.();a&&o(a),l(!1)}w().catch(a=>{l(!1),j.current?.onError?.(a)})},[s,f]),c.useEffect(()=>{x.current=s},[s]),c.useLayoutEffect(()=>{setTimeout(()=>{h.current&&h.current.scrollTo?.({left:0,top:h.current.scrollHeight,behavior:"smooth"})},10)},[s]),{viewportRef:h,isRunning:d,state:s,setState:o}}const pt=n(v)([""]),mt=ce(["scrollbar-width:thin;&::-webkit-scrollbar{width:6px;}&::-webkit-scrollbar-thumb{width:6px;border-radius:3px;}&::-webkit-scrollbar-track{background:",";}&::-webkit-scrollbar-thumb{background:",";}"],G(g.gray100,.1),G(g.white,.5)),xt=n.div(["font-family:",";overflow:hidden;text-overflow:'ellipsis';color:",";background-color:",";background-color:",";border-bottom:1px solid ",";padding:",";overflow-y:auto;white-space:nowrap;"],Z.mono,C(g,{light:"gray80",dark:"white"}),g.gray70,C(g,{light:"gray05",dark:"gray70"}),C(g,{light:"gray20",dark:"gray100"}),S[3]),vt=n.div(["color:",";font-size:",";line-height:",";padding:"," "," "," ",";"],C(g,{light:"gray60",dark:"gray30"}),ge[2],pe[2],S[3],S[3],S[1],S[3]),ft=n(v)(["position:relative;width:100%;overflow-y:auto;overflow-x:hidden;transition:height 0.3s ease-in 0.3s;background-color:",";border:1px solid ",";border-top-left-radius:",";border-top-right-radius:",";",""],C(g,{light:"white",dark:"gray90"}),C(g,{light:"gray20",dark:"gray100"}),U[1],U[1],mt),jt=c.forwardRef(({theme:t,children:i,...r},s)=>{const{themeMode:o}=he(),d=t??o;return e.jsx(ue,{mode:d,children:e.jsx(ft,{...r,ref:s,children:i})})}),_=n(P).attrs({block:!0,borderStyle:"square"})([""]),bt=n(v).attrs({xAlign:"center"})(["","{border-top-left-radius:0;border-top-right-radius:0;}"],_),St=n(v).attrs({xAlign:"center",yAlign:"center"})(["position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;"]),yt=n(me)(["width:40%;text-align:center;"]),wt=c.forwardRef(({children:t,...i},r)=>e.jsx(St,{...i,ref:r,children:e.jsx(yt,{type:"error",children:t})})),kt=n(v)(["width:100%;"]),Ct=({endpoint:t,input:i,setInput:r,apiResponse:s})=>e.jsxs(pt,{children:[e.jsxs(xt,{children:["POST ",xe,t]}),e.jsx(V,{value:i,editable:!0,onChange:r,hideOverflow:!0}),s&&e.jsxs(e.Fragment,{children:[e.jsx(vt,{children:"API Response"}),e.jsx(V,{value:ne(s),editable:!1,hideOverflow:!0})]})]}),Lt=({onReset:t})=>e.jsxs(wt,{children:[e.jsx(R,{$bold:!0,children:"Something went wrong"}),e.jsx(F,{as:"button",onClick:t,variant:"secondary",children:"Click here to try again"}),e.jsx(R,{children:"or reset the form below to start over."})]}),It=({hasError:t,cliState:i,productType:r,onNavigate:s,onReset:o,isLoading:d,onRun:l})=>t?e.jsx(_,{onClick:o,children:"Reset form"}):i==="complete"?e.jsxs(v,{gap:4,xAlign:"center",style:{width:"100%"},children:[e.jsxs(_,{variant:"access",onClick:s,children:["View ",r]}),e.jsxs(F,{as:"button",variant:"secondary",onClick:o,children:["Create another ",r]})]}):e.jsx(_,{variant:"access",loading:d,onClick:l,children:"Run request"}),Rt=new Set(["start"]);function At({onStateChange:t,apiRequest:i,defaultCode:r,minViewportHe

1ight:s,requestDelayMs:o=500}){const[d,l]=c.useState(r??""),[f,p]=c.useState(!1),[x,h]=c.useState(),[y,j]=c.useState(),w=B(),a=M(),L=gt("start",{start:()=>{l(r??""),j(void 0),h(void 0),p(!1)},creating_asset:async()=>{p(!0),await new Promise(k=>{setTimeout(k,o)});try{const k=await i(d,{organization:w,environment:a});h(k.data)}catch(k){k.response?h(k.response?.data):j(k)}return"complete"},complete:()=>{p(!1)}},{onError:k=>{j(k)}}),{state:m,viewportRef:E,setState:u}=L;c.useEffect(()=>{t?.(m)},[m]),c.useEffect(()=>{l(r??"")},[r]);const T=c.useMemo(()=>({style:{height:Rt.has(m)?s:"50vh",maxHeight:"1000px"},ref:E}),[m,s,E]),b=c.useCallback(()=>u("creating_asset"),[u]),oe=c.useCallback(()=>u("start"),[u]);return{state:m,run:b,reset:oe,code:d,setCode:l,isLoading:f,error:y,apiResponse:x,viewportProps:T}}const Pt=ne({playback_policy:["public"],new_asset_settings:{playback_policy:["public"]}}),Tt=({open:t,onOpenChange:i})=>{const r=z(),{state:s,run:o,reset:d,code:l,setCode:f,isLoading:p,error:x,apiResponse:h,viewportProps:y}=At({defaultCode:Pt,apiRequest:(w,a)=>ye(`${we}/live-streams`,w,{preserveSnake:!0,...a}),minViewportHeight:"280px"});function j(){h&&r(h.id)}return e.jsx(ve,{open:t,onOpenChange:i,children:e.jsxs(fe,{style:{minWidth:"min(90svw, 600px)"},children:[e.jsxs(je,{children:[e.jsx(be,{children:"Create a new live stream"}),e.jsx(Se,{children:"Run the request below to create a new live stream. "})]}),e.jsxs(v,{gap:5,gutterY:5,yAlign:"top",children:[e.jsxs(kt,{children:[e.jsxs(jt,{theme:"dark",...y,children:[x&&e.jsx(Lt,{onReset:d}),e.jsx(Ct,{endpoint:"/video/v1/live-streams",input:l,setInput:f,apiResponse:h})]}),e.jsx(bt,{children:e.jsx(It,{cliState:s,isLoading:p,hasError:!!(x||s==="complete"&&!h?.id),productType:"live stream",onRun:o,onReset:d,onNavigate:j})})]}),s!=="complete"&&e.jsx(ee,{href:`${q}/guides/video/start-live-streaming`,children:"Learn more about live streaming"})]})]})})},Et=n(Re).attrs({gap:5,side:"right",sideWidth:"400px"})(["background-color:",";border:1px solid ",";padding:"," ",";min-height:395px;"],g.white,g.gray20,S[6],S[5]),$t=n.div(["margin-bottom:calc(-1 * ",");> *{width:50px;height:50px;color:",";}"],S[2],C(g,{light:"pink50",dark:"blue50"})),_t=n.div(["display:flex;gap:",";"],S[2]),zt=n.ul(["display:flex;flex-direction:column;gap:",";padding:0;list-style:none;margin-bottom:0;"],S[3]),Mt=({icon:t,heading:i,body:r})=>e.jsxs(e.Fragment,{children:[e.jsx($t,{children:e.jsx(t,{})}),e.jsxs(v,{gap:1,children:[e.jsx(Ie,{children:e.jsx("strong",{children:i})}),e.jsx(R,{children:r})]})]}),Dt=({content:t,cta:i,features:r})=>e.jsxs(Et,{"data-heap-selector":"video-getting-started",children:[e.jsxs(v,{gap:3,children:[t,e.jsx(_t,{children:i}),e.jsxs(Nt,{gap:1,children:[e.jsx(ke,{$bold:!0,children:"Need help?"}),e.jsx(F,{style:{alignSelf:"flex-start"},target:"_blank",rel:"noopener noreferrer",href:Ce,children:"Contact our support team"})]})]}),e.jsxs("nav",{children:[e.jsx(Le,{$bold:!0,children:"Explore other features"}),e.jsx(zt,{children:r.map((s,o)=>e.jsx("li",{children:c.cloneElement(s)},o.toString()))})]})]});var Nt=n(v)(["margin-top:auto;"]);const Ot="#create-stream";function Ft(t){const i=z();return e.jsx(P,{variant:"access",onClick:()=>i(Ot),...t})}const Bt=`${q}/guides/video/start-live-streaming`,qt=()=>{const t=B(),{data:i}=te(t);if(!i)return null;const{isAdmin:r,subscription:s}=i.data;return s?.currentPlan?.name===Pe.Free?r?e.jsx(P,{variant:"access",as:le,to:`/organizations/${t}${_e}`,children:"Upgrade Plan"}):e.jsxs(Te,{children:[e.jsx(Ee,{children:"You must be an admin to upgrade your plan"}),e.jsx($e,{asChild:!0,children:e.jsx(P,{disabled:!0,children:"Upgrade Plan"})})]}):e.jsx(Ft,{children:"Create your first live stream"})},Ht=()=>{const[t,i]=A.useState(!1),r=M(),s=B(),{data:o}=te(s),l=o?.data?.isAdmin??!1;return e.jsxs(e.Fragment,{children:[e.jsx(Dt,{content:e.jsx(Mt,{icon:Ae,heading:"Create a live stream to broadcast",body:"Get stream keys to use in your software."}),cta:e.jsxs(e.Fragment,{children:[e.jsx(qt,{}),e.jsx(P,{as:"a",href:Bt,target:"_blank",rel:"noopener noreferrer",children:"See the guide"})]}),features:[e.jsx(ot,{onClick:()=>i(!0),isAdmin:l},"1"),e.jsx(ct,{organizationId:s,environmentId:r},"2"),e.jsx(lt,{},"3"),e.jsx(dt,{organizationId:s,environmentId:r},"4")]}),t&&e.jsx(ht,{onClose:()=>i(!1)})]})},Ut=()=>{const t=ze(),i=z(),{id:r}=K(se),s=M()??"",[o,d]=A.useState(""),{isFetching:l}=Me(o,{onSuccess:()=>

1{i(re(r,s,o))},meta:{errorToastContent:{id:"live-stream-not-found",title:"Live Stream Not Found",description:`The live stream with ID ${o} was not found. Please double check the ID and try again.`}},enabled:!!o}),f=p=>{p?d(p):t({id:"live-stream-id-not-supplied",title:"Live Stream Not Found",type:"Error",description:"A live stream ID is required"})};return e.jsx(ut,{submitting:l,placeholder:"{enter id here}",requestPath:"/video/v1/live-streams/",onSubmit:f})},I=n(Xe)(["overflow-wrap:anywhere;"]),Gt=n(v)(["&:hover{background-color:",";}height:",";cursor:pointer;width:100%;display:flex;"],g.background.highlight,ie[5]),Vt=n($)(["&:hover{background-color:",";}height:",";"],g.background.highlight,ie[6]),Yt=n.div(["padding:1.5em 0;transition:all 0.2s ease;&:hover{transform:scale(1.2);}"]),Wt=n.div(["color:",";padding:3px 0 0 0;margin-left:auto;margin-right:auto;"],g.gray20),Jt=n.div(["font-size:0.9em;font-family:",";","{display:none;}"],Z.mono,H("lg")),D=n(O)(["","{display:none;}"],H("md")),N=n(I)(["","{display:none;}"],H("md")),Xt=n(Ke).attrs({gap:2})(["","{display:none;}"],Je("md")),Kt=({liveStreams:t})=>{const i=De(),r=M()??"",{id:s}=K(se),[o,d]=Q(),l=parseInt(o.get("page")||"1"),[f,p]=A.useState(t),[x,h]=A.useState([]),y=Ne();Oe({type:["live"]},{onActivity:a=>{const{type:L,data:m,environment:E}=Qe(a);if(L?.startsWith("video.live_stream")&&E.id===r)switch(L){case"video.live_stream.deleted":p(u=>u.filter(T=>T.id!==m.id));break;case"video.live_stream.created":m?.id&&y.findByAsset(m)?p(u=>[m,...u]):h(u=>[...u,m]);break;default:p(u=>u.findIndex(b=>b.id===m.id)>=0?u.map(b=>b.id===m.id?{...b,...m}:b):u),h(u=>u.findIndex(b=>b.id===m.id)>=0?u.map(b=>b.id===m.id?{...b,...m}:b):u);break}}});const j=a=>{d({page:a.toString()},{replace:!0})},w=()=>{l>1?d({page:"1"},{replace:!0}):(p(a=>[...x,...a]),h([]))};return e.jsxs(e.Fragment,{children:[e.jsx(Ut,{}),e.jsxs(Fe,{bordered:!0,children:[e.jsxs(Be,{children:[e.jsx(O,{left:!0,ratio:2/3}),e.jsx(D,{left:!0,ratio:.3}),e.jsx(O,{left:!0,ratio:4,children:"TITLE/ID"}),e.jsx(D,{right:!0,children:"Status"}),e.jsx(D,{right:!0,ratio:2,children:"Created"})]}),e.jsxs(qe,{children:[x?.length>0&&e.jsx($,{children:e.jsx(I,{children:e.jsxs(Gt,{xAlign:"center",yAlign:"center",onClick:w,children:["See ",He(x.length,20)," new live streams"]})})}),t.length===0&&(l>1?e.jsx($,{children:e.jsx(I,{children:"You paged through all of your live streams, try going back a page."})}):e.jsx($,{children:e.jsx(I,{children:"Doesn't look like you have any live streams yet!"})})),f.map(a=>e.jsx(Vt,{children:e.jsxs(Ue,{to:re(s,r,a.id),children:[e.jsx(I,{right:!0,ratio:2/3,children:e.jsx(Yt,{children:e.jsx(Ge,{ready:a.status==="active",width:64,height:36,playbackId:Y(a?.playbackIds??[])?.id??"",excludeOverlay:!0,small:!0,type:Ve(a)})})}),e.jsx(N,{left:!0,ratio:.3,children:e.jsx(Wt,{children:!Y(a?.playbackIds??[])?.id&&e.jsx(Ye,{})})}),e.jsx(I,{left:!0,ratio:4,children:e.jsxs(v,{gap:1,children:[e.jsx(R,{$bold:!0,children:a.meta?.title?a.meta.title:a.id}),a.meta?.title&&e.jsx(Jt,{children:a.id}),e.jsxs(Xt,{children:[e.jsxs(R,{children:[W(a.status)," "]}),e.jsx(We,{orientation:"vertical",style:{height:"auto"}}),e.jsx(R,{children:i(new Date(Number(a.createdAt)*1e3),J.datetimeRange)})]})]})}),e.jsx(N,{right:!0,children:W(a.status)}),e.jsx(N,{right:!0,ratio:2,children:i(new Date(Number(a.createdAt)*1e3),J.datetimeRange)})]})},a.id))]})]}),l===1&&t.length===0?null:e.jsx(Qt,{page:l,perPage:ae,currentPageSize:t.length,label:["Live stream","Live streams"],linkProps:({page:a})=>({onClick:L=>{L.preventDefault(),j(a)}})})]})};var Qt=n(Ze)(["margin-top:20px;"]);const Zt=`${q}/guides/video/start-live-streaming`,es=n.div(["font-size:1em;"]),ds=()=>{const t=de(),[i,r]=A.useState(!1),[s]=Q(),o=z(),d=Number(s.get("page"))||1,{data:l,isLoading:f,isFetching:p}=et({limit:ae,page:d,live_stream_id:s.get("live_stream_id")||"",upload_id:s.get("upload_id")||""}),x=f||p,h=l?.data||[],j=(h.length||0)===0&&d===1;A.useEffect(()=>{t.hash==="#create-stream"&&r(!0)},[t]);const w=a=>{a||(t.hash==="#create-stream"&&o(t.pathname+t.search,{replace:!0}),r(!1))};return e.jsxs(tt,{children:[e.jsxs(st,{children:[e.jsx(rt,{children:"Live Streams"}),e.jsxs(at,{children:["Live Streams allow you to build live video into your application.",e.jsx(ee,{variant:"secondary",href:Zt,children:"See the guide"})]}),e.jsx(it,{children:!j&&e.jsx(P,{variant:"access",onClick:()=>r(!0),children:"Create New Live Stream"})})]}),e.jsxs(nt,{children:[e.jsx(Tt,{open:i,onOpenChange:w}),x&&e.jsxs(v,{gutterY:4,gap:4,children:[e.jsx(X,{loading:!0,height:"42px",width:"100%"}),e.jsx(v,{gap:1,children:[...Array(15).keys()].map(a=>e.jsx(X,{loading:!0,height:"64px",width:"100%"},a))})]}),!x&&e.jsx(es,{children:j?e.jsx(Ht,{}):e.jsx(Kt,{liveStreams:h})})]})]})};export{ds as LiveStreamsListContainer};
2//# sourceMappingURL=LiveStreamsListContainer-DARzlQ5L.js.map