@100mslive/roomkit-react 0.2.6-alpha.1 → 0.2.6-alpha.3

package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  HMSPoll,
   HMSPollState,
   selectLocalPeerRoleName,
   selectPermissions,
+  selectPolls,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -133,7 +133,7 @@ const AddMenu = () => {
           active={interactionType === INTERACTION_TYPE.QUIZ}
         />
       </Flex>
-      <Flex direction="column">
+      <Flex direction="column" css={{ mb: '$10' }}>
         <Text variant="body2" css={{ mb: '$4' }}>{`Name this ${interactionType.toLowerCase()}`}</Text>
         <Input
           ref={inputRef}
@@ -194,20 +194,12 @@ const AddMenu = () => {
 
 const PrevMenu = () => {
   const hmsActions = useHMSActions();
-  const [polls, setPolls] = useState<HMSPoll[]>([]);
+  const polls = useHMSStore(selectPolls);
+  const permissions = useHMSStore(selectPermissions);
 
   useEffect(() => {
-    const listPolls = async () => {
-      const polls = await hmsActions.interactivityCenter.getPolls();
-      const sortedPolls = await polls
-        ?.sort((a, b) => (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0))
-        ?.sort((a, b) => (b.state === 'started' ? 1 : 0) - (a.state === 'started' ? 1 : 0));
-      return sortedPolls;
-    };
-
     const updatePolls = async () => {
-      const sortedPolls = await listPolls();
-      setPolls(sortedPolls);
+      await hmsActions.interactivityCenter.getPolls();
     };
 
     updatePolls();
@@ -215,21 +207,19 @@ const PrevMenu = () => {
 
   return polls?.length ? (
     <Flex
+      direction="column"
       css={{
-        borderTop: '$space$px solid $border_bright',
-        mt: '$10',
-        pt: '$10',
+        width: '100%',
+        ...(permissions?.pollWrite ? { borderTop: '$space$px solid $border_bright', paddingTop: '$10' } : {}),
       }}
     >
-      <Flex direction="column" css={{ w: '100%' }}>
-        <Text variant="h6" css={{ c: '$on_surface_high' }}>
-          Previous Polls and Quizzes
-        </Text>
-        <Flex direction="column" css={{ gap: '$10', mt: '$8' }}>
-          {polls?.map(poll => (
-            <InteractionCard key={poll.id} id={poll.id} title={poll.title} status={poll.state} />
-          ))}
-        </Flex>
+      <Text variant="h6" css={{ c: '$on_surface_high' }}>
+        Previous Polls and Quizzes
+      </Text>
+      <Flex direction="column" css={{ gap: '$10', mt: '$8' }}>
+        {polls?.map(poll => (
+          <InteractionCard key={poll.id} id={poll.id} title={poll.title} status={poll.state} />
+        ))}
       </Flex>
     </Flex>
   ) : null;

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

@@ -54,7 +54,7 @@ export const LeaderboardEntry = ({
       </Flex>
 
       <Flex align="center" css={{ gap: '$4', color: '$on_surface_medium' }}>
-        {position === 1 ? <TrophyFilledIcon height={16} width={16} /> : null}
+        {position === 1 && score ? <TrophyFilledIcon height={16} width={16} /> : null}
         {questionCount ? (
           <>
             <CheckCircleIcon height={16} width={16} />

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -103,7 +103,6 @@ const PreviewJoin = ({
     asRole,
   });
   const roomState = useHMSStore(selectRoomState);
-
   const savePreferenceAndJoin = useCallback(() => {
     setPreviewPreference({
       name,

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { selectEffectsKey, selectIsEffectsEnabled, selectLocalPeerRole } from '@100mslive/hms-video-store';
+import {
+  selectAppData,
+  selectEffectsKey,
+  selectIsEffectsEnabled,
+  selectLocalPeerRole,
+} from '@100mslive/hms-video-store';
 import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 import { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
 import {
@@ -22,7 +27,7 @@ import { VBHandler } from './VBHandler';
 import { useSidepaneToggle } from '../AppData/useSidepane';
 // @ts-ignore
 import { useUISettings } from '../AppData/useUISettings';
-import { SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
+import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
 import { defaultMedia } from './constants';
 
 const iconDims = { height: '40px', width: '40px' };
@@ -42,9 +47,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const effectsKey = useHMSStore(selectEffectsKey);
   const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));
-  const [activeBackground, setActiveBackground] = useState<string | HMSVirtualBackgroundTypes>(
-    (VBHandler?.getBackground() as string | HMSVirtualBackgroundTypes) || HMSVirtualBackgroundTypes.NONE,
-  );
+  const background = useHMSStore(selectAppData(APP_DATA.background));
   const mediaList = backgroundMedia.length
     ? backgroundMedia.map((media: VirtualBackgroundMedia) => media.url || '')
     : defaultMedia;
@@ -71,8 +74,22 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
           hmsActions.addPluginToVideoTrack(vbObject as HMSVBPlugin, Math.floor(role.publishParams.video.frameRate / 2));
         }
       }
+      const handleDefaultBackground = async () => {
+        switch (background) {
+          case HMSVirtualBackgroundTypes.NONE: {
+            break;
+          }
+          case HMSVirtualBackgroundTypes.BLUR: {
+            await VBHandler.setBlur(blurAmount);
+            break;
+          }
+          default:
+            await VBHandler.setBackground(background);
+        }
+      };
+      handleDefaultBackground();
     }
-  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id]);
+  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id, background, blurAmount]);
 
   useEffect(() => {
     if (!isVideoOn) {
@@ -120,7 +137,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               value: HMSVirtualBackgroundTypes.NONE,
               onClick: async () => {
                 await VBHandler.removeEffects();
-                setActiveBackground(HMSVirtualBackgroundTypes.NONE);
+                hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
               },
             },
             {
@@ -129,16 +146,16 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               value: HMSVirtualBackgroundTypes.BLUR,
               onClick: async () => {
                 await VBHandler?.setBlur(blurAmount);
-                setActiveBackground(HMSVirtualBackgroundTypes.BLUR);
+                hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR);
               },
             },
           ]}
-          activeBackground={activeBackground}
+          activeBackground={background}
         />
 
         {/* Slider */}
         <Flex direction="column" css={{ w: '100%', gap: '$8', mt: '$8' }}>
-          {activeBackground === HMSVirtualBackgroundTypes.BLUR && isEffectsEnabled && effectsKey ? (
+          {background === HMSVirtualBackgroundTypes.BLUR && isEffectsEnabled && effectsKey ? (
             <Box>
               <Text variant="sm" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mb: '$4' }}>
                 Blur intensity
@@ -173,10 +190,10 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
             value: mediaURL,
             onClick: async () => {
               await VBHandler?.setBackground(mediaURL);
-              setActiveBackground(mediaURL);
+              hmsActions.setAppData(APP_DATA.background, mediaURL);
             },
           }))}
-          activeBackground={activeBackground}
+          activeBackground={background}
         />
       </Box>
     </Flex>