https://vtvprime.vn/_next/static/chunks/5554.5a85b8162a10882b.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5554],{85554:(e,t,r)=>{r.r(t),r.d(t,{default:()=>y});var n=r(37876),o=r(14232),l=r(85351),u=r.n(l),i=r(83133),c=r(43629),a=r(30955),s=r(59),d=r(42665),m=r(47765);let h="short_audio_state",p=1,v=()=>{try{let e=window.localStorage.getItem(h);if(!e)return null;let t=JSON.parse(e);return{muted:!!t?.muted,volume:"number"==typeof t?.volume?t.volume:p}}catch(e){return null}},f=({muted:e,volume:t=p})=>{try{window.localStorage.setItem(h,JSON.stringify({muted:e,volume:t}))}catch(e){}},y=function({dataShort:e,isFocus:t,type:r}){let[l,h]=(0,o.useState)(!0),[y,_]=(0,o.useState)(!1),[g,w]=(0,o.useState)(1),[E,S]=(0,o.useState)(null),b=(0,o.useRef)(null),x=(0,o.useRef)([]),N=(0,o.useRef)(!1),C=(0,o.useRef)(!1),[L,k]=(0,o.useState)(0),[j,R]=(0,o.useState)(0),{sendFeedback:T}=(0,m.x)();function A(e){if(e.keyCode===a.A.SPACE){let t=document.activeElement;t&&("INPUT"===t.tagName||"TEXTAREA"===t.tagName||t.isContentEditable)||(e.preventDefault(),U())}}(0,o.useEffect)(()=>{let e=v();if(S(null),e){_(e.muted),w(e.volume);return}"desktop"!==(0,s.Ap)()&&_(!0)},[e?.id]),(0,o.useEffect)(()=>{let e=b.current,t=()=>{if(v()?.muted===!0)return void window.removeEventListener("touchstart",t);try{if(e){let t=v();e.muted=!1,e.volume=t?.volume??p,w(e.volume),_(!1),console.log("Sound enabled after user interaction")}}catch(e){console.log("Enable sound failed",e)}window.removeEventListener("touchstart",t)};return window.addEventListener("touchstart",t),()=>{window.removeEventListener("touchstart",t)}},[]),(0,o.useEffect)(()=>{if(!t)return;let r=null,n=document.getElementById(`videoShort${e?.id}`);return x.current=[],N.current=!1,C.current=!1,u().polyfill.installAll(),u().Player.isBrowserSupported()&&(r=new(u()).Player(n),window.playerShortCurrent=n,console.log("Shaka version:",u().Player.version),r.addEventListener("error",t=>{let n=t?.detail?.data?.[0]?.data?.[1];S(n),401===n||403===n?r.unload():console.log({errorCode:n}),(0,c.C)({type:"player_error",message:"Short player error",meta:{content_id:e?.id,content_title:e?.title,content_type:"short",source_url:e?.playURL,error_code:n||t?.detail?.code}}),(0,i.PA)({content_id:e?.id,content_title:e?.title,content_type:"short",error_code:n||t?.detail?.code})}),e?.playURL&&r.load(e?.playURL).then(()=>{n?.addEventListener("loadedmetadata",function(){let t=v(),r=t?t.muted:"desktop"!==(0,s.Ap)(),o=t?.volume??p;n.muted=r,n.volume=o,_(r),w(o),n?.play().then(()=>{h(!0),T({contentType:"SHORT",contentID:e?.id,feedbackType:"CLICK"}).then(()=>console.log("sendFeedback success")).catch(e=>console.error(e)),N.current||(N.current=!0,(0,i.JM)({content_id:e?.id,content_title:e?.title,content_type:"short",duration:e?.duration})),console.log("run video"),setTimeout(()=>{let e=v();if(e?.muted!==!0)try{n.muted=!1,n.volume=e?.volume??o,w(n.volume),_(!1)}catch(e){console.log("Autoplay unmute blocked:",e)}},500)}).catch(e=>{console.log("Autoplay failed:",e)})})}).catch(t=>{console.log({error:t});let r=t.code;if(S(r||!0),(0,c.C)({type:"player_error",message:"Short player load failed",meta:{content_id:e?.id,content_title:e?.title,content_type:"short",source_url:e?.playURL,error_code:r,message:t?.message}}),(0,i.PA)({content_id:e?.id,content_title:e?.title,content_type:"short",error_code:r}),void 0===r)return})),n&&(n.addEventListener("timeupdate",B),n.addEventListener("pause",P)),()=>{r?.unload(),r?.destroy(),S(null),n?.removeEventListener("timeupdate",B),n?.removeEventListener("pause",P),delete window.playerShortCurrent}},[e?.id,t]),(0,o.useEffect)(()=>{if("mobile"!==r)return window.addEventListener("keydown",A),()=>{window.removeEventListener("keydown",A)}},[e]);let I=()=>{if(b.current){if(b.current?.paused){h(!0),b.current.play();return}h(!1),b.current.pause()}},B=()=>{k(b.current?.currentTime),j<=0&&R(b.current?.duration);let t=b.current?.duration||0,r=b.current?.currentTime||0;if(!t||!r)return;let n=Math.floor(r/t*100);[25,50,75].forEach(t=>{n>=t&&!x.current.includes(t)&&(x.current.push(t),(0,i.eE)({content_id:e?.id,content_title:e?.title,content_type:"short",progress_percent:t}))}),!C.current&&t-r<=.3&&(C.current=!0,(0,i.IN)({content_id:e?.id,content_title:e?.title,content_type:"short",watch_time:1e3*r}))},P=()=>{b.current&&!b.current.ended&&(0,i.TK)({content_id:e?.id,content_title:e?.title,content_type:"short",current_time:1e3*b.current.currentTime})},U=()=>{I()};return(0,n.jsxs)(n.Fragment,{children:[!E&&(0,n.jsx)("div",{onClick:U,className:"relative flex justify-center items-center w-full",style:{aspectRatio:"9/16",maxHeight:"100dvh"},children:(0,n.jsx)("video",{className:"z-[5] w-full h-full absolute top-0 left-0",id:`videoShort${e?.id}

