From a9dd23d51b12d9f277a575f09b3b2b70dfc95945 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
Date: Thu, 12 Dec 2024 23:37:14 -0500
Subject: [PATCH] adding broadcast controls for view follow, and shared iframe
 state while broadcasting (attempt)

---
 src/shapes/EmbedShapeUtil.tsx | 27 +++++++++++++++++++++++++++
 src/ui/CustomContextMenu.tsx  | 31 +++++++++++++++++++++++++++++++
 src/ui/overrides.tsx          | 26 ++++++++++++++++++++++++++
 3 files changed, 84 insertions(+)

diff --git a/src/shapes/EmbedShapeUtil.tsx b/src/shapes/EmbedShapeUtil.tsx
index d3192f4..ebc2026 100644
--- a/src/shapes/EmbedShapeUtil.tsx
+++ b/src/shapes/EmbedShapeUtil.tsx
@@ -8,6 +8,11 @@ export type IEmbedShape = TLBaseShape<
     w: number
     h: number
     url: string | null
+    interactionState?: {
+      scrollPosition?: { x: number; y: number }
+      currentTime?: number // for videos
+      // other state you want to sync
+    }
   }
 >
 
@@ -159,6 +164,19 @@ export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
       [inputUrl],
     )
 
+    const handleIframeInteraction = (
+      newState: typeof shape.props.interactionState,
+    ) => {
+      this.editor.updateShape<IEmbedShape>({
+        id: shape.id,
+        type: "Embed",
+        props: {
+          ...shape.props,
+          interactionState: newState,
+        },
+      })
+    }
+
     const wrapperStyle = {
       width: `${shape.props.w}px`,
       height: `${shape.props.h}px`,
@@ -308,6 +326,15 @@ export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
             allowFullScreen
             loading="lazy"
             referrerPolicy="no-referrer"
+            onLoad={(e) => {
+              // Add message listener for iframe communication
+              window.addEventListener("message", (event) => {
+                const iframe = e.currentTarget as HTMLIFrameElement
+                if (event.source === iframe.contentWindow) {
+                  handleIframeInteraction(event.data)
+                }
+              })
+            }}
           />
         </div>
         <div
diff --git a/src/ui/CustomContextMenu.tsx b/src/ui/CustomContextMenu.tsx
index 98f4e39..016847b 100644
--- a/src/ui/CustomContextMenu.tsx
+++ b/src/ui/CustomContextMenu.tsx
@@ -174,6 +174,37 @@ export function CustomContextMenu(props: TLUiContextMenuProps) {
           ))}
         </TldrawUiMenuSubmenu>
       </TldrawUiMenuGroup>
+
+      <TldrawUiMenuGroup id="broadcast-controls">
+        <TldrawUiMenuItem
+          id="broadcast-view"
+          label="Start Broadcasting View"
+          icon="broadcast"
+          kbd="alt+b"
+          onSelect={() => {
+            const otherUsers = Array.from(editor.store.allRecords()).filter(
+              (record) =>
+                record.typeName === "instance_presence" &&
+                record.id !== editor.user.getId(),
+            )
+            otherUsers.forEach((user) => editor.startFollowingUser(user.id))
+          }}
+        />
+        <TldrawUiMenuItem
+          id="stop-broadcast"
+          label="Stop Broadcasting View"
+          icon="broadcast-off"
+          kbd="alt+shift+b"
+          onSelect={() => {
+            const otherUsers = Array.from(editor.store.allRecords()).filter(
+              (record) =>
+                record.typeName === "instance_presence" &&
+                record.id !== editor.user.getId(),
+            )
+            otherUsers.forEach((_user) => editor.stopFollowingUser())
+          }}
+        />
+      </TldrawUiMenuGroup>
     </DefaultContextMenu>
   )
 }
diff --git a/src/ui/overrides.tsx b/src/ui/overrides.tsx
index 2cb0938..7384557 100644
--- a/src/ui/overrides.tsx
+++ b/src/ui/overrides.tsx
@@ -283,6 +283,32 @@ export const overrides: TLUiOverrides = {
           }
         },
       },
+      broadcastView: {
+        id: "broadcast-view",
+        label: "Broadcast View",
+        kbd: "alt+b",
+        readonlyOk: true,
+        onSelect: () => {
+          const otherUsers = Array.from(editor.store.allRecords()).filter(
+            (record) =>
+              record.typeName === "instance_presence" &&
+              record.id !== editor.user.getId(),
+          )
+
+          otherUsers.forEach((user) => {
+            editor.startFollowingUser(user.id)
+          })
+        },
+      },
+      stopBroadcast: {
+        id: "stop-broadcast",
+        label: "Stop Broadcasting",
+        kbd: "alt+shift+b",
+        readonlyOk: true,
+        onSelect: () => {
+          editor.stopFollowingUser()
+        },
+      },
     }
   },
 }