Fix dev conflicts (#3088)

packages/hms-whiteboard/src/ErrorFallback.tsx

@@ -1,16 +1,17 @@
 import React, { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useValue } from '@tldraw/state';
-import { Editor, hardResetEditor, refreshPage } from '@tldraw/tldraw';
+import { Editor, hardResetEditor } from '@tldraw/tldraw';
 import classNames from 'classnames';
 
 const DISCORD_URL = 'https://discord.gg/pTge2BwDBq';
 
 export type TLErrorFallbackComponent = ComponentType<{
   error: unknown;
+  refresh: () => void;
   editor?: Editor;
 }>;
 
-export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
+export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor, refresh }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV !== 'production');
   const [didCopy, setDidCopy] = useState(false);
@@ -81,10 +82,6 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
     setDidCopy(true);
   };
 
-  const refresh = () => {
-    refreshPage();
-  };
-
   const resetLocalState = async () => {
     hardResetEditor();
   };
@@ -152,11 +149,8 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
                 {shouldShowError ? 'Hide details' : 'Show details'}
               </button>
               <div className="tl-error-boundary__content__actions__group">
-                <button className="tl-error-boundary__reset" onClick={() => setShouldShowResetConfirmation(true)}>
-                  Reset data
-                </button>
                 <button className="tl-error-boundary__refresh" onClick={refresh}>
-                  Refresh Page
+                  Refresh
                 </button>
               </div>
             </div>

packages/hms-whiteboard/src/Whiteboard.tsx

@@ -11,7 +11,20 @@ export interface WhiteboardProps {
   transparentCanvas?: boolean;
   onMount?: (args: { store?: unknown; editor?: unknown }) => void;
 }
-export function Whiteboard({ endpoint, token, zoomToContent, transparentCanvas, onMount }: WhiteboardProps) {
+export function Whiteboard(props: WhiteboardProps) {
+  const [key, setKey] = useState(Date.now() + props.token);
+
+  return <CollaborativeEditor key={key} refresh={() => setKey(Date.now() + props.token)} {...props} />;
+}
+
+function CollaborativeEditor({
+  endpoint,
+  token,
+  zoomToContent,
+  transparentCanvas,
+  onMount,
+  refresh,
+}: WhiteboardProps & { refresh: () => void }) {
   const [editor, setEditor] = useState<Editor>();
   const store = useCollaboration({
     endpoint,
@@ -33,7 +46,9 @@ export function Whiteboard({ endpoint, token, zoomToContent, transparentCanvas,
       autoFocus
       store={store}
       onMount={handleMount}
-      components={{ ErrorFallback }}
+      components={{
+        ErrorFallback: ({ error, editor }) => <ErrorFallback editor={editor} error={error} refresh={refresh} />,
+      }}
       hideUi={editor?.getInstanceState()?.isReadonly}
       initialState={editor?.getInstanceState()?.isReadonly ? 'hand' : 'select'}
     />

packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx

@@ -122,7 +122,21 @@ export const RoleAccordion = ({
       <Accordion.Content contentStyles={{ border: '1px solid $border_default', borderTop: 'none' }}>
         <FixedSizeList
           itemSize={ROW_HEIGHT}
-          itemData={{ peerList: peersInAccordion, isConnected, isHandRaisedAccordion }}
+          itemData={{
+            peerList: isHandRaisedAccordion
+              ? peersInAccordion.sort((a, b) => {
+                  try {
+                    const aHandRaisedAt = JSON.parse(a.metadata || '{}').handRaisedAt;
+                    const bHandRaisedAt = JSON.parse(b.metadata || '{}').handRaisedAt;
+                    return aHandRaisedAt - bHandRaisedAt;
+                  } catch (err) {
+                    return 0;
+                  }
+                })
+              : peersInAccordion,
+            isConnected,
+            isHandRaisedAccordion,
+          }}
           itemKey={itemKey}
           itemCount={peersInAccordion.length}
           width={width}

packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { selectDominantSpeaker, useHMSStore } from '@100mslive/react-sdk';
 import { VolumeOneIcon } from '@100mslive/react-icons';
-import { Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../';
+import { Flex, styled, Text, textEllipsis } from '../../../';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 
 export const SpeakerTag = () => {
@@ -14,9 +14,8 @@ export const SpeakerTag = () => {
         justify="center"
         css={{ flex: '1 1 0', color: '$on_surface_high', '@md': { display: 'none' } }}
       >
-        <VerticalDivider css={{ ml: '$8' }} />
         <VolumeOneIcon />
-        <Text variant="md" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
+        <Text variant="sm" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
           {dominantSpeaker.name}
         </Text>
       </Flex>

packages/roomkit-react/src/Prebuilt/components/hooks/useMetadata.tsx

@@ -30,9 +30,10 @@ export const useMyMetadata = () => {
   const toggleHandRaise = useCallback(async () => {
     if (isHandRaised) {
       await hmsActions.lowerLocalPeerHand();
+      await update({ handRaisedAt: undefined });
     } else {
       await hmsActions.raiseLocalPeerHand();
-      await update({ isBRBOn: false });
+      await update({ isBRBOn: false, handRaisedAt: Date.now() });
     }
   }, [isHandRaised]); //eslint-disable-line
 

yarn.lock

@@ -10112,9 +10112,9 @@ fast-levenshtein@^2.0.6:
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fast-loops@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
-  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.4.tgz#61bc77d518c0af5073a638c6d9d5c7683f069ce2"
+  integrity sha512-8dbd3XWoKCTms18ize6JmQF1SFnnfj5s0B7rRry22EofgMu7B6LKHVh+XfFqFGsqnbH54xgeO83PzpKI+ODhlg==
 
 fast-shallow-equal@^1.0.0:
   version "1.0.0"