{
+ if (event.currentTarget.open) event.currentTarget.scrollIntoView({ block: "nearest" });
+ }}>
+
+
+
+ ) : null}
) : null}
diff --git a/src/client/components/living/Couch.tsx b/src/client/components/living/Couch.tsx
index e6fe09d..1ef91ca 100644
--- a/src/client/components/living/Couch.tsx
+++ b/src/client/components/living/Couch.tsx
@@ -25,19 +25,27 @@ export interface CouchHostEntry {
onSelect?: () => void;
}
+export interface CouchProps {
+ view: "host" | "viewer";
+ host?: CouchHostEntry | null;
+ entries: CouchEntry[];
+ selectedKey?: string | null;
+ onSelect?: (key: string) => void;
+ participantAction?: {
+ open: (key: string, trigger: HTMLButtonElement) => void;
+ target: string | null;
+ controls: string;
+ };
+}
+
export function Couch({
view,
host,
entries,
selectedKey,
onSelect,
-}: {
- view: "host" | "viewer";
- host?: CouchHostEntry | null;
- entries: CouchEntry[];
- selectedKey?: string | null;
- onSelect?: (key: string) => void;
-}) {
+ participantAction,
+}: CouchProps) {
const { t } = useCopy();
const [couchRef, containerWidth] = useElementWidth();
const count = entries.length + (host ? 1 : 0);
@@ -76,15 +84,16 @@ export function Couch({
aria-label={`${t("common.host")} · ${t("common.viewers")}`}
>
{host ? (
-
+
+
+
+
+ {t(excludeAudio ? "host.sourcePicker.excludeAudioHint" : "host.sourcePicker.excludeAudioChoose")}
+
+
+ { if (!event.currentTarget.contains(event.relatedTarget as Node)) event.currentTarget.open = false; }}
+ onKeyDown={event => {
+ if (event.key !== "Escape" || event.defaultPrevented || event.nativeEvent.isComposing || !event.currentTarget.open) return;
+ event.stopPropagation(); event.currentTarget.open = false;
+ event.currentTarget.querySelector("summary")?.focus();
+ }}>
+
+
+
+
+
+ {(["topLeft", "topRight", "bottomLeft", "bottomRight"] as const).map((corner, index) => {
+ const x = index % 2, y = Math.floor(index / 2);
+ return ;
+ })}
+ {(["default", "large"] as const).map(size => )}
+
+
+
+
+ { if (!open) setTarget(null); }}>
+
+
;
+}
diff --git a/src/client/components/living/RoomReaction.tsx b/src/client/components/living/RoomReaction.tsx
new file mode 100644
index 0000000..51d1838
--- /dev/null
+++ b/src/client/components/living/RoomReaction.tsx
@@ -0,0 +1,119 @@
+import { useLayoutEffect, useRef, type CSSProperties, type RefObject } from "react";
+import { REACTION_DURATION_MS, REACTION_GLYPHS, isThrow, type ReactionId } from "../../../shared/room-interactions";
+import type { RoomInteraction } from "../../lib/room-interactions";
+import { identityHash } from "../../lib/identity-hash";
+import { Glyph } from "../../ui/icons";
+
+/** Props use the same small silhouette in the picker and on the couch. */
+export function ReactionIcon({ reaction }: { reaction: ReactionId }) {
+ if (!isThrow(reaction)) return ;
+ return ;
+}
+
+/** Fixed, event-seeded accents: no independent timer or mutable random stream. */
+function ReactionAccents({ reaction, seed }: { reaction: ReactionId; seed: number }) {
+ return ;
+}
+
+/** Event expiry owns lifetime. This component owns only placement and its own impact. */
+export function RoomReaction({ reaction, area, now }: {
+ reaction: RoomInteraction & { expiresAt: number }; area: RefObject
+ {state.reactions.map(({ id, sender, payload }) => payload.kind === "reaction" &&
+ + {t(payload.targetPeerId ? "interaction.receivedReaction" : "interaction.expressedReaction", { + sender: sender.displayName, + reaction: t(`interaction.reaction.${payload.reaction}`), + target: participants.find(person => person.peerId === payload.targetPeerId)?.displayName ?? t("interaction.participant"), + })} +
)} +
+
+
+
+ { const node = event.currentTarget; setFollowing(node.scrollHeight - node.scrollTop - node.clientHeight < 40); }}>
+ {state.messages.length === 0 ?
+ {!following && state.messages.length > 0 && }
+
+
: state.messages.map((message, index) => {
+ const previous = state.messages[index - 1];
+ const continuation = previous?.sender.peerId === message.sender.peerId && previous.sender.displayName === message.sender.displayName;
+ return {vis ? "···" : t("interaction.empty")}
+
+ {!continuation && }
+
;
+ })}
+
+ {message.sender.displayName}
+ {message.sender.role === "host" && · {t("common.host")}}
+
+ {message.payload.kind === "chat" && message.payload.text}
+
+
+
+
+
+
+
+
+
+ {person
+ ?
+ {[false, true].filter(throws => !throws || (person && target !== state.peerId)).map(throws =>
+ {REACTION_IDS.filter(reaction => isThrow(reaction) === throws).map(reaction => )}
+
)}
+ {state.error || !state.ready ?
+
: null}
+ {inspect && }
+ {target === state.peerId &&
+
}
+
@@ -181,12 +194,16 @@ export function ControlsPreview() {
{en ? ["Available", "Loading", "App unavailable", "Update needed", "Capture unavailable", "Read failed", "Empty list"][index] : ["正常", "读取中", "App 未连接", "需要更新", "无法采集", "读取失败", "空列表"][index]})}
{en ? "A little company" : "聊两句，丢个番茄。"}
+{en ? "Click a person for reactions. Drag or resize either window." : "点小人发表情；聊天与表情窗都能拖动、缩放。"}
+
+
+
+ {}}
+ theaterMode={theater} onToggleTheater={() => setTheater(value => !value)} onReconnect={() => {}} reconnectAvailable={false}
+ extraActions={ ({
+ key: index ? `preview-friend-${index}` : "preview-friend", name: index ? `Friend ${index + 1}` : "Piik friend",
+ you: viewer && index === 0,
+ status: deriveParticipantStatus({ upstream: { kind: "peer", peerId: "preview-host" }, mediaReady: true }, true),
+ }))
+ } />
-
- changeRoutePolicy({ topologyOptimization: checked })
- }
- label={t("host.advanced.route.topo")}
- note={t("host.advanced.route.topoHint")}
- hint="hint-topology"
- />
-
- changeRoutePolicy({ natPrediction: checked })
- }
- label={t("host.advanced.route.natPrediction")}
- note={t(
- natPredictionAvailable
- ? "host.advanced.route.natPredictionHint"
- : "host.advanced.route.natPredictionUnavailable",
- )}
- hint={
- natPredictionAvailable ? "hint-nat-prediction" : "hint-nat-unavailable"
- }
- />
-
- changeRoutePolicy({ peerOnly: checked })
- }
- label={t("host.advanced.route.peerOnly")}
- note={t(
- sfuAvailable
- ? "host.advanced.route.peerOnlyHint"
- : "host.advanced.route.peerOnlyRequired",
- )}
- hint={sfuAvailable ? "hint-route-p2p" : "hint-route-p2p-required"}
- />
+ {sfuOnly ? {}}
+ label={t("host.advanced.route.sfuOnly")}
+ note={t("host.advanced.route.sfuOnlyHint")}
+ hint="hint-route-sfu"
+ /> : <>
+
+ changeRoutePolicy({ topologyOptimization: checked })
+ }
+ label={t("host.advanced.route.topo")}
+ note={t("host.advanced.route.topoHint")}
+ hint="hint-topology"
+ />
+
+ changeRoutePolicy({ natPrediction: checked })
+ }
+ label={t("host.advanced.route.natPrediction")}
+ note={t(
+ natPredictionAvailable
+ ? "host.advanced.route.natPredictionHint"
+ : "host.advanced.route.natPredictionUnavailable",
+ )}
+ hint={
+ natPredictionAvailable ? "hint-nat-prediction" : "hint-nat-unavailable"
+ }
+ />
+
+ changeRoutePolicy({ peerOnly: checked })
+ }
+ label={t("host.advanced.route.peerOnly")}
+ note={t(
+ sfuAvailable
+ ? "host.advanced.route.peerOnlyHint"
+ : "host.advanced.route.peerOnlyRequired",
+ )}
+ hint={sfuAvailable ? "hint-route-p2p" : "hint-route-p2p-required"}
+ />
+ }
@@ -3932,7 +4042,7 @@ export function HostPage({
}
/>
-