Files
im_webapp/umd/821.prod.js
T
Your NameandClaude Sonnet 5 4e8f45d7d8 路由从 hash 换成 History API(pushState/replaceState/popstate),不再依赖 location.hash
HashNavigation 改名 Navigation(src/lib/navigation.js),接口不变,内部改用真实路径:
parseUrlHash/composeUrlHash 改名 parseUrl/composeUrl;navigateTo/navigateReplace 改调
pushState/replaceState 后手动派发 popstate(pushState/replaceState 不会像赋值 location.hash
那样自动触发事件,这里复用 navigateReplace 早就在用的同一个手动 dispatch 手法);goBack()
不用改,history.back() 本来就是真实浏览器历史机制。新增 Navigation.currentUrl() 替代调用方
原本直接读的 window.location.hash(这个类从来没包装过这个读取)。

一处需要专门处理的边界情况:当 path[0] 是空字符串("不选中侧栏视图、只开一个会话"这个仓库里
的合法状态)时,拼出的真实路径开头会变成双斜杠,被浏览器当协议相对地址解析、试图跳到一个叫
会话id的host,pushState 直接抛 SecurityError。composeUrl/parseUrl 内部用占位 token "_" 处理
这种情况,对外的调用方(19个文件)完全无感。

tinode-web.jsx 的 handleHashRoute 改名 handleRouteChange,监听从 hashchange 换成 popstate;
service-worker.js 的推送通知点击跳转手动改写成同样的路径格式(这个文件在打包之外单独执行,
没法 import Navigation)。index.html/index-dev.html 加了 <base href="/">——所有静态资源引用
都是相对路径,hash 路由下页面路径永远是 /,换真实路径后深层地址刷新会按当前目录解析出错误
资源地址导致白屏,这一行是标准修法。nginx.conf 的 try_files 兜底规则本来就适用两种路由,只
更新了注释。

实机验证:地址栏不再有 #;点击会话/设置等各类视图正常跳转;浏览器前进后退和应用内"返回"
按钮都正常;收藏页内部的类型 tab 切换(navigateReplace)确认不产生新的历史记录;在会话页/
个人中心页刷新、直接用完整深层路径打开新标签页都能正确恢复到位,资源正常加载不白屏。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-07 21:00:39 +08:00

2 lines
21 KiB
JavaScript

