@100mslive/react-native-room-kit 1.1.0 → 1.1.2

package/src/components/PollsAndQuizzesModalContent.tsx

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Keyboard,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import type { RootState } from '../redux';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { BottomSheet } from './BottomSheet';
+import { ChevronIcon, CloseIcon } from '../Icons';
+import { TestIds } from '../utils/constants';
+import { PollQuestions } from './PollQuestions';
+import { CreatePollStages } from '../redux/actionTypes';
+import { setPollStage } from '../redux/actions';
+import { PollQDeleteConfirmationSheetView } from './PollQDeleteConfirmationSheetView';
+import { PollsConfigAndList } from './PollsConfigAndList';
+import { PollAndQuizVoting } from './PollAndQuizVoting';
+import { PollAndQuizzStateLabel } from './PollAndQuizzStateLabel';
+
+export interface PollsAndQuizzesModalContentProps {
+  fullHeight: boolean;
+  dismissModal(): void;
+}
+
+export const PollsAndQuizzesModalContent: React.FC<
+  PollsAndQuizzesModalContentProps
+> = ({ fullHeight, dismissModal }) => {
+  const dispatch = useDispatch();
+  const headerTitle = useSelector((state: RootState) => {
+    const pollsData = state.polls;
+    if (pollsData.stage === CreatePollStages.POLL_QUESTION_CONFIG) {
+      return pollsData.pollName;
+    }
+    if (
+      pollsData.stage === CreatePollStages.POLL_VOTING &&
+      pollsData.selectedPollId !== null
+    ) {
+      return pollsData.polls[pollsData.selectedPollId]?.title || null;
+    }
+    return null;
+  });
+  const selectedPoll = useSelector((state: RootState) => {
+    const pollsData = state.polls;
+    if (
+      pollsData.stage === CreatePollStages.POLL_VOTING &&
+      pollsData.selectedPollId !== null
+    ) {
+      return pollsData.polls[pollsData.selectedPollId] || null;
+    }
+    return null;
+  });
+  const pollsStage = useSelector((state: RootState) => state.polls.stage);
+  const launchingPoll = useSelector(
+    (state: RootState) => state.polls.launchingPoll
+  );
+  const canCreateOrEndPoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollWrite;
+  });
+  const canVoteOnPoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollRead;
+  });
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const handleBackPress = () => {
+    Keyboard.dismiss();
+    dispatch(setPollStage(CreatePollStages.POLL_CONFIG));
+  };
+
+  const handleClosePress = () => {
+    Keyboard.dismiss();
+    dismissModal();
+  };
+
+  return (
+    <View style={fullHeight ? styles.fullView : null}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          {headerTitle ? (
+            <TouchableOpacity
+              onPress={handleBackPress}
+              disabled={launchingPoll}
+              hitSlop={styles.closeIconHitSlop}
+              style={[styles.backIcon, launchingPoll ? { opacity: 0.4 } : null]}
+            >
+              <ChevronIcon direction="left" />
+            </TouchableOpacity>
+          ) : null}
+
+          <Text
+            testID={TestIds.change_name_modal_heading}
+            numberOfLines={2}
+            style={[
+              styles.headerText,
+              { flexShrink: 1 },
+              hmsRoomStyles.headerText,
+            ]}
+          >
+            {headerTitle ?? 'Polls and Quizzes'}
+          </Text>
+
+          {selectedPoll?.state ? (
+            <PollAndQuizzStateLabel state={selectedPoll?.state} />
+          ) : null}
+        </View>
+
+        <TouchableOpacity
+          testID={TestIds.change_name_modal_close_btn}
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+          style={{ marginLeft: 16 }}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      {/* Divider */}
+      <BottomSheet.Divider
+        style={fullHeight ? styles.halfDivider : styles.divider}
+      />
+
+      {/* Content */}
+      <View style={fullHeight ? styles.fullView : null}>
+        {pollsStage === CreatePollStages.POLL_CONFIG ? (
+          <PollsConfigAndList />
+        ) : pollsStage === CreatePollStages.POLL_QUESTION_CONFIG &&
+          canCreateOrEndPoll ? (
+          <PollQuestions dismissModal={dismissModal} />
+        ) : pollsStage === CreatePollStages.POLL_VOTING &&
+          (canVoteOnPoll || canCreateOrEndPoll) ? (
+          <PollAndQuizVoting dismissModal={dismissModal} />
+        ) : null}
+      </View>
+
+      {/* Modal */}
+      <PollQDeleteConfirmationSheetView />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Utilities
+  fullView: {
+    flex: 1,
+  },
+  // Header
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 24,
+    marginHorizontal: 24,
+  },
+  headerControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 1,
+  },
+  headerText: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    marginRight: 12,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  backIcon: {
+    marginRight: 8,
+  },
+  // Divider
+  halfDivider: {
+    marginHorizontal: 24,
+    marginVertical: 0,
+    marginTop: 24,
+    width: undefined,
+  },
+  divider: {
+    marginHorizontal: 24,
+    marginVertical: 24,
+    width: undefined,
+  },
+});

