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

package/src/components/PollQuestionDeleteConfirmation.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { useDispatch } from 'react-redux';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { AlertTriangleIcon, CloseIcon } from '../Icons';
+import { HMSDangerButton } from './HMSDangerButton';
+import { deletePollQuestion } from '../redux/actions';
+
+export interface PollQuestionDeleteConfirmationProps {
+  dismissModal(): void;
+}
+
+export const PollQuestionDeleteConfirmation: React.FC<
+  PollQuestionDeleteConfirmationProps
+> = ({ dismissModal }) => {
+  const dispatch = useDispatch();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerText: {
+      color: theme.palette.alert_error_default,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    subtitle: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  const disabledButton = false;
+
+  const handleClosePress = () => dismissModal();
+
+  const handlePollQuestionDelete = () => {
+    dispatch(deletePollQuestion());
+    dismissModal();
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          <AlertTriangleIcon style={styles.backIcon} />
+
+          <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+            Delete Question
+          </Text>
+        </View>
+
+        <TouchableOpacity
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      <Text style={[styles.subtitle, hmsRoomStyles.subtitle]}>
+        Are you sure you want to delete this question?{'\n'}You can't undo this
+        action.
+      </Text>
+
+      <HMSDangerButton
+        loading={false}
+        onPress={handlePollQuestionDelete}
+        title="Delete"
+        disabled={disabledButton}
+        style={styles.deleteButton}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+    paddingBottom: 32,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  backIcon: {
+    marginRight: 8,
+  },
+  headerText: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginTop: 8,
+  },
+  deleteButton: {
+    marginTop: 16,
+  },
+});

package/src/components/PollQuestions.tsx

