Merge branch 'main' into WEB-2681-seekbar-cropped

100mslive · Feb 29, 2024 · 49d843f · 49d843f
2 parents dada88e + cd30db6
commit 49d843f
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 61 deletions.
diff --git a/packages/hms-video-store/src/analytics/stats/SubscribeStatsAnalytics.ts b/packages/hms-video-store/src/analytics/stats/SubscribeStatsAnalytics.ts
@@ -119,38 +119,36 @@ class RunningRemoteTrackAnalytics extends RunningTrackAnalytics {
       total_packets_lost: this.calculateDifferenceForSample('packetsLost'),
       total_pli_count: this.calculateDifferenceForSample('pliCount'),
       total_nack_count: this.calculateDifferenceForSample('nackCount'),
+      avg_jitter_buffer_delay: this.calculateAverage('calculatedJitterBufferDelay'),
     };
 
     if (latestStat.kind === 'video') {
-      return removeUndefinedFromObject<RemoteAudioSample | RemoteVideoSample>(
-        Object.assign(baseSample, {
-          avg_av_sync_ms: this.calculateAvgAvSyncForSample(),
-          avg_frames_received_per_sec: this.calculateDifferenceAverage('framesReceived'),
-          avg_frames_dropped_per_sec: this.calculateDifferenceAverage('framesDropped'),
-          avg_frames_decoded_per_sec: this.calculateDifferenceAverage('framesDecoded'),
-          frame_width: this.calculateAverage('frameWidth'),
-          frame_height: this.calculateAverage('frameHeight'),
-          pause_count: this.calculateDifferenceForSample('pauseCount'),
-          pause_duration_seconds: this.calculateDifferenceForSample('totalPausesDuration'),
-          freeze_count: this.calculateDifferenceForSample('freezeCount'),
-          freeze_duration_seconds: this.calculateDifferenceForSample('totalFreezesDuration'),
-          avg_jitter_buffer_delay: this.calculateAverage('calculatedJitterBufferDelay'),
-        }),
-      );
+      return removeUndefinedFromObject<RemoteVideoSample>({
+        ...baseSample,
+        avg_av_sync_ms: this.calculateAvgAvSyncForSample(),
+        avg_frames_received_per_sec: this.calculateDifferenceAverage('framesReceived'),
+        avg_frames_dropped_per_sec: this.calculateDifferenceAverage('framesDropped'),
+        avg_frames_decoded_per_sec: this.calculateDifferenceAverage('framesDecoded'),
+        frame_width: this.calculateAverage('frameWidth'),
+        frame_height: this.calculateAverage('frameHeight'),
+        pause_count: this.calculateDifferenceForSample('pauseCount'),
+        pause_duration_seconds: this.calculateDifferenceForSample('totalPausesDuration'),
+        freeze_count: this.calculateDifferenceForSample('freezeCount'),
+        freeze_duration_seconds: this.calculateDifferenceForSample('totalFreezesDuration'),
+      });
     } else {
       const audio_concealed_samples =
         (latestStat.concealedSamples || 0) -
         (latestStat.silentConcealedSamples || 0) -
         ((firstStat.concealedSamples || 0) - (firstStat.silentConcealedSamples || 0));
 
-      return removeUndefinedFromObject<RemoteAudioSample>(
-        Object.assign(baseSample, {
-          audio_concealed_samples,
-          audio_level: this.calculateInstancesOfHigh('audioLevel', 0.05),
-          audio_total_samples_received: this.calculateDifferenceForSample('totalSamplesReceived'),
-          audio_concealment_events: this.calculateDifferenceForSample('concealmentEvents'),
-        }),
-      );
+      return removeUndefinedFromObject<RemoteAudioSample>({
+        ...baseSample,
+        audio_level: this.calculateInstancesOfHigh('audioLevel', 0.05),
+        audio_concealed_samples,
+        audio_total_samples_received: this.calculateDifferenceForSample('totalSamplesReceived'),
+        audio_concealment_events: this.calculateDifferenceForSample('concealmentEvents'),
+      });
     }
   };
 

