@100mslive/roomkit-react 0.3.12-alpha.6 → 0.3.12-alpha.7

package/src/Prebuilt/components/Polls/Voting/Voting.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import {
-  selectLocalPeerID,
+  selectLocalPeer,
   selectPeerNameByID,
   selectPermissions,
   selectPollByID,
@@ -31,7 +31,9 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
   const showSingleView = poll?.type === 'quiz' && poll.state === 'started';
   const fetchedInitialResponses = useRef(false);
   const [savedResponses, setSavedResponses] = useState<Record<any, any>>({});
-  const localPeerId = useHMSStore(selectLocalPeerID);
+  const localPeer = useHMSStore(selectLocalPeer);
+  const localPeerId = localPeer?.id;
+  const customerUserId = localPeer?.customerUserId;
 
   // To reset whenever a different poll is opened
   useEffect(() => {
@@ -51,7 +53,7 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
 
   useEffect(() => {
     if (poll?.questions) {
-      const localPeerResponses = getPeerResponses(poll.questions, localPeerId);
+      const localPeerResponses = getPeerResponses(poll.questions, localPeerId, customerUserId);
       // @ts-ignore
       localPeerResponses?.forEach(response => {
         if (response) {
@@ -63,7 +65,7 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
         }
       });
     }
-  }, [localPeerId, poll?.questions, id]);
+  }, [localPeerId, poll?.questions, id, customerUserId]);
 
   if (!poll) {
     return null;

package/src/Prebuilt/components/Streaming/Common.jsx

@@ -43,18 +43,19 @@ export const ContentHeader = ({ onBack, onClose, title = '', content }) => {
       css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer', borderBottom: '1px solid $border_bright', mb: '$8' }}
     >
       {onBack ? (
-        <Text
+        <Flex
+          align="center"
           css={{
-            alignSelf: 'center',
             mr: '$8',
+            color: '$on_surface_high',
           }}
           onClick={onBack}
           data-testid="go_back"
         >
           <ChevronLeftIcon />
-        </Text>
+        </Flex>
       ) : null}
-      <Box css={{ flex: '1 1 0' }}>
+      <Box css={{ flex: '1 1 0', display: 'flex', alignItems: 'center' }}>
         {title ? (
           <Text
             variant="tiny"

package/src/Prebuilt/plugins/CaptionsViewer.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import Draggable from 'react-draggable';
 import { useMedia } from 'react-use';
 import {
   HMSTranscript,
@@ -178,6 +179,8 @@ export const CaptionsViewer = () => {
 
   const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
 
+  const nodeRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const timeInterval = setInterval(() => {
       if (!captionQueue) {
@@ -205,30 +208,33 @@ export const CaptionsViewer = () => {
     return null;
   }
   return (
-    <Box
-      css={{
-        position: 'absolute',
-        w: isMobile ? '100%' : '40%',
-        bottom: showCaptionAtTop ? '' : '0',
-        top: showCaptionAtTop ? '0' : '',
-        left: isMobile ? 0 : '50%',
-        transform: isMobile ? '' : 'translateX(-50%)',
-        background: '#000000A3',
-        overflow: 'clip',
-        zIndex: 10,
-        height: 'fit-content',
-        r: '$1',
-        p: '$6',
-        transition: 'bottom 0.3s ease-in-out',
-        '&:empty': { display: 'none' },
-      }}
-    >
-      <Flex direction="column">
-        {dataToShow.map((data: { [key: string]: string }, index: number) => {
-          const key = Object.keys(data)[0];
-          return <TranscriptView key={index} peer_id={key} data={data[key]} />;
-        })}
-      </Flex>
-    </Box>
+    <Draggable bounds="parent" nodeRef={nodeRef} defaultPosition={{ x: isMobile ? 0 : -200, y: 0 }}>
+      <Box
+        ref={nodeRef}
+        css={{
+          position: 'absolute',
+          w: isMobile ? '100%' : '40%',
+          bottom: showCaptionAtTop ? '' : '0',
+          top: showCaptionAtTop ? '0' : '',
+          left: isMobile ? 0 : '50%',
+          transform: isMobile ? '' : 'translateX(-50%)',
+          background: '#000000A3',
+          overflow: 'clip',
+          zIndex: 10,
+          height: 'fit-content',
+          r: '$1',
+          p: '$6',
+          transition: 'bottom 0.3s ease-in-out',
+          '&:empty': { display: 'none' },
+        }}
+      >
+        <Flex direction="column">
+          {dataToShow.map((data: { [key: string]: string }, index: number) => {
+            const key = Object.keys(data)[0];
+            return <TranscriptView key={index} peer_id={key} data={data[key]} />;
+          })}
+        </Flex>
+      </Box>
+    </Draggable>
   );
 };