https://nerd-plus.com/_next/static/chunks/3273.286962c3d5431a2b.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3273],{2479:function(e,t,n){n.d(t,{w:function(){return u}});var s=n(1527),l=n(8687),r=n(9304),i=n(9830),a=n(5561),o=n(5924),c=n(959),d=n(7099);let u=e=>{let{onChange:t,value:n,options:u,isLoading:m,buttonLabel:x}=e;return(0,s.jsx)(l.R,{disabled:m,onChange:t,value:n,children:(0,s.jsxs)("div",{className:"relative inline-block text-left",children:[(0,s.jsxs)(l.R.Button,{className:"inline-flex w-full justify-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-indigo-500",children:[x("function"==typeof n?n():n),m?(0,s.jsx)(d.a,{className:"m-auto",size:"md",theme:"white",variant:"dots"}):(0,s.jsx)(a.Z,{"aria-hidden":"true",className:"-mr-1 h-5 w-5 text-white"})]}),(0,s.jsx)(r.u,{as:c.Fragment,enter:"transition ease-out duration-100",enterFrom:"transform opacity-0 scale-95",enterTo:"transform opacity-100 scale-100",leave:"transition ease-in duration-75",leaveFrom:"transform opacity-100 scale-100",leaveTo:"transform opacity-0 scale-95",children:(0,s.jsx)(l.R.Options,{className:"absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",children:u.map(e=>(0,s.jsx)(l.R.Option,{className:e=>{let{active:t}=e;return(0,o.Z)("relative cursor-pointer select-none py-2 pl-7 pr-4 md:pl-8",t?"bg-indigo-100 text-indigo-900":"text-gray-900")},value:e.id,children:t=>{let{selected:n}=t;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("span",{className:"block truncate text-sm ".concat(n?"font-medium":"font-normal"),children:e.name}),n?(0,s.jsx)("span",{className:"absolute inset-y-0 left-0 flex items-center pl-2 text-indigo-600",children:(0,s.jsx)(i.Z,{"aria-hidden":"true",className:"h-4 w-4 md:h-5 md:w-5"})}):null]})}},e.id))})})]})})}},7675:function(e,t,n){n.d(t,{H:function(){return Q}});var s=n(1527),l=n(5966),r=n(9327),i=n(959),a=n(2479),o=n(7099),c=n(3e3),d=n(2123),u=n(9304),m=n(1690),x=n(9924),p=n(7579),h=n(1710),f=n(2323),_=n(2001),j=n(4066),g=n(4167);let v=(0,g.B)("\n  mutation InsertLike($object: likes_insert_input!) {\n    insert_likes_one(\n      object: $object\n      on_conflict: { constraint: likes_user_id_comment_id_key }\n    ) {\n      id\n      user_id\n      comment_id\n    }\n  }\n"),y=(0,g.B)("\n  mutation DeleteLike($user_id: String!, $comment_id: uuid!) {\n    delete_likes(\n      where: { user_id: { _eq: $user_id }, comment_id: { _eq: $comment_id } }\n    ) {\n      returning {\n        id\n      }\n    }\n  }\n");var w=n(499);let N=()=>{let e=(0,j.D)({mutationFn:e=>w.L.request(v,e)}),t=(0,j.D)({mutationFn:e=>w.L.request(y,e)});return{insertLike:e,deleteLike:t,isLoading:e.isPending||t.isPending}},b=e=>{let t=(0,i.useRef)(null),n=(0,i.useCallback)(n=>{t.current&&clearTimeout(t.current),t.current=setTimeout(()=>{n()},e)},[e]);return n};var k=n(6839),C=n(7397);let q=e=>{let{comment_id:t,like_count:n,is_like:s}=e,[l,r]=(0,i.useState)(s),[a,o]=(0,i.useState)(n),{insertLike:c,deleteLike:d,isLoading:u}=N(),m=b(500),x=(0,C.e)(e=>e.user),p=(0,k.j1)(e=>e.setIsOpenModal),h=async()=>{if((null==x?void 0:x.anonymous)||!x){p(!0);return}r(e=>!e),o(e=>l?e-1:e+1),u||(l?m(async()=>{await d.mutateAsync({user_id:x.id,comment_id:t})}):m(async()=>{await c.mutateAsync({object:{comment_id:t}})}))};return{isLike:l,likeCount:a,handleLike:h}},z=e=>{let{is_like:t,like_count:n,comment_id:l}=e,{handleLike:r,isLike:i,likeCount:a}=q({is_like:t,like_count:n,comment_id:l});return(0,s.jsxs)("button",{className:"group flex items-center",onClick:r,children:[(0,s.jsx)(_.Z,{className:"h-5 w-5 transition-transform group-active:scale-90 ".concat(i?"fill-pink-500 text-pink-500":"text-gray-500 group-hover:text-pink-500")}),(0,s.jsx)("span",{className:"ml-1 text-sm ".concat(i?"text-pink-500 ":"text-gray-500 group-hover:text-pink-500"),children:a})]})};var S=n(8671);let L=()=>{let e=(0,S.r)(e=>e.focusRef),t=(0,S.H)(e=>e.setInputComment);return{handleClick:n=>{let{reply_to:s,replied_to_commenter_name:l}=n;t({reply_to:s,replied_to_commenter_name:l}),e()}}};var P=n(7621);let $=e=>{var t,n,l,r,i;let{reply:a,original_id:o}=e,{handleClick:d}=L(),u=(0,C.e)(e=>e.user);return(0,s.jsxs)("li",{className:"flex w-full",children:[(0,s.jsx)("figure",{className:"mr-2",children:(null==u?void 0:u.isDefaultPhoto)&&(null==u?void 0:u.id)===(null===(t=a.user)||void 0===t?void 0:t.id)?(0,s.jsx)(h.E,{alt:"avatar",className:"rounded-full object-contain",height:32,src:null!==(r=null==u?void 0:u.photo_url)&&void 0!==r?r:"",width:32}):(0,s.jsx)(x.q,{size:"sm",user_id:null!==(i=null===(n=a.user)||void 0===n?void 0:n.id)&&void 0!==i?i:"",user_name:a.commenter_name})}),(0,s.jsxs)("div",{className:"flex-1",children:[(0,s.jsxs)("div",{className:"w-full",onClick:()=>d({reply_to:a.id,replied_to_commenter_name:a.commenter_name}),role:"button",children:[(0,s.jsxs)(f.x,{className:"my-1 flex flex-col",size:"xs",children:[(0,s.jsxs)("span",{className:"inline-flex items-center gap-x-1.5 rounded-full text-gray-500",children:[a.commenter_name,a.user_id===(null==u?void 0:u.id)&&(0,s.jsx)(c.Z,{className:"h-3 w-3 text-green-500"})]}),a.replied_to_commenter_name&&o!==a.reply_to&&(0,s.jsxs)("span",{className:"text-blue-500",children:["@",a.replied_to_commenter_name,"に返信"]})]}),(0,s.jsx)(f.x,{className:"break-words text-sm",component:"p",children:a.content})]}),(0,s.jsxs)(f.x,{className:"flex items-center justify-between space-x-2",color:"dimmed",component:"div",size:"xs",children:[(0,s.jsxs)("div",{className:"flex items-center justify-center",children:[(0,s.jsx)("span",{className:"text-dimmed",children:(0,P.PK)(a.created_at)}),(0,s.jsx)(p.z,{className:"border-none p-0 text-xs text-black",onClick:()=>d({reply_to:a.id,replied_to_commenter_name:a.commenter_name}),size:"xs",children:"返信"})]}),(0,s.jsx)(z,{comment_id:a.id,is_like:a.is_like||!1,like_count:(null===(l=a.like

