microsoft · tylerbutler · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024
diff --git a/examples/apps/presence-tracker/package.json b/examples/apps/presence-tracker/package.json
@@ -51,6 +51,7 @@
 		"@fluidframework/presence": "workspace:~",
 		"@fluidframework/runtime-utils": "workspace:~",
 		"@fluidframework/tinylicious-client": "workspace:~",
+		"emoji-picker-element": "^1.26.1",
 		"fluid-framework": "workspace:~",
 		"process": "^0.11.10"
 	},

diff --git a/examples/apps/presence-tracker/src/FocusTracker.ts b/examples/apps/presence-tracker/src/FocusTracker.ts
@@ -74,12 +74,24 @@ export class FocusTracker extends TypedEventEmitter<IFocusTrackerEvents> {
 			this.focus.local = {
 				hasFocus: true,
 			};
+
+			const cover = document.querySelector<HTMLDivElement>("#cover");
+			if (cover !== null) {
+				cover.setAttribute("style", "opacity: 0; z-index: auto");
+			}
+
 			this.emit("focusChanged", this.focus.local);
 		});
 		window.addEventListener("blur", () => {
 			this.focus.local = {
 				hasFocus: false,
 			};
+
+			const cover = document.querySelector<HTMLDivElement>("#cover");
+			if (cover !== null) {
+				cover.setAttribute("style", "opacity: 0.7; z-index: 100");
+			}
+
 			this.emit("focusChanged", this.focus.local);
 		});
 	}

diff --git a/examples/apps/presence-tracker/src/MouseTracker.ts b/examples/apps/presence-tracker/src/MouseTracker.ts
@@ -104,4 +104,11 @@ export class MouseTracker extends TypedEventEmitter<IMouseTrackerEvents> {
 	public setAllowableLatency(latency: number | undefined): void {
 		this.cursor.controls.allowableUpdateLatencyMs = latency;
 	}
+
+	/**
+	 * The most recent mouse position of the provided client.
+	 */
+	public getClientMousePosition(client: ISessionClient): IMousePosition {
+		return this.cursor.clientValue(client).value;
+	}
 }
diff --git a/examples/apps/presence-tracker/src/app.ts b/examples/apps/presence-tracker/src/app.ts
@@ -12,6 +12,7 @@ import type { ContainerSchema, IFluidContainer } from "fluid-framework";
 
 import { FocusTracker } from "./FocusTracker.js";
 import { MouseTracker } from "./MouseTracker.js";
+import { initializeReactions } from "./reactions.js";
 import { renderControlPanel, renderFocusPresence, renderMousePresence } from "./view.js";
 
 // Define the schema of the Fluid container.
@@ -71,6 +72,8 @@ async function start() {
 	const focusTracker = new FocusTracker(presence, appPresence);
 	const mouseTracker = new MouseTracker(presence, appPresence);
 
+	initializeReactions(presence, mouseTracker);
+
 	const focusDiv = document.getElementById("focus-content") as HTMLDivElement;
 	renderFocusPresence(focusTracker, focusDiv);
 

diff --git a/examples/apps/presence-tracker/src/index.html b/examples/apps/presence-tracker/src/index.html
@@ -7,8 +7,41 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Test application</title>
+		<style>
+			.reaction {
+				position: absolute;
+				font-size: x-large;
+				animation: fadeUp 1s forwards;
+			}
+
+			@keyframes fadeUp {
+				0% {
+						opacity: 1;
+						transform: translateY(0) rotate(45deg);
+				}
+				100% {
+						opacity: 0;
+						transform: translateY(-50px) rotate(-45deg);
+				}
+		}
+
+		emoji-picker {
+			--num-columns: 6;
+			height: 200px;
+			width: 300px;
+		}
+
+		#cover {
+			position: absolute;
+			background-color: black;
+			height: 100%;
+			width: 100%;
+		}
+		</style>
 	</head>
 	<body style="margin: 0; height: 100%">
+	<div id="cover" style="opacity: 0">
+	</div>
 		<div id="control-panel" style="padding: 10px"></div>
 		<div id="focus-content" style="min-height: 100%; border: 1px solid black"></div>
 		<div id="mouse-position"></div>

