(self.webpackChunksteamui=self.webpackChunksteamui||[]).push([[3834],{86721:e=>{e.exports={BroadcastPlayerLite:"SAxf3Rqn792kM6c4U_vx5",BroadcastPlayerLiteVideo:"yCd0zjymzfw3HkVm-1YwX",BroadcastContext:"_3TnYLKMweBMIC69qFU6OJj",BroadcastPlaceholderImg:"_3hxn99MT14hFUCrUp6zbsf"}},72993:(e,t,s)=>{"use strict";s.r(t),s.d(t,{BroadcastDetails:()=>te,LinkOverlay:()=>oe,default:()=>W});var o=s(34629),i=s(89193),n=s(41230),l=s(63696),a=s(31084),r=s(45328),d=s(23024),u=s(5859),m=s(65016),c=s(88750),p=s(27337),h=s(69342),S=s(59848),v=s(29381),g=s(50376),C=s(43397),b=s(79769),E=s(90765),_=s(54644),w=s(46108),M=s(34428),y=s(49412),k=s(51115),f=s(72476),D=s(21866),O=s(59715),V=s(86721),P=s.n(V),T=s(26853);function B(){return l.createElement("div",{className:"STV_ReplayBanner"},(0,w.we)("#DASHPlayerControls_IsReplay"))}const I=(0,n.PA)((e=>{let t=e.video;if(t&&(t.IsBroadcastClip()||t.IsBroadcastVOD()))return null;let s=d.fK.Loading,o="";if(t){s=t.GetBroadcastState(),o=t.GetBroadcastStateDescription();let e=t.IsBuffering();s==d.fK.Unlocking&&(s=d.fK.Loading,o=""),s==d.fK.Ready&&e&&(s=d.fK.Loading,o="")}if(t&&s!=d.fK.Error&&t.GetUserInputNeeded())return null;if(s==d.fK.Ready)return null;let i=s==d.fK.Loading;return l.createElement("div",{className:"BroadcastVideoWatchState",style:{filter:"hue-rotate(40deg)"}},i&&l.createElement(T.t,null),!i&&l.createElement("div",{className:"BroadcastVideoWatchState_Text"},o))}));class N extends l.Component{OnClick(){d.BroadcastWatchStore.UserInputClickVideo(this.props.video)}render(){return l.createElement("div",{className:"BroadcastVideoUserInputNeeded",onClick:this.OnClick},l.createElement(g.jGG,null),l.createElement("span",null,(0,w.we)("#DASHPlayerControls_ClickToPlay")))}}(0,o.Cg)([k.oI],N.prototype,"OnClick",null);let L=class extends l.Component{constructor(e){super(e)}HideStats(){this.props.closeStats&&this.props.closeStats()}render(){let e=this.props.stats;return l.createElement("div",{className:"dash_video_stats"},l.createElement("button",{className:"dash_stat_close_button",onClick:this.HideStats},l.createElement(g.sED,null)),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_BufferingResolution")," ",l.createElement("span",{className:"videoStatsValue"},e.GetBufferingResolutionToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_PlaybackResolution")," ",l.createElement("span",{className:"videoStatsValue"},e.GetPlaybackResolutionToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_HtmlResolution")," ",l.createElement("span",{className:"videoStatsValue"},e.GetHTMLVideoResolutionToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_ContentServer")," ",l.createElement("span",{className:"videoStatsValue"},e.GetContentServerToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_StallEvents")," ",l.createElement("span",{className:"videoStatsValue"},e.GetStalledEventsToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_FailedDownloads")," ",l.createElement("span",{className:"videoStatsValue"},e.GetFailedDownloadsToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_TimeToFirstFrame")," ",l.createElement("span",{className:"videoStatsValue"},e.GetTimeToFirstFrameToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_PlaybackRate")," ",l.createElement("span",{className:"videoStatsValue"},e.GetPlaybackRateForDisplay())),l.createElement(R,{stats:e}))}};(0,o.Cg)([k.oI],L.prototype,"HideStats",null),L=(0,o.Cg)([n.PA],L);let R=class extends l.Component{constructor(e){super(e)}createBufferedRange(e){let t=this.props.stats,s=[],o=e?"vidbuf":"audbuf",i=e?t.GetNumBufferedVideoRanges():t.GetNumBufferedAudioRanges();if(i>0)for(let n=0;n<i;++n){let i=(0,w.we)(e?"#DASHPlayerStats_VideoBufferRange":"#DASHPlayerStats_AudioBufferRange",n),a=e?t.GetBufferedVideoSegmentForDisplay(n):t.GetBufferedAudioSegmentForDisplay(n);s.push(l.createElement("div",{key:o+n},i," ",l.createElement("span",{className:"videoStatsValue"},a)))}else{let t=(0,w.we)(e?"#DASHPlayerStats_VideoNoRangeInformation":"#DASHPlayerStats_AudioNoRangeInformation");s.push(l.createElement("div",{key:o+"none"},t))}return s}render(){let e=this.props.stats;return l.createElement("div",{className:"dash_video_quick_stats"},l.createElement("div",null,(0,w.we)("#DASHPlayerStats_BytesReceived")," ",l.createElement("span",{className:"videoStatsValue"},e.GetBytesReceivedToDisplay())),this.props.stats.BHasFrameInformation()&&l.createElement("div",null,(0,w.we)("#DASHPlayerStats_DroppedFrames")," ",l.createElement("span",{className:"videoStatsValue"},e.GetDroppedFramesToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_VideoBuffered")," ",l.createElement("span",{className:"videoStatsValue"},e.GetVideoBufferedToDisplay()," ")),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_AudioBuffered")," ",l.createElement("span",{className:"videoStatsValue"},e.GetAudioBufferedToDisplay()," ")),this.createBufferedRange(!0),this.createBufferedRange(!1),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_BandwidthRequired")," ",l.createElement("span",{className:"videoStatsValue"},e.GetBandwidthRequiredToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_BandwidthVideo")," ",l.createElement("span",{className:"videoStatsValue"},e.GetBandwithVideoToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_BandwidthNums")," ",l.createElement("span",{className:"videoStatsValue"},e.GetBandwidthStatsToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_DownloadNums")," ",l.createElement("span",{className:"videoStatsValue"},e.GetDownloadTimeStatsToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_ActiveDownloads")," ",l.createElement("span",{className:"videoStatsValue"},e.GetActiveDownloadsToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_VideoDownloadProgress")," ",l.createElement("span",{className:"videoStatsValue"},e.GetVideoDownloadProgressToDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_DroppingFrames")," ",l.createElement("span",{className:"videoStatsValue"},e.GetPersistentFrameDropsForDisplay())),l.createElement("div",null,(0,w.we)("#DASHPlayerStats_CurrentFPS")," ",l.createElement("span",{className:"videoStatsValue"},e.GetCurrentFPSForDisplay())))}};R=(0,o.Cg)([n.PA],R);var A=s(32263);class G extends l.Component{m_elSettingsButton;m_SettingsButtonPos;m_elClickListener;m_elSettingsPanel;m_elSubtitlesButton=l.createRef();m_elSubtitlesPanel=l.createRef();m_SubtitlesButtonPos;constructor(e){super(e),this.state={bSettingsOpen:!1,bSubtitlesOpen:!1}}OnVideoControlClick(e){this.setState({bSettingsOpen:!this.state.bSettingsOpen}),this.m_SettingsButtonPos=[this.m_elSettingsButton.offsetLeft,this.m_elSettingsButton.offsetTop],this.m_elClickListener=e.currentTarget.ownerDocument.defaultView,this.m_elClickListener.addEventListener("mouseup",this.OnMouseUp,!0)}OnSubtitlesClick(e){this.setState({bSubtitlesOpen:!this.state.bSubtitlesOpen}),this.m_SubtitlesButtonPos=[this.m_elSubtitlesButton.current.offsetLeft,this.m_elSubtitlesButton.current.offsetTop],this.m_elClickListener=e.currentTarget.ownerDocument.defaultView,this.m_elClickListener.addEventListener("mouseup",this.OnMouseUp,!0)}OnMouseUp(e){this.m_elClickListener.removeEventListener("mouseup",this.OnMouseUp,!0),(0,_.id)(this.m_elSettingsPanel,e.target)||this.setState({bSettingsOpen:!1}),(0,_.id)(this.m_elSubtitlesPanel.current,e.target)||this.setState({bSubtitlesOpen:!1})}bindSettingsButton(e){this.m_elSettingsButton=e}BindSettingsPanel(e){this.m_elSettingsPanel=e}OnShowStats(e){this.props.onShowStats(e),this.setState({bSettingsOpen:!this.state.bSettingsOpen})}render(){let e=!1,t=!1;const{video:s,actions:o}=this.props;let i,n,a=0,r=l.createElement("div",{key:"separator",className:"settingsMenuSeparator"});if(this.state.bSettingsOpen&&(e=!0,i=this.props.video.GetVideoRepresentations(),n=i.map((e=>l.createElement(A.n,{key:e.id,onClick:()=>{this.props.video.SetVideoRepresentation(e),this.setState({bSettingsOpen:!this.state.bSettingsOpen})},bChecked:e.selected},e.displayName))),n.push(r),n.push(l.createElement(A.D,{key:"statsToggle",onClick:this.OnShowStats},(0,w.we)("#Broadcast_VideoContext_ToggleStats"),"\t")),a=0-(21*n.length+32)),this.state.bSubtitlesOpen){t=!0,n=[],n.push(l.createElement(A.n,{key:"none",onClick:()=>{this.props.video.SetSubtitles(null),this.setState({bSubtitlesOpen:!this.state.bSubtitlesOpen})},className:"NoSubtitles",bChecked:!1},(0,w.we)("#Broadcast_None")));for(let e=0;e<this.props.video.ListSubtitles().length;e++){const t=this.props.video.ListSubtitles()[e];n.push(l.createElement(A.n,{key:t.language,onClick:()=>{this.props.video.SetSubtitles(t.language),this.setState({bSubtitlesOpen:!this.state.bSubtitlesOpen})},bChecked:"showing"===t.mode},t.label))}a=-292}const d=this.props.video.BHasPlayer()&&this.props.video.BHasTimedText();return l.createElement("div",{className:"STV_BroadcastSettings"},d&&l.createElement("div",{className:"videoControlButton"+(d?" ClosedCaptionsActive":""),onClick:this.OnSubtitlesClick,ref:this.m_elSubtitlesButton},l.createElement(g.N8C,null)),l.createElement("div",{className:"videoControlButton VideoSettings "+(e?" VideoSettingsOpen":""),onClick:this.OnVideoControlClick,ref:this.bindSettingsButton},l.createElement(g.wB_,null)),l.createElement(H,{video:s}),o&&o.map((e=>l.createElement("div",{key:e.key,className:"videoControlButton videoControlFitWidth"},e))),e&&l.createElement("div",{ref:this.BindSettingsPanel,className:"STV_BroadcastSettingsPanel",style:{left:this.m_SettingsButtonPos[0],top:this.m_SettingsButtonPos[1],marginTop:a}},l.createElement("div",{className:"STV_BroadcastSettingsMenuItems"},n)),t&&l.createElement("div",{ref:this.m_elSubtitlesPanel,className:"STV_BroadcastSettingsPanel SubtitlesMenu",style:{maxHeight:"260px",left:this.m_SubtitlesButtonPos[0],top:this.m_SubtitlesButtonPos[1],marginTop:a}},l.createElement("div",{className:"STV_BroadcastSettingsMenuItems"},n)))}}(0,o.Cg)([k.oI],G.prototype,"OnVideoControlClick",null),(0,o.Cg)([k.oI],G.prototype,"OnSubtitlesClick",null),(0,o.Cg)([k.oI],G.prototype,"OnMouseUp",null),(0,o.Cg)([k.oI],G.prototype,"bindSettingsButton",null),(0,o.Cg)([k.oI],G.prototype,"BindSettingsPanel",null),(0,o.Cg)([k.oI],G.prototype,"OnShowStats",null);let H=class extends l.Component{constructor(e){super(e),(0,i.Gn)(this)}k_nHideSliderTimeout=1500;m_bShowSlider=true;m_schHideSlider=new b.LU;m_bChildDragging=!1;m_bMouseOver=!1;componentWillUnmount(){this.m_schHideSlider.Cancel()}ToggleMute(){let e=this.props.video,t=e.IsMuted();e.SetMute(!t),e.GetVolume()<.01&&e.SetVolume(.5)}OnMouseEnter(e){this.m_bShowSlider=!0,this.m_bMouseOver=!0,this.m_schHideSlider.Cancel()}OnMouseLeave(e){this.m_bMouseOver=!1,this.ScheduleHide()}OnChildDrag(e){this.m_bChildDragging=e,this.ScheduleHide()}ScheduleHide(){this.m_bMouseOver||this.m_bChildDragging||this.m_schHideSlider.Schedule(this.k_nHideSliderTimeout,(()=>this.m_bShowSlider=true))}render(){let e=this.props.video,t=e.IsMuted(),s=100*e.GetVolume(),o="videoControlButton";s>65?o+=" HighestVolume":s>45?o+=" HighVolume":s<46&&s>24?o+=" MedVolume":s<25&&(o+=" LowVolume");let i="BroadcastVolumeControl";return this.m_bShowSlider&&(i+=" ShowVolumeSlider"),t&&(i+=" muted"),l.createElement("div",{className:i,onMouseEnter:this.OnMouseEnter,onMouseLeave:this.OnMouseLeave},l.createElement("div",{className:"BroadcastVolumeControl_FixedLayout"},l.createElement("div",{className:o,onClick:this.ToggleMute},l.createElement(g.fSs,null)),l.createElement(F,{video:e,onDrag:this.OnChildDrag})))}};(0,o.Cg)([i.sH],H.prototype,"m_bShowSlider",void 0),(0,o.Cg)([k.oI],H.prototype,"ToggleMute",null),(0,o.Cg)([k.oI],H.prototype,"OnMouseEnter",null),(0,o.Cg)([k.oI],H.prototype,"OnMouseLeave",null),(0,o.Cg)([k.oI],H.prototype,"OnChildDrag",null),H=(0,o.Cg)([n.PA],H);let F=class extends l.Component{constructor(e){super(e),(0,i.Gn)(this)}m_elSlider=null;m_nVolumeStartOfDrag=0;OnMouseDown(e){let t=e.currentTarget;this.m_elSlider=t,this.m_nVolumeStartOfDrag=this.props.video.GetVolume(),this.SetVolumeWithCoord(t,e.clientX),t.ownerDocument.defaultView.addEventListener("mousemove",this.OnMouseMove),t.ownerDocument.defaultView.addEventListener("mouseup",this.OnMouseUp),this.props.onDrag(!0)}OnMouseMove(e){this.m_elSlider&&this.SetVolumeWithCoord(this.m_elSlider,e.clientX)}OnMouseUp(e){if(!this.m_elSlider)return;this.SetVolumeWithCoord(this.m_elSlider,e.clientX);let t=this.props.video;t.IsMuted()&&t.SetVolume(this.m_nVolumeStartOfDrag),this.m_elSlider.ownerDocument.defaultView.removeEventListener("mousemove",this.OnMouseMove),this.m_elSlider.ownerDocument.defaultView.removeEventListener("mouseup",this.OnMouseUp),this.m_nVolumeStartOfDrag=0,this.m_elSlider=null,this.props.onDrag(!1)}SetVolumeWithCoord(e,t){let s=e.getBoundingClientRect(),o=y.Fu(t,s.left,s.right,0,1),i=y.OQ(o,0,1),n=this.props.video;n.SetMute(o<.01),n.SetVolume(i)}render(){let e=this.props.video,t=100*e.GetVolume();e.IsMuted()&&(t=0);let s={left:`${t}%`},o={width:`${t}%`};return l.createElement("div",{className:"BroadcastVolumeSlider",onMouseDown:this.OnMouseDown},l.createElement("div",{className:"BroadcastVolumeSlider_Track"}),l.createElement("div",{className:"BroadcastVolumeSlider_Fill",style:o}),l.createElement("div",{className:"BroadcastVolumeSlider_Thumb",style:s}))}};(0,o.Cg)([k.oI],F.prototype,"OnMouseDown",null),(0,o.Cg)([k.oI],F.prototype,"OnMouseMove",null),(0,o.Cg)([k.oI],F.prototype,"OnMouseUp",null),(0,o.Cg)([i.XI],F.prototype,"SetVolumeWithCoord",null),F=(0,o.Cg)([n.PA],F);var x=s(92008);const U=15;let z=class extends l.Component{m_schHideControls=new b.LU;m_schUnmountControls=new b.LU;m_elVideo=null;m_elBroadcastPlayer=null;m_bMouseDown=!1;m_elMouseDown=null;m_listeners=new b.Ji;constructor(e){super(e),this.state={bMountControls:!1,bControlsVisible:!1,bShowStats:!1,video:null,nResizedHeight:null,bFullscreen:!1}}StopVideo(){let e=this.state.video;e&&(d.BroadcastWatchStore.StopVideo(e),this.setState({video:null}),this.props.fnSetBroadcastVideo?.(null))}IsMuted(){let e=this.state.video;return!e||e.IsMuted()}StopPlaybackTillUserInput(){let e=this.state.video;e&&e.StopPlaybackTillUserInput()}componentDidUpdate(e,t){!t.bMountControls&&this.state.bMountControls?setTimeout((()=>{this.setState((e=>({bControlsVisible:e.bMountControls})))}),15):t.bControlsVisible&&!this.state.bControlsVisible&&this.state.video&&!this.state.video.IsPaused()&&this.m_schUnmountControls.Schedule(2e3,this.UmountControls),this.props.steamIDBroadcast!==e.steamIDBroadcast&&this.BindVideoRef(this.m_elVideo),!this.props.nAppIDVOD||void 0!==t.strInitialCapsuleImageUrl&&e.nAppIDVOD==this.props.nAppIDVOD||u.A.Get().QueueAppRequest(this.props.nAppIDVOD,{include_assets:!0,include_trailers:!0}).then((()=>{const e=u.A.Get().GetApp(this.props.nAppIDVOD),t=e?.GetAssets().GetMainCapsuleURL()||"";this.setState({strInitialCapsuleImageUrl:t})}))}componentWillUnmount(){this.m_listeners.Unregister(),this.m_schHideControls.Cancel(),this.m_schUnmountControls.Cancel(),this.StopVideo()}BindBroadcastPlayerRef(e){this.m_listeners.Unregister(),this.m_elBroadcastPlayer=e,e&&(this.m_listeners.AddEventListener(e,"fullscreenchange",this.OnFullscreenChange),this.m_listeners.AddEventListener(e,"mozfullscreenchange",this.OnFullscreenChange),this.m_listeners.AddEventListener(e,"webkitfullscreenchange",this.OnFullscreenChange),this.m_listeners.AddEventListener(e,"msfullscreenchange",this.OnFullscreenChange))}BindVideoRef(e){let t;this.StopVideo(),this.props.steamIDBroadcast?e&&(t=d.BroadcastWatchStore.CreateBroadcastVideo(e,this.props.steamIDBroadcast,this.props.watchLocation,this.props.bWebRTC)):this.props.broadcastClipID?e&&(t=d.BroadcastWatchStore.CreateClipVideo(e,this.props.broadcastClipID,this.props.watchLocation)):this.props.nAppIDVOD&&e&&(t=d.BroadcastWatchStore.CreateVODVideo(e,this.props.nAppIDVOD,this.props.watchLocation),this.props.fnOnVideoEnd&&t.SetOnVideoCallback(this.props.fnOnVideoEnd)),t&&(this.props.bStartMuted&&t.SetMute(!0),this.props.bStartWithSubtitles&&t.SetStartWithSubtitles(!0),this.props.bStartPaused?t.StopPlaybackTillUserInput():t.Play()),this.setState({video:t}),this.props.fnSetBroadcastVideo?.(t),this.m_elVideo=e}OnMouseDown(e){this.m_bMouseDown=!0,this.m_elMouseDown=e.currentTarget,this.m_elMouseDown.ownerDocument.defaultView.addEventListener("mouseup",this.OnMouseUp)}OnMouseUp(e){this.m_bMouseDown=!1,this.m_elMouseDown.ownerDocument.defaultView.removeEventListener("mouseup",this.OnMouseUp),this.m_schHideControls.Schedule(3200,this.HideControls)}OnMouseMove(e){this.m_schHideControls.Cancel(),this.m_schUnmountControls.Cancel(),this.state.bMountControls?this.state.bControlsVisible||this.setState({bControlsVisible:!0}):this.setState({bMountControls:!0}),this.m_schHideControls.Schedule(3200,this.HideControls)}OnMouseLeave(e){this.HideControls()}HideControls(){this.state.bControlsVisible&&!this.m_bMouseDown&&this.setState({bControlsVisible:!1})}UmountControls(){this.setState((e=>{if(!e.bControlsVisible&&e.bMountControls)return{bMountControls:!1}}))}ShowStatsView(){let e=this.state.video;e&&(this.state.bShowStats||(this.setState({bShowStats:!0}),e.SetStatsViewIsVisible(!0)))}OnContextMenu(e){this.state.bFullscreen||((0,a.lX)(l.createElement(c.tz,null,this.GetContextMenuItems()),e),e.preventDefault())}ToggleStatsView(e){let t=!this.state.bShowStats;this.setState({bShowStats:t});let s=this.state.video;s&&s.SetStatsViewIsVisible(t)}ShowStorePage(e){let t=this.state.video;if(!t||!this.props.onOpenLinkInNewWindow)return;let s=t.GetBroadcastInfo();if(!s)return;let o=(0,r.k2)(`${f.TS.STORE_BASE_URL}app/${s.m_strAppId}`);this.props.onOpenLinkInNewWindow(e,o),e.stopPropagation()}GetContextMenuItems(){let e=[],t=this.state.video;if(!t)return e;let s=t.GetBroadcastInfo();return e.push(l.createElement(c.IK,{key:"togglestats",bChecked:this.state.bShowStats,onSelected:e=>{this.ToggleStatsView(e)}},(0,w.we)("#Broadcast_VideoContext_ToggleStats"))),s&&"0"!=s.m_strAppId&&Number.parseInt(s.m_strAppId)!=d.fO&&e.push(l.createElement(c.kt,{key:"visitstore",onSelected:e=>{this.ShowStorePage(e)}},(0,w.we)("#Broadcast_VideoContext_OpenStore"))),e}CloseStats(){let e=this.state.video;e&&this.state.bShowStats&&(this.setState({bShowStats:!1}),e.SetStatsViewIsVisible(!1))}OnToggleFullscreen(){this.m_elBroadcastPlayer&&((0,_.ww)(this.m_elBroadcastPlayer)?(0,_.MS)(this.m_elBroadcastPlayer):(0,_.tl)(this.m_elBroadcastPlayer,this.m_elVideo))}OnFullscreenChange(e){if(!this.m_elBroadcastPlayer)return;let t=(0,_.ww)(this.m_elBroadcastPlayer);this.setState({bFullscreen:t})}BHideVideoControls(){let e=this.state.video;return!e||(!!e.GetUserInputNeeded()||d.BroadcastWatchStore.GetBroadcastState(e)==d.fK.Error)}render(){const e=this.state.video,t=e&&e.IsPaused(),s=e&&e.BHasDASHStats()&&this.state.bShowStats,o=Boolean(e&&e.IsReplay()),i=this.state.bMountControls,n=this.state.bControlsVisible||t,a=e&&e.GetUserInputNeeded(),r=e?.IsBroadcastVOD()&&a&&this.state.strInitialCapsuleImageUrl;let d="videoContainer";n||(d+=" HidePlayerControls"),t&&(d+=" VideoPaused"),this.state.bFullscreen&&(d+=" fullscreenVideo"),this.props.classes&&(d+=" "+this.props.classes);let u=[];!this.state.bFullscreen&&this.props.actions&&(u=u.concat(this.props.actions)),!this.state.bFullscreen&&this.props.onTheaterMode&&u.push(l.createElement("div",{key:"ChatPosToggle ChatTheaterToggle",onClick:this.props.onTheaterMode,title:(0,w.we)("#Broadcast_View_Theater"),className:"BroadcastTheaterToggle"})),u.push(l.createElement("div",{key:"FullscreenToggle",title:(0,w.we)("#Broadcast_View_Fullscreen"),onClick:this.OnToggleFullscreen,className:"BroadcastFullscreenToggle"}));const c=i&&!this.BHideVideoControls(),p=i&&!this.state.bFullscreen,h=this.props.fnRenderBroadcastContext&&this.props.fnRenderBroadcastContext();return l.createElement("div",{ref:this.BindBroadcastPlayerRef,className:d,onMouseMove:this.OnMouseMove,onClick:this.OnMouseMove,onMouseLeave:this.OnMouseLeave,onContextMenu:this.OnContextMenu,onMouseDown:this.OnMouseDown},h&&l.createElement("div",{className:P().BroadcastContext},h),o&&l.createElement(B,null),this.props.showVideoBackgroundBlur&&l.createElement(m.m,{className:"videoBlur",elementRef:this.m_elVideo,updateRate:33,width:320,height:180,reductionFactor:10,blurAmount:5}),l.createElement("video",{className:"videoSrc",ref:this.BindVideoRef,muted:this.props.bMuted??!0,autoPlay:!0,playsInline:!0,controls:!1,onVolumeChange:this.props.fnVolumeChanged,onClick:this.props.fnVideoClick}),this.props.linkRegions?l.createElement(oe,{linkRegions:this.props.linkRegions,editMode:this.props.editMode,onSaveLinkRegions:this.props.onSaveLinkRegions}):null,this.props.linkElement,r&&l.createElement("img",{loading:"lazy",className:(0,E.A)(P().BroadcastPlaceholderImg,"BroadcastPlaceholderImg"),src:this.state.strInitialCapsuleImageUrl}),c&&l.createElement(J,{video:e,actions:u,onOpenLinkInNewWindow:this.props.onOpenLinkInNewWindow,onShowStats:this.ToggleStatsView,bIncludeClipEditor:this.props.bIncludeClipEditor}),p&&l.createElement(X,{onClick:this.props.onRequestClose}),s&&l.createElement(L,{stats:e.GetDASHPlayerStats(),closeStats:this.CloseStats}),l.createElement(I,{video:e}),a&&l.createElement(N,{video:e}))}};(0,o.Cg)([k.oI],z.prototype,"BindBroadcastPlayerRef",null),(0,o.Cg)([k.oI],z.prototype,"BindVideoRef",null),(0,o.Cg)([k.oI],z.prototype,"OnMouseDown",null),(0,o.Cg)([k.oI],z.prototype,"OnMouseUp",null),(0,o.Cg)([k.oI],z.prototype,"OnMouseMove",null),(0,o.Cg)([k.oI],z.prototype,"OnMouseLeave",null),(0,o.Cg)([k.oI],z.prototype,"HideControls",null),(0,o.Cg)([k.oI],z.prototype,"UmountControls",null),(0,o.Cg)([k.oI],z.prototype,"ShowStatsView",null),(0,o.Cg)([k.oI],z.prototype,"OnContextMenu",null),(0,o.Cg)([k.oI],z.prototype,"ToggleStatsView",null),(0,o.Cg)([k.oI],z.prototype,"ShowStorePage",null),(0,o.Cg)([k.oI],z.prototype,"CloseStats",null),(0,o.Cg)([k.oI],z.prototype,"OnToggleFullscreen",null),(0,o.Cg)([k.oI],z.prototype,"OnFullscreenChange",null),z=(0,o.Cg)([n.PA],z);const W=z;let J=class extends l.Component{render(){const{video:e}=this.props;if(!e)return null;let t=e.has_segments;return l.createElement("div",{className:"videoControls"},l.createElement(te,{steamID:this.props.video.GetBroadcastSteamID(),bHideThumbnail:!0,bVerticalBroadcastChat:!0,onOpenLinkInNewWindow:this.props.onOpenLinkInNewWindow}),l.createElement("div",{className:"videoControlsBottom"+(t?"":" noSegments")},l.createElement(ee,{video:e,bIncludeClipEditor:this.props.bIncludeClipEditor}),l.createElement("div",{className:"STV_BroadcastController"},l.createElement("div",{className:"videoControlsButtons LeftSpacer"}),l.createElement(j,{video:e}),l.createElement(K,{video:e}),l.createElement(G,{video:e,actions:this.props.actions,onShowStats:this.props.onShowStats}))))}};J=(0,o.Cg)([n.PA],J);class X extends l.PureComponent{render(){return this.props.onClick?l.createElement("div",{className:"STV_BroadcastClose",onClick:this.props.onClick},l.createElement(g.sED,null)):null}}class j extends l.Component{OnJumpBackward(){this.props.video.JumpTime(-15)}OnJumpForward(){this.props.video.JumpTime(U)}render(){let e=this.props.video,t=e.CanSeek();return l.createElement("div",{className:"videoControlsButtons PlayControls"},l.createElement(Q,{video:e}),t&&l.createElement("div",{className:"videoControlButton videoControlJump controlFlip",onClick:this.OnJumpBackward},l.createElement(g.tID,{bHidePostArrow:!0,bHidePreArrow:!0,bShowJumpAheadBox:!0,bFlipHorizontal:!0}),l.createElement("div",{className:"jumpAheadValue"},U)),l.createElement(q,{video:e}),t&&l.createElement("div",{className:"videoControlButton videoControlJump",onClick:this.OnJumpForward},l.createElement(g.tID,{bHidePostArrow:!0,bHidePreArrow:!0,bShowJumpAheadBox:!0,bFlipHorizontal:!1}),l.createElement("div",{className:"jumpAheadValue"},U)),t&&l.createElement($,{video:e}))}}(0,o.Cg)([k.oI],j.prototype,"OnJumpBackward",null),(0,o.Cg)([k.oI],j.prototype,"OnJumpForward",null);const K=(0,n.PA)((e=>{if(e.video.IsBroadcastClip()||e.video.IsBroadcastVOD())return null;let t=e.video.IsOnLiveEdge();return l.createElement("div",{className:"videoControlsButtons GoLive"},l.createElement("div",{className:"videoControlButton videoControlGoLive"+(t?" isLiveEdge":""),onClick:t?null:t=>{e.video.JumpToLiveEdge()}},l.createElement(g.tID,{bHidePreArrow:!0,bHidePostArrow:!0,bFlipHorizontal:!1}),l.createElement("div",{className:"jumpGoLive"},(0,w.we)(t?"#DASHPlayerControls_IsLive":"#DASHPlayerControls_GoLive"))))}));let q=class extends l.Component{OnTogglePlayPause(){this.props.video.TogglePlayPause()}render(){let e=this.props.video.IsPaused();return l.createElement("div",{className:"videoControlButton buttonPlayPause",onClick:this.OnTogglePlayPause},e?l.createElement(g.jGG,null):l.createElement(g.vRz,null))}};(0,o.Cg)([k.oI],q.prototype,"OnTogglePlayPause",null),q=(0,o.Cg)([n.PA],q);let Q=class extends l.Component{constructor(e){super(e),(0,i.Gn)(this),this.video=e.video}componentDidUpdate(){this.video=this.props.video}video=void 0;get has_previous_marker(){return void 0!==this.GetPreviousMarkerTime()}GetPreviousMarkerTime(){if(!this.video.has_markers)return;let e=this.video.GetTimelineMarkers(),t=this.video.GetPlaybackTime();for(let s=e.length-1;s>=0;s--)if(!(e[s].nTime>=t))return e[s].nTime}OnJumpToPreviousMarkerClicked(e){let t=this.GetPreviousMarkerTime();void 0!==t&&this.props.video.Seek(t-.2)}render(){let e=this.props.video.BHasMarkersOrSegments();return l.createElement("div",{className:"videoControlButton jumpToMarker controlFlip"+(e?"":" noMarkersOrSegments")+(this.has_previous_marker?"":" noMarkersInDirection"),onClick:this.OnJumpToPreviousMarkerClicked},l.createElement(g.tID,{bHidePostArrow:!0,bFlipHorizontal:!0}))}};(0,o.Cg)([i.sH],Q.prototype,"video",void 0),(0,o.Cg)([i.EW],Q.prototype,"has_previous_marker",null),(0,o.Cg)([k.oI],Q.prototype,"OnJumpToPreviousMarkerClicked",null),Q=(0,o.Cg)([n.PA],Q);let $=class extends l.Component{constructor(e){super(e),(0,i.Gn)(this),this.video=e.video}componentDidUpdate(){this.video=this.props.video}video=void 0;get has_next_marker(){return void 0!==this.GetNextMarkerTime()}GetNextMarkerTime(){if(!this.video.has_markers)return;let e=this.video.GetTimelineMarkers(),t=this.video.GetPlaybackTime();for(let s=0;s<e.length;s++)if(!(e[s].nTime<=t))return e[s].nTime}OnJumpToNextMarkerClicked(e){let t=this.GetNextMarkerTime();void 0!==t&&this.props.video.Seek(t)}render(){let e=this.props.video.BHasMarkersOrSegments();return l.createElement("div",{className:"videoControlButton jumpToMarker"+(e?"":" noMarkersOrSegments")+(this.has_next_marker?"":" noMarkersInDirection"),onClick:this.OnJumpToNextMarkerClicked},l.createElement(g.tID,{bHidePostArrow:!0,bFlipHorizontal:!1}))}};(0,o.Cg)([i.sH],$.prototype,"video",void 0),(0,o.Cg)([i.EW],$.prototype,"has_next_marker",null),(0,o.Cg)([k.oI],$.prototype,"OnJumpToNextMarkerClicked",null),$=(0,o.Cg)([n.PA],$);const Y=e=>l.createElement("div",{className:"timelineMarker",title:e.label,style:{left:e.pos+"%"},onMouseEnter:()=>e.onMouseEnter(e.pos),onMouseLeave:e.onMouseLeave,onMouseDown:e.onMouseDown?e.onMouseDown:void 0},l.createElement("div",{className:"timelineMarkerIcon"},l.createElement(g.Dp6,null)));function Z(e){let t=e.startPos,s=e.endPos,o="",i=1;return t<0&&(i=(s-t)/10,t=0,o=" hideFront"),l.createElement("div",{className:"STV_timelineSegment"+o,style:{left:t+"%",width:s-t+"%",opacity:i},onClick:e.onClick},l.createElement("div",{className:"STV_timelineSegmentFrontFill",style:{borderColor:"rgb("+e.color+")"}}),l.createElement("div",{className:"STV_timelineSegmentLabel",style:{color:"rgb("+e.color+")"}},e.label),l.createElement("div",{className:"STV_timelineSegmentBackFill",style:{borderColor:"rgb("+e.color+")"}}))}let ee=class extends l.Component{m_elSlider=l.createRef();m_rectSlider=void 0;constructor(e){super(e),this.state={nGrabberMouseDownTime:0,bGrabberMouseDown:!1,nHoverValue:void 0,hoverX:0,bStartMouseDown:!1,bEndMouseDown:!1,thumbnailURL:""}}OnMouseDown(e,t){if(this.m_elSlider){e.persist(),this.m_rectSlider=this.m_elSlider.current&&this.m_elSlider.current.getBoundingClientRect();let s={};"start"===t?(s={bStartMouseDown:!0},e.stopPropagation()):"end"===t?(s={bEndMouseDown:!0},e.stopPropagation()):s={bGrabberMouseDown:!0},this.setState(s,(()=>this.AdjustSliderForClientX(e.clientX))),this.m_elSlider.current.ownerDocument.defaultView.addEventListener("mousemove",this.OnMouseMove),this.m_elSlider.current.ownerDocument.defaultView.addEventListener("mouseup",this.OnMouseUp)}}OnMouseMove(e){this.AdjustSliderForClientX(e.clientX)}OnMouseUp(e){this.state.bStartMouseDown?this.setState({bStartMouseDown:!1}):this.state.bEndMouseDown?this.setState({bEndMouseDown:!1}):(this.props.video.Seek(this.state.nGrabberMouseDownTime),this.setState({bGrabberMouseDown:!1,nGrabberMouseDownTime:0})),this.m_elSlider.current&&(this.m_elSlider.current.ownerDocument.defaultView.removeEventListener("mousemove",this.OnMouseMove),this.m_elSlider.current.ownerDocument.defaultView.removeEventListener("mouseup",this.OnMouseUp))}OnKeyDown(e){37==e.keyCode?(this.props.video.JumpTime(-15),e.preventDefault()):39==e.keyCode&&(this.props.video.JumpTime(15),e.preventDefault())}AdjustSliderForClientX(e){let t=this.props.video,s=t.GetTimelineStartPos(),o=t.GetTimelineStartPos()+t.GetTimelineDuration(),i=t.GetTimeAtMousePosition(e,this.m_rectSlider,s,o);if(this.state.bStartMouseDown){const e=y.OQ(i,s,t.m_editorEndTime-5);t.m_editorStartTime=e}else if(this.state.bEndMouseDown){const e=y.OQ(i,t.m_editorStartTime+5,o);t.m_editorEndTime=e}else i!=this.state.nGrabberMouseDownTime&&this.setState({nGrabberMouseDownTime:i})}OnMouseHoverMove(e){this.AdjustHoverForClientX(e.clientX)}OnMouseHoverLeave(e){this.setState({hoverX:0})}AdjustHoverForClientX(e){let t=this.props.video,s=t.GetTimelineStartPos(),o=t.GetTimelineStartPos()+t.GetTimelineDuration();this.m_rectSlider=this.m_elSlider.current&&this.m_elSlider.current.getBoundingClientRect();t.GetTimeAtMousePosition(e,this.m_rectSlider,s,o)}OnSegmentClick(e){this.props.video.Seek(e)}OnMarkerMouseEnter(e){this.setState({nHoverValue:e})}OnMarkerMouseLeave(){this.setState({nHoverValue:void 0})}render(){let e=this.props.video,t=this.state.bGrabberMouseDown,s=e.GetPercentOffsetFromTime(this.state.nGrabberMouseDownTime,d.a0.Timeline),o=e.GetPercentOffsetFromTime(e.GetPlaybackTime(),d.a0.Timeline),i=e.GetPercentOffsetFromTime(e.GetVideoAvailableStartTime(),d.a0.Timeline);i<.05&&(i=0);let n=y.OQ(s,0,100).toFixed(1)+"%",a=y.OQ(o,0,100).toFixed(1)+"%",r=y.OQ(i,0,100).toFixed(1)+"%",u={},m={},c={},p={};t?(p.left=n,u.width=n,m.width=a,c.width=r):(p.left=a,m.width=a,c.width=r);let h=(0,O.ap)(e.GetPlaybackTime()),S=(0,O.ap)(this.state.nHoverValue),v="STV_timelineContainer";this.state.bGrabberMouseDown&&(v+=" grabberDown"),e.IsTimelineMapActive()&&(v+=" minimapActive");let C="";s=t?s:o,s>100?C=" grabberOffScreenRight grabberOffscreen":s<0&&(C=" grabberOffScreenLeft grabberOffscreen");let b=[];e.GetTimelineMarkers().forEach(((t,s)=>{let o=e.GetPercentOffsetFromTime(t.nTime,d.a0.Timeline);o<0||o>100||b.push(l.createElement(Y,{key:s,pos:o,label:t.strTemplateName,onMouseEnter:this.OnMarkerMouseEnter,onMouseLeave:this.OnMarkerMouseLeave}))}));let E=[];e.GetTimelineSegments().forEach(((t,s)=>{let o=e.GetPercentOffsetFromTime(t.nTimeStart,d.a0.Timeline);if(o>100)return;let i=e.GetPercentOffsetFromTime(t.nTimeEnd,d.a0.Timeline);i<0||E.push(l.createElement(Z,{key:s,startPos:o,endPos:i,label:t.strTemplateName,color:t.color,onClick:e=>this.OnSegmentClick(t.nTimeStart)}))}));const _=e.GetPercentOffsetFromTime(e.m_editorStartTime,d.a0.Timeline),M=e.GetPercentOffsetFromTime(e.m_editorEndTime,d.a0.Timeline),k=this.props.bIncludeClipEditor?[l.createElement(Y,{key:"start",pos:_,label:(0,w.we)("#DASHPlayerControls_Start"),onMouseEnter:this.OnMarkerMouseEnter,onMouseLeave:this.OnMarkerMouseLeave,onMouseDown:e=>this.OnMouseDown(e,"start")}),l.createElement(Y,{key:"end",pos:M,label:(0,w.we)("#DASHPlayerControls_End"),onMouseEnter:this.OnMarkerMouseEnter,onMouseLeave:this.OnMarkerMouseLeave,onMouseDown:e=>this.OnMouseDown(e,"end")})]:[];return l.createElement("div",{className:"videoTimelineMain",tabIndex:0,onKeyDown:this.OnKeyDown},l.createElement("div",{className:v},l.createElement("div",{className:"DialogLabel"},h),l.createElement("div",{className:"STV_timelineSegmentsContainer"},E),l.createElement("div",{onMouseDown:this.OnMouseDown,onMouseMove:this.OnMouseHoverMove,onMouseLeave:this.OnMouseHoverLeave,ref:this.m_elSlider},l.createElement("div",{className:"VideoTimelineSlider"},l.createElement("div",{className:"STV_timelineValue",style:u}),l.createElement("div",{className:"STV_timelineGhostValue",style:m}),l.createElement("div",{className:"STV_timelineNoVideo",style:c}),b,k,Boolean(this.state.hoverX)&&l.createElement("div",{key:"grabbertime",style:{position:"absolute",left:this.state.hoverX-75,bottom:"30px"}},l.createElement("div",{style:{position:"relative",display:"flex",justifyContent:"center"}},this.state.thumbnailURL&&l.createElement("img",{style:{width:"150px"},src:this.state.thumbnailURL}),l.createElement("span",{className:"STV_timelineGrabberValue",style:{position:"absolute",bottom:"4px"}},S))),l.createElement("div",{className:"STV_timelineGrabber_Wrapper",style:p},l.createElement("div",{className:"STV_timelineGrabber"+C},l.createElement("div",{className:"STV_timelineGrabberArrow"},l.createElement(g.apU,null))))))))}};(0,o.Cg)([k.oI],ee.prototype,"OnMouseDown",null),(0,o.Cg)([k.oI],ee.prototype,"OnMouseMove",null),(0,o.Cg)([k.oI],ee.prototype,"OnMouseUp",null),(0,o.Cg)([k.oI],ee.prototype,"OnKeyDown",null),(0,o.Cg)([k.oI],ee.prototype,"OnMouseHoverMove",null),(0,o.Cg)([k.oI],ee.prototype,"OnMouseHoverLeave",null),(0,o.Cg)([k.oI],ee.prototype,"AdjustHoverForClientX",null),(0,o.Cg)([k.oI],ee.prototype,"OnSegmentClick",null),(0,o.Cg)([k.oI],ee.prototype,"OnMarkerMouseEnter",null),(0,o.Cg)([k.oI],ee.prototype,"OnMarkerMouseLeave",null),ee=(0,o.Cg)([n.PA],ee);let te=class extends l.Component{state={info:null};static getDerivedStateFromProps(e,t){if((!t.info||t.info.m_steamIDBroadcast!==e.steamID)&&(t.info&&(d.BroadcastWatchStore.StopInfo(t.info),t.info=null),e.steamID)){return{info:d.BroadcastWatchStore.StartInfo(e.steamID)}}return null}componentWillUnmount(){this.state.info&&d.BroadcastWatchStore.StopInfo(this.state.info)}RenderStreamSwitcher(){const e=this.props.steamID;return D.td.stream[e]?l.createElement(se,{value:e,options:D.td.stream,onChange:this.props.onLocalStreamChange}):null}render(){let{info:e}=this.state;if(!e)return null;let t="";e.m_nViewerCount&&(t=(0,M.Dq)(e.m_nViewerCount));let s=D.td.bValid&&D.td.stream&&D.td.stream[e.m_steamIDBroadcast],o=!this.props.bHideThumbnail&&this.props.bVerticalBroadcastChat&&(parseInt(e.m_strAppId)>0||s);const i=!this.props.bHideThumbnail&&this.props.bVerticalBroadcastChat&&s&&D.td.gidEvent;return l.createElement("div",{className:"BroadcastDetails"},!this.props.bHideThumbnail&&l.createElement(p.y,{className:"broadcastDetailsThumbBlur",src:e.m_strThumbnailUrl,draggable:!1,duration:2500}),l.createElement("div",{className:"BroadcastDetailsHeader"},e&&e.m_strAppTitle&&l.createElement("div",{className:"displayColumn"},l.createElement("div",{className:"Info"},l.createElement("span",{className:"AppTitle"},e.m_strAppTitle),e.m_strTitle&&l.createElement("span",{className:"BroadcastTitle"}," - ",e.m_strTitle),this.props.onLocalStreamChange&&this.RenderStreamSwitcher()),t&&l.createElement("div",{className:"BroadcastDetailsHeader_ViewerCount"},l.createElement(g.y_e,null),(0,w.Yp)("#Broadcast_ViewerCount",t))),s&&this.props.onOpenLinkInNewWindow&&l.createElement("div",{className:"Actions"},l.createElement("div",{onClick:e=>this.props.onOpenLinkInNewWindow(e,D.td.link),className:"BroadcastLink"},D.td.linkName))),i&&l.createElement(S.m,{gidEvent:D.td.gidEvent}),o&&l.createElement(h.pb,{id:D.td.bValid&&D.td.stream&&D.td.stream[e.m_steamIDBroadcast]?D.td.appID:parseInt(e.m_strAppId),type:"game"}))}};te=(0,o.Cg)([n.PA],te);class se extends l.Component{showContextMenu(e){const{options:t,value:s,onChange:o}=this.props,i=Object.keys(t).map((e=>l.createElement(c.IK,{key:e,onSelected:()=>o(e),bChecked:e===s},(0,w.we)(t[e]))));(0,a.lX)(l.createElement(c.tz,null,i),e)}render(){const{value:e,options:t}=this.props,s=t[e];return l.createElement("div",{className:"BroadcastLanguage",onClick:this.showContextMenu},l.createElement("span",null," - ",(0,w.we)(s)),l.createElement("div",{className:"ContextMenuButton"},l.createElement(g.GB9,null)))}}(0,o.Cg)([k.oI],se.prototype,"showContextMenu",null);let oe=class extends l.Component{constructor(e){super(e),this.state={sizableRegion:[]}}async AddLinkRegion(){let e=this.state.sizableRegion.length;this.state.sizableRegion.push({xPosPct:2.5+e,yPosPct:2.5+e,widthPct:20,heightPct:15}),this.setState({sizableRegion:this.state.sizableRegion},(()=>this.OnSaveRegions()))}componentDidUpdate(e){0==e.linkRegions.length&&this.props.linkRegions.forEach(((e,t)=>{this.LoadLinkRegion(e,t)}))}async LoadLinkRegion(e,t){this.state.sizableRegion.length;this.state.sizableRegion.push({xPosPct:e.left,yPosPct:e.top,widthPct:e.width,heightPct:e.height,link_url:e.url,link_description:e.link_description,link_index:e.link_index}),await this.setState({sizableRegion:this.state.sizableRegion})}OnSaveRegions(){let e;e={links:[]};for(let t=0;t<this.state.sizableRegion.length;t++){let s;s={left:Math.floor(100*this.state.sizableRegion[t].xPosPct),top:Math.floor(100*this.state.sizableRegion[t].yPosPct),width:Math.floor(100*this.state.sizableRegion[t].widthPct),height:Math.floor(100*this.state.sizableRegion[t].heightPct),url:this.state.sizableRegion[t].link_url,link_description:this.state.sizableRegion[t].link_description,link_index:t},e.links.push(s)}this.props.onSaveLinkRegions(e)}async DeleteRegion(e){this.state.sizableRegion.splice(e,1),console.log("keys: ",this.state.sizableRegion.keys),this.setState({sizableRegion:this.state.sizableRegion},(()=>this.OnSaveRegions()))}async UpdatePanel(e,t){const s=[...this.state.sizableRegion];s[e]=t,this.setState({sizableRegion:s},(()=>this.OnSaveRegions()))}render(){return l.createElement("div",{className:"LinkOverlayContainer"},l.createElement("div",{className:"LinkOverlayValidRegion"},!this.props.editMode&&this.props.linkRegions?this.props.linkRegions.map((e=>{const t=(0,x.p)(e.url);return l.createElement(C.uU,{key:e.link_index,href:e.url,bForceExternal:t,bUseLinkFilter:t},l.createElement("div",{className:"LinkRegion",style:{left:e.left+"%",top:e.top+"%",width:e.width+"%",height:e.height+"%"}},l.createElement("div",{className:"LinkRegionText"},e.link_description," ")))})):null,this.props.editMode&&this.state.sizableRegion.map(((e,t)=>l.createElement(v.I,{key:100*t+e.xPosPct,index:t,deleteFn:this.DeleteRegion,updateFn:this.UpdatePanel,xPosPct:e.xPosPct,yPosPct:e.yPosPct,widthPct:e.widthPct,heightPct:e.heightPct,link_url:e.link_url,link_description:e.link_description}))),this.props.editMode&&l.createElement("div",{className:"AddLinkRegion",onClick:this.AddLinkRegion},(0,w.we)("#SteamTV_AddLinkRegion"))),l.createElement("div",{className:"LinkOverlayInvalidRegion"},l.createElement("div",null,(0,w.we)("#SteamTV_LinkRegionReserved"))))}};(0,o.Cg)([k.oI],oe.prototype,"AddLinkRegion",null),(0,o.Cg)([k.oI],oe.prototype,"LoadLinkRegion",null),(0,o.Cg)([k.oI],oe.prototype,"OnSaveRegions",null),(0,o.Cg)([k.oI],oe.prototype,"DeleteRegion",null),(0,o.Cg)([k.oI],oe.prototype,"UpdatePanel",null),oe=(0,o.Cg)([n.PA],oe)}}]);//# sourceMappingURL=file:///home/buildbot/buildslave/npm-coordinator-rel-steamui/build/client/steamui/sourcemaps/chunk~1a96cdf59.js.map