1s_aggregate.aggregate)||void 0===l?void 0:l.count)||0})]})]})]})};var D=n(6736);let F=(0,g.B)("\n  query GetReplies(\n    $_reply_to: uuid!\n    $cursor: timestamptz!\n    $reply_limit: Int!\n  ) {\n    replies(\n      args: {\n        _reply_to: $_reply_to\n        cursor: $cursor\n        reply_limit: $reply_limit\n      }\n    ) {\n      content\n      work_id\n      user_id\n      id\n      episode_id\n      created_at\n      commenter_name\n      reply_to\n      replied_to_commenter_name\n      user {\n        anonymous\n        id\n      }\n      is_like\n      likes_aggregate {\n        aggregate {\n          count\n        }\n      }\n    }\n  }\n"),R={cursor:null},Z=async e=>{let{reply_to:t,pageParam:n}=e,{cursor:s}=n||R,l=await w.L.request(F,{_reply_to:t,cursor:s,reply_limit:10});return l},I=(e,t)=>(0,D.N)({queryKey:["replies",{reply_to:e}],queryFn:t=>{let{pageParam:n}=t;return Z({reply_to:e,pageParam:n})},getNextPageParam:e=>{let t=e.replies.at(-1);if(t&&!(e.replies.length<10))return{cursor:t.created_at}},defaultPageParam:R,enabled:t&&!!e,staleTime:3e5}),E=e=>{let{reply_count:t,reply_id:n}=e,[s,l]=(0,i.useState)(!1),{data:r,hasNextPage:a,fetchNextPage:o,isFetchingNextPage:c,isFetching:d}=I(n,s),[u,m]=(0,i.useState)(0),[x,p]=(0,i.useState)(1),h=(0,i.useCallback)(async()=>{if(!r&&!s){l(!0),await o(),m(e=>e+10);return}if(s&&u<t){await o(),m(e=>e+10),p(e=>e+1);return}if(u>=t){l(!1),m(0),p(1);return}s||(l(!0),m(e=>e+10))},[r,s,u,t,o]),f=(0,i.useCallback)(()=>t?s?u<t?"".concat(t-u,"件をもっと表示する"):"返信を閉じる":"".concat(t,"件の返信を表示"):"返信を表示",[t,s,u]),_=(0,i.useCallback)(()=>{l(!1),m(0),p(1)},[]),j=(0,i.useMemo)(()=>{if(!(null==r?void 0:r.pages))return[];let e=null==r?void 0:r.pages.slice(0,x).flatMap(e=>e.replies);return e},[null==r?void 0:r.pages,x]);return{isOpen:s,clickHandler:h,controlLabel:f,data:j,hasNextPage:a,fetchNextPage:o,replyCount:u,showCount:x,closeClickHandler:_,isLoading:d||c}},O=e=>{let{reply_count:t,reply_id:n,content:l}=e,{clickHandler:r,controlLabel:a,isOpen:c,data:x,closeClickHandler:p,isLoading:h}=E({reply_id:n,reply_count:t,content:l});return(0,s.jsx)(s.Fragment,{children:0!==t&&(0,s.jsxs)(d.p,{children:[(0,s.jsx)(u.u,{as:i.Fragment,show:c,children:(0,s.jsxs)(d.p.Panel,{as:"ul",className:"mt-4 space-y-4",static:!0,children:[null==x?void 0:x.map(e=>(0,s.jsx)($,{original_id:n,reply:e},e.id)),h&&(0,s.jsx)("div",{className:"flex w-full",children:(0,s.jsx)(o.a,{className:"mx-auto",size:"lg",variant:"dots"})})]})}),!h&&(0,s.jsxs)("div",{className:"my-2 flex w-full justify-between",children:[(0,s.jsxs)(d.p.Button,{className:"flex w-max items-center justify-end space-x-1 p-0 text-xs font-semibold text-indigo-500 hover:bg-transparent md:text-sm",onClick:r,children:[a(),(0,s.jsx)("span",{children:(0,s.jsx)(m.Z,{className:"h-4 w-4 transform transition-transform ".concat("返信を閉じる"===a()?"":"rotate-180 ")})})]}),(0,s.jsxs)("button",{className:"flex items-center space-x-1  text-xs font-bold text-indigo-500 md:text-sm ".concat("返信を閉じる"!==a()&&c?"":"hidden"),onClick:p,children:[(0,s.jsx)("span",{children:"閉じる"}),(0,s.jsx)(m.Z,{className:"h-4 w-4"})]})]})]})})};var A=n(4051),B=n(1117),T=n(5980);let K=e=>{let{children:t}=e,{reset:n}=(0,A._)(),l=(0,T.t)(e=>e.onShow);return(0,s.jsx)(B.SV,{FallbackComponent:e=>{let{resetErrorBoundary:t}=e;return t(),null},onError:()=>{l({title:"データの取得に失敗しました。",message:"通信環境の良い場所で再度お試しください。",type:"error"}),n()},children:t})},M=(0,i.memo)(e=>{var t,n,l,r,a,d;let{comment:u}=e,m=(0,i.useRef)(null),{handleClick:_}=L(),j=(0,C.e)(e=>e.user);return(0,s.jsxs)("li",{className:"flex w-full",children:[(0,s.jsx)("figure",{className:"mr-2",children:(null==j?void 0:j.isDefaultPhoto)&&(null==j?void 0:j.id)===(null==u?void 0:null===(t=u.user)||void 0===t?void 0:t.id)?(0,s.jsx)(h.E,{alt:"avatar",className:"rounded-full object-contain",height:38,src:null!==(r=null==j?void 0:j.photo_url)&&void 0!==r?r:"",width:38}):(0,s.jsx)(x.q,{user_id:null!==(a=null===(n=u.user)||void 0===n?void 0:n.id)&&void 0!==a?a:"",user_name:u.commenter_name})}),(0,s.jsxs)("div",{className:"flex-1",children:[(0,s.jsxs)("div",{className:"w-full",onClick:()=>_({reply_to:u.id,replied_to_commenter_name:u.commenter_name}),role:"button",children:[(0,s.jsx)(f.x,{className:"my-1 text-gray-500",size:"xs",children:(0,s.jsxs)("span",{className:"inline-flex items-center gap-x-1.5 rounded-full text-gray-500",children:[u.commenter_name,u.user_id===(null==j?void 0:j.id)&&(0,s.jsx)(c.Z,{className:"h-4 w-4 text-green-500"})]})}),(0,s.jsx)(f.x,{ref:(null!==(d=u.reply_count)&&void 0!==d?d:-1)>0?m:null,className:"break-words text-base",children:u.content})]}),(0,s.jsxs)(f.x,{className:"flex items-center justify-between space-x-2",color:"dimmed",component:"div",size:"xs",children:[(0,s.jsxs)("div",{className:"flex",children:[(0,s.jsx)("span",{className:"text-dimmed",children:(0,P.PK)(u.created_at)}),(0,s.jsx)(p.z,{className:"border-none p-0 text-black",onClick:()=>_({reply_to:u.id,replied_to_commenter_name:u.commenter_name}),size:"xs",textClassName:"font-bold text-xs",children:"返信"})]}),(0,s.jsx)(z,{comment_id:u.id,is_like:u.is_like||!1,like_count:(null===(l=u.likes_aggregate.aggregate)||void 0===l?void 0:l.count)||0})]}),(0,s.jsx)(K,{children:(0,s.jsx)(i.Suspense,{fallback:(0,s.jsx)("div",{className:"mt-1 flex w-full",children:(0,s.jsx)(o.a,{className:"mx-auto",variant:"dots"})}),children:(0,s.jsx)(O,{content:m,reply_count:u.reply_count||0,reply_id:u.id})})},"".concat(u.id,"-reply"))]})]})});var H=n(5924);let G=e=>{var t,n;let{comment:l}=e,r=(0,C.e)(e=>e.user);return(0,s.jsxs)("li",{className:(0,H.Z)("flex w-full animate-pulse opacity-30"),children:[(0,s.jsx)("figure",{className:"mr-2",children:(null==r?void 0:r.isDefaultPhoto)?(0,s.jsx)(h.E,{alt:"avatar",className:"rounded-full object-contain",height:38,src:null!==(t=null==r?void 0:r.photo_url)&&void 0!==t?t:"",width:38}):(0,s.jsx)(x.q,{user_id:null!==(n=null==r?void 0:r.id)&&void 0!==n?n:"",user_name:l.commenter_name})}),(0,s.jsx)("div",{className:"flex-1",children:(0,s.jsxs)("div",{className:"w-full",children:[(0,s.jsx)(f.x,{className:"my-1 text-gray-500",size:"xs",children:l.commenter_name}),(0,s.jsx)(f.x,{className:" break-words py-1 text-base",children:l.content})]})})]})};var V=n(9282);let W=e=>{let t=(0,V.S)({filters:{mutationKey:e,status:"pending"},select:e=>({submittedAt:e.state.submittedAt,error:e.state.error,variables:e.state.variables,status:e.state.status})});return t},J=[{id:"new",name:"新しい順"},{id:"popular",name:"いいね順"}],Q=(0,i.forwardRef)((e,t)=>{let{data:n,hasNextPage:i,isLoading:c,refetchHandler:d,mutateKey:u}=e,m=(0,C.e)(e=>e.user),x=W(u),p=(0,r.useRouter)();return m?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{className:"flex w-full flex-1 flex-col gap-y-1.5 p-2 md:p-4",children:[(0,s.jsxs)("div",{className:"flex max-w-full flex-col items-center justify-center gap-y-1 break-words text-xs text-dimmed md:text-sm",children:[(0,s.jsxs)("div",{children:["チャットは",(0,s.jsx)("button",{className:"text-indigo-600 underline hover:text-indigo-500",onClick:()=>p.replace({query:{mode:"chat",slug:p.query.slug}}),children:"こちら"})]}),(0,s.jsx)("span",{children:"右下のボタンを押すと、最新のコメントを読み込めます"})]}),(0,s.jsx)("div",{className:"flex items-center justify-end space-x-4 px-2",children:(0,s.jsx)(a.w,{buttonLabel:e=>"new"===e?"新しい順":"いいね順",isLoading:c,onChange:e=>{p.replace({query:{mode:"comment",order:e,slug:p.query.slug}})},options:J,value:"popular"===p.query.order?"popular":"new"})}),(null==n?void 0:n.length)===0&&0===x.length&&(0,s.jsx)("p",{className:"flex max-w-full flex-1 items-center justify-center break-words text-sm text-dimmed",children:"まだコメントはありません"}),(0,s.jsxs)("ul",{children:[0!==x.length&&(null==x?void 0:x.map(e=>e.variables.reply_to?null:(0,s.jsx)(G,{comment:e.variables},e.submittedAt))),null==n?void 0:n.map(e=>(0,s.jsx)(M,{comment:e},e.id))]}),(0,s.jsx)("div",{ref:t,className:"flex h-20 items-center justify-center text-center  ".concat(i?"block":"hidden"),children:(0,s.jsx)(o.a,{size:"xl",variant:"dots"})})]}),(0,s.jsx)("div",{className:"sticky bottom-20 flex w-full justify-end px-2 lg:px-3",children:(0,s.jsx)("div",{className:"grid h-10 w-10 place-items-center  roun

1ded-full  bg-indigo-600  shadow-md shadow-indigo-400 transition-transform active:translate-y-1 lg:right-14",children:c?(0,s.jsx)(o.a,{size:"xl",theme:"white"}):(0,s.jsx)("button",{"aria-label":"最新のコメントを読み込む",className:"grid h-full w-full place-items-center text-white ",onClick:d,children:(0,s.jsx)(l.Z,{className:"h-6 w-6 stroke-white"})})})})]}):(0,s.jsx)(o.a,{className:"m-auto",size:"xl",variant:"dots"})})},3600:function(e,t,n){n.d(t,{c:function(){return i},g:function(){return a}});var s=n(7212),l=n(4067),r=n(499);let i=async e=>{let{episode_id:t,cursor:n}=e,i=await r.L.request(s.bw,{limit:100,episode_id:t,cursor:null!=n?n:new Date().toISOString(),order_by:{created_at:l.Lq.Desc}});return i},a=async e=>{let{work_id:t,cursor:n}=e,i=await r.L.request(s.KW,{limit:100,work_id:t,cursor:null!=n?n:new Date().toISOString(),order_by:{created_at:l.Lq.Desc}});return i}},8016:function(e,t,n){n.d(t,{e:function(){return s}});let s=()=>({cursor:new Date().toISOString(),likes_cursor:1e5})}}]);