| 1019 | }, |
| 1020 | |
| 1021 | async _bindSocketEvents() { |
| 1022 | if (!this._frameOff) { |
| 1023 | const frameHandler = ({ data }) => { |
| 1024 | if (data?.context_id !== this.contextId) return; |
| 1025 | if (data?.viewer_id && data.viewer_id !== this._viewerToken) return; |
| 1026 | if (data?.viewer_transport) { |
| 1027 | this.viewerTransport = this.normalizeViewerTransport(data.viewer_transport); |
| 1028 | } |
| 1029 | const incomingContextId = this.normalizeContextId(data.context_id || this.contextId); |
| 1030 | const incomingBrowserId = this.normalizeBrowserId(data.browser_id || data.state?.id); |
| 1031 | this.applyBrowserListing(data.browsers || [], incomingContextId, { replaceContext: true }); |
| 1032 | if (incomingBrowserId && !this.activeBrowserId) { |
| 1033 | this.setActiveBrowserId(incomingBrowserId, incomingContextId); |
| 1034 | } |
| 1035 | if ( |
| 1036 | incomingBrowserId |
| 1037 | && this.activeBrowserId |
| 1038 | && !this.sameBrowserTab(incomingBrowserId, incomingContextId, this.activeBrowserId, this.activeBrowserContextId) |
| 1039 | ) { |
| 1040 | return; |
| 1041 | } |
| 1042 | if (data.state) { |
| 1043 | this.frameState = data.state; |
| 1044 | } |
| 1045 | if (!this.addressFocused && data.state?.currentUrl) { |
| 1046 | this.address = data.state.currentUrl; |
| 1047 | } |
| 1048 | if (data.image) { |
| 1049 | const frameBrowserId = incomingBrowserId || this.activeBrowserId; |
| 1050 | this.queueFrameRender(`data:${data.mime || "image/jpeg"};base64,${data.image}`, { |
| 1051 | browserId: frameBrowserId, |
| 1052 | contextId: incomingContextId, |
| 1053 | dimensions: this.frameDimensionsFromMetadata(data.metadata), |
| 1054 | onAccepted: () => { |
| 1055 | if ( |
| 1056 | this.sameBrowserId(this.switchingBrowserId, frameBrowserId) |
| 1057 | && this.normalizeContextId(this.activeBrowserContextId) === incomingContextId |
| 1058 | ) { |
| 1059 | this.switchingBrowserId = null; |
| 1060 | } |
| 1061 | this._surfaceSwitching = false; |
| 1062 | }, |
| 1063 | }); |
| 1064 | } else if (!data.state) { |
| 1065 | this.cancelFrameRender(); |
| 1066 | this.frameSrc = ""; |
| 1067 | } |
| 1068 | if (!data.image && !data.state) { |
| 1069 | if (!this.activeBrowserId) { |
| 1070 | this.setActiveBrowserId(null, ""); |
| 1071 | this.frameState = null; |
| 1072 | this.frameSrc = ""; |
| 1073 | } |
| 1074 | } |
| 1075 | this._lastFrameAt = Date.now(); |
| 1076 | }; |
| 1077 | await websocket.on("browser_viewer_frame", frameHandler); |
| 1078 | this._frameOff = () => websocket.off("browser_viewer_frame", frameHandler); |