https://vtvprime.vn/_next/static/chunks/pages/content/short/[id]-a43de45354569990.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4586],{31612:(e,t,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/content/short/[id]",function(){return r(97122)}])},77762:(e,t,r)=>{"use strict";r.d(t,{A:()=>l});var n=r(52639),s=r(79350),i=r(30700);let o=(0,s.J1)`
2  query Short($id: ID!, $protocolType: ProtocolType!) {
3    short(id: $id) {
4      id
5      ageRating
6      title
7      hashTags
8      duration
9      playURL(clientType: WEBSITE, protocolType: $protocolType)
10      shareURL
11      likeCount
12      isLiked
13      saveCount
14      isSaved
15      shareCount
16      commentCount
17      commentEnabled
18      viewCount
19      imageURL(imageName: SHORT_POSTER, screenScale: X2)
20      errorCode
21      studioProfile {
22        id
23        title
24        profileImageURL(imageName: STUDIO_PROFILE, screenScale: X2)
25        followerCount
26        isVerified
27        followed
28        shareURL
29        errorCode
30      }
31      description {
32        html
33      }
34      content {
35        id
36        ... on Collection {
37          id
38          collectionType
39          title
40        }
41        ... on Episode {
42          id
43          seriesID
44          offset
45          title
46        }
47        ... on Series {
48          id
49          title
50        }
51        ... on VOD {
52          id
53          contentType
54          title
55          series {
56            id
57            episodeOffset
58          }
59        }
60      }
61    }
62  }
63`;async function l(e){let t=(0,i.l)()||"DASH",{data:r,error:s,loading:l}=await n.client.query({query:o,variables:{id:e,protocolType:t}});return{data:r?.short,error:s,loading:l}}},97122:(e,t,r)=>{"use strict";r.r(t),r.d(t,{__N_SSP:()=>S,default:()=>b});var n=r(37876),s=r(78379),i=r(14503),o=r(89099),l=r(58744),a=r(14232),c=r(77762),u=r(63071),d=r(50582),h=r(37847),f=r(67415),m=r(22085);function p({params:e}){let t=(0,o.useRouter)(),[r,s]=(0,a.useState)(""),[i,v]=(0,a.useState)([]),[x,g]=(0,a.useState)(0),[y,E]=(0,a.useState)(!1),k=(0,a.useRef)(null);(0,a.useEffect)(()=>{y&&r&&j(i,r)},[y]),(0,a.useEffect)(()=>(b(),()=>{(0,f.RG)()}),[e?.id]),(0,a.useEffect)(()=>{S((0,f.CX)())},[k.current]);let S=e=>{g(e)};async function b(){let t=(0,f.mP)();if(t?.length>0)return void v(t||[]);let{data:r}=await (0,c.A)(e?.id),n=(0,m.xZ)("short")?.splice(0,30),{data:i,nextCursor:o}=await (0,u.A)("",n);E(!1),v([r,...i||[]]),s(o)}let j=async(e,t)=>{let r=(0,m.xZ)("short")?.splice(0,30),{data:n,nextCursor:i}=await (0,u.A)(t,r);E(!1),v([...e,...n||[]]),s(i)},L=(0,a.useCallback)((e,t)=>e>=t-1&&e<=t+3?"show":"cleanup",[x]),N=(0,d.uh)({onSwipedUp:()=>{g(e=>Math.min(e+1,i.length-1)),x>=i?.length-5&&E(!0),x>=i?.length-1&&h.Ew.warring({message:"Bạn đ\xe3 xem hết nội dung"})},onSwipedDown:()=>{g(e=>Math.max(e-1,0))},preventScrollOnSwipe:!0,trackMouse:!0});return(0,a.useEffect)(()=>{document.getElementById(`short-${x}`)?.scrollIntoView({behavior:"smooth"})},[x]),(0,a.useEffect)(()=>{let e=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&g(Number(e.target.getAttribute("data-index")))})},{threshold:.8}),t=k.current?.querySelectorAll(".short-item");return t?.forEach(t=>e.observe(t)),()=>e.disconnect()},[]),(0,n.jsxs)("div",{className:"w-[100vw] h-[100svh] text-primary overflow-hidden",children:[i?.length>0&&(0,n.jsx)("div",{className:"h-[100svh] overflow-y-scroll snap-y snap-mandatory",ref:k,...N,children:i?.map((e,t)=>(0,n.jsx)("div",{className:"w-full h-[100svh] snap-start",id:`short-${t}`,children:(0,n.jsx)(l.A,{typeDevice:"mobile",isFocus:x===t,dataShort:e,status:L(t,x)})},t))}),(0,n.jsx)("div",{className:"absolute left-4 top-4 z-[100]",onClick:()=>t.push("/"),children:w})]})}let w=(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"19",height:"20",viewBox:"0 0 19 20",fill:"none",children:(0,n.jsx)("path",{d:"M15.0418 10.0002H3.9585M3.9585 10.0002L9.50016 15.5418M3.9585 10.0002L9.50016 4.4585",stroke:"#F4F4F8",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})});var v=r(30955),x=r(28340);function g({params:e}){let[t,r]=(0,a.useState)(""),[s,i]=(0,a.useState)([]),[o,d]=(0,a.useState)(!1),[h,p]=(0,a.useState)(0),w=(0,a.useRef)(null),k=(0,a.useRef)(0),S=(0,a.useRef)(0),b=(0,a.useRef)(0),j=(0,a.useRef)(),L=(0,a.useRef)(!1),{handleRecordReadContent:N}=(0,x.e)(),C=()=>{let e=document.getElementById("itemShort0");return!!e&&(S.current=e.clientHeight+16,b.current=0===k.current?0:k.current*S.current,w.current&&(w.current.style.transform=`translate3d(0, -${b.current}px, 0)`),!0)};(0,a.useEffect)(()=>{let e=document.getElementById("footerApp");if(e)return e.style.display="none",C(),()=>{e.style.display="block"}},[w,s]),(0,a.useEffect)(()=>{let e=()=>{C()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),(0,a.useEffect)(()=>{o&&t&&T(s,t)},[o]),(0,a.useEffect)(()=>(window.addEventListener("keydown",_),()=>{window.removeEventListener("keydown",_)}),[s]),(0,a.useEffect)(()=>(A(),()=>{(0,f.RG)()}),[e?.id]),(0,a.useEffect)(()=>

63{if(!s?.length)return;let e=requestAnimationFrame(()=>{C(),R((0,f.CX)())});return()=>cancelAnimationFrame(e)},[s?.length]);let R=e=>{p(e),k.current=e,b.current=0===k.current?0:e*S.current,w.current&&(w.current.style.transform=`translate3d(0, -${b.current}px, 0)`)};async function A(){let t=(0,f.mP)();if(t?.length>0)return void i(t||[]);let{data:n}=await (0,c.A)(e?.id),s=(0,m.xZ)("short")?.splice(0,30);console.log({dataShorts:s});let{data:o,nextCursor:l}=await (0,u.A)("",s);d(!1),i([n,...o||[]]),r(l)}async function T(e,t){let n=(0,m.xZ)("short")?.splice(0,30),{data:s,nextCursor:o}=await (0,u.A)(t,n);d(!1),i([...e||[],...s||[]]),r(o)}function _(e){e.keyCode===v.A.UP?(e.preventDefault(),F()):e.keyCode===v.A.DOWN&&(e.preventDefault(),M())}let F=()=>{L.current||(k.current=Math.max(0,k.current-1),p(k.current),b.current=0===k.current?0:k.current*S.current,w.current&&(w.current.style.transform=`translate3d(0, -${b.current}px, 0)`),L.current=!0,j.current=null,clearTimeout(j.current),j.current=setTimeout(()=>{L.current=!1},500))},M=()=>{L.current||(b.current=k.current>=s?.length-1?b.current:b.current+S.current,k.current=Math.min(s?.length-1,k.current+1),N({type:"short",vods:[],posts:[],shorts:[{id:s?.[k.current]?.id,contentDuration:s?.[k.current]?.duration/1e3||1,watchDuration:window.playerShortCurrent?.currentTime||0}]}),p(k.current),w.current&&(w.current.style.transform=`translate3d(0, -${b.current}px, 0)`),k.current>=s?.length-4&&d(!0),L.current=!0,j.current=null,clearTimeout(j.current),j.current=setTimeout(()=>{L.current=!1},500))},D=(0,a.useCallback)((e,t)=>e>=t-1&&e<=t+3?"show":"cleanup",[h]);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"flex flex-col items-center transition-all duration-300 w-full",ref:w,children:s?.map((e,t)=>(0,n.jsx)("div",{className:"w-fit my-2",id:`itemShort${t}`,children:(0,n.jsx)(l.A,{typeDevice:"desktop",isFocus:h===t,dataShort:e,status:D(t,h),handleNext:M,handlePrevious:F,hasNext:t<s.length-1,hasPrevious:t>0})},t))}),s?.length>0&&(0,n.jsxs)("div",{className:"hidden md:block fixed right-4 top-[50%] translate-y-[-50%]",children:[(0,n.jsx)("div",{className:"p-[17px] rounded-full cursor-pointer bg-bright border border-solid border-bright2 my-4",style:{display:0===h?"none":"block"},onClick:F,children:y}),(0,n.jsx)("div",{className:"p-[17px] rounded-full cursor-pointer bg-bright border border-solid border-bright2 my-4",style:{display:h>=s?.length-1?"none":"block"},onClick:M,children:E})]})]})}let y=(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,n.jsx)("path",{d:"M12 19V5M12 5L5 12M12 5L19 12",stroke:"#F4F4F8",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),E=(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,n.jsx)("path",{d:"M12 5V19M12 19L19 12M12 19L5 12",stroke:"#F4F4F8",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})});var k=r(59),S=!0;function b({dataShort:e,params:t}){let[r,s]=(0,a.useState)("");return(0,a.useEffect)(()=>{s((0,k.Ap)())},[]),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.A,{imageURL:e?.imageURL,query:{id:e?.id,type:"short"},title:e?.title}),""===r?null:"mobile"===r?(0,n.jsx)("section",{className:"w-[100vw] h-[100svh] text-primary overflow-hidden",children:(0,n.jsx)(p,{params:t})}):(0,n.jsx)("section",{className:"w-full h-[calc(100svh-48px)] sm:h-[calc(100svh-72px)] shortContainer overflow-hidden mt-[48px] sm:mt-[72px] text-primary",children:(0,n.jsx)(g,{dataShort:e,params:t})})]})}b.Layout=s.PE}},e=>{e.O(0,[5352,8407,9698,636,6593,8792],()=>e(e.s=31612)),_N_E=e.O()}]);