package/src/components/PollsConfigAndList.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ScrollView } from 'react-native';
+
+import { CreatePoll } from './CreatePoll';
+import { PreviousPollsAndQuizzesList } from './PreviousPollsAndQuizzesList';
+import { useSelector } from 'react-redux';
+import type { RootState } from 'src/redux';
+
+export interface PollsConfigAndListProps {}
+
+export const PollsConfigAndList: React.FC<PollsConfigAndListProps> = ({}) => {
+  const canCreateOrEndPoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollWrite;
+  });
+  const canVoteOnPoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollRead;
+  });
+
+  return (
+    <ScrollView contentContainerStyle={{ paddingBottom: 24 }}>
+      {canCreateOrEndPoll ? <CreatePoll /> : null}
+      {canVoteOnPoll || canCreateOrEndPoll ? (
+        <PreviousPollsAndQuizzesList />
+      ) : null}
+    </ScrollView>
+  );
+};

package/src/components/PreviousPollsAndQuizzesList.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
+import { PollsAndQuizzesCard } from './PollsAndQuizzesCard';
+import type { RootState } from '../redux';
+import { visiblePollsSelector } from '../utils/functions';
+
+export interface PreviousPollsAndQuizzesListProps {}
+
+export const PreviousPollsAndQuizzesList: React.FC<
+  PreviousPollsAndQuizzesListProps
+> = ({}) => {
+  const isHLSViewer = useIsHLSViewer();
+  const polls = useSelector((state: RootState) => state.polls.polls);
+  const hlsCuedPollIds = useSelector(
+    (state: RootState) => state.polls.cuedPollIds
+  );
+
+  const canCreateOrEndPoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollWrite;
+  });
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    surfaceHighSemiBoldText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    surfaceHighRegularText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  const pollsList = visiblePollsSelector(
+    Object.values(polls),
+    isHLSViewer,
+    hlsCuedPollIds
+  );
+
+  if (pollsList.length === 0 && !canCreateOrEndPoll) {
+    return (
+      <View style={styles.contentContainer}>
+        <Text
+          style={[
+            styles.subtitle,
+            hmsRoomStyles.surfaceHighRegularText,
+            styles.emptyList,
+          ]}
+        >
+          No Polls or Quizzes to show
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.contentContainer}>
+      {pollsList.length > 0 && (
+        <Text style={[styles.title, hmsRoomStyles.surfaceHighSemiBoldText]}>
+          Previous Polls And Quizzes
+        </Text>
+      )}
+
+      {pollsList
+        .sort((a, b) => {
+          return a.state === b.state // If polls have same state, then sort as per startedAt
+            ? a.startedAt !== undefined && b.startedAt !== undefined
+              ? b.startedAt.getTime() - a.startedAt.getTime()
+              : 0
+            : // If polls have different state, then sort as per state
+              a.state !== undefined && b.state !== undefined
+              ? a.state - b.state
+              : 0;
+        })
+        .map((poll) => (
+          <PollsAndQuizzesCard key={poll.pollId} poll={poll} />
+        ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    marginHorizontal: 24,
+  },
+  title: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    marginVertical: 24,
+  },
+  subtitle: {
+    fontSize: 16,
+    lineHeight: 20,
+    marginVertical: 24,
+  },
+  emptyList: {
+    textAlign: 'center',
+  },
+});

