@decentnetwork/lan 0.1.253 → 0.1.255
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui/desktop/app.js +44 -21
- package/package.json +1 -1
package/dist/ui/desktop/app.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
window.__DK_UI_VERSION="0.1.
|
|
1
|
+
window.__DK_UI_VERSION="0.1.255";
|
|
2
2
|
const ICON_PATHS = {
|
|
3
3
|
// ---- tab bar (the four must feel like one set) ----
|
|
4
4
|
users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
|
|
@@ -2688,26 +2688,49 @@ function CallOverlay({ T, ctl, peers }) {
|
|
|
2688
2688
|
{ key: "local", stream: ctl.localStream, label: ctl.sharing ? T && T.yourScreen || "Your screen" : T && T.you || "You", mirror: !ctl.sharing }
|
|
2689
2689
|
].filter((t) => streamHasVideo(t.stream));
|
|
2690
2690
|
const feat = tiles.find((t) => t.key === featured) || tiles[0] || { key: "remote", stream: ctl.remoteStream, label: name };
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2691
|
+
const others = tiles.filter((t) => t.key !== feat.key);
|
|
2692
|
+
return (
|
|
2693
|
+
// The thumbnail strip and the controls FLOAT over the video instead of
|
|
2694
|
+
// stacking under it. A phone camera is 9:16, so the featured tile is
|
|
2695
|
+
// height-limited — `object-fit: contain` already shows the whole frame,
|
|
2696
|
+
// but every pixel of chrome below the video shrinks the only dimension
|
|
2697
|
+
// that matters. Stacked, those two rows ate ~210px; in a 900px-tall
|
|
2698
|
+
// window that is a third of the portrait image. Overlaying them is also
|
|
2699
|
+
// what every other call app does.
|
|
2700
|
+
/* @__PURE__ */ React.createElement("div", { style: { flex: 1, minHeight: 0, position: "relative", padding: 18 } }, /* @__PURE__ */ React.createElement("div", { style: { width: "100%", height: "100%", position: "relative", borderRadius: 14, overflow: "hidden", background: "#000", border: "1px solid var(--line)" } }, feat.stream ? /* @__PURE__ */ React.createElement(VideoSurface, { stream: feat.stream, muted: true, style: { width: "100%", height: "100%", objectFit: "contain", transform: feat.mirror ? "scaleX(-1)" : "none" } }) : /* @__PURE__ */ React.createElement("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React.createElement(DkIdenticon, { seed: call.peerId, size: 92, radius: 22 })), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", left: 14, top: 12, padding: "4px 10px", borderRadius: 8, background: "rgba(0,0,0,.55)", color: "#fff", fontFamily: "var(--mono)", fontSize: 12, fontWeight: 600 } }, feat.label), /* @__PURE__ */ React.createElement("div", { style: {
|
|
2701
|
+
position: "absolute",
|
|
2702
|
+
left: 0,
|
|
2703
|
+
right: 0,
|
|
2704
|
+
bottom: 0,
|
|
2705
|
+
paddingTop: 60,
|
|
2706
|
+
display: "flex",
|
|
2707
|
+
flexDirection: "column",
|
|
2708
|
+
alignItems: "center",
|
|
2709
|
+
gap: 12,
|
|
2710
|
+
background: "linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0))",
|
|
2711
|
+
pointerEvents: "none"
|
|
2712
|
+
} }, others.length > 0 && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", pointerEvents: "auto" } }, others.map((t) => /* @__PURE__ */ React.createElement(
|
|
2713
|
+
"button",
|
|
2714
|
+
{
|
|
2715
|
+
key: t.key,
|
|
2716
|
+
onClick: () => setFeatured(t.key),
|
|
2717
|
+
title: `Show ${t.label}`,
|
|
2718
|
+
style: {
|
|
2719
|
+
position: "relative",
|
|
2720
|
+
width: 150,
|
|
2721
|
+
height: 96,
|
|
2722
|
+
borderRadius: 10,
|
|
2723
|
+
overflow: "hidden",
|
|
2724
|
+
background: "#000",
|
|
2725
|
+
cursor: "pointer",
|
|
2726
|
+
padding: 0,
|
|
2727
|
+
border: "1px solid var(--line)"
|
|
2728
|
+
}
|
|
2729
|
+
},
|
|
2730
|
+
/* @__PURE__ */ React.createElement(VideoSurface, { stream: t.stream, muted: true, style: { width: "100%", height: "100%", objectFit: "contain", transform: t.mirror ? "scaleX(-1)" : "none" } }),
|
|
2731
|
+
/* @__PURE__ */ React.createElement("span", { style: { position: "absolute", left: 6, bottom: 5, padding: "2px 6px", borderRadius: 6, background: "rgba(0,0,0,.6)", color: "#fff", fontSize: 10, fontFamily: "var(--mono)" } }, t.label)
|
|
2732
|
+
))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: 16, pointerEvents: "auto" } }, /* @__PURE__ */ React.createElement("div", { style: { padding: "16px 26px", borderRadius: 20, background: "color-mix(in oklab, var(--panel), transparent 8%)", border: "1px solid var(--line)" } }, controls)))))
|
|
2733
|
+
);
|
|
2711
2734
|
})() : /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 22 } }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center" } }, !connected && /* @__PURE__ */ React.createElement("span", { style: { position: "absolute", width: 150, height: 150, borderRadius: 999, border: "2px solid var(--accent)", animation: "dkpulse 2s ease-out infinite" } }), /* @__PURE__ */ React.createElement(DkIdenticon, { seed: call.peerId, size: 108, radius: 26 })), /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 22, fontWeight: 700, color: "var(--text)" } }, name), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 8, fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--faint)" } }, stateLabel)), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 18 } }, controls)));
|
|
2712
2735
|
}
|
|
2713
2736
|
Object.assign(window, { useCallController, CallOverlay, IncomingCallModal });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@decentnetwork/lan",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.255",
|
|
4
4
|
"description": "Private virtual LAN for self-hosted services and AI agents, built on Elastos Carrier. NAT-traversal, name service, ACL, all over a peer-to-peer mesh — no public IP required.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|