1`,autoPlay:!0,loop:!0,muted:y,ref:b,preload:"auto",playsInline:!0})}),E&&(0,n.jsxs)("div",{className:"relative flex flex-col justify-center items-center w-full text-secondary1",style:{aspectRatio:"9/16",maxHeight:"100dvh"},children:[(0,n.jsx)("p",{className:"",children:"Kh\xf4ng thể ph\xe1t nội dung"}),(0,n.jsx)("div",{className:"",children:"Vui l\xf2ng thử lại sau."})]}),(0,n.jsxs)("div",{className:"absolute z-[6] left-4 top-4 flex gap-4 items-center",children:[(0,n.jsx)("div",{className:"shortIconButton",onClick:I,children:l?d._R:d.Ov}),(0,n.jsxs)("div",{className:"shortVolumeControl group",onMouseLeave:e=>{e.currentTarget.querySelector("input")?.blur()},children:[(0,n.jsx)("button",{className:"shortControlButton",onClick:()=>{if(!b.current)return;let e=!b.current.muted;b.current.muted=e,e||0!==b.current.volume||(b.current.volume=p,w(p)),_(e),f({muted:e,volume:b.current.volume||g})},type:"button",children:y?d.oi:d.Fs}),(0,n.jsx)("input",{className:"shortVolumeRange",type:"range",min:"0",max:"1",step:"0.05",value:y?0:g,"aria-label":"Short volume",onChange:e=>{if(!b.current)return;let t=Number(e.target.value);b.current.volume=t,b.current.muted=t<=0,w(t),_(t<=0),f({muted:t<=0,volume:t})}})]})]}),j>0&&(0,n.jsx)("div",{className:"absolute z-20 bottom-0 left-0 w-full h-1 bg-duration-short cursor-pointer",onClick:()=>{if(!b.current)return;let t=document.getElementById(`processBar${e?.id}`).getBoundingClientRect(),r=(event.clientX-t.left)/t.width;b.current.currentTime=j*r},id:`processBar${e?.id}`,children:(0,n.jsx)("div",{className:"bg-brand h-full",style:{width:`${100*L/j||0}%`}})})]})}}}]);