"use strict";(self.webpackChunkhhgDiscoverV1=self.webpackChunkhhgDiscoverV1||[]).push([[3716],{"9pjS":function(e,t,r){r.r(t),r.d(t,{ArticleAudioPlayer:function(){return ArticleAudioPlayer}});var o=r("BGKE"),i=r("+OUp"),a=r("+YhV"),n=r("dDsW"),l=r("/5DW"),d=r("Pvbb"),c=r("johO"),s=r("a5L+"),u=r("AG8C"),p=r("iZSu"),h=r("VnHZ"),m=r("iBNF"),g=r("P+HS"),f=r("HleM"),C=r("0Wzj"),b=r("mhIR"),y=r("vH4S"),w=r("TSYQ"),x=r.n(w),v=r("CWxQ"),A=r("imPi");let k={};function track(e,t){let r=k[e];if(r){var o;o={action:t,post_id:r.postId,duration:r.currentTime,total_duration:r.duration,voice_type:r.voiceType},"dataLayer"in window&&window.dataLayer.push({event:"audio",...o})}}var P=r("rBCA"),Y=r("CL9C");let T=(0,P.A)("div",{target:"ebob4tu0"})("display:flex;min-height:48px;height:48px;background-color:",m.w.colors.primary50,";border-radius:4px;align-items:center;padding:8px 12px;margin-bottom:24px;user-select:none;gap:16px;",Y.M.mbDown,"{background-color:#ffffff;border-radius:0;padding:0;flex-direction:column;min-height:initial;height:initial;gap:4px;margin:0;}"),M=(0,P.A)("img",{target:"ebob4tu1"})("width:24px;height:24px;cursor:pointer;/* margin-left:-2px;*/"),S=(0,P.A)("div",{target:"ebob4tu2"})("&.hidden{display:none;}"),R=(0,P.A)("div",{target:"ebob4tu3"})("flex:1;",Y.M.mbDown,"{max-width:85px;.mobile-navigation-label{width:70px;text-align:center;font-weight:500;font-size:10px;line-height:16px;color:",null===m.w||void 0===m.w?void 0:m.w.colors.gray600,";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;",Y.M.mbDown,"{max-width:70px;}}}"),B=(0,P.A)("div",{target:"ebob4tu4"})("height:4px;width:100%;background-color:",m.w.colors.white,";border-radius:4px;position:relative;overflow:hidden;cursor:pointer;"),D=(0,P.A)("div",{target:"ebob4tu5"})("background-color:",m.w.colors.primaryBase,";position:absolute;top:0;bottom:0;left:0;"),I=(0,P.A)("div",{target:"ebob4tu6"})("display:flex;gap:16px;align-items:center;"),E=(0,P.A)(a.T,{target:"ebob4tu7"})("font-variant-numeric:tabular-nums;white-space:nowrap;"),pad=e=>e<10?"0".concat(e):e.toString(),formatTime=e=>"".concat(pad(Math.floor(e/60)),":").concat(pad(Math.round(e%60))),L=(0,i.forwardRef)(function(e,t){let{percent:r,onClick:i}=e;return(0,o.Y)(B,{ref:t,onClick:i,children:(0,o.Y)(D,{style:{width:"".concat(r,"%")}})})});function AudioTrackProgress(e){let{articleId:t}=e,{percentComplete:r,position:a,seek:n,duration:d}=(0,l.X$)(),c=(0,i.useRef)(null),u=(0,s.a)(),p=(0,i.useMemo)(()=>formatTime(d),[d]),h=(0,i.useMemo)(()=>Math.round(r*d/100),[r,d]),m=(0,i.useCallback)(e=>{let{pageX:r}=e;A.$.measure(()=>{if(c.current){let{x:e,width:o}=c.current.getBoundingClientRect(),i=(r-e)/o*d;n(i);let a=k[t];a&&(a.currentTime=Math.round(i),track(t,"forward"))}})},[d,n,t]);return(0,i.useEffect)(()=>{let e=k[t];e&&(e.currentTime=h)},[h,t]),(0,o.FD)(I,{children:[(0,o.FD)(E,{size:u?"xs":"p3",className:"mobile-navigation-label",children:[formatTime(a)," / ",p]}),!u&&(0,o.Y)(L,{onClick:m,ref:c,percent:r})]})}var audioSidebar=e=>{let{articleId:t,audioPlayerState:r,onClickPlay:a,children:d}=e,c=(0,s.a)(),{formatMessage:u}=(0,n.A)(),{play:p,pause:w}=(0,l.RN)(),{dispatch:A}=(0,i.useContext)(h.B),{position:k,duration:P}=(0,l.X$)(),Y=(0,i.useMemo)(()=>formatTime(P),[P]),T=(0,i.useMemo)(()=>formatTime(k),[k,Y]),M=(0,i.useMemo)(()=>({tooltip:{fontSize:12,padding:"8px",color:m.w.colors.gray600,"::before":{content:'""',position:"absolute",width:"0.5rem",height:"0.5rem",backgroundColor:m.w.colors.white,left:"-3px",top:"50%",transform:"translateY(-50%) rotate(45deg)",zIndex:0}},arrow:{transform:"none !important",top:"0 !important",left:"0 !important",height:"100% !important",width:"100% !important",borderRadius:"4px !important",zIndex:-1,backgroundColor:m.w.colors.white,boxShadow:"1px 0px 11px 0px rgba(0, 0, 0, 0.1)"}}),[m.w]),handleClickPlay=()=>{a(),p(),A({type:v.Q.PLAY_ARTICLE,payload:{id:t}})},S="playing"===r,R="paused"===r,B=S?{icon:(0,o.Y)(f.A,{}),onClick:()=>{w()}}:R?{icon:(0,o.Y)(C.A,{}),onClick:()=>{handleClickPlay()}}:{icon:(0,o.Y)(b.A,{}),onClick:handleClickPlay},D=(0,i.useMemo)(()=>({"data-event-category":c?"Sticky Bottom":"Audio","data-event-action":c?"Audio - article":"Request Article Audio","data-event-label":S?"Paused":R?"Play":"Start"}),[S,R,c]),I=(0,o.FD)(y.Box,{onClick:B.onClick,className:x()("w-10 h-10 p-2 relative cursor-pointer pointer-event-child-none",{"rounded-lg hover:bg-gray100":!c,"bg-gray100":S&&!c}),...D,children:[B.icon,d]}),E=!!["playing","paused"].includes(r)||void 0;return c?(0,o.FD)(y.Box,{className:"flex items-center",children:[I,E&&(0,o.Y)(g.Text,{size:"n1",color:m.w.colors.gray800,children:T})]}):(0,o.Y)(y.Tooltip,{opened:E,position:"right",withArrow:!0,styles:M,label:(0,o.Y)(g.Text,{size:"n1",color:m.w.colors.gray800,children:S||R?T:u({id:"Listen to this article",defaultMessage:"Listen to this article"})}),children:I})},N=r("wA0V");function AudioPlayerControls(e){let{articleId:t,audioPlayerState:r,className:a,onClickPlay:n}=e,{play:d,pause:c}=(0,l.RN)(),{dispatch:u}=(0,i.useContext)(h.B),p=(0,N.m)(),m=(0,s.a)();return(0,o.FD)(S,{className:a,children:[["idle","paused","ended"].includes(r)&&(0,o.Y)(g.Button,{size:"md",type:"button",variant:"primary",id:"test-play",onClick:function(){null==n||n(),d(),u({type:v.Q.PLAY_ARTICLE,payload:{id:t}})},dataEventCategory:"Audio",dataEventAction:"Request Article Audio",dataEventLabel:p,styles:e=>({root:{padding:0,borderRadius:"50%",width:"".concat((0,y.rem)(32)," !important"),height:"".concat((0,y.rem)(32)," !important"),backgroundColor:e.colors.primaryBase,img:{width:"20px",height:"20px"},[e.fn.smallerThan("md")]:{backgroundColor:"initial",width:"".concat((0,y.rem)(24)," !important"),height:"".concat((0,y.rem)(22)," !important")}}}),children:m?(0,o.Y)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,o.Y)("path",{d:"M9.75 9.625V14.375C9.75 14.7417 9.90833 15.0127 10.225 15.188C10.5417 15.3627 10.85 15.3417 11.15 15.125L14.875 12.75C15.1583 12.5833 15.3 12.3333 15.3 12C15.3 11.6667 15.1583 11.4167 14.875 11.25L11.15 8.875C10.85 8.65833 10.5417 8.63733 10.225 8.812C9.90833 8.98733 9.75 9.25833 9.75 9.625ZM12 21.5C10.6833 21.5 9.446 21.25 8.288 20.75C7.12933 20.25 6.125 19.575 5.275 18.725C4.425 17.875 3.75 16.8707 3.25 15.712C2.75 14.554 2.5 13.3167 2.5 12C2.5 10.6833 2.75 9.44567 3.25 8.287C3.75 7.129 4.425 6.125 5.275 5.275C6.125 4.425 7.12933 3.75 8.288 3.25C9.446 2.75 10.6833 2.5 12 2.5C13.3167 2.5 14.5543 2.75 15.713 3.25C16.871 3.75 17.875 4.425 18.725 5.275C19.575 6.125 20.25 7.129 20.75 8.287C21.25 9.44567 21.5 10.6833 21.5 12C21.5 13.3167 21.25 14.554 20.75 15.712C20.25 16.8707 19.575 17.875 18.725 18.725C17.875 19.575 16.871 20.25 15.713 20.75C14.5543 21.25 13.3167 21.5 12 21.5Z",fill:"#2D87F3"})}):(0,o.Y)(M,{width:"24",height:"24",src:"/svg/player-play.svg"})}),"playing"===r&&(0,o.Y)(g.Button,{size:"md",type:"button",onClick:function(){c()},variant:"primary",styles:e=>({root:{padding:"0 !important",[e.fn.largerThan("md")]:{borderRadius:"50%",width:"".concat((0,y.rem)(32)," !important"),height:"".concat((0,y.rem)(32)," !important"),backgroundColor:e.colors.primaryBase,display:"flex",alignItems:"center",gap:(0,y.rem)(4),margin:0,span:{display:"none"},"&:before, &:after":{content:'""',height:"15px",width:"4px",borderRadius:"4px",backgroundColor:e.fn.primaryColor(),marginTop:"1px"}},[e.fn.smallerThan("md")]:{width:"".concat((0,y.rem)(24)," !important"),height:"".concat((0,y.rem)(24)," !important"),backgroundImage:'url(\'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 15.75H10.9V8.25H9.4V15.75ZM13.1 15.75H14.6V8.25H13.1V15.75ZM12 21.5C10.6833 21.5 9.446 21.25 8.288 20.75C7.12933 20.25 6.125 19.575 5.275 18.725C4.425 17.875 3.75 16.8707 3.25 15.712C2.75 14.554 2.5 13.3167 2.5 12C2.5 10.6833 2.75 9.44567 3.25 8.287C3.75 7.129 4.425 6.125 5.275 5.275C6.125 4.425 7.12933 3.75 8.288 3.25C9.446 2.75 10.6833 2.5 12 2.5C13.3167 2.5 14.5543 2.75 15.713 3.25C16.871 3.75 17.875 4.425 18.725 5.275C19.575 6.125 20.25 7.129 20.75 8.287C21.25 9.44567 21.5 10.6833 21.5 12C21.5 13.3167 21.25 14.554 20.75 15.712C20.25 16.8707 19.575 17.875 18.725 18.725C17.875 19.575 16.871 20.25 15.713 20.75C14.5543 21.25 13.3167 21.5 12 21.5Z" fill="%232D87F3"/></svg>\')',backgroundRepeat:"no-repeat",backgroundPosition:"center",backgroundColor:"transparent"}}})})]})}function Player(e){let{url:t,setAudioPlayerState:r,articleId:o}=e,{state:{articlePlayingId:a}}=(0,i.useContext)(h.B),{playing:n,pause:d,duration:c}=(0,l.RN)({src:t,format:"mp3",autoplay:!0,onplay:()=>{r("playing"),track(o,"play")},onpause:()=>{r("paused"),track(o,"pause")},onend:()=>{r("ended"),track(o,"finished")}});return(0,i.useEffect)(()=>{let e="female",t=k[o];c>0&&(!t||t.voiceType!==e)&&(k[o]={postId:o,voiceType:e,duration:c,currentTime:0})},[o,c]),(0,i.useEffect)(()=>{n&&o!==a&&d()},[o,a,n,d]),null}let ArticleAudioPlayerInner=e=>{let{articleId:t="0",articleContent:r="",isPremium:u,onError:p,onLoading:m,isSidebar:g,...f}=e,{formatMessage:C}=(0,n.A)(),b=(0,s.a)(),{state:{isLoggedIn:y}}=(0,i.useContext)(h.B),[w,x]=(0,i.useState)("loading"),v=(0,i.useRef)(null),[A,k]=(0,i.useState)(""),[P,Y]=(0,i.useState)(""),[M,S]=(0,i.useState)(0),B=["generating","loading"].includes(w);if((0,i.useEffect)(()=>{"error"===w&&(null==p||p(v.current)),B&&(null==m||m(!B,v.current))},[w]),(0,i.useEffect)(()=>{var e;let t=document.createElement("div");t.innerHTML=r;let o=(null===(e=t.textContent)||void 0===e?void 0:e.trim().replace(/\[.*\]/g,""))||"";o.length||console.debug("[ArticleAudioPlayer] hidden because of empty article content"),S(o.length)},[r]),(0,i.useEffect)(()=>{fetch("/api/read-article/".concat(t,"?t=").concat(Math.floor(Date.now()/30/60/1e3))).then(e=>e.json()).then(e=>{e.url?(k(e.url),x("idle")):x("error")})},[t]),0===M)return(0,o.Y)(T,{});let onClickPlay=()=>{Y(A)};return g?(0,o.FD)(l.Vw,{children:[(0,o.Y)(audioSidebar,{articleId:Number(t),onClickPlay:onClickPlay,audioPlayerState:w}),P&&(0,o.Y)(Player,{articleId:Number(t),setAudioPlayerState:x,url:P})]}):(0,o.Y)(l.Vw,{children:(0,o.FD)(T,{ref:v,onClickCapture:e=>{u&&!y&&((0,d.YA)(window.location.href),e.stopPropagation())},...f,children:[!B&&"error"!==w&&(0,o.Y)(AudioPlayerControls,{articleId:Number(t),audioPlayerState:w,onClickPlay:onClickPlay}),"error"===w&&(0,o.Y)(a.T,{size:b?"xs":"p3",children:C({id:"player.error",defaultMessage:"Error reading article"})}),(0,o.FD)(R,{children:[B&&(0,o.Y)(c.R,{}),P&&(0,o.Y)(Player,{articleId:Number(t),setAudioPlayerState:x,url:P}),"idle"===w&&(0,o.Y)(a.T,{style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},size:b?"p4":"p3",className:"mobile-navigation-label",children:C({id:"player.readArticle",defaultMessage:"Read Article"})}),["playing","paused","ended"].includes(w)&&(0,o.Y)(AudioTrackProgress,{articleId:Number(t)})]})]})})};function ArticleAudioPlayer(e){let{articleEnableAudio:t,articleTurnOffArticleVoice:r,...a}=e,{locale:n}=(0,u.$)(),l=r||!t,d=(0,i.useMemo)(()=>[p.ne.Vietnam,p.ne.Indonesia].includes(n)&&!l,[n,l]);return d?(0,o.Y)(ArticleAudioPlayerInner,{...a},a.articleId):null}}}]);