@tycoonsystems/tycoon-modules/modules/streaming/watch/WatchPage.js

www.tv.tycoon.systems/documentation

function _extends(){return(_extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var a,c=arguments[e];for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(t[a]=c[a])}return t}).apply(this,arguments)}import React from"react";import dynamic from"next/dynamic";import WatchPageStyles from"./WatchPage.module.scss";import{useRouter}from"next/router";import{checkSignedIn}from"@tycoonsystems/tycoon-modules/utility/onboarding";import{doFetchAuthForStream,checkAuthorization}from"../../utility/streaming";import{ensureAutoPlay,ensureSetSource}from"../../video/player/utility";import{handleInteractMedia,isObjectEmpty}from"../../util";import{initializePlayer,disposePlayer}from"@tycoonsystems/tycoon-modules/streaming/watch/runtime/initialize";import{checkiOS}from"@tycoonsystems/tycoon-modules/util";import{resolveContentDate}from"@tycoonsystems/tycoon-modules/utility/utility/date";import{timelineItemIsExpired}from"./utility";import{buildChapters}from"@tycoonsystems/tycoon-modules/streaming/watch/utility";import{resolveRegionBasedPrice}from"@tycoonsystems/tycoon-modules/utility/ecommerce";import{handleInitiateAction}from"@tycoonsystems/tycoon-modules/utility/utility/social";import apiReq from"@tycoonsystems/tycoon-modules/utility/api/apiReq";const Watch=dynamic(()=>import("/layout/Watch"),{ssr:!1,loading:()=>React.createElement("p",null)}),defaultPoster="img/internal/videoposter.png";let options={autoplay:!0,html5:{vhs:{lowLatency:!0,minPlaylistRefreshIntervalMs:1500}}};const setWindowAuthOnResource=(t,e)=>{try{var a=e||t;console.log("Is Auth",a),window.isAuthorized!==a&&(window.isAuthorized=a)}catch(t){console.log(t)}},defaultOverlayMatrix={q1:[],q2:[],q3:[],q4:[],n:[],s:[],w:[],e:[],np:[],sp:[],wp:[],ep:[],cp:[]},ERROR_ORDER=["src","auth","prompt"],Module=m=>{const r=useRouter()["query"],[y,h]=React.useState(!1),[g,,]=React.useState("main-player"),[a,U]=React.useState(!1),[v,j]=React.useState({action:"page_loaded",trying:"play_video",src:""}),[t,z]=React.useState(""),[e,H]=React.useState(!1),[c,i]=React.useState(void 0),[w,W]=React.useState({}),[f,B]=React.useState({});var[,,]=React.useState(null);const[R,F]=React.useState({}),[b,_]=React.useState(defaultPoster),[s,o]=React.useState(!1),[q,n]=React.useState(!1),[E,k]=React.useState(!1),[l,D]=React.useState(!1),[S,P]=React.useState(!1);var[,,]=React.useState([]);const[J,L]=React.useState(!1),[A,O]=React.useState(null),[V,$]=React.useState(!1),[K,Y]=React.useState({}),[T,G]=React.useState(structuredClone(defaultOverlayMatrix)),[Q,X]=React.useState({offset:0}),[Z,d]=React.useState(null),[tt,et]=React.useState(!1);let x=React.useRef();React.useRef(),React.useRef(),React.useRef();const I=void 0!==c?c:e,C=(console.log(c),setWindowAuthOnResource(null,I),m.watchData),at=()=>{m._LocalEventEmitter.dispatch("video_set_chat_state",{})},[ct,rt]=React.useState([{innerHTML:"chat",className:"material-icons VideoPlayer_ChatBtn",id:"player-btn-chat",btnEvent:at}]),it=(React.useEffect(()=>{let t=[{innerHTML:"chat",className:"material-icons VideoPlayer_ChatBtn",id:"player-btn-chat",btnEvent:at}];t=m?.appendButtons?t.push(m.appendButtons):m.overrideButtons??t,rt(t)},[m?.appendButtons,m?.overrideButtons]),t=>{G(t);var e="overlay-"+(g?"player-"+g:null);console.log("Channel",e,t),m._LocalEventEmitter.dispatch(e,{dispatch:"update",data:t})}),M=(m._LocalEventEmitter.unsubscribe("watch_overlay_events"),m._LocalEventEmitter.subscribe("watch_overlay_events",a=>{if("update"===a?.dispatch){let e=structuredClone(T);if("set"===a.operation&&a?.where&&a?.data?.section){let t;e[a.data.section]&&-1<(c=e[a.data.section].findIndex(t=>t[a.where]==a.value))&&(t=!0,e[a.data.section][c]=a.data),t||e[a.data.section].push(a.data)}else{var c;"del"===a.operation&&a?.where&&a?.data?.section?e[a.data.section]&&-1<(c=e[a.data.section].findIndex(t=>t[a.where]==a.value))&&e[a.data.section].splice(c,1):"reset"===a.operation&&(e=structuredClone(defaultOverlayMatrix))}it(e)}}),t=>{B(t),console.log("Prompt",t);var e=m?.useMatrixSection??"np";m._LocalEventEmitter.dispatch("watch_overlay_events",{dispatch:"update",operation:isObjectEmpty(t)?"del":"set",data:Object.assign({section:e,domain:"streamLeadPrompt",sectionType:"text"},t),where:"domain",value:"streamLeadPrompt"})}),st=(g&&(m._LocalEventEmitter.unsubscribe(g),m._LocalEventEmitter.subscribe(g,t=>{if(t&&t.dispatch){try{"function"==typeof x?.current?.muted&&x?.current?.muted()!==V&&$(x.current.muted())}catch(t){}if("refetchAuth"===t.dispatch)console.log("Refetch Auth!"),m._LocalEventEmitter.dispatch("watch_overlay_events",{dispatch:"update",operation:"reset"}),i(void 0),ut(!0,!0);else if("processError"===t.dispatch)console.log("Handle Process Error",t),"no_video"===t?.event?f.lead&&"No video"===f?.lead||x?.current&&x.current.src&&M(t.prompt):"progress_good"===t?.event&&f?.type&&-1<["src"].indexOf(f.type)&&M({});else if("updateAuth"===t.dispatch){if(mt(),!m?.watchData||isObjectEmpty(m.watchData))return null;!I&&x?.current?(u={type:"auth",lead:"Not Authorized",description:"You have not been authorized to watch the stream"},console.log("auth req",w,R),x.current.pause(),R?.products?.[0]&&(T?.cp?.find(t=>"authProduct"===t.domain)||(d={product:R.products[0],section:"cp",type:"display",sectionType:"product",domain:"authProduct",lead:`Purchase ticket to watch "${m?.watchData?.title??"Stream"}"`,description:""+m?.watchData?.description,ticketLead:""+(R.products[0]?.name??"Ticket"),ticketDescription:R.products[0]?.detailmeta?.description??null,media:R.products[0]?.images?.[0]?.name?m.cdn.static+"/"+R.products[0].images[0].name:"",price:resolveRegionBasedPrice(m,R.products[0]?.styles?.[0]??null)},m._LocalEventEmitter.dispatch("watch_overlay_events",{dispatch:"update",operation:"set",data:d,where:"domain",value:"authProduct"}))),w&&(w.password&&(u.password="The stream requires a password"),w.tags)&&w.dates&&(0<w.tags.length||0<w.dates.length)&&(u.tags="The stream has tags that authorize viewership of the stream. Please purchase tickets from the users shop to watch",u.tagsList=w.tags.map(t=>t)+" "+w.dates.map(t=>t)),(!f?.type||f?.type&&ERROR_ORDER.indexOf(f.type)>ERROR_ORDER.indexOf(u.type))&&M(u)):I||M({})}else if("attemptAutoPlay"===t.dispatch){if(I&&x?.current&&""!==x?.current.src()){console.log("Attempt Play",x.current,v,"Authorized",I);try{window?.userInteracted||x.current.muted(!0)}catch(t){}window?.imaPlaying||x.current.play().catch(t=>{console.log(t,t.message)})}}else if("ensurePosterUpdated"===t.dispatch)m?.watchData&&m?.watchData?.thumbtrack&&m?.watchData?.thumbtrack[0]&&m?.cdn?.static&&(d=m.cdn.static+"/thumbtrack/"+m.watchData.thumbtrack[0],b!==d)&&_(d);else if("playerHealth"===t.dispatch)console.log("Player Health",m.cdn,x.current,x.current?.paused(),A),!window?.imaAdManagerDidLoad&&m?.noAds||(A?.message?.match("Playback cannot continue")&&x?.current?.paused()||x?.current?.errorDisplay?.el()?.innerHTML.match("Playback cannot continue")||x?.current?.errorDisplay?.el()?.innerHTML.match("The media could not be loaded")&&S?(O(null),x.current.src({}),ensureSetSource(x.current,v,C,m.cdn.static,!0,()=>{try{window?.userInteracted||x.current.muted(!0)}catch(t){}!window?.imaPlaying&&I&&(console.log("Attempting to play! Player Health Check"),x.current.play())})):x?.current&&m?.cdn?.static?ensureSetSource(x.current,v,C,m.cdn.static):x.current||J||((u=N("player-"+g))?(k(!0),x.current=u):(disposePlayer("player-"+g),L(!0),setTimeout(()=>{console.log("Fire Reload"),m._LocalEventEmitter.dispatch(g,{dispatch:"rebuildPlayer"})},50))));else if("rebuildPlayer"===t.dispatch)console.log("Reload Player"),L(!1),dt();else if("timelineHealth"===t.dispatch){var e,a,c,s,o,n,l,d=x?.current?.tech_?.hasStarted_&&2<x?.current?.readyState,u=(console.log(x?.current,d),y&&!E&&g&&m?.cdn?.static&&window?.videojs&&(window?.imaAdManagerDidLoad||!m?.noAds)&&!d&&(D(!0),x.current=initializePlayer(m,m.watchData,v,"player-"+g,options,x,ct,ot,nt,k,pt,P,S,lt)),structuredClone(Q));(!u?.lastUpdate||u.lastUpdate&&u.lastUpdate<(new Date).getTime()-15e3)&&(u.lastUpdate=(new Date).getTime(),u.offset=null==u.offset?u.offset=0:u.offset+1,X(u));const h=N("player-"+g)?.currentTime();let r=structuredClone(T),i=!1;h&&(Object.entries(u).map(a=>{a?.[1]?.map&&a[1].map((t,e)=>{timelineItemIsExpired(t,h)&&(i=!0,r[a[0]].splice(e,1))})}),m?.watchData?.timeline?.map)&&buildChapters(m.watchData).map(e=>{var t,a=structuredClone(e),a=("clip"===a.type&&(a.sectionType="img",a.media=m?.cdn?.static+"/thumbtrack/"+a.media,a.expiry=a.startOffset+10),timelineItemIsExpired(a,h)),c=e.section;c&&(t=r[c].findIndex(t=>t.id===e.id),a&&-1<t?(i=!0,r[c].splice(t,1)):a||-1!==t||(i=!0,r[c].push(e)))}),i&&it(r),"Live"===C?.__typename&&(d=N("player-"+g),u=document.getElementById(`player-${g}_html5_api`),console.log(u),d)&&(e=structuredClone(K),console.log("P",d),console.log("Tech",d.tech(),"Vhs",d.tech().vhs),p=d?.currentTime(),(!e.lastTime||p&&e?.lastTime&&e.lastTime!=p)&&(e.lastTime=p),a=d.tech().vhs,c=(d?.tech()?.vhs?.playlists?.media_)?.segments,Array.isArray(c)&&(o=(s=c.reduce((t,e)=>e?.end??t+(e?.duration??0),0))<p+8,n=s<p+4,l=c?.[2]?.end&&p<c[2].end-22,console.log("Current Time",p,"Near End",o,"Near End Critical",n,"Falling Behind",l,"Available Segment",s,"Playback Rate",u?.playbackRate,"Segments",c),u)&&(o?n?(.8<u.playbackRate&&(console.log("Slowing down critical playback rate",u.playbackRate),u.playbackRate=u.playbackRate-.05),(!e.lastFetch||e?.lastFetch&&e.lastFetch+3<(new Date).getTime())&&(console.log("Fetching more stream",a,d,d.seekable()),e.lastFetch=(new Date).getTime())):.9<u.playbackRate&&(console.log("Slowing down playback rate",u.playbackRate),u.playbackRate=u.playbackRate-.05):(u.playbackRate<1&&(console.log("Speeding up playback rate",u.playbackRate),u.playbackRate=u.playbackRate+.025),l?u.playbackRate<1.25&&(u.playbackRate=u.playbackRate+.025):1<u.playbackRate&&(u.playbackRate=u.playbackRate-.025)),1!==u.playbackRate)&&.98<u.playbackRate&&u.playbackRate<1.02&&(u.playbackRate=1),Y(e))}else{var p;"fetchalgo"===t.dispatch&&(console.log(m._loggedIn),m?._loggedIn?.identifier&&et(!0),p=m?.watchData?.id??r?.v)&&st([[{type:"userp",id:m?._loggedIn?.identifier},{type:"like"},{type:"video",id:p}],[{type:"userp",id:m?._loggedIn?.identifier},{type:"dislike"},{type:"video",id:p}]],p)}}})),async(t,e)=>{var t=await apiReq("/p/getverticesandedges",{definitions:t});console.log("R",t,m),t?.data?.map&&(t=t.data.map(t=>t?Object.entries(t)?.map(t=>t?.[1]?JSON.parse(t?.[1]?.match(/^(.*?)(::)(.*)$/)?.[1]):{}):"").find(t=>t?.[1]&&("like"===t[1]?.label||"dislike"===t[1]?.label)&&t?.[2]?.properties?.id===e),console.log(t),t?.[1]?.label)&&d(t[1]?.label??null)}),N=t=>{try{if(window?.videojs?.players[t])return window.videojs.players[t]}catch(t){}return null},ot=(t,e,a)=>{"update"===e?"progress"!==a||t?.target?.player?.error_&&null!=t?.target?.player?.error_&&t?.target?.player?.error_?.message||m._LocalEventEmitter.dispatch(g,{dispatch:"processError",event:"progress_good",prompt:{}}):t?.target?.player?.error_&&(console.log("Incoming error state",t.target.player.error_,f),t.target.player.error_?.message.match(/No compatible source/))&&m._LocalEventEmitter.dispatch(g,{dispatch:"processError",event:"no_video",prompt:{type:"src",lead:"No video",description:"This stream is unavailable right now"}}),O({time:(new Date).getTime(),message:t?.message??""})},nt=t=>{console.log("Ended",t)},lt=t=>{console.log("Played",t)},dt=t=>{t=Object.assign(options,{force:t,html5:{vhs:{lowLatency:!0,minPlaylistRefreshIntervalMs:1500}}});!window?.imaAdManagerDidLoad&&m?.noAds||(x.current=initializePlayer(m,m.watchData,v,"player-"+g,t,x,ct,ot,nt,k,pt,P,S,lt))},ut=(React.useEffect(()=>{m?._LocalEventEmitter&&(m._LocalEventEmitter.unsubscribe("video_set_chat_state"),m._LocalEventEmitter.subscribe("video_set_chat_state",t=>{console.log("Open",s),o(!s)}))},[m._LocalEventEmitter,s]),async(t,e)=>{a&&!t||m?.watchData?.id&&(t||!R.stream||R.stream&&R.stream!==m.watchData.id)&&(U(!0),t=await doFetchAuthForStream(m.apiUrl,m.domainKey,m.watchData.id,checkSignedIn),console.log("do fetch auth",t),t)&&(F({stream:m.watchData.id,allowed:t.allowed||!1,meta:t.meta,products:t?.products??[]}),e)&&setTimeout(()=>{x?.current&&!window?.imaPlaying&&x.current.play()},250)}),pt=(React.useEffect(()=>{ut()},[m.watchData,R,a]),async(t,e)=>{var a,c;I&&(c={},r?.time&&(c.time=r.time),(c=c)?.time&&t?.currentTime&&t.currentTime(c.time),a="live"==(e="Live"==(c=e??m?.watchData)?.__typename?"live":"static")||checkiOS()?"hls":"mpd",c)&&m?.cdn?.static&&(e="static"==e?m.cdn.static+"/video/"+c[a]:""+c?.meta?.channel?.playbackUrl)&&(t.src({src:e,type:"hls"==a?"application/x-mpegURL":"application/dash+xml"}),await ensureAutoPlay(t.play,t),setTimeout(()=>{m._LocalEventEmitter.dispatch(g,{dispatch:"attemptAutoPlay"})},1))});let u=g;React.useEffect(()=>{console.log("did mount",y,E,g,window.videojs);try{disposePlayer("player-"+g)}catch(t){}const t=u;setTimeout(()=>{m._LocalEventEmitter.dispatch(t,{dispatch:"fetchalgo"})},250);let e=[setInterval(()=>{m._LocalEventEmitter.dispatch(t,{dispatch:"updateAuth"})},2e3),setInterval(()=>{m._LocalEventEmitter.dispatch(t,{dispatch:"playerHealth"})},15e3),setInterval(()=>{m._LocalEventEmitter.dispatch(t,{dispatch:"timelineHealth"})},1500)];return()=>{e.forEach(clearInterval)}},[]),React.useEffect(()=>{y||h((new Date).getTime())},[y]);const ht=()=>{f?.type&&-1<["prompt","auth"].indexOf(f.type)&&(console.log("Reset prompt"),M({}))},mt=(React.useEffect(()=>{let t;var e;"Live"==C?.__typename&&C?.id?(o(!0),C?.meta?.channel?.playbackUrl&&v.src!==C.meta.channel.playbackUrl&&(t=C.meta.channel.playbackUrl)):"Video"==C?.__typename&&(o(!1),e=checkiOS()?"hls":"mpd",C)&&C[e]&&m?.cdn?.static&&(e=m.cdn.static+"/video/"+C[e],v.src!==e)&&(t=e),t&&v.src!==t&&((e={...v}).src=t,j(e),handleInteractMedia(m,m.watchData,e.trying))},[m.watchData,x.current,v?.src,C]),React.useEffect(()=>{v?.src&&t!==v.src&&z(v.src)},[x?.current,v?.src,I,e,t,C,f]),x?.current&&x?.current.src()!==v?.src&&C&&(p="live"==("Live"==C?.__typename?"live":"static")||checkiOS()?"hls":"mpd",x.current.src({src:t,type:"hls"==p?"application/x-mpegURL":"application/dash+xml"})),()=>{var t,e,a;m.watchData&&(t=checkAuthorization(m.watchData,R,m,ht,I),console.log("Auth!",t),(e=m?.watchData?.meta?.streamSettings??m?.watchData?.meta)&&JSON.stringify(e)!==JSON.stringify(w)&&W(e),console.log("Auth",t,"Is Auth",I,c),I!==t)&&(void 0===c||!1!==c)&&(e=m.watchData?.meta?.channel&&m.watchData.meta?.channel?.playbackUrl&&v?.src===m.watchData.meta.channel.playbackUrl,a=m?.watchData?.hls||m?.watchData?.mpd,e||a)&&(H(t),t&&ht(),setWindowAuthOnResource(t,I),console.log("Auth",t))});React.useEffect(()=>{mt()},[v,I,e,m?.watchData,x?.current,R,m?._loggedIn?.identifier]),React.useEffect(()=>{!tt&&m?._loggedIn?.identifier&&g&&setTimeout(()=>{m._LocalEventEmitter.dispatch(g,{dispatch:"fetchalgo"})},250)},[m?._loggedIn?.identifier,tt,g]);React.useEffect(()=>{var t;m?.watchData&&m?.watchData?.thumbtrack&&m?.watchData?.thumbtrack[0]&&m?.cdn?.static&&(t=m.cdn.static+"/thumbtrack/"+m.watchData.thumbtrack[0],b!==t)&&(_(t),setTimeout(()=>{m?._LocalEventEmitter&&m._LocalEventEmitter.dispatch(g,{dispatch:"ensurePosterUpdated"})},250))},[m?.watchData,m?.cdn?.static,g,b]);var p={id:m?.watchData?.id,authorData:m?.watchData?.authorData??{},donateTo:m?.watchData?.author??"",date:m?.watchData?.publish?resolveContentDate(m.watchData.publish):"",title:m?.watchData?.title??"",description:m?.watchData?.description??"",tags:m?.watchData?.tags??[],relevantTicket:R,liked:"like"===Z,disliked:"dislike"===Z},yt=(x?.current&&(E||k(!0),l||D(!0)),m.menuConfig&&m.menuConfig.height?m.menuConfig.height+2+"px":"35px"),gt=(console.log("WatchPage",x?.current,I,v,"Relevant Data",m.watchData,R,T,f),React.useCallback(async t=>{try{var e,a,c="true"==t?.currentTarget?.getAttribute("existing")?null:t?.currentTarget?.getAttribute("action"),r=t?.currentTarget?.getAttribute("m"),i=t?.currentTarget?.getAttribute("usetype"),s=(console.log(i,c),-1<["video","live"].indexOf(i?.toLowerCase())?d(c):-1<["post"].indexOf(i)&&m._LocalEventEmitter.dispatch("watch_comment",{dispatch:"refetch",index:r,status:c}),await handleInitiateAction(t,{m:r,useType:i,identifier:m?._loggedIn?.identifier}));console.log("doHandleInitiateAction",s),"success"===s?.status&&(-1<["video","live"].indexOf(i?.toLowerCase())?s?.data?.r?(e=JSON.parse(s?.data?.r?.match(/^(.*?)(::)(.*)$/)?.[1]))&&d(e?.label):d(null):-1<["post"].indexOf(i)&&(s?.data?.r?(a=JSON.parse(s?.data?.r?.match(/^(.*?)(::)(.*)$/)?.[1]))&&m._LocalEventEmitter.dispatch("watch_comment",{dispatch:"refetch",index:r,status:a?.label}):m._LocalEventEmitter.dispatch("watch_comment",{dispatch:"refetch",index:r,status:null})))}catch(t){console.log(t)}}));return React.createElement("div",{className:m.className+" WatchPage_Container"},React.createElement(Watch,_extends({},m,{chatState:s,handleSetMobileStyleConfigs:t=>{q!==t&&n(t)},menuHeight:yt,currentPoster:b,streamLeadPrompt:f,WatchPageStyles:WatchPageStyles,watchMeta:p,playerInitialized:E,playerVisible:l,playerName:u?"player-"+u:null,setMobileStyleConfigs:n,enforceAuth:c,setEnforceAuth:i,muted:V,handleSetMuted:t=>{x?.current?.muted&&(t=!!t,x.current.muted(t),$(t))},intent:v,overlayMatrix:T,overlayMatrixState:Q,isAuthorized:I,handleInitiateAction:gt,useRoom:C?.id})))};export default Module;