@@ -0,0 +1,277 @@
+import * as React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+import { HMSPollQuestionType, HMSPollType } from '@100mslive/react-native-hms';
+
+import { AddIcon } from '../Icons';
+import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { PollQuestion } from './PollQuestion';
+import { batch, useDispatch, useSelector, useStore } from 'react-redux';
+import type { RootState } from '../redux';
+import {
+  addPollQuestion,
+  addPollQuestionOption,
+  cleaPollFormState,
+  deletePollQuestionOption,
+  editPollQuestionOption,
+  setLaunchingPoll,
+  setPollQDeleteConfirmationVisible,
+  setPollQuestionCorrectOption,
+  setPollQuestionPointWeightage,
+  setPollQuestionResponseEditable,
+  setPollQuestionSaved,
+  setPollQuestionSkippable,
+  setPollQuestionTitle,
+  setPollQuestionType,
+  setSelectedPollQuestionIndex,
+} from '../redux/actions';
+import type { PollQuestionUI } from '../redux/actionTypes';
+
+export interface PollQuestionsProps {
+  dismissModal(): void;
+}
+
+export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+  const reduxStore = useStore<RootState>();
+  const localPeerRole = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role
+  );
+  const launchingPoll = useSelector(
+    (state: RootState) => state.polls.launchingPoll
+  );
+  const pollType = useSelector(
+    (state: RootState) => state.polls.pollConfig.type
+  );
+  const questions = useSelector((state: RootState) => state.polls.questions);
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    regularMediumText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  const disableLaunchPoll =
+    questions.length <= 0 || questions.some((question) => !question.saved);
+
+  const launchPoll = async () => {
+    try {
+      const pollsData = reduxStore.getState().polls;
+      if (!pollsData.pollName || disableLaunchPoll) {
+        console.log('Incorrect data!');
+        return;
+      }
+      dispatch(setLaunchingPoll(true));
+
+      const result = await hmsInstance.interactivityCenter.startPoll({
+        title: pollsData.pollName,
+        type: pollType,
+        rolesThatCanViewResponses:
+          pollType === HMSPollType.poll &&
+          pollsData.pollConfig.voteCountHidden &&
+          localPeerRole
+            ? [localPeerRole]
+            : undefined,
+        // mode: HMSPollUserTrackingMode.customerUserID, // mode: null, // `pollsData.pollConfig.resultsAnonymous` Make results anonymous set user tracking mode to none
+        questions: pollsData.questions.map((question) => {
+          const weight = parseInt(question.pointWeightage);
+          return {
+            skippable: question.skippable,
+            once: !question.responseEditable,
+            text: question.title,
+            type: question.type,
+            weight:
+              pollType === HMSPollType.quiz && !isNaN(weight)
+                ? weight
+                : undefined,
+            options: question.options?.map((option) =>
+              pollType === HMSPollType.quiz
+                ? { text: option[1], isCorrectAnswer: option[0] }
+                : { text: option[1] }
+            ),
+          };
+        }),
+      });
+
+      console.log('quickStartPoll result > ', result);
+      dispatch(cleaPollFormState());
+    } catch (error) {
+      dispatch(setLaunchingPoll(false));
+      console.log('quickStartPoll error > ', error);
+    }
+  };
+
+  const addQuestion = () => {
+    dispatch(addPollQuestion());
+  };
+
+  const deleteQuestion = React.useCallback((index: number) => {
+    batch(() => {
+      dispatch(setSelectedPollQuestionIndex(index));
+      dispatch(setPollQDeleteConfirmationVisible(true));
+    });
+  }, []);
+
+  const onQuestionFieldChange = React.useCallback(
+    <K extends keyof Omit<PollQuestionUI, 'options'>>(
+      questionIndex: number,
+      questionField: K,
+      value: Omit<PollQuestionUI, 'options'>[K]
+    ) => {
+      switch (questionField) {
+        case 'responseEditable':
+          dispatch(
+            setPollQuestionResponseEditable(questionIndex, value as boolean)
+          );
+          break;
+        case 'saved':
+          dispatch(setPollQuestionSaved(questionIndex, value as boolean));
+          break;
+        case 'skippable':
+          dispatch(setPollQuestionSkippable(questionIndex, value as boolean));
+          break;
+        case 'title':
+          dispatch(setPollQuestionTitle(questionIndex, value as string));
+          break;
+        case 'type':
+          dispatch(
+            setPollQuestionType(questionIndex, value as HMSPollQuestionType)
+          );
+          break;
+        case 'pointWeightage':
+          const cleanNumber = (value as string).replace(/[^0-9]/g, '');
+          dispatch(setPollQuestionPointWeightage(questionIndex, cleanNumber));
+          break;
+      }
+    },
+    []
+  );
+
+  const handleAddPollQuestionOption = React.useCallback(
+    (questionIndex: number) => {
+      dispatch(addPollQuestionOption(questionIndex));
+    },
+    []
+  );
+
+  const handleDeletePollQuestionOption = React.useCallback(
+    (questionIndex: number, optionIndex: number) => {
+      dispatch(deletePollQuestionOption(questionIndex, optionIndex));
+    },
+    []
+  );
+
+  const handleEditPollQuestionOption = React.useCallback(
+    (questionIndex: number, optionIndex: number, option: string) => {
+      dispatch(editPollQuestionOption(questionIndex, optionIndex, option));
+    },
+    []
+  );
+
+  const handleSetPollQuestionCorrectOption = React.useCallback(
+    (questionIndex: number, optionIndex: number, corectOption: boolean) => {
+      dispatch(
+        setPollQuestionCorrectOption(questionIndex, optionIndex, corectOption)
+      );
+    },
+    []
+  );
+
+  return (
+    <ScrollView
+      style={styles.contentContainer}
+      contentContainerStyle={{ paddingTop: 24 }}
+    >
+      {questions.map((pollQuestion, idx, arr) => {
+        const isFirst = idx === 0;
+        return (
+          <React.Fragment key={idx}>
+            {isFirst ? null : <View style={{ height: 16 }} />}
+
+            <PollQuestion
+              totalQuestions={arr.length}
+              currentQuestionIndex={idx}
+              pollQuestion={pollQuestion}
+              onAddPollQuestionOption={handleAddPollQuestionOption}
+              onDeletePollQuestionOption={handleDeletePollQuestionOption}
+              onEditPollQuestionOption={handleEditPollQuestionOption}
+              onSetPollQuestionCorrectOption={
+                handleSetPollQuestionCorrectOption
+              }
+              onQuestionFieldChange={onQuestionFieldChange}
+              onDelete={deleteQuestion}
+            />
+          </React.Fragment>
+        );
+      })}
+
+      <View style={[styles.addOptionWrapper, { marginTop: 16 }]}>
+        <TouchableOpacity
+          onPress={addQuestion}
+          disabled={launchingPoll}
+          style={[
+            styles.addOptionContainer,
+            launchingPoll ? { opacity: 0.4 } : null,
+          ]}
+        >
+          <View style={styles.addOptionIconWrapper}>
+            <AddIcon type="circle" />
+          </View>
+          <Text style={[styles.smallText, hmsRoomStyles.regularMediumText]}>
+            Add another question
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      <HMSPrimaryButton
+        disabled={disableLaunchPoll || launchingPoll}
+        title={`Launch ${pollType === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
+        loading={launchingPoll}
+        onPress={launchPoll}
+        style={{ marginTop: 16, marginBottom: 56, alignSelf: 'flex-end' }}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  smallText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  contentContainer: {
+    paddingHorizontal: 24,
+  },
+  typeSelectionLabel: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  pollNameLabel: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  textInput: {
+    flex: undefined,
+  },
+
+  addOptionWrapper: {
+    alignSelf: 'flex-start',
+  },
+  addOptionContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  addOptionIconWrapper: {
+    marginRight: 8,
+    padding: 8,
+  },
+});

package/src/components/PollResponseProgressView.tsx

@@ -0,0 +1,77 @@
+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';
+
+interface PollResponseProgressViewProps {
+  option: HMSPollQuestionOption;
+  totalVotes: number;
+}
+
+export const PollResponseProgressView: React.FC<
+  PollResponseProgressViewProps
+> = ({ option, totalVotes }) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    surfaceHighRegularText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    progressContainer: {
+      backgroundColor: theme.palette.surface_bright,
+    },
+    progress: {
+      backgroundColor: theme.palette.primary_default,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Text style={[styles.smallText, hmsRoomStyles.surfaceHighRegularText]}>
+          {option.text}
+        </Text>
+
+        <Text style={[styles.smallText, hmsRoomStyles.surfaceHighRegularText]}>
+          {option.voteCount} {option.voteCount > 1 ? 'votes' : 'vote'}
+        </Text>
+      </View>
+
+      <View style={[hmsRoomStyles.progressContainer, styles.progressContainer]}>
+        <View
+          style={[
+            hmsRoomStyles.progress,
+            styles.progress,
+            { width: `${(option.voteCount / totalVotes) * 100}%` },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  smallText: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  progressContainer: {
+    flex: 1,
+    height: 8,
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  progress: {
+    height: '100%',
+  },
+});

package/src/components/PollsAndQuizBottomSheet.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { BottomSheet } from './BottomSheet';
+import {
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+  useModalType,
+} from '../hooks-util';
+import { useHeaderHeight } from './Header';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import { PollsAndQuizzesModalContent } from './PollsAndQuizzesModalContent';
+import { ModalTypes } from '../utils/types';
+import type { RootState } from '../redux';
+import { CreatePollStages } from '../redux/actionTypes';
+import { visiblePollsSelector } from '../utils/functions';
+
+export const PollsAndQuizBottomSheet = () => {
+  const headerHeight = useHeaderHeight();
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const {
+    modalVisibleType: modalVisible,
+    handleModalVisibleType: setModalVisible,
+  } = useModalType();
+
+  const isPollQuestionStage = useSelector(
+    (state: RootState) =>
+      state.polls.stage === CreatePollStages.POLL_QUESTION_CONFIG
+  );
+  const isHLSViewer = useIsHLSViewer();
+  const havePolls = useSelector(
+    (state: RootState) =>
+      visiblePollsSelector(
+        Object.values(state.polls.polls),
+        isHLSViewer,
+        state.polls.cuedPollIds
+      ).length > 0
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    contentContainer: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+  }));
+
+  const dismissModal = () => setModalVisible(ModalTypes.DEFAULT);
+
+  const fullHeight = isPollQuestionStage || havePolls;
+  const containerStyles = fullHeight
+    ? [
+        styles.bottomSheet,
+        {
+          marginTop: isLandscapeOrientation
+            ? 0
+            : headerHeight + (Platform.OS === 'android' ? 24 : 0),
+        },
+        hmsRoomStyles.contentContainer,
+      ]
+    : [hmsRoomStyles.contentContainer];
+
+  return (
+    <BottomSheet
+      // fullWidth={true}
+      dismissModal={dismissModal}
+      isVisible={modalVisible === ModalTypes.POLLS_AND_QUIZZES}
+      avoidKeyboard={true}
+      containerStyle={containerStyles}
+      bottomOffsetSpace={fullHeight ? 0 : undefined}
+    >
+      <PollsAndQuizzesModalContent
+        fullHeight={fullHeight}
+        dismissModal={dismissModal}
+      />
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomSheet: {
+    flex: 1,
+  },
+});

package/src/components/PollsAndQuizzesCard.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { batch, useDispatch } from 'react-redux';
+import type { HMSPoll } from '@100mslive/react-native-hms';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { setPollStage, setSelectedPollId } from '../redux/actions';
+import { CreatePollStages } from '../redux/actionTypes';
+import { PollAndQuizzStateLabel } from './PollAndQuizzStateLabel';
+
+export interface PollsAndQuizzesCardProps {
+  poll: HMSPoll;
+}
+
+export const PollsAndQuizzesCard: React.FC<PollsAndQuizzesCardProps> = ({
+  poll,
+}) => {
+  const dispatch = useDispatch();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    surfaceHighSemiBoldText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    container: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    liveStateLabelWrapper: {
+      backgroundColor: theme.palette.alert_error_default,
+    },
+    stateLabelWrapper: {
+      backgroundColor: theme.palette.surface_brighter,
+    },
+  }));
+
+  const viewPoll = () => {
+    batch(() => {
+      dispatch(setPollStage(CreatePollStages.POLL_VOTING));
+      dispatch(setSelectedPollId(poll.pollId));
+    });
+  };
+
+  return (
+    <View style={[hmsRoomStyles.container, styles.container]}>
+      <View style={styles.row}>
+        <Text
+          numberOfLines={4}
+          style={[styles.pollTitle, hmsRoomStyles.surfaceHighSemiBoldText]}
+        >
+          {poll.title}
+        </Text>
+
+        {typeof poll.state === 'number' ? (
+          <PollAndQuizzStateLabel state={poll.state} />
+        ) : null}
+      </View>
+
+      <View style={styles.spacer} />
+
+      <View style={styles.rightRow}>
+        {/* {poll.state === HMSPollState.stopped ? (
+          <HMSSecondaryButton
+            loading={false}
+            onPress={() => null}
+            style={{ marginRight: 8 }}
+            title="View Results"
+          />
+        ) : null} */}
+
+        <HMSPrimaryButton loading={false} onPress={viewPoll} title="View" />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 24,
+  },
+  spacer: {
+    height: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  rightRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  pollTitle: {
+    flexShrink: 1,
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  stateLabelWrapper: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+  },
+  stateLabel: {
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
+});