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

package/src/components/PollAndQuizQuestionResponseCard.tsx

@@ -0,0 +1,311 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { HMSPollQuestionType, HMSPollState } from '@100mslive/react-native-hms';
+import type {
+  HMSPoll,
+  HMSPollQuestion,
+  HMSPollQuestionOption,
+} from '@100mslive/react-native-hms';
+
+import {
+  useHMSInstance,
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import { RadioInputRow } from './RadioInputRow';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { HMSBaseButton } from './HMSBaseButton';
+import { useDispatch, useSelector } from 'react-redux';
+import type { RootState } from 'src/redux';
+import {
+  addPollQuestionResponse,
+  removePollQuestionResponse,
+  setPollQuestionResponse,
+} from '../redux/actions';
+import { PollResponseProgressView } from './PollResponseProgressView';
+import { CheckboxInputRow } from './CheckboxInputRow';
+
+export interface PollAndQuizQuestionResponseCardProps {
+  pollId: HMSPoll['pollId'];
+  pollState: HMSPoll['state'];
+  totalQuestions: number;
+  pollQuestion: HMSPollQuestion;
+  containerStyle?: StyleProp<ViewStyle>;
+  onSubmit?: (d: any) => void;
+}
+
+export const PollAndQuizQuestionResponseCard: React.FC<
+  PollAndQuizQuestionResponseCardProps
+> = ({
+  pollState,
+  totalQuestions,
+  pollId,
+  pollQuestion,
+  containerStyle,
+  onSubmit,
+}) => {
+  const {
+    primary_bright: primaryBrightColor,
+    on_surface_low: onSurfaceLowColor,
+  } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    surfaceLowSemiBoldText: {
+      color: theme.palette.on_surface_low,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    surfaceHighRegularText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+
+    skipButton: {
+      borderColor: theme.palette.border_bright,
+      borderWidth: 1,
+      marginRight: 16,
+    },
+    skipButtonText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+
+  const selectedOptions = useSelector(
+    (state: RootState) =>
+      state.polls.pollsResponses[pollId]?.[pollQuestion.index] ?? null
+  );
+
+  const canViewPollResponse = useSelector((state: RootState) => {
+    const localPeerRole = state.hmsStates.localPeer?.role;
+    const rolesThatCanViewResponses =
+      state.polls.polls[pollId]?.rolesThatCanViewResponses;
+
+    return Array.isArray(rolesThatCanViewResponses) &&
+      rolesThatCanViewResponses.length > 0
+      ? localPeerRole &&
+          rolesThatCanViewResponses.findIndex(
+            (role) => role.name === localPeerRole.name
+          ) !== -1
+      : true;
+  });
+
+  const handleOptionSelection = (
+    selected: boolean,
+    option: HMSPollQuestionOption
+  ) => {
+    if (pollQuestion.type === HMSPollQuestionType.singleChoice) {
+      dispatch(
+        setPollQuestionResponse(pollId, pollQuestion.index, option.index)
+      );
+    } else {
+      if (selected) {
+        dispatch(
+          addPollQuestionResponse(pollId, pollQuestion.index, option.index)
+        );
+      } else {
+        dispatch(
+          removePollQuestionResponse(pollId, pollQuestion.index, option.index)
+        );
+      }
+    }
+  };
+
+  const handleVotePress = async (e: any) => {
+    if (!selectedOptions) {
+      return;
+    }
+    onSubmit?.(e);
+    const result = await hmsInstance.interactivityCenter.add({
+      pollId,
+      pollQuestionIndex: pollQuestion.index,
+      responses: {
+        options: Array.isArray(selectedOptions)
+          ? selectedOptions
+          : [selectedOptions],
+      },
+    });
+    console.log(JSON.stringify(result, null, 4));
+  };
+
+  const handleSkipPress = async (e: any) => {
+    onSubmit?.(e);
+    // TODO: Implement skip API
+  };
+
+  const anyOptionSelected = Array.isArray(selectedOptions)
+    ? selectedOptions.length > 0
+    : selectedOptions !== null;
+  const isVoted = pollQuestion.myResponses.length > 0;
+  const InputComponent =
+    pollQuestion.type === HMSPollQuestionType.singleChoice
+      ? RadioInputRow
+      : pollQuestion.type === HMSPollQuestionType.multipleChoice
+        ? CheckboxInputRow
+        : null;
+
+  return (
+    <View style={[hmsRoomStyles.container, styles.container, containerStyle]}>
+      <Text
+        style={[
+          styles.tinyText,
+          hmsRoomStyles.surfaceLowSemiBoldText,
+          styles.uppercaseContent,
+        ]}
+      >
+        Question {pollQuestion.index} of {totalQuestions}:{' '}
+        {getLabelFromPollQuestionType(pollQuestion.type)}
+      </Text>
+
+      <Text
+        style={[
+          hmsRoomStyles.surfaceHighRegularText,
+          styles.regularText,
+          styles.verticalNormalSpacer,
+        ]}
+      >
+        {pollQuestion.text}
+      </Text>
+
+      {!InputComponent ? null : (
+        <>
+          {canViewPollResponse &&
+          (pollQuestion.myResponses.length > 0 ||
+            pollState === HMSPollState.stopped) ? (
+            <>
+              {pollQuestion.options
+                ?.sort((a, b) => a.index - b.index)
+                .map((option, _, arr) => {
+                  return (
+                    <PollResponseProgressView
+                      key={option.index}
+                      option={option}
+                      totalVotes={arr.reduce((acc, curr) => {
+                        return acc + curr.voteCount;
+                      }, 0)}
+                    />
+                  );
+                })}
+            </>
+          ) : (
+            <>
+              {pollQuestion.options
+                ?.sort((a, b) => a.index - b.index)
+                .map((option) => {
+                  const isSelected =
+                    pollQuestion.myResponses.length > 0
+                      ? pollQuestion.type === HMSPollQuestionType.singleChoice
+                        ? !!pollQuestion.myResponses.find(
+                            (r) => r.option === option.index
+                          )
+                        : !!pollQuestion.myResponses.find((r) =>
+                            r.options ? r.options.includes(option.index) : false
+                          )
+                      : Array.isArray(selectedOptions)
+                        ? selectedOptions.includes(option.index)
+                        : selectedOptions === option.index;
+
+                  return (
+                    <InputComponent
+                      key={option.index}
+                      disabled={isVoted}
+                      selected={isSelected}
+                      radioColor={
+                        isVoted
+                          ? isSelected
+                            ? primaryBrightColor
+                            : onSurfaceLowColor
+                          : undefined
+                      }
+                      onChange={(selected) =>
+                        handleOptionSelection(selected, option)
+                      }
+                      text={option.text}
+                      containerStyle={{ marginBottom: 16 }}
+                    />
+                  );
+                })}
+            </>
+          )}
+        </>
+      )}
+
+      {isVoted ? (
+        <Text
+          style={[
+            styles.regularText,
+            styles.votedLabel,
+            hmsRoomStyles.surfaceLowSemiBoldText,
+          ]}
+        >
+          Voted
+        </Text>
+      ) : pollState === HMSPollState.started ? (
+        <View style={{ alignSelf: 'flex-end', flexDirection: 'row' }}>
+          {pollQuestion.skippable ? (
+            <HMSBaseButton
+              loading={false}
+              onPress={handleSkipPress}
+              title="Skip"
+              style={hmsRoomStyles.skipButton}
+              textStyle={hmsRoomStyles.skipButtonText}
+              useTouchableOpacity={true}
+            />
+          ) : null}
+
+          <HMSPrimaryButton
+            loading={false}
+            disabled={!anyOptionSelected}
+            onPress={handleVotePress}
+            title="Vote"
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    borderRadius: 8,
+  },
+  tinyText: {
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
+  regularText: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  verticalNormalSpacer: {
+    marginVertical: 16,
+  },
+  votedLabel: {
+    paddingVertical: 8,
+    alignSelf: 'flex-end',
+  },
+  uppercaseContent: {
+    textTransform: 'uppercase',
+  },
+});
+
+function getLabelFromPollQuestionType(type: HMSPollQuestionType): string {
+  switch (type) {
+    case HMSPollQuestionType.singleChoice:
+      return 'Single Choice';
+    case HMSPollQuestionType.multipleChoice:
+      return 'Multiple Choice';
+    case HMSPollQuestionType.longAnswer:
+      return 'Long Answer';
+    case HMSPollQuestionType.shortAnswer:
+      return 'Short Answer';
+  }
+}

package/src/components/PollAndQuizVoting.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import {
+  Text,
+  StyleSheet,
+  ScrollView,
+  findNodeHandle,
+  UIManager,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSPollState } from '@100mslive/react-native-hms';
+
+import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
+import type { RootState } from '../redux';
+import { PollAndQuizQuestionResponseCard } from './PollAndQuizQuestionResponseCard';
+import { HMSDangerButton } from './HMSDangerButton';
+
+export interface PollAndQuizVotingProps {
+  dismissModal(): void;
+}
+
+export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
+  const scrollViewRef = React.useRef<ScrollView>(null);
+  const hmsInstance = useHMSInstance();
+  const selectedPoll = useSelector((state: RootState) => {
+    const pollsData = state.polls;
+    if (pollsData.selectedPollId !== null) {
+      return pollsData.polls[pollsData.selectedPollId] || null;
+    }
+    return null;
+  });
+  const canCreateOrEndPoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollWrite;
+  });
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    regularMediumText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    semiBoldMediumText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const endPoll = async () => {
+    if (!selectedPoll || !canCreateOrEndPoll) {
+      return;
+    }
+    const result = await hmsInstance.interactivityCenter.stop(
+      selectedPoll.pollId
+    );
+    console.log('Poll ended', result);
+  };
+
+  const handleVote = (e: any) => {
+    const handle = findNodeHandle(e.nativeEvent.target);
+    const scrollHandle = findNodeHandle(scrollViewRef.current);
+    if (!handle) {
+      return;
+    }
+    if (scrollHandle === null) {
+      return;
+    }
+    UIManager.measureLayout(
+      handle,
+      scrollHandle,
+      () => {
+        console.log('Failed', e);
+      },
+      (_left, top, _width, _height) => {
+        scrollViewRef.current?.scrollTo({
+          y: top + 400,
+          animated: true,
+        });
+      }
+    );
+  };
+
+  return (
+    <ScrollView
+      ref={scrollViewRef}
+      style={styles.contentContainer}
+      contentContainerStyle={{ paddingVertical: 24 }}
+    >
+      <Text style={[styles.normalText, hmsRoomStyles.semiBoldMediumText]}>
+        {selectedPoll?.createdBy?.name} started a Poll
+      </Text>
+
+      {selectedPoll?.questions
+        ?.sort((a, b) => a.index - b.index)
+        .map((question, _, arr) => (
+          <PollAndQuizQuestionResponseCard
+            key={question.index}
+            pollState={selectedPoll.state}
+            pollId={selectedPoll.pollId}
+            totalQuestions={arr.length}
+            pollQuestion={question}
+            containerStyle={{ marginBottom: 16 }}
+            onSubmit={handleVote}
+          />
+        ))}
+
+      {selectedPoll &&
+      selectedPoll.state === HMSPollState.started &&
+      canCreateOrEndPoll ? (
+        <HMSDangerButton
+          disabled={!selectedPoll}
+          title="End Poll"
+          loading={false}
+          onPress={endPoll}
+          style={{ marginTop: 16, marginBottom: 16, alignSelf: 'flex-end' }}
+        />
+      ) : null}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  smallText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  normalText: {
+    fontSize: 16,
+    lineHeight: 24,
+    marginBottom: 16,
+  },
+  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/PollAndQuizzStateLabel.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { HMSPollState } from '@100mslive/react-native-hms';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+export interface PollAndQuizzStateLabelProps {
+  state: HMSPollState;
+}
+
+export const PollAndQuizzStateLabel: React.FC<PollAndQuizzStateLabelProps> = ({
+  state,
+}) => {
+  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,
+    },
+  }));
+
+  return (
+    <View
+      style={[
+        styles.stateLabelWrapper,
+        state === HMSPollState.started
+          ? hmsRoomStyles.liveStateLabelWrapper
+          : hmsRoomStyles.stateLabelWrapper,
+      ]}
+    >
+      <Text style={[styles.stateLabel, hmsRoomStyles.surfaceHighSemiBoldText]}>
+        {state === HMSPollState.started
+          ? 'LIVE'
+          : state === HMSPollState.stopped
+            ? 'ENDED'
+            : 'DRAFT'}
+      </Text>
+    </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: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  stateLabelWrapper: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+  },
+  stateLabel: {
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
+});

