Merge branch 'dev' into WEB-2809-start-stop-transcription

100mslive · May 21, 2024 · 4d6a53d · 4d6a53d
2 parents 038c45e + 3469f23
commit 4d6a53d
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 73 deletions.
diff --git a/packages/hms-video-store/src/analytics/stats/SubscribeStatsAnalytics.ts b/packages/hms-video-store/src/analytics/stats/SubscribeStatsAnalytics.ts
@@ -56,7 +56,7 @@ export class SubscribeStatsAnalytics extends BaseStatsAnalytics {
       const getCalculatedJitterBufferDelay = (trackStats: HMSTrackStats) =>
         trackStats.jitterBufferDelay &&
         trackStats.jitterBufferEmittedCount &&
-        trackStats.jitterBufferDelay / trackStats.jitterBufferEmittedCount;
+        (trackStats.jitterBufferDelay / trackStats.jitterBufferEmittedCount) * 1000;
 
       const calculatedJitterBufferDelay = getCalculatedJitterBufferDelay(trackStats);
 

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
@@ -102,6 +102,19 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       }
     }
   }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector, isMobile, isLandscapeHLSStream, elements?.chat]);
+
+  const resetInputHeight = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = `${Math.max(32, inputRef.current.value ? inputRef.current.scrollHeight : 0)}px`;
+    }
+  }, []);
+
+  const updateInputHeight = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = `${Math.max(32, Math.min(inputRef.current.scrollHeight, 24 * 4))}px`;
+    }
+  }, []);
+
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
@@ -116,6 +129,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
         await hmsActions.sendBroadcastMessage(message);
       }
       inputRef.current.value = '';
+      resetInputHeight();
       setTimeout(() => {
         onSend(1);
       }, 0);
@@ -131,6 +145,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
     const messageElement = inputRef.current;
     if (messageElement) {
       messageElement.value = draftMessage;
+      updateInputHeight();
     }
   }, [draftMessage]);
 
@@ -197,11 +212,10 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       {selection && (
         <Flex align="center" css={{ gap: '$4', w: '100%' }}>
           <Flex
-            align="center"
+            align="end"
             css={{
               bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
               minHeight: '$16',
-              maxHeight: '$24',
               position: 'relative',
               py: '$6',
               pl: '$8',
@@ -238,6 +252,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               }}
               autoComplete="off"
               aria-autocomplete="none"
+              onChange={updateInputHeight}
+              onBlur={resetInputHeight}
               onPaste={e => e.stopPropagation()}
               onCut={e => e.stopPropagation()}
               onCopy={e => e.stopPropagation()}

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx
@@ -21,7 +21,11 @@ export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
       }}
     >
       <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-        <IconButton onClick={() => (onClick ? onClick() : toggleChat())} active={!isChatOpen} data-testid="chat_btn">
+        <IconButton
+          onClick={() => (onClick ? onClick() : toggleChat())}
+          css={{ bg: isChatOpen ? '$surface_brighter' : '' }}
+          data-testid="chat_btn"
+        >
           <ChatIcon />
         </IconButton>
       </Tooltip>

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx
@@ -86,6 +86,7 @@ export const ParticipantList = ({
       return { ...filterValue };
     });
   }, []);
+
   if (peerCount === 0) {
     return null;
   }