package/src/components/QuizEndOptionsView.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import type { HMSPollQuestionOption } from '@100mslive/react-native-hms';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { CheckIcon } from '../Icons';
+
+interface QuizEndOptionsViewProps {
+  option: HMSPollQuestionOption;
+  isSelected: boolean;
+  isCorrect: boolean;
+}
+
+export const QuizEndOptionsView: React.FC<QuizEndOptionsViewProps> = ({
+  option,
+  isSelected,
+  isCorrect,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    surfaceHighRegularText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    surfaceMediumRegularText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textWrapper}>
+        {isCorrect ? <CheckIcon style={styles.icon} type="in-circle" /> : null}
+
+        <Text style={[styles.smallText, hmsRoomStyles.surfaceHighRegularText]}>
+          {option.text}
+        </Text>
+      </View>
+
+      {isSelected ? (
+        <Text
+          style={[styles.smallText, hmsRoomStyles.surfaceMediumRegularText]}
+        >
+          Your Answer
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  textWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 8,
+  },
+  smallText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});

package/src/components/RadioInput.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import type { ColorValue } from 'react-native';
+
+export interface RadioInputProps {
+  selected: boolean;
+  size?: number;
+  color?: ColorValue;
+  onChange?: (selected: boolean) => void;
+}
+
+export const RadioInput: React.FC<RadioInputProps> = ({
+  selected,
+  size = 24,
+  color = 'white',
+  onChange,
+}) => {
+  const outerCircleStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    borderWidth: size / 12,
+    borderColor: color,
+  };
+
+  const innerCircleStyle = {
+    width: size / 2,
+    height: size / 2,
+    borderRadius: size / 4,
+    backgroundColor: color,
+  };
+
+  const radio = (
+    <View style={[styles.outerCircle, outerCircleStyle]}>
+      {selected ? <View style={innerCircleStyle} /> : null}
+    </View>
+  );
+
+  if (typeof onChange !== 'function') {
+    return radio;
+  }
+
+  return (
+    <TouchableOpacity onPress={() => onChange(!selected)}>
+      {radio}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  outerCircle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderStyle: 'solid',
+  },
+});

package/src/components/RadioInputRow.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import { RadioInput } from './RadioInput';
+import type { RadioInputProps } from './RadioInput';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+interface RadioInputRowProps {
+  text: string;
+  selected: boolean;
+  onChange(value: boolean): void;
+  disabled?: boolean;
+  radioSize?: RadioInputProps['size'];
+  radioColor?: RadioInputProps['color'];
+  textStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export const RadioInputRow: React.FC<RadioInputRowProps> = ({
+  text,
+  containerStyle,
+  selected,
+  disabled,
+  textStyle,
+  radioSize,
+  radioColor,
+  onChange,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    surfaceHighRegularText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      style={[styles.container, containerStyle]}
+      onPress={() => onChange(!selected)}
+    >
+      <View style={styles.radioWrapper}>
+        <RadioInput selected={selected} color={radioColor} size={radioSize} />
+      </View>
+
+      <Text
+        style={[
+          styles.normalText,
+          hmsRoomStyles.surfaceHighRegularText,
+          textStyle,
+        ]}
+      >
+        {text}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  radioWrapper: {
+    padding: 8,
+    marginRight: 8,
+  },
+  normalText: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});

package/src/components/RoomSettingsModalContent.tsx

@@ -13,6 +13,7 @@ import {
   HandIcon,
   ParticipantsIcon,
   PencilIcon,
+  PollVoteIcon,
   RecordingIcon,
   ScreenShareIcon,
 } from '../Icons';
@@ -67,6 +68,11 @@ export const RoomSettingsModalContent: React.FC<
     (state: RootState) => state.app.editUsernameDisabled
   );
 
+  const canReadOrWritePoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollRead || permissions?.pollWrite;
+  });
+
   const { registerOnModalHideAction } = useBottomSheetActions();
 
   const { canShowParticipants, show } = useShowChatAndParticipants();
@@ -187,6 +193,15 @@ export const RoomSettingsModalContent: React.FC<
     closeRoomSettingsModal();
   };
 