package/src/components/PollQDeleteConfirmationSheetView.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
+
+import { hexToRgbA } from '../utils/theme';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import type { RootState } from '../redux';
+import { setPollQDeleteConfirmationVisible } from '../redux/actions';
+import { PollQuestionDeleteConfirmation } from './PollQuestionDeleteConfirmation';
+
+interface PollQDeleteConfirmationSheetViewProps {}
+
+const _PollQDeleteConfirmationSheetView: React.FC<
+  PollQDeleteConfirmationSheetViewProps
+> = ({}) => {
+  const dispatch = useDispatch();
+  const deleteConfirmationVisible = useSelector(
+    (state: RootState) => state.polls.deleteConfirmationVisible
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    backdrop: {
+      backgroundColor:
+        theme.palette.background_dim &&
+        hexToRgbA(theme.palette.background_dim, 0.1),
+    },
+    contentContainer: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+  }));
+
+  const closeBottomSheet = () => {
+    dispatch(setPollQDeleteConfirmationVisible(false));
+  };
+
+  if (!deleteConfirmationVisible) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={closeBottomSheet}
+        style={[styles.backdrop, hmsRoomStyles.backdrop]}
+      />
+
+      <Animated.View
+        entering={SlideInDown}
+        exiting={SlideOutDown}
+        style={[styles.contentContainer, hmsRoomStyles.contentContainer]}
+      >
+        <PollQuestionDeleteConfirmation dismissModal={closeBottomSheet} />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+    justifyContent: 'flex-end',
+    alignSelf: 'center',
+  },
+  backdrop: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  contentContainer: {
+    width: '100%',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+});
+
+export const PollQDeleteConfirmationSheetView = React.memo(
+  _PollQDeleteConfirmationSheetView
+);