+39 -19

ui/system/index.js

reviewed

··· 4 4 import { LayoutManager } from "./layout_manager.js"; 5 5 import { MobileLayoutManager } from "./mobile_layout_manager.js"; 6 6 import { PairingHandler } from "./p2p.js"; 7 7 - import { P2PBroadcaster } from "./p2p_broadcaster.js"; 8 7 import "./system_menu.js"; 9 8 import "./mobile_action_bar.js"; 10 9 import "./mobile_notification_sheet.js"; ··· 180 179 onNotificationAdd: addNotification, 181 180 onNotificationRemove: removeNotificationByTag, 182 181 }); 183 183 - 184 184 - // P2P broadcaster for cross-device system features 185 185 - const p2pBroadcaster = new P2PBroadcaster(); 186 182 187 183 window.servo = { 188 184 /** ··· 945 941 }); 946 942 947 943 // Send current page URL to a peer when "Open in <peer>" is selected. 948 948 - document.getElementById("root").addEventListener("p2p-open-in", (e) => { 949 949 - p2pBroadcaster.postMessage("open-view", { url: e.detail.url }); 950 950 - toastManager?.add("Sent to peer"); 951 951 - }); 944 944 + document 945 945 + .getElementById("root") 946 946 + .addEventListener("p2p-open-in", async (e) => { 947 947 + const { peerId, url } = e.detail; 948 948 + if (!peerId || !url) return; 952 949 953 953 - // Receive "open-view" from a peer and prompt the user. 954 954 - p2pBroadcaster.addEventListener("open-view", (e) => { 955 955 - const { payload, peer } = e.detail; 956 956 - const peerName = peer?.displayName || "A peer"; 957 957 - const url = payload?.url; 958 958 - if (!url) { 959 959 - return; 960 960 - } 950 950 + // Try both system app URLs since we don't know the remote platform. 951 951 + const targetURLs = [ 952 952 + "http://system.localhost:8888/index.html", 953 953 + "http://system.localhost:8888/index_mobile.html", 954 954 + ]; 955 955 + try { 956 956 + await Promise.allSettled( 957 957 + targetURLs.map(async (targetURL) => { 958 958 + const port = await navigator.createPeerStream(peerId, targetURL); 959 959 + port.postMessage({ action: "open-view", url }); 960 960 + port.close(); 961 961 + }), 962 962 + ); 963 963 + toastManager?.add("Sent to peer"); 964 964 + } catch { 965 965 + toastManager?.add("Failed to send"); 966 966 + } 967 967 + }); 961 968 969 969 + // Receive targeted P2P messages via PeerStream. 970 970 + window.onpeerstream = (e) => { 971 971 + const port = e.port; 972 972 + const peerId = e.peerId; 973 973 + port.onmessage = (msg) => { 974 974 + const { action, url } = msg.data; 975 975 + if (action === "open-view" && url) { 976 976 + showOpenViewDialog(peerId, url); 977 977 + } 978 978 + }; 979 979 + }; 980 980 + 981 981 + function showOpenViewDialog(peerId, url) { 962 982 // Show a confirmation dialog. 963 983 // TODO: don't inline styles. 964 984 const dialog = document.createElement("dialog"); 965 985 dialog.id = "p2p-open-dialog"; 966 986 dialog.innerHTML = ` 967 967 - <h2>Open page from ${peerName}?</h2> 968 968 - <p style="word-break: break-all; opacity:0.8;f ont-size:0.9em">${url}</p> 987 987 + <h2>Open page from peer?</h2> 988 988 + <p style="word-break: break-all; opacity:0.8; font-size:0.9em">${url}</p> 969 989 <div style="display:flex; gap:0.5em; justify-content:flex-end; margin-top: 1em"> 970 990 <button class="btn-cancel">Decline</button> 971 991 <button class="btn-accept">Open</button> ··· 986 1006 } catch { 987 1007 dialog.remove(); 988 1008 } 989 989 - }); 1009 1009 + } 990 1010 991 1011 const params = new URLSearchParams(window.location.search); 992 1012 const openValue = params.get("open");

+2 -1

ui/system/web_view.js

reviewed

··· 580 580 // Format: "p2p_<type>:<peerId>:<url>" 581 581 const firstColon = action.indexOf(":"); 582 582 const secondColon = action.indexOf(":", firstColon + 1); 583 583 + const peerId = action.slice(firstColon + 1, secondColon); 583 584 const url = action.slice(secondColon + 1); 584 585 this.dispatchEvent( 585 586 new CustomEvent("p2p-open-in", { 586 587 bubbles: true, 587 588 composed: true, 588 588 - detail: { url }, 589 589 + detail: { peerId, url }, 589 590 }), 590 591 ); 591 592 return;