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

package/src/components/CheckboxInputRow.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { CheckBoxIcon } from '../Icons';
+
+interface CheckboxInputRowProps {
+  text: string;
+  selected: boolean;
+  onChange(value: boolean): void;
+  disabled?: boolean;
+  textStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export const CheckboxInputRow: React.FC<CheckboxInputRowProps> = ({
+  text,
+  containerStyle,
+  selected,
+  disabled,
+  textStyle,
+  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}>
+        <CheckBoxIcon type={selected ? 'checked' : 'unchecked'} />
+      </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/CreatePoll.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, Switch } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { BottomSheet } from './BottomSheet';
+import { HMSTextInput } from './HMSTextInput';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+import { setPollConfig, setPollName, setPollStage } from '../redux/actions';
+import { CreatePollStages } from '../redux/actionTypes';
+import type { PollConfig } from '../redux/actionTypes';
+
+export interface CreatePollProps {}
+
+export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
+  const dispatch = useDispatch();
+  const pollName = useSelector((state: RootState) => state.polls.pollName);
+  const pollConfig = useSelector((state: RootState) => state.polls.pollConfig);
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    typeSelectionLabel: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    typeLabel: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    typeLabelContainer: {
+      borderColor: theme.palette.border_bright,
+    },
+    typeLabelIconContainer: {
+      borderColor: theme.palette.border_bright,
+      backgroundColor: theme.palette.surface_bright,
+    },
+    pollNameLabel: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  const handlePollNameChange = (name: string) => {
+    dispatch(setPollName(name));
+  };
+
+  const handleConfigChange = (
+    configKey: keyof PollConfig,
+    configValue: boolean
+  ) => {
+    dispatch(setPollConfig({ [configKey]: configValue }));
+  };
+
+  const addQuestions = () => {
+    if (pollName.trim().length > 0) {
+      dispatch(setPollStage(CreatePollStages.POLL_QUESTION_CONFIG));
+    }
+  };
+
+  return (
+    <View style={styles.contentContainer}>
+      <Text style={[styles.pollNameLabel, hmsRoomStyles.pollNameLabel]}>
+        Poll Name
+      </Text>
+
+      <HMSTextInput
+        style={styles.textInput}
+        value={pollName}
+        autoFocus={false}
+        onChangeText={handlePollNameChange}
+        placeholder={'My Poll'}
+      />
+
+      <BottomSheet.Divider style={{ marginVertical: 24 }} />
+
+      {[
+        {
+          id: 'voteCountHidden' as const,
+          label: 'Hide vote count',
+          enabled: pollConfig.voteCountHidden,
+        },
+      ].map((item) => {
+        return (
+          <View key={item.id} style={{ marginTop: 4, flexDirection: 'row' }}>
+            <Text
+              style={[
+                styles.pollNameLabel,
+                hmsRoomStyles.typeSelectionLabel,
+                { flexGrow: 1 },
+              ]}
+            >
+              {item.label}
+            </Text>
+
+            <Switch
+              value={item.enabled}
+              thumbColor={COLORS.WHITE}
+              trackColor={{
+                true: COLORS.PRIMARY.DEFAULT,
+                false: COLORS.SECONDARY.DISABLED,
+              }}
+              onValueChange={(value) => handleConfigChange(item.id, value)}
+            />
+          </View>
+        );
+      })}
+
+      <HMSPrimaryButton
+        disabled={!pollName.trim()}
+        title="Create Poll"
+        onPress={addQuestions}
+        loading={false}
+        style={{ marginTop: 24 }}
+      />
+    </View>
+  );
+};
+
+// {/* <Text style={[styles.typeSelectionLabel, hmsRoomStyles.typeSelectionLabel]}>
+//   Select the type you want to continue with
+// </Text>
+// <View style={{ flexDirection: 'row', marginTop: 8, marginBottom: 24, }}>
+//   {[
+//     {
+//       id: 'poll',
+//       label: 'Poll',
+//       icon: <PollIcon />,
+//       pressHandler: undefined,
+//       active: true,
+//     },
+//     {
+//       id: 'quiz',
+//       label: 'Quiz',
+//       icon: <QuizIcon />,
+//       pressHandler: undefined,
+//       active: false,
+//     },
+//   ].map((item, idx) => {
+//     const isFirst = idx === 0;
+//     const isActive = item.active;
+//     return (
+//       <React.Fragment key={item.id}>
+//         {isFirst ? null : <View style={{ width: 16 }} />}
+
+//         <View style={{ flexGrow: 1 }}>
+//           <TouchableOpacity
+//             onPress={item.pressHandler}
+//             style={[{ flexDirection: 'row', padding: 8, borderRadius: 8, borderWidth: 1, alignItems: 'center', }, hmsRoomStyles.typeLabelContainer]}
+//           >
+//             <View style={[{ padding: 8, borderRadius: 4, borderWidth: 1, marginRight: 16 }, hmsRoomStyles.typeLabelIconContainer]}>{item.icon}</View>
+//             <Text style={[{ fontSize: 16, lineHeight: 24, letterSpacing: 0.15 }, hmsRoomStyles.typeLabel]}>{item.label}</Text>
+//           </TouchableOpacity>
+//         </View>
+//       </React.Fragment>
+//     )
+//   })}
+// </View> */}
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    marginHorizontal: 24,
+  },
+  typeSelectionLabel: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  pollNameLabel: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  textInput: {
+    flex: undefined,
+    marginTop: 8,
+  },
+});