+  const openPollsQuizzesModal = () => {
+    registerOnModalHideAction(() => {
+      setModalVisible(ModalTypes.POLLS_AND_QUIZZES);
+    });
+
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+
   const canShowBRB = useHMSLayoutConfig(
     (layoutConfig) =>
       !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
@@ -298,6 +313,14 @@ export const RoomSettingsModalContent: React.FC<
               isActive: false,
               hide: isPublisher || editUsernameDisabled,
             },
+            {
+              id: 'polls-and-quizes',
+              icon: <PollVoteIcon style={{ width: 20, height: 20 }} />,
+              label: 'Polls and Quizzes',
+              pressHandler: openPollsQuizzesModal,
+              isActive: false,
+              hide: !canReadOrWritePoll,
+            },
           ].filter((itm) => !itm.hide),
           true
         ).map((itm, idx) => {

package/src/components/SwitchRow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Switch, View, Text, StyleSheet } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { COLORS } from '../utils/theme';
 
@@ -9,6 +9,7 @@ interface SwitchRow {
   onChange(value: boolean): void;
   text: string;
   containerStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
   LeftIcon?: React.ReactNode;
 }
 
@@ -16,6 +17,7 @@ export const SwitchRow: React.FC<SwitchRow> = ({
   text,
   LeftIcon,
   containerStyle,
+  textStyle,
   value,
   onChange,
 }) => {
@@ -24,7 +26,7 @@ export const SwitchRow: React.FC<SwitchRow> = ({
       <View style={styles.container}>
         {LeftIcon}
 
-        <Text style={styles.text}>{text}</Text>
+        <Text style={[styles.text, textStyle]}>{text}</Text>
       </View>
 
       <Switch

package/src/components/TilesContainer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View, Dimensions } from 'react-native';
+import { View } from 'react-native';
 import { useSelector } from 'react-redux';
 import type { ViewStyle } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import type { HMSView } from '@100mslive/react-native-hms';
 
 import { Tile } from './Tile';
@@ -22,7 +22,7 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
   setHmsViewRefs,
   onPeerTileMorePress,
 }) => {
-  const { left, right } = useSafeAreaInsets();
+  const { width: safeWidth } = useSafeAreaFrame();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
   const screenshareTilesAvailable = useSelector(
@@ -55,7 +55,7 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
               ? 'row'
               : 'column',
         },
-        { width: Dimensions.get('window').width + left + right },
+        { width: safeWidth },
       ]}
     >
       {peerTrackNodes.length <= 3 ? (

package/src/hooks-util.ts

@@ -22,7 +22,8 @@ import {
   setSoftInputMode,
   getSoftInputMode,
   WindowController,
-  // useHMSPeerUpdates,
+  useHMSHLSPlayerCue,
+  HMSPollUpdateType,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
 import { SoftInputModes } from '@100mslive/react-native-hms';
@@ -71,6 +72,7 @@ import {
 } from 'react-redux';
 import type { AppDispatch, RootState } from './redux';
 import {
+  addCuedPollId,
   addMessage,
   addNotification,
   addParticipant,
@@ -2548,6 +2550,43 @@ export const useLandscapeImmersiveMode = () => {
   }, [isLandscapeOrientation]);
 };
 
+export const useHLSCuedPolls = () => {
+  const dispatch = useDispatch();
+  const store = useStore<RootState>();
+  const isHLSViewer = useIsHLSViewer();
+
+  useHMSHLSPlayerCue(
+    (cue) => {
+      const payloadStr = cue.payloadval;
+
+      if (
+        isHLSViewer &&
+        typeof payloadStr === 'string' &&
+        payloadStr.startsWith('poll:')
+      ) {
+        const pollId = payloadStr.split(':')[1];
+        const poll =
+          pollId && pollId.length > 0
+            ? store.getState().polls.polls[pollId]
+            : null;
+
+        if (poll) {
+          console.log('HLS Cued Poll ID: ', pollId);
+          dispatch(addCuedPollId(poll.pollId));
+          dispatch(
+            addNotification({
+              id: `${poll.pollId}--${poll.state}`,
+              type: NotificationTypes.POLLS_AND_QUIZZES,
+              payload: { poll, pollUpdateType: HMSPollUpdateType.started },
+            })
+          );
+        }
+      }
+    },
+    [isHLSViewer]
+  );
+};
+
 export const useSavePropsToStore = (
   props: HMSPrebuiltProps,
   dispatch: AppDispatch