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

package/src/components/PollQuestions.tsx

@@ -0,0 +1,259 @@
+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,
+  setPollQuestionResponseEditable,
+  setPollQuestionSaved,
+  setPollQuestionSkippable,
+  setPollQuestionTitle,
+  setPollQuestionType,
+  setSelectedPollQuestionIndex,
+} from '../redux/actions';
+import type { PollQuestionUI } from 'src/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 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.title ||
+        !question.saved ||
+        (Array.isArray(question.options) &&
+          (question.options.length <= 1 ||
+            question.options.some((option) => !option)))
+    );
+
+  const launchPoll = async () => {
+    try {
+      const pollsData = reduxStore.getState().polls;
+
+      if (
+        !pollsData.pollName ||
+        pollsData.questions.some(
+          (question) =>
+            !question.title ||
+            (question.options && question.options.some((option) => !option))
+        )
+      ) {
+        console.log('Incorrect data!');
+        return;
+      }
+      dispatch(setLaunchingPoll(true));
+
+      const result = await hmsInstance.interactivityCenter.startPoll({
+        title: pollsData.pollName,
+        type: HMSPollType.poll,
+        rolesThatCanViewResponses:
+          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) => ({
+          skippable: question.skippable,
+          once: !question.responseEditable,
+          text: question.title,
+          type: question.type,
+          options: question.options?.map((option) => ({ text: option })),
+        })),
+      });
+
+      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;
+      }
+    },
+    []
+  );
+
+  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));
+    },
+    []
+  );
+
+  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}
+              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 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,
+  },
+});