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

package/lib/typescript/utils/hooks.d.ts

@@ -1,2 +1,8 @@
+import type { HMSPoll } from '@100mslive/react-native-hms';
 export declare const useRTCStatsListeners: () => void;
+export declare const useFetchLeaderboardResponse: (pollId: HMSPoll['pollId'] | undefined) => import("@100mslive/react-native-hms").PollLeaderboardResponse | null;
+export declare const useLeaderboardSummaryData: (pollId: HMSPoll['pollId'] | undefined) => {
+    label: string;
+    value: any;
+}[][] | null;
 //# sourceMappingURL=hooks.d.ts.map

package/lib/typescript/utils/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,oBAAoB,YAmFhC,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAO3D,eAAO,MAAM,oBAAoB,YAmFhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,WAC9B,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS,yEA2CtC,CAAC;AAEF,eAAO,MAAM,yBAAyB,WAC5B,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS,KACpC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,EAAE,EAAE,GAAG,IAuItC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -51,7 +51,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@100mslive/types-prebuilt": "^0.12.4",
+    "@100mslive/types-prebuilt": "^0.12.7",
     "@react-navigation/native": "^6.0.8",
     "react-redux": "^7.2.4",
     "redux": "^4.1.0"
@@ -79,7 +79,7 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "1.9.12",
+    "@100mslive/react-native-hms": "1.10.0",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-masked-view/masked-view": "^0.2.9",
     "@shopify/flash-list": "^1.4.3",

package/src/HMSRoomSetup.tsx

@@ -402,10 +402,28 @@ export const HMSRoomSetup = () => {
 
   useEffect(() => {
     const subscription = hmsInstance.interactivityCenter.addPollUpdateListener(
-      (poll, pollUpdateType) => {
+      async (poll, pollUpdateType) => {
         const reduxState = reduxStore.getState();
         const pollsData = reduxState.polls.polls;
 
+        // Send HLS Timed Metadata for poll if it is started by local peer
+        if (
+          poll.createdBy &&
+          reduxState.hmsStates.localPeer &&
+          poll.createdBy.peerID === reduxState.hmsStates.localPeer.peerID
+        ) {
+          hmsInstance
+            .sendHLSTimedMetadata([
+              { duration: 20, payload: `poll:${poll.pollId}` },
+            ])
+            .then((result) => {
+              console.log('sendHLSTimedMetadata result: ', result);
+            })
+            .catch((error: any) => {
+              console.log('sendHLSTimedMetadata error: ', error);
+            });
+        }
+
         batch(() => {
           // Update poll object in store
           dispatch(addPoll(poll));

package/src/Icons/Clock/index.tsx

@@ -2,16 +2,29 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
-interface ClockIconProps extends Omit<ImageProps, 'source'> {}
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface ClockIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'vector' | 'normal';
+}
 
 export const ClockIcon: React.FC<ClockIconProps> = ({
   style,
+  type = 'vector',
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
-      source={require('./assets/clock.png')}
-      style={[styles.icon, style]}
+      source={
+        type === 'vector'
+          ? require('./assets/clock-vector.png')
+          : require('./assets/clock.png')
+      }
+      style={[styles.icon, style, type === 'vector' ? undefined : iconStyles]}
       {...restProps}
     />
   );

package/src/components/CreatePoll.tsx

@@ -9,7 +9,11 @@ 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';
@@ -67,7 +71,7 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
 
   const addQuestions = () => {
     if (pollName.trim().length > 0) {
-      dispatch(setPollStage(CreatePollStages.POLL_QUESTION_CONFIG));
+      dispatch(pushToNavigationStack(CreatePollStages.POLL_QUESTION_CONFIG));
     }
   };
 
@@ -230,6 +234,7 @@ const styles = StyleSheet.create({
   },
   createPollBtn: {
     marginTop: 24,
+    marginBottom: 16,
   },
   contentContainer: {
     marginHorizontal: 24,

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));

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,
+  },
+});

package/src/components/PollAndQuizSheetScreen.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
+
+import { useIsLandscapeOrientation } from '../utils/dimension';
+
+export interface PollAndQuizSheetScreenProps {
+  children: React.ReactElement | null;
+  zIndex: number;
+  disableAnimation?: boolean;
+}
+
+export const PollAndQuizSheetScreen: React.FC<PollAndQuizSheetScreenProps> = ({
+  children,
+  zIndex,
+  disableAnimation,
+}) => {
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const { width } = useSafeAreaFrame();
+  const xPosition = useSharedValue(disableAnimation ? 0 : 1);
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(xPosition.value, [0, 1], [1, 0]),
+      transform: [
+        {
+          translateX: interpolate(
+            xPosition.value,
+            [0, 1],
+            [0, isLandscapeOrientation ? width * 0.6 : width],
+            'clamp'
+          ),
+        },
+      ],
+    }),
+    [isLandscapeOrientation]
+  );
+
+  React.useEffect(() => {
+    if (disableAnimation) {
+      return;
+    }
+    xPosition.value = withTiming(0, { duration: 150 });
+    return () => {
+      cancelAnimationFrame(xPosition.value);
+    };
+  }, []);
+
+  const unmountScreenWithAnimation = React.useCallback(
+    (cb: () => void) => {
+      if (disableAnimation) {
+        cb();
+        return;
+      }
+      xPosition.value = withTiming(1, { duration: 150 }, () => {
+        runOnJS(cb)();
+      });
+    },
+    [disableAnimation]
+  );
+
+  return (
+    <Animated.View style={[styles.absolute, { zIndex }, animatedStyle]}>
+      {children
+        ? React.cloneElement(children, { unmountScreenWithAnimation })
+        : null}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  absolute: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    overflow: 'hidden',
+  },
+});