"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[821],{7821:function(e,t,a){a.r(t);var i=a(1594),s=a.n(i),n=a(8181),r=a(5247),o=(a(3272),a(7256)),h=a(4848);const l=new Audio("audio/call-out.m4a");l.loop=!0;const d=new Audio("audio/call-end.m4a");d.loop=!0;const c=new Audio("audio/dialing.m4a"),p="video:muted",m="video:unmuted",u=Symbol("unmounted-during-offer");function g(e){const t=Math.floor(e/3600),a=Math.floor(e%3600/60),i=e%60,s=e=>String(e).padStart(2,"0");return t>0?`${t}:${s(a)}:${s(i)}`:`${s(a)}:${s(i)}`}const f=(0,n.defineMessages)({already_in_call:{id:"already_in_call",defaultMessage:"You already in an ongoing call!",description:"Error message when the user tried to accept a new call without finishing pervious one"}});class C extends s().PureComponent{constructor(e){super(e),this.state={localStream:void 0,remoteStream:void 0,pc:void 0,dataChannel:void 0,previousOnInfo:void 0,waitingForPeer:!1,callInitialSetupComplete:!1,audioOnly:e.callAudioOnly,videoToggleInProgress:!1,remoteVideoLive:!1,elapsedSeconds:0,speakerOn:!0},this.callStartedAt=null,this.elapsedTimerId=null,this.localStreamConstraints={audio:!0,video:!e.callAudioOnly},this.isOutgoingCall=1==e.callState,this.containerRef=s().createRef(),this.selfBoxRef=s().createRef(),this.localRef=s().createRef(),this.remoteRef=s().createRef(),this.remoteIceCandidatesCache=[],this.onInfo=this.onInfo.bind(this),this.start=this.start.bind(this),this.stop=this.stop.bind(this),this.createPeerConnection=this.createPeerConnection.bind(this),this.canSendOffer=this.canSendOffer.bind(this),this.drainRemoteIceCandidatesCache=this.drainRemoteIceCandidatesCache.bind(this),this.handleNegotiationNeededEvent=this.handleNegotiationNeededEvent.bind(this),this.handleICECandidateEvent=this.handleICECandidateEvent.bind(this),this.handleNewICECandidateMsg=this.handleNewICECandidateMsg.bind(this),this.handleICEConnectionStateChangeEvent=this.handleICEConnectionStateChangeEvent.bind(this),this.handleSignalingStateChangeEvent=this.handleSignalingStateChangeEvent.bind(this),this.handleICEGatheringStateChangeEvent=this.handleICEGatheringStateChangeEvent.bind(this),this.handleIceCandidateErrorEvent=this.handleIceCandidateErrorEvent.bind(this),this.handleTrackEvent=this.handleTrackEvent.bind(this),this.handleVideoOfferMsg=this.handleVideoOfferMsg.bind(this),this.handleVideoAnswerMsg=this.handleVideoAnswerMsg.bind(this),this.handleNewICECandidateMsg=this.handleNewICECandidateMsg.bind(this),this.reportError=this.reportError.bind(this),this.handleGetUserMediaError=this.handleGetUserMediaError.bind(this),this.stopTracks=this.stopTracks.bind(this),this.disconnectMedia=this.disconnectMedia.bind(this),this.handleCloseClick=this.handleCloseClick.bind(this),this.handleToggleCameraClick=this.handleToggleCameraClick.bind(this),this.handleToggleMicClick=this.handleToggleMicClick.bind(this),this.handleToggleSpeakerClick=this.handleToggleSpeakerClick.bind(this),this.handleSwitchCameraClick=this.handleSwitchCameraClick.bind(this),this.startElapsedTimer=this.startElapsedTimer.bind(this),this.stopElapsedTimer=this.stopElapsedTimer.bind(this),this.handleRemoteHangup=this.handleRemoteHangup.bind(this),this.handleVideoCallAccepted=this.handleVideoCallAccepted.bind(this),this.muteVideo=this.muteVideo.bind(this),this.unmuteVideo=this.unmuteVideo.bind(this),this.emptyVideoTrack=this.emptyVideoTrack.bind(this),this.handleDataChannelEvent=this.handleDataChannelEvent.bind(this),this.handleDataChannelError=this.handleDataChannelError.bind(this),this.handleDataChannelMessage=this.handleDataChannelMessage.bind(this),this.handleDataChannelOpen=this.handleDataChannelOpen.bind(this),this.handleDataChannelClose=this.handleDataChannelClose.bind(this),this.bounds={},this.dragTarget=null,this.dragStart=e=>{if(e.target.closest(".draggable")&&!window.matchMedia("(width<=640px)").matches){if(this.props.minimized&&this.containerRef){e.stopPropagation();const t=this.containerRef.current;t.setPointerCapture(e.pointerId),t.style.cursor="grabbing",this.bounds.left=t.offsetLeft,this.bounds.top=t.offsetTop,this.bounds.width=t.offsetWidth,this.bounds.height=t.offsetHeight,t.style.right="auto",t.style.left=`${this.bounds.left}px`,t.style.top=`${this.bounds.top}px`;const a=t.offsetParent;return this.bounds.maxX=a.offsetWidth,this.bounds.maxY=a.offsetHeight,void(this.dragTarget="container")}if(!this.props.minimized&&!this.state.audioOnly&&this.state.remoteStream&&this.selfBoxRef.current&&e.target.closest(".call-party.self")){e.stopPropagation();const t=this.selfBoxRef.current;this.containerRef.current.setPointerCapture(e.pointerId),t.style.cursor="grabbing",this.bounds.left=t.offsetLeft,this.bounds.top=t.offsetTop,this.bounds.width=t.offsetWidth,this.bounds.height=t.offsetHeight,t.style.right="auto",t.style.bottom="auto",t.style.left=`${this.bounds.left}px`,t.style.top=`${this.bounds.top}px`;const a=t.offsetParent;this.bounds.maxX=a.offsetWidth,this.bounds.maxY=a.offsetHeight,this.dragTarget="self"}}},this.drag=e=>{e.stopPropagation();const t=this.containerRef.current;if(!this.dragTarget||!t.hasPointerCapture(e.pointerId))return;const a="self"==this.dragTarget?this.selfBoxRef.current:t;a&&(this.bounds.left=Math.min(Math.max(this.bounds.left+e.movementX,0),this.bounds.maxX-this.bounds.width),this.bounds.top=Math.min(Math.max(this.bounds.top+e.movementY,0),this.bounds.maxY-this.bounds.height),a.style.left=`${this.bounds.left}px`,a.style.top=`${this.bounds.top}px`)},this.dragEnd=e=>{e.stopPropagation();const t=this.containerRef.current;if(!this.dragTarget)return;const a="self"==this.dragTarget?this.selfBoxRef.current:t;t&&t.hasPointerCapture(e.pointerId)&&t.releasePointerCapture(e.pointerId),a&&(a.style.cursor="grab"),this.dragTarget=null},this.handleWindowResize=()=>{if(this.props.minimized&&this.containerRef.current&&window.matchMedia("(width<=640px)").matches){const e=this.containerRef.current;e.style.removeProperty("left"),e.style.removeProperty("right"),e.style.removeProperty("top")}if(!this.props.minimized&&this.selfBoxRef.current&&window.matchMedia("(width<=768px)").matches){const e=this.selfBoxRef.current;e.style.removeProperty("left"),e.style.removeProperty("right"),e.style.removeProperty("top"),e.style.removeProperty("bottom")}}}componentDidMount(){const e=this.props.tinode.getTopic(this.props.topic);this.previousOnInfo=e.onInfo,e.onInfo=this.onInfo,1!=this.props.callState&&3!=this.props.callState||!this.localRef.current||this.start(),this.containerRef&&(this.containerRef.current.addEventListener("pointerdown",this.dragStart),this.containerRef.current.addEventListener("pointermove",this.drag),this.containerRef.current.addEventListener("pointerup",this.dragEnd)),window.addEventListener("resize",this.handleWindowResize)}componentWillUnmount(){this._unmounted=!0,this.props.tinode.getTopic(this.props.topic).onInfo=this.previousOnInfo,this.stop(),window.removeEventListener("resize",this.handleWindowResize),this.containerRef&&(this.containerRef.current.removeEventListener("pointerdown",this.dragStart),this.containerRef.current.removeEventListener("pointermove",this.drag),this.containerRef.current.removeEventListener("pointerup",this.dragEnd))}handleVideoCallAccepted(e){l.pause();const t=this.createPeerConnection(!0),a=this.state.localStream;a.getTracks().forEach(e=>{t.addTrack(e,a),"video"==e.kind&&this.state.audioOnly&&(e.enabled=!1,e.stop(),a.removeTrack(e))})}onInfo(e){if("call"==e.what)switch(e.event){case"accept":this.handleVideoCallAccepted(e);break;case"answer":this.handleVideoAnswerMsg(e);break;case"ice-candidate":this.handleNewICECandidateMsg(e);break;case"hang-up":this.handleRemoteHangup(e);break;case"offer":this.handleVideoOfferMsg(e);break;case"ringing":l.play().catch(e=>{});break;default:console.warn("Unknown call event",e.event)}else this.previousOnInfo&&this.previousOnInfo(e)}emptyVideoTrack(){const e=Object.assign(document.createElement("canvas"),{width:640,height:480});e.getContext("2d").fillRect(0,0,640,480);const t=e.captureStream(0);return Object.assign(t.getVideoTracks()[0],{enabled:!1})}start(){this.state.localStream?this.props.onError(this.props.intl.formatMessage(f.already_in_call),"info"):3!=this.props.callState?navigator.mediaDevices.getUserMedia(this.localStreamConstraints).then(e=>{this._unmounted?e.getTracks().forEach(e=>e.stop()):(this.localStreamConstraints.video||e.addTrack(this.emptyVideoTrack()),this.setState({localStream:e,waitingForPeer:!0}),this.localRef.current.srcObject=e,c.play(),this.props.onInvite(this.props.topic,this.props.seq,this.props.callState,this.props.callAudioOnly))}).catch(this.handleGetUserMediaError):this.props.onInvite(this.props.topic,this.props.seq,3,this.props.callAudioOnly)}stop(){d.pause(),d.currentTime=0,l.pause(),l.currentTime=0,this.stopElapsedTimer(),this.stopTracks(this.state.localStream),this.stopTracks(this.state.remoteStream),this.disconnectMedia(this.localRef.current),this.disconnectMedia(this.remoteRef.current),this.state.pc&&(this.state.pc.ontrack=null,this.state.pc.onremovetrack=null,this.state.pc.onremovestream=null,this.state.pc.onicecandidate=null,this.state.pc.oniceconnectionstatechange=null,this.state.pc.onsignalingstatechange=null,this.state.pc.onicegatheringstatechange=null,this.state.pc.onnegotiationneeded=null,this.state.pc.onicecandidateerror=null,this.state.pc.ondatachannel=null,!this.state.dataChannel||"open"!=this.state.dataChannel.readyState&&"connecting"!=this.state.dataChannel.readyState||this.state.dataChannel.close(),this.state.pc.close()),this.setState({pc:null,waitingForPeer:!1})}disconnectMedia(e){e&&(e.srcObject=null,e.src="")}stopTracks(e){if(!e)return;let t=e.getTracks();t&&t.forEach(e=>{e.stop(),e.enabled=!1})}handleDataChannelError(e){console.error("data channel error",e)}handleDataChannelMessage(e){switch(e.data){case p:this.setState({remoteVideoLive:!1},e=>{this.remoteRef.current.srcObject=this.state.remoteStream});break;case m:this.setState({remoteVideoLive:!0},e=>{this.remoteRef.current.srcObject=this.state.remoteStream})}}handleDataChannelOpen(e){this.state.audioOnly||e.target.send(m)}handleDataChannelClose(e){console.info("close data channel:",e)}handleDataChannelEvent(e){console.info("data channel event:",e);const t=e.channel;t.onerror=this.handleDataChannelError,t.onmessage=this.handleDataChannelMessage,t.onopen=this.handleDataChannelOpen,t.onclose=this.handleDataChannelClose,this.setState({dataChannel:t})}createPeerConnection(e){const t=this.props.tinode.getServerParam("iceServers",null),a=t?new RTCPeerConnection({iceServers:t}):new RTCPeerConnection;a.onicecandidate=this.handleICECandidateEvent,a.oniceconnectionstatechange=this.handleICEConnectionStateChangeEvent,a.onicegatheringstatechange=this.handleICEGatheringStateChangeEvent,a.onsignalingstatechange=this.handleSignalingStateChangeEvent,a.onnegotiationneeded=this.handleNegotiationNeededEvent,a.onicecandidateerror=this.handleIceCandidateErrorEvent,a.ontrack=this.handleTrackEvent,a.ondatachannel=this.handleDataChannelEvent;let i={pc:a,waitingForPeer:!1};if(e){const e=a.createDataChannel("events",{ordered:!0});e.onerror=this.handleDataChannelError,e.onmessage=this.handleDataChannelMessage,e.onopen=this.handleDataChannelOpen,e.onclose=this.handleDataChannelClose,i.dataChannel=e}return this.setState(i),a}handleVideoAnswerMsg(e){const t=new RTCSessionDescription(e.payload);this.state.pc.setRemoteDescription(t).then(e=>{this.setState({callInitialSetupComplete:!0},e=>this.drainRemoteIceCandidatesCache())}).catch(e=>this.reportError(e))}reportError(e){this.props.onError(e.message,"err")}canSendOffer(){return this.isOutgoingCall||this.state.callInitialSetupComplete}handleNegotiationNeededEvent(e){const t=e.target;this.canSendOffer()&&t.createOffer().then(e=>t.setLocalDescription(e)).then(e=>{this.props.onSendOffer(this.props.topic,this.props.seq,t.localDescription.toJSON())}).catch(e=>this.reportError(e))}handleIceCandidateErrorEvent(e){console.warn("ICE candidate error:",e)}handleICECandidateEvent(e){e.candidate&&this.props.onIceCandidate(this.props.topic,this.props.seq,e.candidate.toJSON())}handleNewICECandidateMsg(e){const t=new RTCIceCandidate(e.payload);this.state.callInitialSetupComplete?this.state.pc.addIceCandidate(t).catch(e=>{t.candidate&&this.reportError(e),console.warn("Error adding new ice candidate",t,e)}):this.remoteIceCandidatesCache.push(t)}drainRemoteIceCandidatesCache(){this.remoteIceCandidatesCache.forEach(e=>{this.state.pc.addIceCandidate(e).catch(t=>{e.candidate&&this.reportError(t),console.warn("Error adding cached ice candidate",e,t)})}),this.remoteIceCandidatesCache=[]}handleICEConnectionStateChangeEvent(e){switch(e.target.iceConnectionState){case"closed":case"failed":this.handleCloseClick()}}handleSignalingStateChangeEvent(e){"closed"==e.target.signalingState&&this.handleCloseClick()}handleICEGatheringStateChangeEvent(e){}handleTrackEvent(e){this.remoteRef.current.srcObject=e.streams[0],this.setState({remoteStream:e.streams[0]}),this.startElapsedTimer()}startElapsedTimer(){this.elapsedTimerId||(this.callStartedAt=Date.now(),this.elapsedTimerId=setInterval(e=>{this.setState({elapsedSeconds:Math.floor((Date.now()-this.callStartedAt)/1e3)})},1e3))}stopElapsedTimer(){this.elapsedTimerId&&(clearInterval(this.elapsedTimerId),this.elapsedTimerId=null),this.callStartedAt=null}handleGetUserMediaError(e){switch(console.error("Error opening camera and/or microphone",e),e.name){case"NotFoundError":default:this.reportError(e);case"SecurityError":case"PermissionDeniedError":}this.handleCloseClick()}handleVideoOfferMsg(e){let t=null;const a=this.state.pc?this.state.pc:this.createPeerConnection(!1),i=new RTCSessionDescription(e.payload);a.setRemoteDescription(i).then(e=>navigator.mediaDevices.getUserMedia(this.localStreamConstraints)).then(e=>{if(this._unmounted)return e.getTracks().forEach(e=>e.stop()),Promise.reject(u);let i;this.localStreamConstraints.video||(i=this.emptyVideoTrack(),e.addTrack(i)),t=e,this.localRef.current.srcObject=e,this.setState({localStream:e}),t.getTracks().forEach(e=>{a.addTrack(e,t)}),i&&(i.enabled=!1,i.stop(),e.removeTrack(i))}).then(e=>a.createAnswer()).then(e=>a.setLocalDescription(e)).then(e=>{this.props.onSendAnswer(this.props.topic,this.props.seq,a.localDescription.toJSON()),this.setState({callInitialSetupComplete:!0},e=>this.drainRemoteIceCandidatesCache())}).catch(e=>{e!==u&&this.handleGetUserMediaError(e)})}handleRemoteHangup(){this.state.waitingForPeer?(this.setState({waitingForPeer:!1}),l.pause(),l.currentTime=0,d.loop=!0,d.play().catch(e=>{}),setTimeout(e=>{this.handleCloseClick()},2e3)):this.handleCloseClick()}handleCloseClick(){this.stop(),this.props.onHangup(this.props.topic,this.props.seq)}muteVideo(){const e=this.state.localStream,t=e.getVideoTracks()[0];t?(t.enabled=!1,t.stop(),e.removeTrack(t),this.sendOnDataChannel(p),this.setState({videoToggleInProgress:!1})):this.setState({videoToggleInProgress:!1})}replaceLocalVideoTrack(e){this.localRef.current.srcObject=null,this.state.localStream.getVideoTracks().forEach(e=>this.state.localStream.removeTrack(e)),this.state.localStream.addTrack(e);let t=Promise.resolve();if(this.state.pc){const a=this.state.pc.getSenders().find(e=>e.track&&"video"==e.track.kind);a?t=a.replaceTrack(e):this.state.pc.addTrack(e,this.state.localStream)}return t.then(e=>{this.localRef.current.srcObject=this.state.localStream})}unmuteVideo(){navigator.mediaDevices.getUserMedia({video:!0}).then(e=>{const t=e.getVideoTracks()[0];if(e.removeTrack(t),!this._unmounted)return this.replaceLocalVideoTrack(t);t.stop()}).then(e=>{this.sendOnDataChannel(m)}).catch(e=>this.handleGetUserMediaError(e)).finally(e=>{this._unmounted||this.setState({videoToggleInProgress:!1})})}sendOnDataChannel(e){this.state.dataChannel&&"open"==this.state.dataChannel.readyState&&this.state.dataChannel.send(e)}handleSwitchCameraClick(){if(this.state.videoToggleInProgress||this.state.audioOnly)return;const e=this.state.localStream.getVideoTracks()[0],t=e&&e.getSettings&&e.getSettings().deviceId;this.setState({videoToggleInProgress:!0},e=>{navigator.mediaDevices.enumerateDevices().then(e=>{const a=e.filter(e=>"videoinput"==e.kind);if(a.length<2)return null;const i=a.findIndex(e=>e.deviceId==t),s=a[(i+1)%a.length];return navigator.mediaDevices.getUserMedia({video:{deviceId:{exact:s.deviceId}}})}).then(e=>{if(!e)return null;const t=e.getVideoTracks()[0];return e.removeTrack(t),this._unmounted?(t.stop(),null):this.replaceLocalVideoTrack(t)}).catch(e=>this.handleGetUserMediaError(e)).finally(e=>{this._unmounted||this.setState({videoToggleInProgress:!1})})})}handleToggleCameraClick(){if(this.state.videoToggleInProgress)return;const e=this.state.localStream.getVideoTracks();this.setState({videoToggleInProgress:!0},t=>{e&&e.length>0&&e[0].enabled&&"live"==e[0].readyState?this.muteVideo():this.unmuteVideo(),this.setState({audioOnly:!this.state.audioOnly})})}handleToggleMicClick(){const e=this.state.localStream.getAudioTracks()[0];e.enabled=!e.enabled,this.forceUpdate()}static speakerSwitchingSupported(){return"undefined"!=typeof HTMLMediaElement&&"setSinkId"in HTMLMediaElement.prototype}handleToggleSpeakerClick(){if(!C.speakerSwitchingSupported()||!this.remoteRef.current)return;const e=!this.state.speakerOn;navigator.mediaDevices.enumerateDevices().then(t=>{const a=t.filter(e=>"audiooutput"==e.kind),i=e?a.find(e=>/speaker/i.test(e.label)):a.find(e=>/earpiece|receiver/i.test(e.label));return this._unmounted||!this.remoteRef.current?null:this.remoteRef.current.setSinkId(i?i.deviceId:"")}).then(t=>{this._unmounted||this.setState({speakerOn:e})}).catch(e=>console.error("Failed to switch audio output device",e))}render(){const e=this.state.localStream&&this.state.localStream.getAudioTracks(),t=!this.state.audioOnly&&this.state.localStream&&this.state.localStream.getVideoTracks(),a=!(e&&e[0]),i=!!(e&&e[0]&&e[0].enabled),s=i?"mic":"mic_off",l=!!(t&&t[0]&&t[0].enabled&&"live"==t[0].readyState),d=l?"videocam":"videocam_off",c=C.speakerSwitchingSupported(),p=this.state.speakerOn?"volume_up":"volume_off",m=(0,o.W5)(this.props.title,24),u=this.state.waitingForPeer?" pulse":"",f=!!this.state.remoteStream;let v=!1;if(this.remoteRef.current&&this.remoteRef.current.srcObject&&this.state.remoteVideoLive){const e=this.remoteRef.current.srcObject;if(e.getVideoTracks().length>0){const t=e.getVideoTracks()[0];v=t.enabled&&"live"==t.readyState}}const S=this.props.minimized?"minimized":null,b=this.props.minimized?"fullscreen":"fullscreen_exit";return this.props.minimized&&this.state.audioOnly?(0,h.jsx)("div",{id:"video-container",className:"minimized audio-minimized",ref:this.containerRef,children:(0,h.jsxs)("div",{className:"call-pill-row",children:[(0,h.jsxs)("div",{className:"call-pill draggable",children:[(0,h.jsx)("i",{className:"material-icons",children:"call"}),(0,h.jsx)("span",{className:"call-pill-duration",children:g(this.state.elapsedSeconds)})]}),(0,h.jsx)("button",{className:"full-screen",onClick:this.props.onToggleMinimize,children:(0,h.jsx)("i",{className:"material-icons",children:b})})]})}):(0,h.jsxs)("div",{id:"video-container",className:S,ref:this.containerRef,children:[f&&(0,h.jsx)("div",{className:"call-duration",children:g(this.state.elapsedSeconds)}),(0,h.jsxs)("div",{id:"video-container-panel",className:"draggable",children:[(0,h.jsxs)("div",{className:"call-party self",ref:this.selfBoxRef,disabled:this.state.audioOnly||this.props.minimized||!f,children:[(0,h.jsx)("video",{ref:this.localRef,autoPlay:!0,muted:!0,playsInline:!0}),(0,h.jsx)("div",{className:"caller-name inactive",children:(0,h.jsx)(n.FormattedMessage,{id:"calls_you_label",defaultMessage:"You",description:"Shown over the local video screen"})})]}),(0,h.jsx)("div",{className:"call-party peer",disabled:!v,children:v?(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)("video",{ref:this.remoteRef,autoPlay:!0,playsInline:!0}),(0,h.jsx)("div",{className:"caller-name inactive",children:m})]}):(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)("audio",{ref:this.remoteRef,autoPlay:!0}),(0,h.jsxs)("div",{className:`caller-card${u} draggable`,children:[(0,h.jsx)("div",{className:"avatar-box",children:(0,h.jsx)(r.A,{authorizeURL:this.props.tinode.authorizeURL,avatar:this.props.avatar,topic:this.props.topic,title:this.props.title})}),(0,h.jsx)("div",{className:"caller-name",children:m}),f?null:(0,h.jsx)("p",{className:"caller-status",children:"正在等待对方接受邀请…"})]})]})})]}),(0,h.jsx)("button",{className:"full-screen",onClick:this.props.onToggleMinimize,children:(0,h.jsx)("i",{className:"material-icons",children:b})}),(0,h.jsxs)("div",{id:"controls",className:S,children:[(0,h.jsx)("button",{className:"danger",onClick:this.handleCloseClick,children:(0,h.jsx)("i",{className:"material-icons",children:"call_end"})}),(0,h.jsx)("button",{className:"secondary"+(l?"":" off"),onClick:this.handleToggleCameraClick,disabled:a,children:(0,h.jsx)("i",{className:"material-icons",children:d})}),(0,h.jsx)("button",{className:"secondary"+(i?"":" off"),onClick:this.handleToggleMicClick,disabled:a,children:(0,h.jsx)("i",{className:"material-icons",children:s})}),c&&(0,h.jsx)("button",{className:"secondary"+(this.state.speakerOn?"":" off"),onClick:this.handleToggleSpeakerClick,disabled:a,children:(0,h.jsx)("i",{className:"material-icons",children:p})}),!this.state.audioOnly&&(0,h.jsx)("button",{className:"secondary",onClick:this.handleSwitchCameraClick,disabled:a||!l,children:(0,h.jsx)("i",{className:"material-icons",children:"flip_camera_android"})})]})]})}}t.default=(0,n.injectIntl)(C)}}]);
//# sourceMappingURL=821.prod.js.map