From 20ad75e3c2cee5fb92687523ae8e0d8e90c64dfe Mon Sep 17 00:00:00 2001
From: Matt Hova <matthova87@gmail.com>
Date: Mon, 4 Mar 2024 23:06:42 -0800
Subject: [PATCH 1/2] Update instance to show all users and their speaking
 state

---
 .../packages/client/src/pages/Instance.tsx    | 62 ++++++++++++++-----
 1 file changed, 48 insertions(+), 14 deletions(-)

diff --git a/examples/iframe-playground/packages/client/src/pages/Instance.tsx b/examples/iframe-playground/packages/client/src/pages/Instance.tsx
index 01f25e55..838ab746 100644
--- a/examples/iframe-playground/packages/client/src/pages/Instance.tsx
+++ b/examples/iframe-playground/packages/client/src/pages/Instance.tsx
@@ -1,30 +1,64 @@
-import {useState, useEffect} from 'react';
+import * as React from 'react';
 import discordSdk from '../discordSdk';
-import {Events, EventPayloadData} from '@discord/embedded-app-sdk';
-
-type UpdateEvent = EventPayloadData<'ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE'>;
+import {EventPayloadData} from '@discord/embedded-app-sdk';
 
 export default function Instance() {
-  const [participants, setParticipants] = useState<UpdateEvent['participants']>([]);
-  useEffect(() => {
-    const updateParticipants = (res: UpdateEvent) => {
+  const [participants, setParticipants] = React.useState<
+    EventPayloadData<'ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE'>['participants']
+  >([]);
+  const [speakingParticipants, setSpeakingParticipants] = React.useState<string[]>([]); // Array of user ids who are currently speaking
+
+  React.useEffect(() => {
+    const updateParticipants = (res: EventPayloadData<'ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE'>) => {
       setParticipants(res.participants);
     };
     discordSdk.commands.getInstanceConnectedParticipants().then(updateParticipants);
-    discordSdk.subscribe(Events.ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE, updateParticipants);
+    discordSdk.subscribe('ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE', updateParticipants);
+
+    return () => {
+      discordSdk.unsubscribe('ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE', updateParticipants);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    const addSpeakingParticipants = (res: EventPayloadData<'SPEAKING_START'>) => {
+      setSpeakingParticipants((s) => [...s, res.user_id]);
+    };
+    const removeSpeakingParticipants = (res: EventPayloadData<'SPEAKING_STOP'>) => {
+      setSpeakingParticipants((speakingParticipants) =>
+        speakingParticipants.filter((speakingParticipant) => speakingParticipant !== res.user_id)
+      );
+    };
+    discordSdk.subscribe('SPEAKING_START', addSpeakingParticipants, {channel_id: discordSdk.channelId});
+    discordSdk.subscribe('SPEAKING_STOP', removeSpeakingParticipants, {channel_id: discordSdk.channelId});
 
     return () => {
-      discordSdk.unsubscribe(Events.ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE, updateParticipants);
+      discordSdk.unsubscribe('SPEAKING_START', addSpeakingParticipants, {channel_id: discordSdk.channelId});
+      discordSdk.unsubscribe('SPEAKING_STOP', removeSpeakingParticipants, {channel_id: discordSdk.channelId});
     };
   }, []);
   return (
-    <div>
-      <b>Participants:</b>
-      <ul>
+    <div style={{padding: 32}}>
+      <h2>Tracking instance participants and their speaking state</h2>
+      <br />
+      <p>This example tracks who is participating in the activity and whether or not they are speaking.</p>
+      <br />
+      <div style={{display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8}}>
+        <div>
+          <b>Username</b>
+        </div>
+        <div>
+          <b>Speaking Status</b>
+        </div>
         {participants.map((user) => {
-          return <li key={user.id}>{user.nickname ?? user.global_name}</li>;
+          return (
+            <React.Fragment key={user.id}>
+              <div>{user.nickname ?? user.global_name}</div>
+              <div>{speakingParticipants.some((s) => s === user.id) ? 'Speaking' : 'Not Speaking'}</div>
+            </React.Fragment>
+          );
         })}
-      </ul>
+      </div>
     </div>
   );
 }

From 9b2058f6a81a1ddb48b445c6c4c5f3f15d54a4c7 Mon Sep 17 00:00:00 2001
From: Matt Hova <matthova87@gmail.com>
Date: Tue, 5 Mar 2024 09:14:09 -0800
Subject: [PATCH 2/2] Rename page

---
 examples/iframe-playground/packages/client/src/App.tsx | 10 +++++-----
 .../pages/{Instance.tsx => ActivityParticipants.tsx}   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)
 rename examples/iframe-playground/packages/client/src/pages/{Instance.tsx => ActivityParticipants.tsx} (98%)

diff --git a/examples/iframe-playground/packages/client/src/App.tsx b/examples/iframe-playground/packages/client/src/App.tsx
index d9561073..22c163d9 100755
--- a/examples/iframe-playground/packages/client/src/App.tsx
+++ b/examples/iframe-playground/packages/client/src/App.tsx
@@ -29,7 +29,7 @@ import * as S from './AppStyles';
 import SafeAreas from './pages/SafeAreas';
 import ThermalStates from './pages/ThermalStates';
 import ActivityChannel from './pages/ActivityChannel';
-import Instance from './pages/Instance';
+import ActivityParticipants from './pages/ActivityParticipants';
 
 // Add contexts here
 export default function App(): React.ReactElement {
@@ -161,10 +161,10 @@ const routes: Record<string, AppRoute> = {
     name: 'Window Size Tracker',
     component: WindowSizeTracker,
   },
-  instance: {
-    path: '/instance',
-    name: 'Instance Debug',
-    component: Instance,
+  activityParticipants: {
+    path: '/activity-participants',
+    name: 'Activity Participants',
+    component: ActivityParticipants,
   },
 };
 
diff --git a/examples/iframe-playground/packages/client/src/pages/Instance.tsx b/examples/iframe-playground/packages/client/src/pages/ActivityParticipants.tsx
similarity index 98%
rename from examples/iframe-playground/packages/client/src/pages/Instance.tsx
rename to examples/iframe-playground/packages/client/src/pages/ActivityParticipants.tsx
index 838ab746..d10b8b15 100644
--- a/examples/iframe-playground/packages/client/src/pages/Instance.tsx
+++ b/examples/iframe-playground/packages/client/src/pages/ActivityParticipants.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import discordSdk from '../discordSdk';
 import {EventPayloadData} from '@discord/embedded-app-sdk';
 
-export default function Instance() {
+export default function ActivityParticipants() {
   const [participants, setParticipants] = React.useState<
     EventPayloadData<'ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE'>['participants']
   >([]);