@@ -128,7 +129,7 @@ export const ParticipantList = ({
 export const ParticipantCount = () => {
   const peerCount = useHMSStore(selectPeerCount);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const isPeerListOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
 
   if (peerCount === 0) {
     return null;
@@ -139,13 +140,13 @@ export const ParticipantCount = () => {
         w: 'auto',
         p: '$4',
         h: 'auto',
+        bg: isPeerListOpen ? '$surface_brighter' : '',
       }}
       onClick={() => {
         if (peerCount > 0) {
           toggleSidepane();
         }
       }}
-      active={!isParticipantsOpen}
       data-testid="participant_list"
     >
       <PeopleIcon />
@@ -447,6 +448,7 @@ export const ParticipantSearch = ({
     300,
     [value, onSearch],
   );
+
   return (
     <Flex
       align="center"

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/PollsToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/PollsToggle.tsx
@@ -27,7 +27,7 @@ export const PollsToggle = () => {
           togglePollView();
           setUnreadPollQuiz(false);
         }}
-        active={!isPollsOpen}
+        css={{ bg: isPollsOpen ? '$surface_brighter' : '' }}
         data-testid="polls_btn"
       >
         {unreadPollQuiz ? <QuizActiveIcon /> : <QuizIcon />}

diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx b/packages/roomkit-react/src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx
@@ -4,6 +4,8 @@ import { ChevronLeftIcon, ChevronRightIcon, CrossIcon } from '@100mslive/react-i
 import { Box, Flex } from '../../../../Layout';
 import { Loading } from '../../../../Loading';
 import { Text } from '../../../../Text';
+// @ts-ignore
+import { Container } from '../../Streaming/Common';
 import { LeaderboardEntry } from './LeaderboardEntry';
 import { PeerParticipationSummary } from './PeerParticipationSummary';
 // @ts-ignore
@@ -32,80 +34,83 @@ export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
   const questionCount = quiz.questions?.length || 0;
 
   return (
-    <Flex direction="column" css={{ size: '100%' }}>
-      <Flex justify="between" align="center" css={{ pb: '$6', borderBottom: '1px solid $border_bright', mb: '$8' }}>
-        <Flex align="center" css={{ gap: '$4' }}>
+    <Container rounded>
+      <Flex direction="column" css={{ size: '100%', p: '$8' }}>
+        <Flex justify="between" align="center" css={{ pb: '$6', borderBottom: '1px solid $border_bright', mb: '$8' }}>
+          <Flex align="center" css={{ gap: '$4' }}>
+            <Flex
+              css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
+              onClick={() => setPollView(POLL_VIEWS.VOTE)}
+            >
+              <ChevronLeftIcon />
+            </Flex>
+            <Text variant="lg" css={{ fontWeight: '$semiBold' }}>
+              {quiz.title}
+            </Text>
+            <StatusIndicator status={quiz.state} />
+          </Flex>
           <Flex
             css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-            onClick={() => setPollView(POLL_VIEWS.VOTE)}
+            onClick={toggleSidepane}
           >
-            <ChevronLeftIcon />
+            <CrossIcon />
           </Flex>
-          <Text variant="lg" css={{ fontWeight: '$semiBold' }}>
-            {quiz.title}
-          </Text>
-          <StatusIndicator status={quiz.state} />
         </Flex>
-        <Flex
-          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-          onClick={toggleSidepane}
-        >
-          <CrossIcon />
-        </Flex>
-      </Flex>
-
-      {!viewAllEntries ? <PeerParticipationSummary quiz={quiz} /> : null}
+        <Box css={{ overflowY: 'auto', mr: '-$4', pr: '$4' }}>
+          {!viewAllEntries ? <PeerParticipationSummary quiz={quiz} /> : null}
 
-      <Text variant="sm" css={{ fontWeight: '$semiBold', mt: '$4' }}>
-        Leaderboard
-      </Text>
-      <Text variant="xs" css={{ color: '$on_surface_medium' }}>
-        Based on score and time taken to cast the correct answer
-      </Text>
-      <Box
-        css={{
-          mt: '$8',
-          overflowY: 'auto',
-          flex: viewAllEntries ? '1 1 0' : 'unset',
-          mr: viewAllEntries ? '-$6' : 'unset',
-          px: viewAllEntries ? '0' : '$4',
-          pr: viewAllEntries ? '$6' : '$4',
-          backgroundColor: viewAllEntries ? '' : '$surface_default',
-          borderRadius: '$1',
-        }}
-      >
-        {quizLeaderboard?.entries &&
-          quizLeaderboard.entries
-            .slice(0, viewAllEntries ? undefined : 5)
-            .map(question => (
-              <LeaderboardEntry
-                key={question.position}
-                position={question.position}
-                score={question.score}
-                questionCount={questionCount}
-                correctResponses={question.correctResponses}
-                userName={question.peer.username || ''}
-                maxPossibleScore={maxPossibleScore}
-                duration={question.duration}
-              />
-            ))}
-        {quizLeaderboard?.entries?.length > 5 && !viewAllEntries ? (
-          <Flex
-            align="center"
-            justify="end"
+          <Text variant="sm" css={{ fontWeight: '$semiBold', mt: '$4' }}>
+            Leaderboard
+          </Text>
+          <Text variant="xs" css={{ color: '$on_surface_medium' }}>
+            Based on score and time taken to cast the correct answer
+          </Text>
+          <Box
             css={{
-              w: '100%',
-              borderTop: '1px solid $border_bright',
-              cursor: 'pointer',
-              color: '$on_surface_high',
-              p: '$6 $2',
+              mt: '$8',
+              overflowY: 'auto',
+              flex: viewAllEntries ? '1 1 0' : 'unset',
+              mr: viewAllEntries ? '-$6' : 'unset',
+              px: viewAllEntries ? '0' : '$4',
+              pr: viewAllEntries ? '$6' : '$4',
+              backgroundColor: viewAllEntries ? '' : '$surface_default',
+              borderRadius: '$1',
             }}
-            onClick={() => setViewAllEntries(true)}
           >
-            <Text variant="sm">View All</Text> <ChevronRightIcon />
-          </Flex>
-        ) : null}
-      </Box>
-    </Flex>
+            {quizLeaderboard?.entries &&
+              quizLeaderboard.entries
+                .slice(0, viewAllEntries ? undefined : 5)
+                .map(question => (
+                  <LeaderboardEntry
+                    key={question.position}
+                    position={question.position}
+                    score={question.score}
+                    questionCount={questionCount}
+                    correctResponses={question.correctResponses}
+                    userName={question.peer.username || ''}
+                    maxPossibleScore={maxPossibleScore}
+                    duration={question.duration}
+                  />
+                ))}
+            {quizLeaderboard?.entries?.length > 5 && !viewAllEntries ? (
+              <Flex
+                align="center"
+                justify="end"
+                css={{
+                  w: '100%',
+                  borderTop: '1px solid $border_bright',
+                  cursor: 'pointer',
+                  color: '$on_surface_high',
+                  p: '$6 $2',
+                }}
+                onClick={() => setViewAllEntries(true)}
+              >
+                <Text variant="sm">View All</Text> <ChevronRightIcon />
+              </Flex>
+            ) : null}
+          </Box>
+        </Box>
+      </Flex>
+    </Container>
   );
 };