package/src/components/Footer.tsx

@@ -55,6 +55,11 @@ export const _Footer: React.FC<FooterProps> = () => {
       !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
   );
 
+  const canReadOrWritePoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollRead || permissions?.pollWrite;
+  });
+
   const canEditUsernameFromRoomModal = isViewer && !editUsernameDisabled;
 
   const canShowHandRaiseInFooter = !isOnStage && isViewer; // on_stage_exp object undefined && viewer -> show in footer
@@ -66,7 +71,8 @@ export const _Footer: React.FC<FooterProps> = () => {
     canShowBRB ||
     canShowHandRaiseInRoomModal ||
     canStartRecording ||
-    canEditUsernameFromRoomModal;
+    canEditUsernameFromRoomModal ||
+    canReadOrWritePoll;
 
   const footerActionButtons = useMemo(() => {
     const actions = [];

package/src/components/HLSPlayerEmoticons.tsx

@@ -34,9 +34,8 @@ export const HLSPlayerEmoticons = () => {
           );
         }
       } catch (error) {
-        const message = `HLS Cue Payload is not JSON: ${error}`;
-        console.warn(message);
-        Toast.showWithGravity(message, Toast.LONG, Toast.TOP);
+        const message = `HLSPlayerEmoticons: HLS Cue Payload is not JSON: ${error}`;
+        console.log(message);
       }
     }
   }, []);

package/src/components/HMSBaseButton.tsx

@@ -4,6 +4,7 @@ import {
   StyleSheet,
   Text,
   TouchableHighlight,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -18,7 +19,7 @@ import type {
 export interface HMSBaseButtonProps {
   title: string;
   loading: boolean;
-  onPress(): void;
+  onPress(e: any): void;
   wrapWithGestureDetector?: boolean;
   testID?: TouchableHighlightProps['testID'];
   underlayColor?: ColorValue | undefined;
@@ -27,6 +28,7 @@ export interface HMSBaseButtonProps {
   textStyle?: StyleProp<TextStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
+  useTouchableOpacity?: boolean;
 }
 
 export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
@@ -41,9 +43,12 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
   disabled,
   leftComponent,
   wrapWithGestureDetector,
+  useTouchableOpacity,
 }) => {
+  const Touchable = useTouchableOpacity ? TouchableOpacity : TouchableHighlight;
+
   const button = (
-    <TouchableHighlight
+    <Touchable
       testID={testID}
       underlayColor={underlayColor}
       style={[styles.button, style]}
@@ -70,7 +75,7 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
           <Text style={[styles.text, textStyle]}>{title}</Text>
         </View>
       </>
-    </TouchableHighlight>
+    </Touchable>
   );
 
   if (wrapWithGestureDetector) {

package/src/components/HMSNotification.tsx

@@ -73,7 +73,7 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
           </View>
         ) : null}
 
-        <View>
+        <View style={{ flexShrink: 1 }}>
           {typeof text === 'string' ? (
             <Text
               testID={textTestID}

package/src/components/HMSNotifications.tsx

@@ -12,6 +12,7 @@ import { HMSNotification } from './HMSNotification';
 import { AlertTriangleIcon } from '../Icons';
 import { HMSReconnectingNotification } from './HMSReconnectingNotification';
 import { useIsLandscapeOrientation } from '../utils/dimension';
+import { HMSPollsQuizzesNotification } from './HMSPollsQuizzesNotification';
 
 export interface HMSNotificationsProps {}
 
@@ -149,6 +150,12 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
                 autoDismiss={true}
                 dismissable={true}
               />
+            ) : notification.type === NotificationTypes.POLLS_AND_QUIZZES &&
+              'payload' in notification ? (
+              <HMSPollsQuizzesNotification
+                id={notification.id}
+                payload={notification.payload}
+              />
             ) : null}
           </View>
         );

