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

package/src/components/CreatePoll.tsx

@@ -0,0 +1,249 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, Switch, TouchableOpacity } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { HMSPollType } from '@100mslive/react-native-hms';
+
+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';
+import { PollIcon, QuizIcon } from '../Icons';
+
+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,
+    },
+    activeTypeLabelContainer: {
+      borderColor: theme.palette.primary_default,
+    },
+    typeLabelIconContainer: {
+      borderColor: theme.palette.border_bright,
+      backgroundColor: theme.palette.surface_bright,
+    },
+    activeTypeLabelIconContainer: {
+      borderColor: theme.palette.primary_default,
+      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 handlePollTypeChange = (configValue: PollConfig['type']) => {
+    dispatch(setPollConfig({ type: configValue }));
+  };
+
+  const addQuestions = () => {
+    if (pollName.trim().length > 0) {
+      dispatch(setPollStage(CreatePollStages.POLL_QUESTION_CONFIG));
+    }
+  };
+
+  return (
+    <View style={styles.contentContainer}>
+      <Text
+        style={[styles.typeSelectionLabel, hmsRoomStyles.typeSelectionLabel]}
+      >
+        Select the type you want to continue with
+      </Text>
+
+      <View style={styles.typeContainer}>
+        {[
+          {
+            id: 'poll',
+            label: 'Poll',
+            icon: <PollIcon />,
+            pressHandler: () => handlePollTypeChange(HMSPollType.poll),
+            active: pollConfig.type === HMSPollType.poll,
+          },
+          {
+            id: 'quiz',
+            label: 'Quiz',
+            icon: <QuizIcon />,
+            pressHandler: () => handlePollTypeChange(HMSPollType.quiz),
+            active: pollConfig.type === HMSPollType.quiz,
+          },
+        ].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
+                  activeOpacity={0.7}
+                  disabled={isActive}
+                  onPress={item.pressHandler}
+                  style={[
+                    styles.typeLabelContainer,
+                    isActive
+                      ? hmsRoomStyles.activeTypeLabelContainer
+                      : hmsRoomStyles.typeLabelContainer,
+                  ]}
+                >
+                  <View
+                    style={[
+                      styles.typeLabelIconContainer,
+                      isActive
+                        ? hmsRoomStyles.activeTypeLabelIconContainer
+                        : hmsRoomStyles.typeLabelIconContainer,
+                    ]}
+                  >
+                    {item.icon}
+                  </View>
+                  <Text style={[styles.typeLabel, hmsRoomStyles.typeLabel]}>
+                    {item.label}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </React.Fragment>
+          );
+        })}
+      </View>
+
+      <Text style={[styles.pollNameLabel, hmsRoomStyles.pollNameLabel]}>
+        {pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'} Name
+      </Text>
+
+      <HMSTextInput
+        style={styles.textInput}
+        value={pollName}
+        autoFocus={false}
+        onChangeText={handlePollNameChange}
+        placeholder={`My ${pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
+      />
+
+      <BottomSheet.Divider style={{ marginVertical: 24 }} />
+
+      {[
+        {
+          id: 'voteCountHidden' as const,
+          label: 'Hide vote count',
+          enabled: pollConfig.voteCountHidden,
+          visible: pollConfig.type === HMSPollType.poll,
+        },
+        // {
+        //   id: 'resultsAnonymous' as const,
+        //   label: 'Make results anonymous',
+        //   enabled: pollConfig.resultsAnonymous,
+        //   visible: true
+        // },
+      ]
+        .filter((item) => item.visible)
+        .map((item) => {
+          return (
+            <View key={item.id} style={styles.switchWrapper}>
+              <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 ${pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
+        onPress={addQuestions}
+        loading={false}
+        style={styles.createPollBtn}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  typeContainer: {
+    flexDirection: 'row',
+    marginTop: 8,
+    marginBottom: 24,
+  },
+  typeLabelContainer: {
+    flexDirection: 'row',
+    padding: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: 'center',
+  },
+  typeLabelIconContainer: {
+    padding: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    marginRight: 16,
+  },
+  typeLabel: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  switchWrapper: {
+    marginTop: 4,
+    flexDirection: 'row',
+  },
+  createPollBtn: {
+    marginTop: 24,
+  },
+  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/GridView.tsx

@@ -1,15 +1,10 @@
 import React, { useRef, useState, useImperativeHandle } from 'react';
 import type { ElementRef } from 'react';
-import {
-  View,
-  FlatList,
-  StyleSheet,
-  useWindowDimensions,
-  Platform,
-} from 'react-native';
+import { View, FlatList, StyleSheet, Platform } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import type { LayoutChangeEvent, ViewToken } from 'react-native';
 import type { HMSView, HMSPeer } from '@100mslive/react-native-hms';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 
 import { DefaultModal } from './DefaultModal';
 import { SaveScreenshot } from './Modals';
@@ -21,10 +16,6 @@ import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
 import { useIsLandscapeOrientation } from '../utils/dimension';
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -303,8 +294,7 @@ const ScreenshareTiles = React.forwardRef<
   FlatList<PeerTrackNode>,
   ScreenshareTilesProps
 >(({ onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
-  const { width } = useWindowDimensions();
-  const { left, right } = useSafeAreaInsets();
+  const { width: safeWidth } = useSafeAreaFrame();
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const [activePage, setActivePage] = useState(0);
   const screensharePeerTrackNodes = useSelector(
@@ -326,7 +316,7 @@ const ScreenshareTiles = React.forwardRef<
     },
     []
   );
-  const tileWidth = width + left + right;
+  const tileWidth = safeWidth;
 
   const _renderItem = React.useCallback(
     ({ item }) => {

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]}>
+              {poll.type === HMSPollType.quiz ? 'Answer' : '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}
+    />
+  );
+};