feat(react-dogfood): add collaborative whiteboard

sample-apps/react/react-dogfood/components/ActiveCall.tsx

@@ -66,6 +66,11 @@ import {
   useRemoteFilePublisher,
 } from './RemoteFilePublisher';
 import { ModerationNotification } from './ModerationNotification';
+import {
+  ToggleWhiteboardButton,
+  useWhiteboard,
+  Whiteboard,
+} from './Whiteboard';
 
 export type ActiveCallProps = {
   chatClient?: StreamChat | null;
@@ -162,6 +167,8 @@ export const ActiveCall = (props: ActiveCallProps) => {
 
   const remoteFilePublisherAPI = useRemoteFilePublisher();
 
+  const wb = useWhiteboard();
+
   return (
     <div className="rd__call">
       {isDemoEnvironment && <TourPanel highlightClass="rd__highlight" />}
@@ -189,6 +196,8 @@ export const ActiveCall = (props: ActiveCallProps) => {
                   </button>
                 </>,
               )
+            ) : wb.isOpen ? (
+              <Whiteboard wb={wb} />
             ) : (
               <Stage selectedLayout={layout} />
             )}
@@ -242,6 +251,11 @@ export const ActiveCall = (props: ActiveCallProps) => {
         </div>
         <ModerationNotification />
         <div className="rd__notifications">
+          {wb.notice && (
+            <div className="rd__whiteboard__notice" role="status">
+              {wb.notice}
+            </div>
+          )}
           <Restricted
             requiredGrants={[OwnCapability.SEND_AUDIO]}
             hasPermissionsOnly
@@ -307,6 +321,9 @@ export const ActiveCall = (props: ActiveCallProps) => {
             <div className="str-video__call-controls__desktop">
               <ScreenShareButton />
             </div>
+            <div className="str-video__call-controls__desktop">
+              <ToggleWhiteboardButton wb={wb} />
+            </div>
             {isPronto && (
               <div className="str-video__call-controls__desktop">
                 <IncomingVideoSettingsButton />

sample-apps/react/react-dogfood/components/Whiteboard/ToggleWhiteboardButton.tsx

@@ -0,0 +1,55 @@
+/**
+ * Media-control toggle that opens/closes the shared whiteboard for everyone.
+ */
+import {
+  CompositeButton,
+  useI18n,
+  WithTooltip,
+} from '@stream-io/video-react-sdk';
+
+import type { WhiteboardApi } from './useWhiteboard';
+
+const WhiteboardIcon = () => (
+  <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
+    <rect
+      x="3"
+      y="4"
+      width="18"
+      height="13"
+      rx="1.5"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      fill="none"
+    />
+    <path
+      d="M8 21h8M12 17v4"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      fill="none"
+    />
+    <path
+      d="M7 13l4-4 1.8 1.8L16 7.6"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      fill="none"
+    />
+  </svg>
+);
+
+export const ToggleWhiteboardButton = (props: { wb: WhiteboardApi }) => {
+  const { wb } = props;
+  const { t } = useI18n();
+  return (
+    <WithTooltip title={t('Whiteboard')}>
+      <CompositeButton
+        active={wb.isOpen}
+        variant="primary"
+        disabled={!wb.ready}
+        onClick={() => (wb.isOpen ? wb.close() : wb.open())}
+        data-testid="whiteboard-toggle-button"
+      >
+        <WhiteboardIcon />
+      </CompositeButton>
+    </WithTooltip>
+  );
+};

sample-apps/react/react-dogfood/components/Whiteboard/Whiteboard.tsx

@@ -0,0 +1,145 @@
+/**
+ * Whiteboard stage: centered canvas + bottom toolbar + right-side participants
+ * strip. Laid out like CallParticipantsScreenView (screen-share takeover), and
+ * mounted only while the board is open. Keyboard shortcuts: P/L/R/T select
+ * tools; Ctrl/Cmd +/-/0 control zoom.
+ */
+import { useEffect, useRef, useState } from 'react';
+import {
+  DefaultParticipantViewUI,
+  IconButton,
+  ParticipantView,
+  useCall,
+  useCallStateHooks,
+  useVerticalScrollPosition,
+} from '@stream-io/video-react-sdk';
+
+import type { Tool } from './core/model';
+import {
+  WhiteboardCanvas,
+  type WhiteboardCanvasHandle,
+} from './WhiteboardCanvas';
+import { WhiteboardToolbar } from './WhiteboardToolbar';
+import type { WhiteboardApi } from './useWhiteboard';
+
+const SHORTCUT_TOOLS: Record<string, Tool> = {
+  p: 'pen',
+  l: 'line',
+  r: 'rect',
+  t: 'text',
+  e: 'eraser',
+  h: 'pan',
+};
+
+const isTypingTarget = (target: EventTarget | null): boolean => {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  return tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable;
+};
+
+const WhiteboardParticipants = () => {
+  const call = useCall();
+  const { useParticipants } = useCallStateHooks();
+  const participants = useParticipants();
+  const [scrollWrapper, setScrollWrapper] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (!scrollWrapper || !call) return;
+    const cleanup = call.setViewport(scrollWrapper);
+    return () => cleanup?.();
+  }, [scrollWrapper, call]);
+
+  const scrollPosition = useVerticalScrollPosition(scrollWrapper);
+
+  return (
+    <div className="rd__whiteboard__participants">
+      {scrollPosition && scrollPosition !== 'top' && (
+        <IconButton
+          icon="caret-up"
+          onClick={() =>
+            scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' })
+          }
+        />
+      )}
+      <div
+        ref={setScrollWrapper}
+        className="rd__whiteboard__participants-scroll"
+      >
+        {participants.map((participant) => (
+          <ParticipantView
+            key={participant.sessionId}
+            participant={participant}
+            ParticipantViewUI={DefaultParticipantViewUI}
+          />
+        ))}
+      </div>
+      {scrollPosition && scrollPosition !== 'bottom' && (
+        <IconButton
+          icon="caret-down"
+          onClick={() =>
+            scrollWrapper?.scrollBy({ top: 150, behavior: 'smooth' })
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+export const Whiteboard = (props: { wb: WhiteboardApi }) => {
+  const { wb } = props;
+  const [zoom, setZoom] = useState(1);
+  const handleRef = useRef<WhiteboardCanvasHandle | null>(null);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (isTypingTarget(event.target)) return;
+      if (event.ctrlKey || event.metaKey) {
+        if (event.key === '=' || event.key === '+') {
+          event.preventDefault();
+          handleRef.current?.zoomIn();
+        } else if (event.key === '-') {
+          event.preventDefault();
+          handleRef.current?.zoomOut();
+        } else if (event.key === '0') {
+          event.preventDefault();
+          handleRef.current?.reset();
+        }
+        return;
+      }
+      const tool = SHORTCUT_TOOLS[event.key.toLowerCase()];
+      if (tool) {
+        event.preventDefault();
+        wb.setTool(tool);
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [wb]);
+
+  return (
+    <div className="rd__whiteboard">
+      <div className="rd__whiteboard__stage">
+        <WhiteboardCanvas
+          wb={wb}
+          handleRef={handleRef}
+          onZoomChange={setZoom}
+        />
+        <WhiteboardToolbar
+          activeTool={wb.activeTool}
+          setTool={wb.setTool}
+          color={wb.color}
+          setColor={wb.setColor}
+          onClear={wb.clear}
+          onZoomIn={() => handleRef.current?.zoomIn()}
+          onZoomOut={() => handleRef.current?.zoomOut()}
+          onReset={() => handleRef.current?.reset()}
+          onFit={() => handleRef.current?.fit()}
+          zoom={zoom}
+        />
+      </div>
+      <WhiteboardParticipants />
+    </div>
+  );
+};