https://club.touchtight.com/assets/PlaylistDetailV2-Bj2beG6t.js

1import{a as x,j as e}from"./react-vendor-DJtAp8P_.js";import{j as $}from"./replayQuery-BUCYuV9K.js";import{n as Y,o as B,p as F}from"./replayMutation-2dbQMdqR.js";import{C as H}from"./index-CwydS-DZ.js";import{c as U,l as q,h as z,d as G,T as K,a1 as Q}from"./index-D7JOLfRZ.js";import{A as W,R as X,f as w,m as J}from"./ReplayPlayerV2--68kAO4r.js";import{s as Z,P as ee}from"./PlaylistFormModalV2-BerlM2oQ.js";import{r as L}from"./plainText-DBpeJa6y.js";import{R as te}from"./rotate-ccw-Q80Z_Mg_.js";import{P as se}from"./play-BM9SLVrV.js";import{S as ne,a as ae}from"./skip-forward-DyfXmseo.js";import{F as A}from"./film-Cj2rtUNO.js";import{S as O}from"./sparkles-DVp5rXTt.js";import{A as re}from"./arrow-left-Cy9eSGii.js";import{P as ie}from"./pencil-iZ6mTsM-.js";import{T as oe}from"./trash-2-DDb6D_B2.js";import{C as le}from"./chevron-up-DG37VEG_.js";import{C as ce}from"./chevron-down-mjJIujzU.js";import{e as de,n as I}from"./apollo-WxVwhmyD.js";import"./triangle-alert-Dne0Lyva.js";import"./check-Dll7thOD.js";import"./mui-styles-Cs1eTw1A.js";import"./babel-helpers-GYAhpWPp.js";import"./dayjs-CeefjyDY.js";import"./index-Bi_85Xsm.js";import"./index-rc50KUs-.js";import"./popover-B8lrz72k.js";import"./index-DpjMp3wN.js";import"./floating-ui.dom-CpqR1Q5s.js";try{let t=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{},n=new t.Error().stack;

1n&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[n]="5199c672-929e-41f9-ad04-d857d95122ef",t._sentryDebugIdIdentifier="sentry-dbid-5199c672-929e-41f9-ad04-d857d95122ef")}catch{}/**
2 * @license lucide-react v1.31.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const me=[["circle",{cx:"6",cy:"6",r:"3",key:"1lh9wr"}],["path",{d:"M8.12 8.12 12 12",key:"1alkpv"}],["path",{d:"M20 4 8.12 15.88",key:"xgtan2"}],["circle",{cx:"6",cy:"18",r:"3",key:"fqmcym"}],["path",{d:"M14.8 14.8 20 20",key:"ptml3r"}]],V=U("scissors",me),pe=L,xe=t=>{const n=Math.max(0,Math.floor(t||0));return`${Math.floor(n/60)}:${String(n%60).padStart(2,"0")}`},fe=t=>{var n;return t.item_type==="moment"?((n=t.moment)==null?void 0:n.video)??null:t.item_type==="video"?t.video??null:t.item_type==="clip"?t.clip??null:null},S=t=>{var n,a,r;return t.item_type==="moment"?pe((n=t.moment)==null?void 0:n.comment_text)||"Moment":t.item_type==="clip"?((a=t.clip)==null?void 0:a.title)||"Clip":((r=t.video)==null?void 0:r.title)||"Video"},ue=({item:t})=>{const a={moment:{icon:e.jsx(O,{className:"h-2.5 w-2.5","aria-hidden":"true"}),label:"Moment",c:w.anchor},video:{icon:e.jsx(A,{className:"h-2.5 w-2.5","aria-hidden":"true"}),label:"Video",c:w.window},clip:{icon:e.jsx(V,{className:"h-2.5 w-2.5","aria-hidden":"true"}),label:"Clip",c:"#FDBC40"}}[t.item_type];return e.jsxs("span",{className:"font-mono inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-[9px] uppercase tracking-[0.06em]",style:{borderColor:`${a.c}70`,color:a.c,backgroundColor:`${a.c}1a`},children:[a.icon,a.label]})},he=t=>{var n;return(((n=t.moment)==null?void 0:n.annotations)||[]).map(a=>({id:a.id,timestamp_seconds:a.timestamp_seconds,duration_seconds:a.duration_seconds??0,annotation_data:a.annotation_data}))},ye=({items:t,label:n})=>{var N,_;const a=x.useRef(null),[r,d]=x.useState(0),[j,f]=x.useState(!1),u=t.length,s=t[r],o=s?fe(s):null,h=r>=u-1,P=x.useMemo(()=>(o==null?void 0:o.mux_playback_id)??`none-${r}`,[o,r]),y=x.useCallback(()=>{r<u-1?d(r+1):f(!1)},[r,u]),C=x.useCallback(k=>{k==="ended"&&y()},[y]);x.useEffect(()=>{if(!j||!s)return;let k=!1,E=0,v,g=null;const l=()=>{if(k)return;const i=a.current,p=i==null?void 0:i.media;if(i&&p&&p.readyState>=1){if(s.item_type==="moment"&&s.moment)i.playMoment(s.moment);else{g=()=>y(),i.addEventListener("ended",g);try{i.currentTime=0,i.play()}catch{}}return}E++>50||(v=setTimeout(l,100))};return v=setTimeout(l,60),()=>{k=!0,clearTimeout(v);const i=a.current;g&&i&&i.removeEventListener("ended",g)}},[r,j,s,y]);const R=()=>{u&&f(!0)},M=()=>{d(0),f(!0)},T=()=>{r>0&&(d(r-1),f(!0))},c=()=>{h||(d(r+1),f(!0))};if(!u)return e.jsxs("div",{className:"flex flex-col items-center justify-center gap-2 rounded-md border border-ink/10 bg-bg-raised py-16 text-center",children:[e.jsx("p",{className:"font-mono text-[10px] uppercase tracking-[0.1em] text-accent-2",children:"Empty playlist"}),e.jsx("p",{className:"font-body max-w-[260px] text-sm text-ink/55",children:"Add videos, moments, or clips to build this playlist."})]});const m=(s==null?void 0:s.item_type)==="moment"?e.jsx(W,{annotations:he(s),playerRef:a}):null;return e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsxs("div",{className:"relative",children:[e.jsx(X,{ref:a,title:o==null?void 0:o.title,muxPlaybackId:o==null?void 0:o.mux_playback_id,status:o==null?void 0:o.status,playbackTokens:o==null?void 0:o.playback_tokens,overlay:m,onMomentStateChange:C},P),!j&&e.jsxs("button",{type:"button",onClick:h?M:R,className:"absolute inset-0 z-30 flex flex-col items-center justify-center gap-2 bg-black/45 text-white","aria-label":h?"Replay playlist":"Play playlist",children:[e.jsx("span",{className:"flex h-16 w-16 items-center justify-center rounded-full",style:{backgroundColor:w.anchor},children:h?e.jsx(te,{className:"h-7 w-7","aria-hidden":"true"}):e.jsx(se,{className:"ml-0.5 h-7 w-7","aria-hidden":"true"})}),e.jsx("span",{className:"font-head text-[11px] font-bold uppercase tracking-[0.12em]",children:h?"Replay all":"Play all"})]})]}),e.jsxs("div",{className:"rounded-md border border-ink/10 bg-bg-raised px-4 py-3",children:[e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsxs("span",{className:"font-mono text-[10px] uppercase tracking-[0.1em] text-accent-2",children:["Playlist",n?` · ${n}`:""]}),e.jsxs("span",{className:"font-mono text-[10px] uppercase tracking-[0.08em] text-ink/60",children:[r+1," / ",u]})]}),e.jsxs("div",{className:"mt-2 flex items-center gap-2",children:[e.jsx("button",{type:"button",onClick:T,disabled:r===0,"aria-label":"Previous item",className:"inline-flex h-9 w-9 items-center justify-center rounded-sm border border-ink/15 text-ink/70 hover:border-ink/35 hover:text-ink disabled:opacity-40",children:e.jsx(ne,{className:"h-4 w-4","aria-hidden":"true"})}),e.jsx("button",{type:"button",onClick:c,disabled:h,"aria-label":"Next item",className:"inline-flex h-9 w-9 items-center justify-center rounded-sm border border-ink/15 text-ink/70 hover:border-ink/35 hover:text-ink disabled:opacity-40",children:e.jsx(ae,{className:"h-4 w-4","aria-hidden":"true"})}),s&&e.jsx(ue,{item:s}),(s==null?void 0:s.item_type)==="moment"&&s.moment&&J(s.moment)&&e.jsx("span",{className:"font-mono inline-flex items-center rounded-sm border border-[#22d3ee]/45 bg-[#22d3ee]/10 px-1.5 py-0.5 text-[9px] uppercase tracking-[0.06em] text-[#22d3ee]",children:"Drawing"}),(s==null?void 0:s.item_type)==="moment"&&e.jsx("span",{className:"font-mono inline-flex items-center gap-1 rounded-sm border border-[#ff80d0]/45 bg-[#ff80d0]/10 px-1.5 py-0.5 text-[10px] uppercase tracking-[0.05em] text-[#ff80d0]",children:xe(((N=s.moment)==null?void 0:N.range_start_seconds)??((_=s.moment)==null?void 0:_.timestamp_seconds))}),s&&e.jsx("span",{className:"font-body ml-auto truncate text-xs text-ink/55",title:S(s),children:S(s)})]})]})]})},be=L,ke=t=>{const n=Math.max(0,Math.floor(t||0));return`${Math.floor(n/60)}:${String(n%60).padStart(2,"0")}`},D=t=>{var n,a,r;return t.item_type==="moment"?be((n=t.moment)==null?void 0:n.comment_text)||"Moment":t.item_type==="clip"?((a=t.clip)==null?void 0:a.title)||"Clip":((r=t.video)==null?void 0:r.title)||"Video"},ge=({type:t})=>

6t==="moment"?e.jsx(O,{className:"h-3.5 w-3.5",style:{color:w.anchor},"aria-hidden":"true"}):t==="clip"?e.jsx(V,{className:"h-3.5 w-3.5",style:{color:"#FDBC40"},"aria-hidden":"true"}):e.jsx(A,{className:"h-3.5 w-3.5",style:{color:w.window},"aria-hidden":"true"}),We=()=>{var g;const{id:t}=q(),n=z(),a=G(),[r]=K(),d=Number(t),[j,f]=x.useState(!1),[u,s]=x.useState(!1),{data:o,loading:h,error:P,refetch:y}=de($,{variables:{getReplayPlaylistDetailsInput:{id:d}},skip:!d,fetchPolicy:"cache-and-network"}),[C]=I(Y),[R]=I(B),[M,{loading:T}]=I(F),c=(g=o==null?void 0:o.getReplayPlaylistDetails)==null?void 0:g.data,m=x.useMemo(()=>[...(c==null?void 0:c.items)||[]].sort((l,i)=>l.position-i.position),[c]),N=!!c&&!!(a!=null&&a.id)&&Number(c.created_by)===Number(a.id),_=async l=>{try{await C({variables:{reorderReplayPlaylistItemsInput:{playlist_id:d,playlist_item_ids:l.map(i=>i.id)}}}),await y()}catch{r({msg:"Could not reorder.",variant:"error"})}},k=(l,i)=>{const p=l+i;if(p<0||p>=m.length)return;const b=[...m];[b[l],b[p]]=[b[p],b[l]],_(b)},E=async l=>{try{await R({variables:{removeReplayPlaylistItemInput:{playlist_id:d,playlist_item_id:l.id}}}),await y()}catch{r({msg:"Could not remove item.",variant:"error"})}},v=async()=>{try{await M({variables:{deleteReplayPlaylistInput:{id:d}}}),s(!1),n("/replay/playlists")}

6catch{r({msg:"Could not delete playlist.",variant:"error"})}};return h&&!o?e.jsx("div",{className:"flex min-h-screen items-center justify-center bg-bg",children:e.jsx("p",{className:"font-mono text-[10px] uppercase tracking-[0.1em] text-ink/40",children:"Loading playlist…"})}):P||!c?e.jsxs("div",{className:"flex min-h-screen flex-col items-center justify-center gap-3 bg-bg px-6 text-center",children:[e.jsx("p",{className:"font-mono text-[10px] uppercase tracking-[0.1em] text-[#d44f5e]",children:"Couldn’t load this playlist"}),e.jsx("button",{type:"button",onClick:()=>n("/replay/playlists"),className:"font-head inline-flex h-9 items-center rounded-sm border border-ink/20 px-4 text-[11px] font-bold uppercase tracking-[0.1em] text-ink hover:border-ink/40",children:"Back to Playlists"})]}):e.jsxs("div",{className:"flex min-h-screen flex-col bg-bg text-fg",children:[e.jsxs("header",{className:"flex flex-col gap-3 border-b border-ink/10 px-6 py-5 md:flex-row md:items-start md:justify-between md:px-8",children:[e.jsxs("div",{className:"flex min-w-0 items-start gap-3",children:[e.jsx("button",{type:"button",onClick:()=>n("/replay/playlists"),"aria-label":"Back to Playlists",className:"mt-1 inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-sm border border-ink/15 text-ink/75 hover:border-ink/35 hover:text-ink",children:e.jsx(re,{className:"h-3.5 w-3.5","aria-hidden":"true"})}),e.jsxs("div",{className:"min-w-0",children:[e.jsxs("p",{className:"font-mono text-[11px] uppercase tracking-[0.1em] text-accent-2",children:["Replay · Playlist · ",Z(c.scope_type)]}),e.jsx("h1",{className:"font-head mt-1 text-2xl font-bold uppercase tracking-tight break-words md:text-3xl",children:c.name}),c.description&&e.jsx("p",{className:"font-body mt-1 max-w-2xl text-sm text-ink/60 break-words",children:c.description}),e.jsxs("p",{className:"font-mono mt-1 text-[10px] uppercase tracking-[0.08em] text-ink/45",children:[m.length," item",m.length===1?"":"s"]})]})]}),N&&e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>f(!0),className:"font-head inline-flex h-9 items-center gap-1.5 rounded-sm border border-ink/15 bg-transparent px-3 text-[11px] font-bold uppercase tracking-[0.1em] text-ink hover:border-ink/35",children:[e.jsx(ie,{className:"h-3.5 w-3.5","aria-hidden":"true"}),"Edit"]}),e.jsx("button",{type:"button",onClick:()=>s(!0),"aria-label":"Delete playlist",className:"inline-flex h-9 w-9 items-center justify-center rounded-sm border border-ink/15 text-[#d44f5e] hover:border-[#d44f5e]/50",children:e.jsx(oe,{className:"h-3.5 w-3.5","aria-hidden":"true"})})]})]}),e.jsxs("div",{className:"grid flex-1 grid-cols-1 gap-6 px-6 py-6 md:grid-cols-3 md:px-8",children:[e.jsx("div",{className:"md:col-span-2",children:e.jsx(ye,{items:m,label:c.name})}),e.jsx("aside",{className:"md:col-span-1",children:e.jsxs("div",{className:"rounded-md border border-ink/10 bg-bg-raised",children:[e.jsx("header",{className:"border-b border-ink/10 px-4 py-3",children:e.jsx("span",{className:"font-head text-[12px] font-bold uppercase tracking-[0.1em] text-ink",children:"Items"})}),m.length===0?e.jsx("p",{className:"font-body px-4 py-8 text-center text-sm text-ink/55",children:"No items yet. Add videos, moments, or clips from Replay."}):e.jsx("ul",{className:"flex flex-col",children:m.map((l,i)=>{var p,b;return e.jsxs("li",{className:"flex items-center gap-2 border-b border-ink/5 px-3 py-2 last:border-b-0",children:[e.jsx("span",{className:"font-mono w-5 shrink-0 text-center text-[10px] text-ink/35",children:i+1}),e.jsx(ge,{type:l.item_type}),e.jsx("span",{className:"font-body min-w-0 flex-1 truncate text-[13px] text-ink/80",title:D(l),children:D(l)}),l.item_type==="moment"&&e.jsx("span",{className:"font-mono shrink-0 text-[9px] uppercase tracking-[0.05em] text-[#ff80d0]",children:ke(((p=l.moment)==null?void 0:p.range_start_seconds)??((b=l.moment)==null?void 0:b.timestamp_seconds))}),N&&e.jsxs("div",{className:"flex shrink-0 items-center",children:[e.jsx("button",{type:"button",onClick:()=>k(i,-1),disabled:i===0,"aria-label":"Move up",className:"inline-flex h-7 w-7 items-center justify-center rounded-sm text-ink/45 hover:bg-ink/5 hover:text-ink disabled:opacity-30",children:e.jsx(le,{className:"h-3.5 w-3.5","aria-hidden":"true"})}),e.jsx("button",{type:"button",onClick:()=>k(i,1),disabled:i===m.length-1,"aria-label":"Move down",className:"inline-flex h-7 w-7 items-center justify-center rounded-sm text-ink/45 hover:bg-ink/5 hover:text-ink disabled:opacity-30",children:e.jsx(ce,{className:"h-3.5 w-3.5","aria-hidden":"true"})}),e.jsx("button",{type:"button",onClick:()=>E(l),"aria-label":"Remove item",className:"inline-flex h-7 w-7 items-center justify-center rounded-sm text-ink/45 hover:bg-ink/5 hover:text-[#d44f5e]",children:e.jsx(Q,{className:"h-3.5 w-3.5","aria-hidden":"true"})})]})]},l.id)})})]})})]}),e.jsx(ee,{open:j,onClose:()=>f(!1),playlist:c,onSaved:()=>y()}),e.jsx(H,{open:u,handleClose:()=>s(!1),handleDelete:v,loading:T,title:"Delete playlist?",actionBtnTitle:"Delete",subjectName:c.name,warning:"This removes the playlist and its ordering. The underlying videos, moments, and clips are not deleted."})]})};export{We as default};