https://baipiao.ai/assets/comment-sticker-picker-BkNRxisb.js

1import{j as r,r as p}from"./react-vendor-P5XnYvWb.js";import{C as T}from"./comment-login-notice-CU6ueGu4.js";import{o as q,X as N,Y as z}from"./movie-card-runtime-BsWugIRi.js";import{a0 as A,q as D}from"./icons-C3gyKvVD.js";import{r as E,C as S,a as M,u as O}from"./comment-panel-BqfcXEe5.js";import{d as $}from"./main-CtyeVlnq.js";import"./vite-runtime-mxn4OsD4.js";import"./native-environment-ChodKNAD.js";import"./PlaylistPickerDialog-BUF5Enjm.js";import"./overlay-portal-Be0vfSM5.js";import"./assistant-ui-primitives-Bn9nn9-n.js";import"./radix-ui-BXT0dNmF.js";import"./useCollectionViewport-CqEKC_dM.js";/* empty css                  */import"./use-modal-history-dismiss-DgaUApWa.js";import"./user-avatar-BDwbhArf.js";import"./playback-client-runtime-Cwx4nSwi.js";import"./navigation-runtime-Dw-8DVQD.js";function F({access:e,onClose:n}){const s=o=>{n(),q({intent:"comment",mode:o})};return e.reason!=="login_required"?r.jsx("p",{role:"status",className:"px-2 py-4 text-sm text-[var(--movie-text-muted)]",children:e.message}):r.jsx(T,{title:"登录后使用表情",onSelectMode:s})}function L(e,n,s){s&&"scrollBehavior"in document.documentElement.style&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches?e.scrollTo({left:n,behavior:"smooth"}):e.scrollLeft=n}function R(e,n){const s=e.parentElement;if(!s)return;const o=Math.max(0,Math.min(s.scrollWidth-s.clientWidth,e.offsetLeft+e.offsetWidth/2-s.clientWidth/2));L(s,o,n)}function W({categories:e,activeId:n,panelId:s,onChange:o}){const c=p.useRef(null),m=p.useRef(null),[h,g]=p.useState({start:!0,end:!0}),f=p.useCallback(()=>{const t=c.current;if(!t)return;const l=t.scrollLeft<=1,u=t.scrollLeft+t.clientWidth>=t.scrollWidth-1;g(i=>i.start===l&&i.end===u?i:{start:l,end:u})},[]);p.useEffect(()=>{m.current&&R(m.current,!1),f();const t=typeof ResizeObserver<"u"?new ResizeObserver(f):null;return c.current&&(t==null||t.observe(c.current)),window.addEventListener("resize",f),()=>{t==null||t.disconnect(),window.removeEventListener("resize",f)}},[e.length,f]);const x=t=>{const l=c.current;l&&L(l,l.scrollLeft+t*l.clientWidth*.75,!0)};return r.jsxs("div",{className:"flex min-w-0 items-start gap-1",children:[r.jsx("button",{type:"button","aria-label":"向左浏览表情分类",disabled:h.start,onClick:()=>x(-1),className:"hidden size-11 shrink-0 items-center justify-center rounded-lg border border-[var(--movie-border-soft)] disabled:opacity-30 sm:inline-flex",children:r.jsx(A,{className:"size-4"})}),r.jsx("div",{ref:c,role:"tablist","aria-label":"表情分类",onScroll:f,className:"relative flex min-w-0 flex-1 gap-2 overflow-x-auto overscroll-x-contain pb-2",onKeyDown:t=>{const l=e.findIndex(a=>a.id===n);let u=l;if(t.key==="ArrowRight")u=(l+1)%e.length;else if(t.key==="ArrowLeft")u=(l-1+e.length)%e.length;else if(t.key==="Home")u=0;else if(t.key==="End")u=e.length-1;else return;t.preventDefault();const i=t.currentTarget.querySelectorAll('[role="tab"]')[u];i&&(i.focus({preventScroll:!0}),i.click())},children:e.map(t=>{const l=t.id===n;return r.jsx("button",{ref:l?m:void 0,type:"button",role:"tab",id:`${s}-${encodeURIComponent(t.id)}`,"aria-controls":s,"aria-selected":l,tabIndex:l?0:-1,onClick:u=>{o(t.id),R(u.currentTarget,!0)},className:`min-h-11 shrink-0 whitespace-nowrap rounded-full border px-3 py-2 font-medium outline-none focus-visible:ring-2 focus-visible:ring-[var(--movie-primary-strong)] ${l?"border-[var(--movie-primary-strong)] bg-[var(--movie-surface-strong)] text-[var(--movie-primary-strong)]":"border-[var(--movie-border-soft)] text-[var(--movie-text-subtle)]"}`,children:t.name},t.id)})}),r.jsx("button",{type:"button","aria-label":"向右浏览表情分类",disabled:h.end,onClick:()=>x(1),className:"hidden size-11 shrink-0 items-center justify-center rounded-lg border border-[var(--movie-border-soft)] disabled:opacity-30 sm:inline-flex",children:r.jsx(D,{className:"size-4"})})]})}function _(e){const[n,s]=p.useState(()=>({scope:e,ids:E(e)}));return p.useEffect(()=>{const o=()=>s({scope:e,ids:E(e)}),c=m=>{(!m.key||m.key===M)&&o()};return o(),window.addEventListener(S,o),window.addEventListener("storage",c),()=>{window.removeEventListener(S,o),window.removeEventListener("storage",c)}},[e]),p.useMemo(()=>n.scope===e?n.ids:[],[n,e])}const Q=$.injectEndpoints({endpoints:e=>({getCommentStickerIndex:e.query({query:()=>({url:"/v1/comments/sticker-catalog",auth:"none"}),transformResponse:n=>

1z.parse(n),keepUnusedDataFor:7200}),getCommentStickerCategory:e.query({query:({category:n,version:s})=>({url:"/v1/comments/sticker-catalog",params:{category:n,version:s},auth:"none"}),transformResponse:n=>N.parse(n),keepUnusedDataFor:7200}),getCommentStickerRecent:e.query({query:({ids:n,version:s})=>({url:"/v1/comments/sticker-catalog",params:{ids:n.join(","),version:s},auth:"none"}),transformResponse:n=>N.parse(n),keepUnusedDataFor:7200})})}),{useGetCommentStickerIndexQuery:U,useGetCommentStickerCategoryQuery:G,useGetCommentStickerRecentQuery:H}=Q,w={refetchOnMountOrArgChange:7200,refetchOnReconnect:!1};function K(e,n,s){var y,C,j,d,b;const o=O(n,e),c=(y=o.capabilities)==null?void 0:y.stickers,m=U(void 0,{...w,skip:!e||(c==null?void 0:c.allowed)!==!0}),h=_(n),g=[{id:"recent",name:"最近使用"},...(((C=m.currentData)==null?void 0:C.categories)??[]).map(k=>({...k,id:`catalog:${k.id}`}))],f=g.find(k=>k.id===s)??g[0],x=((j=m.currentData)==null?void 0:j.version)??"",t=(c==null?void 0:c.allowed)===!0,l=G({category:f.id.slice(8),version:x},{...w,skip:!e||!t||!x||f.id==="recent"}),u=H({ids:h,version:x},{...w,skip:!e||!t||!x||f.id!=="recent"||!h.length}),i=f.id!=="recent"||h.length>0,a=f.id==="recent"?u:l,v=i?((b=(d=a.currentData)==null?void 0:d.categories[0])==null?void 0:b.items)??[]:[];return{access:c,categories:g,category:{...f,items:v},loading:o.loading||m.isFetching&&!m.currentData||i&&a.isFetching&&!a.currentData,error:o.error||t&&m.isError||t&&i&&a.isError,retry:()=>{o.error&&o.retry(),m.isError&&m.refetch(),t&&i&&a.isError&&a.refetch()}}}function me({open:e,onClose:n,accountScope:s,selected:o,disabled:c,onChange:m}){const h=p.useId(),[g,f]=p.useState("recent"),[x,t]=p.useState(40),l=K(e,s,g),{categories:u,category:i,access:a,loading:v,error:y,retry:C}=l,j=(a==null?void 0:a.allowed)===!0&&!c;return!e&&!o.length?null:r.jsxs("div",{className:"mb-2 text-sm text-[var(--movie-text)]",children:[o.length?r.jsx("div",{className:"mt-2 flex flex-wrap gap-2","aria-label":"已选表情",children:o.map(d=>r.jsxs("button",{type:"button",disabled:c,onClick:()=>m(o.filter(b=>b.id!==d.id)),"aria-label":`移除 ${d.label}`,className:"relative rounded border border-[var(--movie-border-soft)] p-1",children:[r.jsx(I,{item:d}),r.jsx("span",{className:"absolute right-0 top-0 rounded bg-black px-1 text-white",children:"×"})]},d.id))}):null,e?r.jsxs("div",{className:"mt-2 rounded-xl border border-[var(--movie-border-soft)] bg-[var(--movie-surface)] p-2","aria-label":"选择表情",children:[r.jsxs("div",{className:"mb-2 flex items-center justify-between gap-2",children:[r.jsx("span",{className:"font-semibold",children:"表情"}),r.jsx("button",{type:"button",onClick:n,className:"px-2 py-1","aria-label":"关闭表情面板",children:"关闭"})]}),v?r.jsx("p",{role:"status",className:"py-4 text-center",children:"正在加载表情…"}):null,y?r.jsxs("div",{role:"alert",className:"py-2",children:["表情暂时加载失败",r.jsx("button",{type:"button",disabled:v,onClick:C,className:"ml-2 underline",children:"重试"})]}):null,a&&!a.allowed?r.jsx(F,{access:a,onClose:n}):null,a!=null&&a.allowed&&!v&&!y&&u.length===1?r.jsx("p",{className:"py-3",children:"暂无可用表情"}):null,a!=null&&a.allowed&&u.length>1?r.jsxs(r.Fragment,{children:[r.jsx(W,{categories:u,activeId:i.id,panelId:h,onChange:d=>{d!==i.id&&(f(d),t(40))}}),r.jsxs("div",{id:h,role:"tabpanel","aria-labelledby":`${h}-${encodeURIComponent(i.id)}`,className:"mt-2 grid max-h-60 grid-cols-4 gap-2 overflow-y-auto overscroll-contain sm:grid-cols-6",children:[!v&&!y&&!i.items.length?r.jsx("p",{className:"col-span-full py-5 text-center text-[var(--movie-text-subtle)]",children:i.id==="recent"?"暂无使用记录":"暂无可用表情"}):null,i.items.slice(0,x).map(d=>{const b=o.some(k=>k.id===d.id);return r.jsx("button",{type:"button","aria-label":d.label,"aria-pressed":b,disabled:!j,onClick:()=>m(b?[]:[d]),className:`flex min-h-16 items-center justify-center rounded border p-1 disabled:opacity-40 ${b?"border-[var(--movie-primary-strong)]":"border-[var(--movie-border-soft)]"}`,children:r.jsx(I,{item:d})},d.id)})]},i.id),i.items.length>x?r.jsx("button",{type:"button",className:"mt-2 w-full py-2",onClick:()=>t(d=>d+40),children:"显示更多"}):null,r.jsx("p",{className:"mt-2 text-xs text-[var(--movie-text-subtle)]",children:"素材来自萌芽图库"})]}):null]}):null]})}function I({item:e}){const[n,s]=p.useState(!1);return n?r.jsx("span",{className:"text-xs",children:"图片不可用"}):r.jsx("img",{src:e.image.url,alt:e.label,loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",onError:()=>s(!0),className:"size-14 object-contain"})}export{me as CommentStickerPicker};