diff --git a/packages/hms-video-store/src/analytics/stats/interfaces.ts b/packages/hms-video-store/src/analytics/stats/interfaces.ts
@@ -65,6 +65,7 @@ export interface Resolution {
 interface RemoteBaseSample {
   timestamp: number;
   estimated_playout_timestamp?: number;
+  avg_jitter_buffer_delay?: number;
 }
 
 export interface RemoteAudioSample extends RemoteBaseSample {
@@ -77,7 +78,6 @@ export interface RemoteAudioSample extends RemoteBaseSample {
   total_samples_duration?: number;
   total_packets_received?: number;
   total_packets_lost?: number;
-  jitter_buffer_delay?: number;
   jitter_buffer_delay_high_seconds?: number;
 }
 
@@ -87,11 +87,11 @@ export interface RemoteVideoSample extends RemoteBaseSample {
   avg_frames_decoded_per_sec?: number;
   total_pli_count?: number;
   total_nack_count?: number;
+  avg_av_sync_ms?: number;
   frame_width?: number;
   frame_height?: number;
   pause_count?: number;
   pause_duration_seconds?: number;
   freeze_count?: number;
   freeze_duration_seconds?: number;
-  avg_jitter_buffer_delay?: number;
 }
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
@@ -6,18 +6,20 @@ import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
 import { IconButton } from '../../../IconButton';
+// @ts-ignore: No implicit any
+import { EmojiReaction } from '../EmojiReaction';
 import { MoreSettings } from '../MoreSettings/MoreSettings';
 import { RaiseHand } from '../RaiseHand';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { ToastManager } from '../Toast/ToastManager';
 import { ChatSelectorContainer } from './ChatSelectorContainer';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { useChatDraftMessage } from '../AppData/useChatState';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppData/useUISettings';
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 import { useDefaultChatSelection, useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
@@ -148,7 +150,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   }
 
   return (
-    <Box>
+    <Box css={{ position: 'relative' }}>
       <Flex>
         <ChatSelectorContainer />
         {canDisableChat && isMobile && isOverlayChat ? (
@@ -266,15 +268,20 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
             </BaseIconButton>
           </Flex>
           {(isMwebHLSStream || isLandscapeHLSStream) && (
-            <Flex
-              css={{
-                alignItems: 'center',
-              }}
-              gap="1"
-            >
-              {noAVPermissions ? <RaiseHand /> : null}
-              <MoreSettings elements={elements} screenType={screenType} />
-            </Flex>
+            <>
+              <Flex
+                css={{
+                  alignItems: 'center',
+                }}
+                gap="1"
+              >
+                {noAVPermissions ? <RaiseHand /> : null}
+                <MoreSettings elements={elements} screenType={screenType} />
+              </Flex>
+              <Box css={{ position: 'absolute', bottom: '$16', right: 0 }}>
+                <EmojiReaction />
+              </Box>
+            </>
           )}
         </Flex>
       )}

diff --git a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init } from 'emoji-mart';
@@ -7,15 +7,13 @@ import {
   selectIsConnectedToRoom,
   selectLocalPeerID,
   useCustomEvent,
-  // useHMSActions,
   useHMSStore,
-  // useRecordingStreaming,
+  useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
 import { EmojiCard } from './Footer/EmojiCard';
 // import { ToastManager } from './Toast/ToastManager';
 import { Dropdown } from '../../Dropdown';
-import { Box } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
@@ -27,12 +25,15 @@ init({ data });
 export const EmojiReaction = () => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const { isHLSRunning } = useRecordingStreaming();
   useDropdownList({ open: open, name: 'EmojiReaction' });
+
   // const hmsActions = useHMSActions();
   const roles = useHMSStore(selectAvailableRoleNames);
   const localPeerId = useHMSStore(selectLocalPeerID);
   // const { isStreamingOn } = useRecordingStreaming();
   const isMobile = useMedia(cssConfig.media.md);
+  const isLandscape = useMedia(cssConfig.media.ls);
 
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE,
@@ -65,24 +66,20 @@ export const EmojiReaction = () => {
   if (!isConnected) {
     return null;
   }
-  return isMobile ? (
+  return (isMobile || isLandscape) && !isHLSRunning ? (
     <EmojiCard sendReaction={sendReaction} />
   ) : (
-    <Fragment>
-      <Dropdown.Root open={open} onOpenChange={setOpen}>
-        <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
-          <IconButton>
-            <Tooltip title="Emoji reaction">
-              <Box>
-                <EmojiIcon />
-              </Box>
-            </Tooltip>
-          </IconButton>
-        </Dropdown.Trigger>
-        <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surface_default' }}>
-          <EmojiCard sendReaction={sendReaction} />
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </Fragment>
+    <Dropdown.Root open={open} onOpenChange={setOpen}>
+      <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
+        <IconButton css={isMobile || isLandscape ? { bg: 'transparent', r: '$round' } : {}}>
+          <Tooltip title="Emoji reaction">
+            <EmojiIcon />
+          </Tooltip>
+        </IconButton>
+      </Dropdown.Trigger>
+      <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surface_default' }}>
+        <EmojiCard sendReaction={sendReaction} />
+      </Dropdown.Content>
+    </Dropdown.Root>
   );
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
@@ -197,7 +197,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null} */}
 
-            {elements?.emoji_reactions && (
+            {elements?.emoji_reactions && !isHLSRunning && (
               <ActionTile.Root
                 onClick={() => {
                   setShowEmojiCard(true);