package/src/components/HMSPollsQuizzesNotification.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { batch, useDispatch } from 'react-redux';
+import { StyleSheet, Text, TouchableHighlight } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import type { HMSPoll } from '@100mslive/react-native-hms';
+import { HMSPollType, HMSPollUpdateType } from '@100mslive/react-native-hms';
+
+import { PollVoteIcon } from '../Icons';
+import {
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+  useModalType,
+} from '../hooks-util';
+import { HMSNotification } from './HMSNotification';
+import { ModalTypes } from '../utils/types';
+import {
+  removeNotification,
+  setPollStage,
+  setSelectedPollId,
+} from '../redux/actions';
+import { CreatePollStages } from '../redux/actionTypes';
+
+export interface HMSPollsQuizzesNotificationProps {
+  id: string;
+  payload: any;
+}
+
+export const HMSPollsQuizzesNotification: React.FC<
+  HMSPollsQuizzesNotificationProps
+> = ({ id, payload }) => {
+  const { poll, pollUpdateType } = payload as {
+    poll: HMSPoll;
+    pollUpdateType: HMSPollUpdateType;
+  };
+
+  const dispatch = useDispatch();
+  const { handleModalVisibleType } = useModalType();
+  const { secondary_dim: secondaryDimColor } = useHMSRoomColorPalette();
+  // const canVoteOnPoll = useSelector((state: RootState) => {
+  //   const permissions = state.hmsStates.localPeer?.role?.permissions;
+  //   return permissions?.pollRead;
+  // });
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.secondary_default,
+    },
+    buttonText: {
+      color: theme.palette.on_secondary_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const handleVotePress = () => {
+    // if (!canVoteOnPoll) {
+    //   return;
+    // }
+    batch(() => {
+      dispatch(setPollStage(CreatePollStages.POLL_VOTING));
+      dispatch(setSelectedPollId(poll.pollId));
+      handleModalVisibleType(ModalTypes.POLLS_AND_QUIZZES);
+      dispatch(removeNotification(id));
+    });
+  };
+
+  return (
+    <HMSNotification
+      id={id}
+      icon={<PollVoteIcon />}
+      text={
+        poll.createdBy
+          ? `${poll.createdBy.name} ${
+              pollUpdateType === HMSPollUpdateType.started ? 'started' : ''
+            } a new ${poll.type === HMSPollType.poll ? 'poll' : 'quiz'}`
+          : `A new ${poll.type === HMSPollType.poll ? 'poll' : 'quiz'} has started`
+      }
+      autoDismiss={false}
+      dismissable={true}
+      cta={
+        // canVoteOnPoll ? (
+        <GestureDetector gesture={Gesture.Tap()}>
+          <TouchableHighlight
+            underlayColor={secondaryDimColor}
+            style={[styles.button, hmsRoomStyles.button]}
+            onPress={handleVotePress}
+          >
+            <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+              Vote
+            </Text>
+          </TouchableHighlight>
+        </GestureDetector>
+        // ) : undefined
+      }
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    marginRight: 16,
+  },
+  buttonText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});

package/src/components/HMSPrimaryButton.tsx

@@ -8,7 +8,7 @@ import type { HMSBaseButtonProps } from './HMSBaseButton';
 export interface HMSPrimaryButtonProps {
   title: string;
   loading: boolean;
-  onPress(): void;
+  onPress(e: any): void;
   testId?: HMSBaseButtonProps['testID'];
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;

package/src/components/HMSRoomOptions.tsx

@@ -22,6 +22,7 @@ import { BottomSheet } from './BottomSheet';
 import { ChangeNameModalContent } from './ChangeNameModalContent';
 import { StopRecordingModalContent } from './StopRecordingModalContent';
 import { TestIds } from '../utils/constants';
+import { PollsAndQuizBottomSheet } from './PollsAndQuizBottomSheet';
 
 interface HMSRoomOptionsProps {}
 
@@ -71,6 +72,8 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
         />
       </BottomSheet>
 
+      <PollsAndQuizBottomSheet />
+
       <BottomSheet
         isVisible={modalVisible === ModalTypes.CHANGE_NAME}
         dismissModal={dismissModal}

package/src/components/HMSSecondaryButton.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+import { HMSBaseButton } from './HMSBaseButton';
+import type { HMSBaseButtonProps } from './HMSBaseButton';
+
+export interface HMSPrimaryButtonProps {
+  title: string;
+  loading: boolean;
+  onPress(): void;
+  testId?: HMSBaseButtonProps['testID'];
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  leftComponent?: React.ReactElement | null;
+  wrapWithGestureDetector?: boolean;
+}
+
+export const HMSSecondaryButton: React.FC<HMSPrimaryButtonProps> = ({
+  title,
+  loading,
+  onPress,
+  testId,
+  style,
+  disabled,
+  leftComponent,
+  wrapWithGestureDetector,
+}) => {
+  const {
+    secondary_dim: secondaryDarkColor,
+    on_secondary_high: onSecondaryHighColor,
+  } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.secondary_default,
+    },
+    disabledButton: {
+      backgroundColor: theme.palette.secondary_disabled,
+    },
+    buttonText: {
+      color: theme.palette.on_secondary_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    disabledText: {
+      color: theme.palette.on_secondary_low,
+    },
+  }));
+
+  return (
+    <HMSBaseButton
+      testID={testId}
+      loaderColor={onSecondaryHighColor}
+      loading={loading}
+      onPress={onPress}
+      title={title}
+      underlayColor={secondaryDarkColor}
+      disabled={disabled}
+      leftComponent={leftComponent}
+      style={[
+        hmsRoomStyles.button,
+        disabled ? hmsRoomStyles.disabledButton : null,
+        style,
+      ]}
+      textStyle={[
+        hmsRoomStyles.buttonText,
+        disabled ? hmsRoomStyles.disabledText : null,
+      ]}
+      wrapWithGestureDetector={wrapWithGestureDetector}
+    />
+  );
+};