adding broadcast controls for view follow, and shared iframe state while broadcasting (attempt)

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

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>
   )
 }

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()
+        },
+      },
     }
   },
 }