@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/plugins/transcription/TranscriptionButton.jsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  selectIsAllowedToPublish,
+  selectSessionStore,
+  useHMSActions,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { ClosedCaptionIcon } from '@100mslive/react-icons';
+import { Box } from '../../../Layout';
+import { Text } from '../../../Text';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+import { Transcriber } from './Transcriber';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+export function TranscriptionButton() {
+  const transcriptionState = useHMSStore(selectSessionStore(SESSION_STORE_KEY.TRANSCRIPTION_STATE));
+  const rawStore = useHMSVanillaStore();
+  const isTranscriptionEnabled = !!transcriptionState?.enabled;
+  let transcript = '',
+    speakingPeer = '';
+  if (isTranscriptionEnabled) {
+    transcript = transcriptionState.transcript || '';
+    speakingPeer = transcriptionState.speakingPeer || '';
+  }
+
+  const transcriber = useRef(null);
+  const hmsActions = useHMSActions();
+  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
+
+  useEffect(() => {
+    hmsActions.sessionStore.observe(SESSION_STORE_KEY.TRANSCRIPTION_STATE);
+  }, [hmsActions]);
+
+  useEffect(() => {
+    if (!transcriber.current) {
+      // create transcriber with the current room state for transcription
+      transcriber.current = new Transcriber({
+        hmsStore: rawStore,
+        setTranscriptAndSpeakingPeer: async (transcript, peerName) => {
+          const transcriptionCurrentEnabledState = !!rawStore.getState(
+            selectSessionStore(SESSION_STORE_KEY.TRANSCRIPTION_STATE),
+          )?.enabled;
+          await hmsActions.sessionStore.set(SESSION_STORE_KEY.TRANSCRIPTION_STATE, {
+            enabled: transcriptionCurrentEnabledState,
+            transcript,
+            speakingPeer: peerName,
+          });
+        },
+        setIsTranscriptionEnabled: async newEnabledState => {
+          await hmsActions.sessionStore.set(SESSION_STORE_KEY.TRANSCRIPTION_STATE, {
+            enabled: newEnabledState,
+          });
+        },
+      });
+    }
+    return () => {
+      if (transcriber.current) {
+        transcriber.current.cleanup();
+      }
+    };
+  }, [hmsActions, rawStore]);
+
+  useEffect(() => {
+    // remote enabled transcript
+    if (isTranscriptionEnabled) {
+      transcriber.current.enableTranscription(true);
+    }
+  }, [isTranscriptionEnabled]);
+
+  const toggleTranscriptionState = useCallback(() => {
+    transcriber.current.toggleTranscriptionState();
+  }, []);
+
+  return (
+    <>
+      <Box
+        css={{
+          textAlign: 'left',
+          fontWeight: '$medium',
+          bottom: '120px',
+          position: 'fixed',
+          width: '100%',
+          fontSize: '$20px',
+          zIndex: '1000000',
+          color: 'white',
+          textShadow: '0px 0px 6px #000',
+          whiteSpace: 'pre-line',
+          paddingLeft: '40px',
+        }}
+      />
+      <Box
+        css={{
+          textAlign: 'center',
+          fontWeight: '$medium',
+          bottom: '90px',
+          position: 'fixed',
+          width: '100%',
+          fontSize: '$20px',
+          zIndex: '1000000',
+          color: 'white',
+          textShadow: '0px 0px 6px #000',
+          whiteSpace: 'pre-line',
+        }}
+      >
+        <Text
+          css={{
+            color: 'white',
+            textShadow: '0px 0px 6px #000',
+          }}
+        >
+          {transcript}
+        </Text>
+        <Text
+          css={{
+            color: '#c0bbbb',
+            textShadow: '0px 0px 6px #000',
+            textTransform: 'capitalize',
+          }}
+        >
+          {speakingPeer}
+        </Text>
+      </Box>
+      {isAllowedToPublish.audio && (
+        <Tooltip title={`Turn ${!isTranscriptionEnabled ? 'on' : 'off'} transcription`}>
+          <IconButton
+            active={!isTranscriptionEnabled}
+            onClick={toggleTranscriptionState}
+            data-testid="transcription_btn"
+          >
+            <ClosedCaptionIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+    </>
+  );
+}

package/src/Prebuilt/plugins/transcription/index.jsx

@@ -0,0 +1 @@
+export { TranscriptionButton as default } from './TranscriptionButton';

package/src/Prebuilt/plugins/whiteboard/PusherCommunicationProvider.js

@@ -0,0 +1,110 @@
+// @ts-check
+import Pusher from 'pusher-js';
+
+const stringifyWithNull = obj => JSON.stringify(obj, (k, v) => (v === undefined ? null : v));
+
+/**
+ * On whiteboard close, owner sends current state to remote peers.
+ * Remote peers tear down too quickly(unsubscribing listeners) and are unable to store the last state.
+ *
+ * Hack: To overcome this, attach 2 listeners:
+ * one for storing the message(won't be unsubscribed),
+ * one for calling the actual whiteboard callback(will be unsubscribed on whiteboard close)
+ *
+ * This way the last state is always received and stored
+ */
+
+/**
+ * Base class which can be extended to use various realtime communication services.
+ * Methods to broadcast and subscribe to events.
+ *
+ * Stores the last message received/broadcasted to resend when required(when board is ready)
+ */
+
+class PusherCommunicationProvider {
+  constructor() {
+    /** @private */
+    this.initialized = false;
+    /** @private */
+    this.lastMessage = {};
+  }
+
+  init = (roomId = '') => {
+    if (this.initialized) {
+      return;
+    }
+
+    /** @private */
+    this.pusher = new Pusher(process.env.REACT_APP_PUSHER_APP_KEY, {
+      cluster: 'ap2',
+      authEndpoint: process.env.REACT_APP_PUSHER_AUTHENDPOINT,
+    });
+
+    // Pusher.default.logToConsole = true;
+
+    /** @private */
+    this.channel = this.pusher.subscribe(`private-${roomId}`);
+
+    /**
+     * When events(peer-join) are sent too early before subscribing to a channel,
+     * resend last event after subscription has succeeded.
+     */
+    this.channel.bind('pusher:subscription_succeeded', this.resendLastEvents);
+
+    console.log('Whiteboard initialized communication through Pusher');
+    this.initialized = true;
+  };
+
+  /**
+   * @param {string} eventName
+   * @param {any} message
+   */
+  storeEvent = (eventName, message) => {
+    this.lastMessage[eventName] = { eventName, ...message };
+  };
+
+  /**
+   * @param {string} eventName
+   * @returns {any}
+   */
+  getStoredEvent = eventName => {
+    return this.lastMessage[eventName];
+  };
+
+  /**
+   * @param {string} eventName
+   * @param {Object} arg
+   */
+  broadcastEvent = (eventName, arg = {}) => {
+    this.storeEvent(eventName, arg);
+
+    this.channel?.trigger(`client-${eventName}`, stringifyWithNull({ eventName, ...arg }));
+  };
+
+  /**
+   *
+   * @param {string} eventName
+   * @param {Function} cb
+   */
+  subscribe = (eventName, cb) => {
+    this.channel?.bind(`client-${eventName}`, message => this.storeEvent(eventName, message));
+    this.channel?.bind(`client-${eventName}`, cb);
+    return () => {
+      this.channel?.unbind(`client-${eventName}`, cb);
+    };
+  };
+
+  /** @private */
+  resendLastEvents = () => {
+    for (const eventName in this.lastMessage) {
+      if (this.lastMessage[eventName]) {
+        this.channel?.trigger(`client-${eventName}`, this.lastMessage[eventName]);
+      }
+    }
+  };
+}
+
+/**
+ * @type {PusherCommunicationProvider}
+ */
+export const provider = new PusherCommunicationProvider();

package/src/Prebuilt/plugins/whiteboard/README.md

@@ -0,0 +1,29 @@
+# Collaborative Whiteboard setup
+
+## Pusher Account
+
+- Create an Pusher account at https://pusher.com/.
+- Create a new channels app.
+- Go to the “App Keys” page for that app(apps list view at https://dashboard.pusher.com/apps), and make a note of your app_id, key, secret and cluster.
+- Go to the "App Settings" page and enable client events.
+
+## Whiteboard Server
+
+- Fork the whiteboard pusher server from https://github.com/100mslive/whiteboard-server and deploy it using your preferred hosting provider.
+- Add the pusher keys noted earlier to environment variables.
+
+```
+APP_CLUSTER="cluster"
+APP_SECRET="secret"
+APP_KEY="key"
+APP_ID="app_id"
+```
+
+- The API path is `api/pusher/auth`, say your deployment URL is `whiteboard-server.vercel.app`, the Pusher Auth Endpoint is `https://whiteboard-server.vercel.app/api/pusher/auth`
+
+## Whiteboard Client
+
+- Copy the whole folder at `/src/plugins/whiteboard` into your live video conferencing apps using 100ms' SDKs.
+- Add the pusher app key and pusher auth endpoint to `REACT_APP_PUSHER_APP_KEY` and `REACT_APP_PUSHER_AUTHENDPOINT` environment variables.
+- The `useWhiteboardMetadata` hook returns state such as the whiteboard owner(`whiteboardOwner`) and action to toggle the whiteboard(`toggleWhiteboard`). Refer usage in `ToggleWhiteboard.jsx` - an icon button to toggle the whiteboard based on the active state.
+- When the whiteboard is active(`whiteboardOwner` from `useWhiteboardMetadata` is not null), render the `Whiteboard` component on your UI to let your users draw on the whiteboard. Refer `mainView.jsx` and `WhiteboardView.jsx`.

package/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
+import { PencilDrawIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+import { useHLSViewerRole } from '../../components/AppData/useUISettings';
+import { useIsFeatureEnabled } from '../../components/hooks/useFeatures';
+import { useWhiteboardMetadata } from './useWhiteboardMetadata';
+import { FEATURE_LIST } from '../../common/constants';
+
+export const ToggleWhiteboard = () => {
+  const {
+    whiteboardEnabled,
+    whiteboardOwner: whiteboardActive,
+    amIWhiteboardOwner,
+    toggleWhiteboard,
+  } = useWhiteboardMetadata();
+  const hlsViewerRole = useHLSViewerRole();
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.WHITEBOARD);
+
+  if (!whiteboardEnabled || localPeerRole === hlsViewerRole || !isFeatureEnabled) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      title={`${
+        whiteboardActive ? (amIWhiteboardOwner ? `Stop whiteboard` : `Can't stop whiteboard`) : 'Start whiteboard'
+      }`}
+      key="whiteboard"
+    >
+      <IconButton
+        onClick={toggleWhiteboard}
+        active={!whiteboardActive}
+        disabled={whiteboardActive && !amIWhiteboardOwner}
+        data-testid="white_board_btn"
+      >
+        <PencilDrawIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/plugins/whiteboard/Whiteboard.css

@@ -0,0 +1,12 @@
+/* Hide undo and redo buttons */
+.c-bUEyht-jvfJsl-side-right > button:nth-child(1) {
+  display: none;
+}
+
+.c-bUEyht-jvfJsl-side-right > button:nth-child(2) {
+  display: none;
+}
+
+#TD-PrimaryTools-Image {
+  display: none;
+}

package/src/Prebuilt/plugins/whiteboard/Whiteboard.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Tldraw } from '@tldraw/tldraw';
+import { useMultiplayerState } from './useMultiplayerState';
+import './Whiteboard.css';
+
+export const Whiteboard = React.memo(({ roomId }) => {
+  const events = useMultiplayerState(roomId);
+  return (
+    <Tldraw autofocus disableAssets={true} showSponsorLink={false} showPages={false} showMenu={false} {...events} />
+  );
+});

package/src/Prebuilt/plugins/whiteboard/WhiteboardEvents.js

@@ -0,0 +1,8 @@
+export const WhiteboardEvents = {
+  // To broadcast new changes made in whiteboard
+  STATE_CHANGE: 'state-change',
+  // To broadcast the current whole state of the board by the owner
+  CURRENT_STATE: 'current-state',
+  // For newly joined peers to request current state from owner
+  REQUEST_STATE: 'request-state',
+};

package/src/Prebuilt/plugins/whiteboard/index.js

@@ -0,0 +1,3 @@
+export { Whiteboard } from './Whiteboard';
+export { ToggleWhiteboard } from './ToggleWhiteboard';
+export { useWhiteboardMetadata } from './useWhiteboardMetadata';

package/src/Prebuilt/plugins/whiteboard/useMultiplayerState.js

@@ -0,0 +1,212 @@
+// @ts-check
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { selectDidIJoinWithin, useHMSStore } from '@100mslive/react-sdk';
+import { provider as room } from './PusherCommunicationProvider';
+import { WhiteboardEvents as Events } from './WhiteboardEvents';
+import { useWhiteboardMetadata } from './useWhiteboardMetadata';
+
+const useWhiteboardState = () => {
+  const { amIWhiteboardOwner } = useWhiteboardMetadata();
+  /*
+   * LIVE-1470 state need to have some delay after join.
+   * It will initialize pusher room and send request state.
+   */
+  const shouldRequestState = useHMSStore(selectDidIJoinWithin(2000));
+
+  return { shouldRequestState, amIWhiteboardOwner };
+};
+
+/**
+ * Ref: https://github.com/tldraw/tldraw/blob/main/apps/www/hooks/useMultiplayerState.ts
+ */
+export function useMultiplayerState(roomId) {
+  const [app, setApp] = useState(null);
+  const [isReady, setIsReady] = useState(false);
+  const { amIWhiteboardOwner, shouldRequestState } = useWhiteboardState();
+
+  /**
+   * Stores current state(shapes, bindings, [assets]) of the whiteboard
+   */
+  const rLiveShapes = useRef(new Map());
+  const rLiveBindings = useRef(new Map());
+
+  const getCurrentState = useCallback(() => {
+    return {
+      shapes: rLiveShapes.current ? Object.fromEntries(rLiveShapes.current) : {},
+      bindings: rLiveBindings.current ? Object.fromEntries(rLiveBindings.current) : {},
+    };
+  }, []);
+
+  const sendCurrentState = useCallback(() => {
+    if (amIWhiteboardOwner && isReady) {
+      room.broadcastEvent(Events.CURRENT_STATE, getCurrentState());
+    }
+  }, [amIWhiteboardOwner, isReady, getCurrentState]);
+
+  const updateLocalState = useCallback(({ shapes, bindings, merge = true }) => {
+    if (!(shapes && bindings)) {
+      return;
+    }
+
+    if (merge) {
+      const lShapes = rLiveShapes.current;
+      const lBindings = rLiveBindings.current;
+
+      if (!(lShapes && lBindings)) {
+        return;
+      }
+      Object.entries(shapes).forEach(([id, shape]) => {
+        if (!shape) {
+          lShapes.delete(id);
+        } else {
+          lShapes.set(shape.id, shape);
+        }
+      });
+
+      Object.entries(bindings).forEach(([id, binding]) => {
+        if (!binding) {
+          lBindings.delete(id);
+        } else {
+          lBindings.set(binding.id, binding);
+        }
+      });
+    } else {
+      rLiveShapes.current = new Map(Object.entries(shapes));
+      rLiveBindings.current = new Map(Object.entries(bindings));
+    }
+  }, []);
+
+  const applyStateToBoard = useCallback(
+    state => {
+      app === null || app === void 0
+        ? void 0
+        : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          app.replacePageContent(
+            state.shapes,
+            state.bindings,
+            {}, // Object.fromEntries(lAssets.entries())
+          );
+    },
+    [app],
+  );
+
+  const handleChanges = useCallback(
+    state => {
+      if (!state) {
+        return;
+      }
+
+      const { shapes, bindings, eventName } = state;
+      updateLocalState({
+        shapes,
+        bindings,
+        merge: eventName === Events.STATE_CHANGE,
+      });
+      applyStateToBoard(getCurrentState());
+    },
+    [applyStateToBoard, getCurrentState, updateLocalState],
+  );
+
+  const setupInitialState = useCallback(() => {
+    if (!isReady) {
+      return;
+    }
+
+    if (amIWhiteboardOwner) {
+      // On board open, update the document with initial/stored content
+      handleChanges(room.getStoredEvent(Events.CURRENT_STATE));
+      // Send current state to other peers in the room currently
+      sendCurrentState();
+    } else if (shouldRequestState) {
+      /**
+       * Newly joined peers request the owner for current state
+       * and update their boards when they receive it
+       */
+      room.broadcastEvent(Events.REQUEST_STATE);
+    }
+  }, [isReady, amIWhiteboardOwner, shouldRequestState, handleChanges, sendCurrentState]);
+
+  // Callbacks --------------
+  // Put the state into the window, for debugging.
+  const onMount = useCallback(
+    app => {
+      app.loadRoom(roomId);
+      app.pause(); // Turn off the app's own undo / redo stack
+      // window.app = app;
+      setApp(app);
+    },
+    [roomId],
+  );
+
+  // Update the live shapes when the app's shapes change.
+  const onChangePage = useCallback(
+    (_app, shapes, bindings) => {
+      updateLocalState({ shapes, bindings });
+      room.broadcastEvent(Events.STATE_CHANGE, { shapes, bindings });
+
+      /**
+       * Tldraw thinks that the next update passed to replacePageContent after onChangePage is the own update triggered by onChangePage
+       * and the replacePageContent doesn't have any effect if it is a valid update from remote.
+       *
+       * To overcome this replacePageContent locally onChangePage(not costly - returns from first line).
+       *
+       * Refer: https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/state/TldrawApp.ts#L684
+       */
+      applyStateToBoard(getCurrentState());
+    },
+    [updateLocalState, applyStateToBoard, getCurrentState],
+  );
+
+  // Handle presence updates when the user's pointer / selection changes
+  // const onChangePresence = useCallback((app, user) => {
+  //   updateMyPresence({ id: app.room?.userId, user });
+  // }, [][updateMyPresence]);
+
+  // Subscriptions and initial setup
+  useEffect(() => {
+    if (!app) {
+      return;
+    }
+    const unsubs = [];
+
+    let stillAlive = true;
+
+    // Setup the document's storage and subscriptions
+    function setupDocument() {
+      // Subscribe to changes
+      if (stillAlive) {
+        unsubs.push(room.subscribe(Events.STATE_CHANGE, handleChanges));
+        unsubs.push(room.subscribe(Events.CURRENT_STATE, handleChanges));
+
+        // On request state(peer join), send whole current state to update the new peer's whiteboard
+        unsubs.push(room.subscribe(Events.REQUEST_STATE, sendCurrentState));
+
+        setIsReady(true);
+      }
+    }
+
+    room.init(roomId);
+    setupDocument();
+    setupInitialState();
+
+    return () => {
+      stillAlive = false;
+      unsubs.forEach(unsub => unsub());
+    };
+  }, [app, roomId, setupInitialState, sendCurrentState, handleChanges]);
+
+  useEffect(() => {
+    // Store last state on closing whitboard so that when the board is reopened the state could be fetched and reapplied
+    const handleUnmount = () => {
+      if (isReady && !shouldRequestState) {
+        console.log('Whiteboard unmount storing', getCurrentState());
+        room.storeEvent(Events.CURRENT_STATE, getCurrentState());
+      }
+    };
+
+    return handleUnmount;
+  }, [isReady, shouldRequestState, getCurrentState]);
+
+  return { onMount, onChangePage };
+}

package/src/Prebuilt/plugins/whiteboard/useWhiteboardMetadata.js

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { selectLocalPeerID, selectPeerByCondition, useHMSStore } from '@100mslive/react-sdk';
+import { useMyMetadata } from '../../components/hooks/useMetadata';
+import { getMetadata } from '../../common/utils';
+import { FeatureFlags } from '../../services/FeatureFlags';
+
+const isWhiteboardOwner = peer => {
+  return !!getMetadata(peer?.metadata).whiteboardOwner;
+};
+
+export const useWhiteboardMetadata = () => {
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const { updateMetaData } = useMyMetadata();
+  const whiteboardOwner = useHMSStore(selectPeerByCondition(isWhiteboardOwner));
+  const amIWhiteboardOwner = useMemo(() => localPeerID === whiteboardOwner?.id, [localPeerID, whiteboardOwner]);
+
+  /**
+   * @param enabled {boolean}
+   */
+  const toggleWhiteboard = useCallback(async () => {
+    if (!process.env.REACT_APP_PUSHER_APP_KEY) {
+      console.error('Cannot start whiteboard - Pusher Key unavailable');
+    }
+    try {
+      if (!whiteboardOwner || amIWhiteboardOwner) {
+        await updateMetaData({ whiteboardOwner: !whiteboardOwner });
+      } else {
+        console.warn('Cannot toggle whiteboard as it was shared by another peer');
+      }
+    } catch (error) {
+      console.error('failed to toggle whiteboard to ', !whiteboardOwner, error);
+    }
+  }, [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);
+
+  useEffect(() => {
+    window.toggleWhiteboard = toggleWhiteboard;
+  }, [toggleWhiteboard]);
+
+  return {
+    /** is whiteboard enabled for the room */
+    whiteboardEnabled: FeatureFlags.enableWhiteboard,
+    /** owner of the active whiteboard, can also be used to check if whiteboard is active */
+    whiteboardOwner,
+    amIWhiteboardOwner,
+    toggleWhiteboard,
+  };
+};