全新popiart网站 react项目重构
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

2 lines
4.8 KiB

import{j as n}from"./markdown-vendor-DnN-_XEd.js";import{u as G,r as s}from"./data-vendor-DOiUz3Tw.js";import{g as q}from"./react-vendor-B8OyfHW2.js";import{F as R,G as z,o as V}from"./index-BKk2Zt4l.js";import"./arco-vendor-Cm-ntj-q.js";const N=20,T=[{title:"image",type:1},{title:"video",type:2},{title:"template",type:4},{title:"character",type:5}];function B(...l){return l.filter(Boolean).join(" ")}function L(l){const i=l;return i?.data?.list??i?.list??[]}function H(l,i){const g=()=>{const r=l?.images??l?.imageList;if(Array.isArray(r)&&typeof r[0]=="string"&&r[0])return r[0];for(const c of["cover","avatar","headImage","headImg","image","thumbnail"]){const o=l?.[c];if(typeof o=="string"&&o.trim())return o.trim()}return null};if(i===2){const r=l?.video;if(typeof r=="string"&&r){const c=l?.cover,o=typeof c=="string"&&c.trim()?c.trim():g()??void 0;return{kind:"video",src:r,poster:o}}}const p=g();return p?{kind:"image",src:p}:null}function A(l){const i=l?.id??l?.assetId;return i==null||i===""?null:String(i)}function Q({tabIdPrefix:l}){const{t:i}=G(),[g,p]=q(),[r,c]=s.useState(1),[o,v]=s.useState([]),[S,j]=s.useState(1),[_,d]=s.useState(!0),[m,F]=s.useState(!1),[y,I]=s.useState(!1),[P,k]=s.useState(null),w=s.useRef(null),x=s.useRef(!1),u=s.useRef(0),E=s.useRef(async()=>{});s.useEffect(()=>{const e=g.get("type");if(e==null)return;const t=Number(e);Number.isFinite(t)&&T.some(a=>a.type===t)&&c(t)},[g]);const h=s.useCallback(e=>({type:r,page:e,pageSize:N}),[r]);s.useEffect(()=>{let e=!1;u.current+=1;const t=u.current;return j(1),d(!0),v([]),F(!0),k(null),R(h(1)).then(a=>{if(e||u.current!==t)return;const f=L(a);v(f),d(f.length>=N)}).catch(a=>{e||u.current!==t||(k(a instanceof Error?a:new Error(String(a))),v([]),d(!1))}).finally(()=>{!e&&u.current===t&&F(!1)}),()=>{e=!0}},[r,h]);const C=s.useCallback(async()=>{if(!_||x.current||m||y)return;x.current=!0,I(!0);const e=u.current,t=S+1;try{const a=await R(h(t));if(u.current!==e)return;const f=L(a);f.length===0?d(!1):(v($=>[...$,...f]),j(t),d(f.length>=N))}catch{u.current===e&&d(!1)}finally{x.current=!1,I(!1)}},[_,m,y,h,S]);E.current=C,s.useEffect(()=>{const e=w.current;if(!e||!_||m)return;const t=new IntersectionObserver(a=>{a[0]?.isIntersecting&&E.current()},{root:null,rootMargin:"200px",threshold:0});return t.observe(e),()=>t.disconnect()},[_,m,o.length]);const M=s.useCallback(e=>{c(e),p(t=>{const a=new URLSearchParams(t);return a.set("type",String(e)),a},{replace:!0})},[p]),b=s.useCallback(async e=>{const t=A(e);if(t==null)return;if(Number(e?.type??r)===4)try{await z(t)}catch{}await V({assetId:t})},[r]),D=s.useCallback(e=>{e.currentTarget.querySelector("video")?.play()},[]),O=s.useCallback(e=>{e.currentTarget.querySelector("video")?.pause()},[]);return n.jsxs("div",{className:"myFavoritePanel",children:[n.jsx("div",{className:"createPage__subRow myFavoritePanel__subRow",children:n.jsx("div",{className:"createPage__filters",role:"group","aria-label":i("pages.create.filtersAria"),"data-active-tab":r,children:T.map(({title:e,type:t})=>n.jsx("button",{type:"button","data-type":t,"data-selected":r===t,"aria-pressed":r===t,className:B("createPage__filterPill",r===t&&"createPage__filterPill_active"),onClick:()=>M(t),children:i(`pages.create.filters.${e}`)},t))})}),n.jsxs("section",{className:"createPage__panel createPage__panel_below_filters",id:`${l}-panel-favorite`,role:"tabpanel","aria-labelledby":`${l}-tab-favorite`,children:[m&&o.length===0?n.jsx("p",{className:"createPage__panelStatus",children:i("common.loading")}):null,P?n.jsx("p",{className:"createPage__panelStatus createPage__panelStatus_error",children:P.message}):null,!m&&!P&&o.length===0?n.jsx("p",{className:"createPage__panelPlaceholder",children:i("pages.create.panels.favorite.placeholder")}):null,o.length>0?n.jsxs(n.Fragment,{children:[n.jsx("ul",{className:"myFavoritePanel__list",role:"list",children:o.map(e=>{const t=A(e)??`row-${r}`,a=H(e,r);return a?.kind==="video"?n.jsx("li",{className:"myFavoritePanel__item",onClick:()=>void b(e),onMouseEnter:D,onMouseLeave:O,children:n.jsx("video",{className:"myFavoritePanel__media",src:a.src,muted:!0,playsInline:!0,loop:!0,preload:"metadata",poster:a.poster,"aria-hidden":!0})},t):a?.kind==="image"?n.jsx("li",{className:"myFavoritePanel__item",onClick:()=>void b(e),children:n.jsx("img",{className:"myFavoritePanel__media",src:a.src,alt:"",loading:"lazy"})},t):n.jsx("li",{className:"myFavoritePanel__item myFavoritePanel__item_empty",onClick:()=>void b(e),children:n.jsx("span",{className:"myFavoritePanel__emptyLabel",children:i("pages.create.panels.favorite.noPreview")})},t)})}),_?n.jsx("div",{ref:w,className:"myFavoritePanel__sentinel","aria-hidden":!0}):null,y?n.jsx("p",{className:"createPage__panelStatus myFavoritePanel__loadMore",children:i("common.loading")}):null]}):null]})]})}export{Q as default};
//# sourceMappingURL=index-BuB1TwF9.js.map