@100mslive/roomkit-react 0.1.20-alpha.0 → 0.2.0

package/src/Prebuilt/components/Polls/common/Votes.jsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { Avatar, Box, Flex, Text, Tooltip } from '../../../../';
-import { VoterList } from './VoterList';
-
-// Shows number of votes, avatars of voters and list of voters on hover
-export const Votes = ({ voters }) => {
-  const hiddenVotersCount = voters.length > 2 ? voters.length - 2 : 0;
-
-  return (
-    <Flex align="center" css={{ gap: '$4' }}>
-      <Text variant="sm" css={{ color: '$on_surface_medium' }}>
-        {voters.length}&nbsp;
-        {voters.length && voters.length !== 1 ? 'votes' : 'votes'}
-      </Text>
-      <Tooltip
-        side="bottom"
-        align="start"
-        disabled={hiddenVotersCount === 0}
-        boxCss={{
-          backgroundColor: '$surface_brighter',
-          borderRadius: '$1',
-          p: '$4 $6',
-          top: '$2',
-          zIndex: '20',
-          minWidth: '$44',
-        }}
-        title={<VoterList voters={voters} />}
-      >
-        <Flex align="center">
-          {voters.length
-            ? voters.slice(0, 2).map((voter, index) => (
-                <Avatar
-                  name={voter}
-                  css={{
-                    position: 'relative',
-                    transform: 'unset',
-                    left: `${index * -1}px`,
-                    fontSize: '$tiny',
-                    size: '$9',
-                    p: '$4',
-                    zIndex: '5',
-                  }}
-                />
-              ))
-            : null}
-          {hiddenVotersCount ? (
-            <Box
-              css={{
-                backgroundColor: '$secondary_default',
-                borderRadius: '$round',
-                position: 'relative',
-                left: '-$2',
-                p: '$2 $3',
-              }}
-            >
-              <Text
-                variant="caption"
-                css={{
-                  fontWeight: '$semiBold',
-                  color: '$on_surface_high',
-                  fontSize: '$tiny',
-                }}
-              >
-                +{hiddenVotersCount}
-              </Text>
-            </Box>
-          ) : null}
-        </Flex>
-      </Tooltip>
-    </Flex>
-  );
-};

package/src/Prebuilt/layouts/WhiteboardView.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { selectPeers, selectRoomID, useHMSStore } from '@100mslive/react-sdk';
-import { SecondaryTiles } from '../components/SecondaryTiles';
-import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';
-import { Box } from '../../Layout';
-// import { Whiteboard } from '../plugins/whiteboard';
-
-const Editor = React.memo(() => {
-  return (
-    <Box
-      css={{
-        mx: '$4',
-        flex: '3 1 0',
-        '@lg': {
-          flex: '2 1 0',
-          '& video': {
-            objectFit: 'contain',
-          },
-        },
-      }}
-    >
-      <Box css={{ position: 'relative', width: '100%', height: '100%' }}>{/* <Whiteboard roomId={roomId} /> */}</Box>
-    </Box>
-  );
-});
-
-const WhiteboardView = () => {
-  const peers = useHMSStore(selectPeers);
-  const roomId = useHMSStore(selectRoomID);
-  return (
-    <ProminenceLayout.Root>
-      <ProminenceLayout.ProminentSection>
-        <Editor roomId={roomId} />
-      </ProminenceLayout.ProminentSection>
-      <SecondaryTiles peers={peers} />
-    </ProminenceLayout.Root>
-  );
-};
-
-export default WhiteboardView;

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

@@ -1,110 +0,0 @@
-// @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: process.env.REACT_APP_PUSHER_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

@@ -1,29 +0,0 @@
-# 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, auth endpoint and cluster to `REACT_APP_PUSHER_APP_KEY`, `REACT_APP_PUSHER_AUTHENDPOINT`, `REACT_APP_PUSHER_CLUSTER` 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.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { ConferencingScreen } from '@100mslive/types-prebuilt';
-import { PencilDrawIcon } from '@100mslive/react-icons';
-import { Tooltip } from '../../../Tooltip';
-// @ts-ignore: No implicit any
-import IconButton from '../../IconButton';
-// @ts-ignore: No implicit any
-import { useWhiteboardMetadata } from './useWhiteboardMetadata';
-
-export const ToggleWhiteboard = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
-  const {
-    whiteboardEnabled,
-    whiteboardOwner: whiteboardActive,
-    amIWhiteboardOwner,
-    toggleWhiteboard,
-  } = useWhiteboardMetadata();
-
-  if (!whiteboardEnabled || screenType === 'hls_live_streaming') {
-    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

@@ -1,12 +0,0 @@
-/* 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

@@ -1,11 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,212 +0,0 @@
-// @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

@@ -1,47 +0,0 @@
-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,
-  };
-};