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

package/src/components/CreatePoll.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { View, Text, StyleSheet, Switch } from 'react-native';
+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';
@@ -8,9 +9,14 @@ 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 {
+  pushToNavigationStack,
+  setPollConfig,
+  setPollName,
+} from '../redux/actions';
 import { CreatePollStages } from '../redux/actionTypes';
 import type { PollConfig } from '../redux/actionTypes';
+import { PollIcon, QuizIcon } from '../Icons';
 
 export interface CreatePollProps {}
 
@@ -31,10 +37,17 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
     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`,
@@ -52,16 +65,81 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
     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));
+      dispatch(pushToNavigationStack(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]}>
-        Poll Name
+        {pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'} Name
       </Text>
 
       <HMSTextInput
@@ -69,7 +147,7 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
         value={pollName}
         autoFocus={false}
         onChangeText={handlePollNameChange}
-        placeholder={'My Poll'}
+        placeholder={`My ${pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
       />
 
       <BottomSheet.Divider style={{ marginVertical: 24 }} />
@@ -79,85 +157,85 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
           id: 'voteCountHidden' as const,
           label: 'Hide vote count',
           enabled: pollConfig.voteCountHidden,
+          visible: pollConfig.type === HMSPollType.poll,
         },
-      ].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>
-        );
-      })}
+        // {
+        //   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 Poll"
+        title={`Create ${pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
         onPress={addQuestions}
         loading={false}
-        style={{ marginTop: 24 }}
+        style={styles.createPollBtn}
       />
     </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({
+  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,
+    marginBottom: 16,
+  },
   contentContainer: {
     marginHorizontal: 24,
   },

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/HLSView.tsx

@@ -1,11 +1,18 @@
 import React, { useRef } from 'react';
 import type { ComponentRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { View, Text, StyleSheet, Platform } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  useWindowDimensions,
+} from 'react-native';
 import {
   HMSHLSPlayer,
   HMSHLSPlayerPlaybackState,
   useHMSHLSPlayerPlaybackState,
+  useHMSHLSPlayerResolution,
 } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
@@ -18,6 +25,7 @@ import { HMSHLSNotStarted } from './HMSHLSNotStarted';
 import { CrossCircleIcon } from '../Icons';
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { useIsHLSStreamingOn } from '../hooks-sdk';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 
 export const _HLSView: React.FC = () => {
   const dispatch = useDispatch();
@@ -26,6 +34,7 @@ export const _HLSView: React.FC = () => {
     (state: RootState) =>
       !!state.hmsStates.room?.hlsStreamingState.variants?.[0]?.hlsStreamUrl
   );
+  const { width, height } = useWindowDimensions();
   const hmsHlsPlayerRef = useRef<ComponentRef<typeof HMSHLSPlayer>>(null);
   const showHLSStats = useSelector(
     (state: RootState) => state.app.joinConfig.showHLSStats
@@ -99,6 +108,8 @@ export const _HLSView: React.FC = () => {
   );
 
   const hlsPlayerPlaybackState = useHMSHLSPlayerPlaybackState();
+  const resolution = useHMSHLSPlayerResolution();
+  const isLandscapeOrientation = useIsLandscapeOrientation();
 
   const isPlaybackFailed =
     hlsPlayerPlaybackState === HMSHLSPlayerPlaybackState.FAILED;
@@ -141,6 +152,21 @@ export const _HLSView: React.FC = () => {
               ref={hmsHlsPlayerRef}
               enableStats={showHLSStats}
               enableControls={enableHLSPlayerControls}
+              style={
+                isLandscapeOrientation
+                  ? {
+                      height,
+                      width: resolution
+                        ? height * (resolution.width / resolution.height)
+                        : width,
+                    }
+                  : {
+                      width,
+                      height: resolution
+                        ? width / (resolution.width / resolution.height)
+                        : height,
+                    }
+              }
             />
 
             <HLSPlayerEmoticons />

package/src/components/HMSPollsQuizzesNotification.tsx

@@ -14,8 +14,8 @@ import {
 import { HMSNotification } from './HMSNotification';
 import { ModalTypes } from '../utils/types';
 import {
+  pushToNavigationStack,
   removeNotification,
-  setPollStage,
   setSelectedPollId,
 } from '../redux/actions';
 import { CreatePollStages } from '../redux/actionTypes';
@@ -56,7 +56,7 @@ export const HMSPollsQuizzesNotification: React.FC<
     //   return;
     // }
     batch(() => {
-      dispatch(setPollStage(CreatePollStages.POLL_VOTING));
+      dispatch(pushToNavigationStack(CreatePollStages.POLL_VOTING));
       dispatch(setSelectedPollId(poll.pollId));
       handleModalVisibleType(ModalTypes.POLLS_AND_QUIZZES);
       dispatch(removeNotification(id));
@@ -85,7 +85,7 @@ export const HMSPollsQuizzesNotification: React.FC<
             onPress={handleVotePress}
           >
             <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
-              Vote
+              {poll.type === HMSPollType.quiz ? 'Answer' : 'Vote'}
             </Text>
           </TouchableHighlight>
         </GestureDetector>

package/src/components/LeaderboardEntry.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
+import type { HMSPollLeaderboardEntry } from '@100mslive/react-native-hms';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { CheckIcon, ClockIcon } from '../Icons';
+
+export interface LeaderboardEntryProps {
+  entry: HMSPollLeaderboardEntry;
+  totalPoints: number;
+  totalQuestions: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const LeaderboardEntry: React.FC<LeaderboardEntryProps> = ({
+  entry,
+  style,
+  totalPoints,
+  totalQuestions,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    regularHighText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    regularMediumText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    semiBoldHighText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    semiBoldWhiteText: {
+      color: '#ffffff',
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    icon: {
+      tintColor: theme.palette.on_surface_medium,
+    },
+  }));
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.namePositionWrapper}>
+        <Text
+          style={[
+            styles.smallerText,
+            hmsRoomStyles.semiBoldWhiteText,
+            styles.position,
+            entry.position === 1
+              ? styles.firstPosition
+              : entry.position === 2
+                ? styles.secondPosition
+                : entry.position === 3
+                  ? styles.thirdPosition
+                  : null,
+          ]}
+        >
+          {entry.position}
+        </Text>
+
+        <View style={styles.flexShrink}>
+          <Text
+            numberOfLines={2}
+            style={[styles.smallText, hmsRoomStyles.semiBoldHighText]}
+          >
+            {entry.peer?.userName}
+          </Text>
+          <Text style={[styles.smallerText, hmsRoomStyles.regularMediumText]}>
+            {entry.score}/{totalPoints} points
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.scoreDurationWrapper}>
+        {entry.position === 1 &&
+        entry.correctResponses &&
+        entry.correctResponses > 0 ? (
+          <Text
+            style={[
+              styles.normalText,
+              { marginLeft: 12 },
+              hmsRoomStyles.semiBoldHighText,
+            ]}
+          >
+            🏆
+          </Text>
+        ) : null}
+
+        <View style={styles.iconWrapper}>
+          <CheckIcon
+            type="in-circle"
+            style={[styles.icon, hmsRoomStyles.icon]}
+          />
+          <Text style={[styles.smallerText, hmsRoomStyles.regularHighText]}>
+            {entry.correctResponses}/{totalQuestions}
+          </Text>
+        </View>
+
+        {entry.duration ? (
+          <View style={styles.iconWrapper}>
+            <ClockIcon
+              type="normal"
+              style={[styles.icon, hmsRoomStyles.icon]}
+            />
+            <Text style={[styles.smallerText, hmsRoomStyles.regularHighText]}>
+              {(entry.duration / 1000).toFixed(2)}s
+            </Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  namePositionWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 1,
+  },
+  scoreDurationWrapper: { flexDirection: 'row', alignItems: 'center' },
+  flexShrink: {
+    flexShrink: 1,
+  },
+  smallerText: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  smallText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  normalText: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  position: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    marginRight: 12,
+  },
+  firstPosition: {
+    backgroundColor: '#D69516', // '#FFD700'
+  },
+  secondPosition: {
+    backgroundColor: '#3E3E3E', // '#C0C0C0'
+  },
+  thirdPosition: {
+    backgroundColor: '#583B0F', // '#CD7F32'
+  },
+  iconWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 12,
+  },
+  icon: {
+    width: 16,
+    height: 16,
+    marginRight: 4,
+  },
+});