diff --git a/examples/apps/presence-tracker/src/reactions.ts b/examples/apps/presence-tracker/src/reactions.ts
@@ -0,0 +1,74 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { Notifications } from "@fluidframework/presence/alpha";
+import type { IPresence, ISessionClient } from "@fluidframework/presence/alpha";
+
+import type { IMousePosition, MouseTracker } from "./MouseTracker.js";
+
+/**
+ * Initializes reactions support for the app. Initialization will create a presence Notifications workspace and connect
+ * relevant event handlers. Reaction elements are added to the DOM in response to incoming notifications. These DOM
+ * elements are automatically removed after a timeout.
+ */
+export function initializeReactions(presence: IPresence, mouseTracker: MouseTracker) {
+	// Create a notifications workspace to send reactions-related notifications. This workspace will be created if it
+	// doesn't exist. We also create a Notifications value manager. You can also
+	// add value managers to the workspace later.
+	const notificationsWorkspace = presence.getNotifications(
+		// A unique key identifying this workspace.
+		"name:reactions",
+		{
+			// Initialize a notifications manager with the provided message schema.
+			reactions:
+				Notifications<// This explicit generic type specification will not be required in the future.
+				{
+					reaction: (
+						// In the future, we'll be able to use IMousePosition here.
+						position: { x: number; y: number },
+						value: string,
+					) => void;
+				}>(
+					// Define a default listener. Listeners can also be added later.
+					{
+						reaction: onReaction,
+					},
+				),
+		},
+	);
+
+	// Send a reaction to all clients on click.
+	document.body.addEventListener("click", (e) => {
+		// Get the current reaction value
+		const selectedReaction = document.getElementById("selected-reaction") as HTMLSpanElement;
+		const reactionValue = selectedReaction.textContent;
+
+		// Check that we're connected before sending notifications.
+		if (presence.getMyself().getConnectionStatus() === "Connected") {
+			notificationsWorkspace.props.reactions.emit.broadcast(
+				"reaction",
+				mouseTracker.getClientMousePosition(presence.getMyself()),
+				reactionValue ?? "?",
+			);
+		}
+	});
+}
+
+/**
+ * Renders reactions to the window using absolute positioning.
+ */
+function onReaction(client: ISessionClient, position: IMousePosition, value: string): void {
+	const reactionDiv = document.createElement("div");
+	reactionDiv.className = "reaction";
+	reactionDiv.style.position = "absolute";
+	reactionDiv.style.left = `${position.x}px`;
+	reactionDiv.style.top = `${position.y}px`;
+	reactionDiv.textContent = value;
+	document.body.appendChild(reactionDiv);
+
+	setTimeout(() => {
+		reactionDiv.remove();
+	}, 1000);
+}
diff --git a/examples/apps/presence-tracker/src/view.ts b/examples/apps/presence-tracker/src/view.ts
@@ -3,39 +3,23 @@
  * Licensed under the MIT License.
  */
 
+import { Picker } from "emoji-picker-element";
+
 import { FocusTracker, type IFocusState } from "./FocusTracker.js";
 import { MouseTracker } from "./MouseTracker.js";
 
 export function renderFocusPresence(focusTracker: FocusTracker, div: HTMLDivElement) {
 	const wrapperDiv = document.createElement("div");
 	wrapperDiv.style.textAlign = "left";
-	wrapperDiv.style.margin = "70px";
+	wrapperDiv.style.margin = "10px";
 	div.appendChild(wrapperDiv);
 
 	const focusDiv = document.createElement("div");
 	focusDiv.id = "focus-div";
 	focusDiv.style.fontSize = "14px";
 
-	const focusMessageDiv = document.createElement("div");
-	focusMessageDiv.id = "message-div";
-	focusMessageDiv.textContent = "Click to focus";
-	focusMessageDiv.style.position = "absolute";
-	focusMessageDiv.style.top = "50px";
-	focusMessageDiv.style.left = "10px";
-	focusMessageDiv.style.color = "red";
-	focusMessageDiv.style.fontWeight = "bold";
-	focusMessageDiv.style.fontSize = "18px";
-	focusMessageDiv.style.border = "2px solid red";
-	focusMessageDiv.style.padding = "10px";
-	focusMessageDiv.style.display = "none";
-	wrapperDiv.appendChild(focusMessageDiv);
-
 	const onFocusChanged = (focusState: IFocusState) => {
 		focusDiv.innerHTML = getFocusPresencesString("<br>", focusTracker);
-		const { hasFocus } = focusState;
-
-		// hasFocus === true should hide the message
-		focusMessageDiv.style.display = hasFocus ? "none" : "";
 	};
 
 	onFocusChanged({ hasFocus: window.document.hasFocus() });
@@ -106,4 +90,30 @@ export function renderControlPanel(mouseTracker: MouseTracker, controlPanel: HTM
 		const target = e.target as HTMLInputElement;
 		mouseTracker.setAllowableLatency(parseInt(target.value, 10));
 	});
+
+	const reactionsConfigDiv = document.createElement("div");
+	reactionsConfigDiv.id = "reactions-config";
+	const reactionLabelDiv = document.createElement("div");
+	reactionLabelDiv.style.marginTop = "10px";
+	reactionLabelDiv.style.marginBottom = "10px";
+	reactionLabelDiv.textContent = "Selected reaction:";
+	reactionsConfigDiv.appendChild(reactionLabelDiv);
+
+	// This span element contains the selected emoji
+	const selectedSpan = document.createElement("span");
+	selectedSpan.id = "selected-reaction";
+	selectedSpan.textContent = "❤️";
+	reactionLabelDiv.appendChild(selectedSpan);
+
+	// Create the emoji-picker element and add it to the panel
+	const picker = new Picker();
+	reactionsConfigDiv.appendChild(picker);
+	controlPanel.appendChild(reactionsConfigDiv);
+
+	// Update the selected reaction emoji when the picker is clicked
+	controlPanel
+		.querySelector("emoji-picker")
+		?.addEventListener("emoji-click", (event: Event & { detail?: any }) => {
+			selectedSpan.textContent = event.detail?.unicode;
+		});
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml