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

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

@@ -178,7 +178,7 @@ export const HMSManageAudioOutput: React.FC = () => {
               <AudioOutputDevice
                 id={'ios-audio-device'}
                 hideDivider={true}
-                selected={!roomLocallyMuted}
+                selected={false}
                 text={'Auto'}
                 icon={<SpeakerIcon muted={false} />}
                 onPress={handleSelectAudioDevice}

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,181 @@
+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}>
+        <View
+          style={[
+            styles.position,
+            entry.position === 1
+              ? styles.firstPosition
+              : entry.position === 2
+                ? styles.secondPosition
+                : entry.position === 3
+                  ? styles.thirdPosition
+                  : null,
+          ]}
+        >
+          <Text
+            style={[
+              styles.smallerText,
+              hmsRoomStyles.semiBoldWhiteText,
+              {
+                textAlign: 'center',
+                textAlignVertical: 'center',
+              },
+            ]}
+          >
+            {entry.position}
+          </Text>
+        </View>
+
+        <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,
+    alignItems: 'center',
+    justifyContent: '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/PeerVideoTile/PeerVideoTileView.tsx

@@ -23,7 +23,7 @@ import type { PeerTrackNode } from '../../utils/types';
 import { isTileOnSpotlight } from '../../utils/functions';
 import {
   selectAllowedTracksToPublish,
-  selectCanPublishTrackForRole,
+  // selectCanPublishTrackForRole,
 } from '../../hooks-sdk-selectors';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { HMSFullScreenButton } from './HMSFullScreenButton';
@@ -89,14 +89,14 @@ export const _PeerVideoTileView = React.forwardRef<
 
     const { peer, track, isDegraded } = peerTrackNode;
 
-    const peerCanPublishAudio = selectCanPublishTrackForRole(
-      peer.role,
-      'audio'
-    );
-    const peerCanPublishVideo = selectCanPublishTrackForRole(
-      peer.role,
-      'video'
-    );
+    // const peerCanPublishAudio = selectCanPublishTrackForRole(
+    //   peer.role,
+    //   'audio'
+    // );
+    // const peerCanPublishVideo = selectCanPublishTrackForRole(
+    //   peer.role,
+    //   'video'
+    // );
 
     const allowedToPublish = useSelector((state: RootState) => {
       const allowed = selectAllowedTracksToPublish(state);
@@ -134,7 +134,7 @@ export const _PeerVideoTileView = React.forwardRef<
       !!trackSource && trackSource === HMSTrackSource.SCREEN;
 
     const showingVideoTrack =
-      peerCanPublishVideo &&
+      // peerCanPublishVideo && // Refer #RN-254@Jira, when user skips preview, it receives stub role object which has `publishPermissions` as `undefined`
       track &&
       track.trackId &&
       track.type === HMSTrackType.VIDEO &&
@@ -187,8 +187,8 @@ export const _PeerVideoTileView = React.forwardRef<
           isPipModeActive || isLandscapeOrientation ? null : (
             <HMSFullScreenButton peerTrackNode={peerTrackNode} />
           )
-        ) : peerCanPublishAudio ? (
-          <PeerAudioIndicator isMuted={peer.audioTrack?.isMute()} peer={peer} />
+        ) : peer.audioTrack && peer.audioTrack.id ? (
+          <PeerAudioIndicator isMuted={peer.audioTrack.isMute()} peer={peer} />
         ) : null}
 
         {/* Handling showing Peer name */}

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

package/src/components/PollAndQuizVoting.tsx

@@ -6,22 +6,42 @@ import {
   findNodeHandle,
   UIManager,
   View,
+  Keyboard,
+  TouchableOpacity,
 } from 'react-native';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { HMSPollState, HMSPollType } from '@100mslive/react-native-hms';
 
 import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
 import type { RootState } from '../redux';
 import { HMSDangerButton } from './HMSDangerButton';
 import { PollAndQuizQuestionResponseCards } from './PollAndQuizQuestionResponseCards';
+import {
+  popFromNavigationStack,
+  pushToNavigationStack,
+} from '../redux/actions';
+import { BottomSheet } from './BottomSheet';
+import { ChevronIcon, CloseIcon } from '../Icons';
+import { PollAndQuizzStateLabel } from './PollAndQuizzStateLabel';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { CreatePollStages } from '../redux/actionTypes';
+import { VoterParticipationSummary } from './VoterParticipationSummary';
 
 export interface PollAndQuizVotingProps {
+  currentIdx: number;
   dismissModal(): void;
+  unmountScreenWithAnimation?(cb: Function): void;
 }
 
-export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
+export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = ({
+  currentIdx,
+  dismissModal,
+  unmountScreenWithAnimation,
+}) => {
   const scrollViewRef = React.useRef<ScrollView>(null);
   const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+
   const selectedPoll = useSelector((state: RootState) => {
     const pollsData = state.polls;
     if (pollsData.selectedPollId !== null) {
@@ -33,16 +53,34 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
     const permissions = state.hmsStates.localPeer?.role?.permissions;
     return permissions?.pollWrite;
   });
+  const headerTitle = useSelector((state: RootState) => {
+    const pollsData = state.polls;
+    if (pollsData.selectedPollId !== null) {
+      return pollsData.polls[pollsData.selectedPollId]?.title || null;
+    }
+    return null;
+  });
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     regularMediumText: {
       color: theme.palette.on_surface_medium,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    semiBoldHighText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
     semiBoldMediumText: {
       color: theme.palette.on_surface_medium,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+    },
   }));
 
   const endPoll = async () => {
@@ -79,17 +117,90 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
     );
   };
 
+  const viewLeaderboard = () => {
+    dispatch(pushToNavigationStack(CreatePollStages.QUIZ_LEADERBOARD));
+  };
+
+  const handleBackPress = () => {
+    Keyboard.dismiss();
+    if (typeof unmountScreenWithAnimation === 'function') {
+      unmountScreenWithAnimation(() => dispatch(popFromNavigationStack()));
+    } else {
+      dispatch(popFromNavigationStack());
+    }
+  };
+
+  const handleClosePress = () => {
+    Keyboard.dismiss();
+    dismissModal();
+  };
+
   return (
-    <View style={{ flex: 1 }}>
+    <View style={[styles.fullView, hmsRoomStyles.container]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          {currentIdx > 0 ? (
+            <TouchableOpacity
+              onPress={handleBackPress}
+              hitSlop={styles.closeIconHitSlop}
+              style={styles.backIcon}
+            >
+              <ChevronIcon direction="left" />
+            </TouchableOpacity>
+          ) : null}
+
+          <Text
+            numberOfLines={2}
+            style={[
+              styles.headerText,
+              { flexShrink: 1 },
+              hmsRoomStyles.headerText,
+            ]}
+          >
+            {headerTitle}
+          </Text>
+
+          {selectedPoll?.state ? (
+            <PollAndQuizzStateLabel state={selectedPoll?.state} />
+          ) : null}
+        </View>
+
+        <TouchableOpacity
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+          style={{ marginLeft: 16 }}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      {/* Divider */}
+      <BottomSheet.Divider style={styles.halfDivider} />
+
+      {/* Content */}
       <ScrollView
         ref={scrollViewRef}
         style={styles.contentContainer}
         contentContainerStyle={{ flexGrow: 1, paddingVertical: 24 }}
       >
-        <Text style={[styles.normalText, hmsRoomStyles.semiBoldMediumText]}>
-          {selectedPoll?.createdBy?.name} started a{' '}
-          {selectedPoll?.type === HMSPollType.quiz ? 'quiz' : 'poll'}
-        </Text>
+        {selectedPoll &&
+        selectedPoll.type === HMSPollType.quiz &&
+        selectedPoll.state === HMSPollState.stopped &&
+        !canCreateOrEndPoll ? (
+          <React.Fragment>
+            <VoterParticipationSummary pollId={selectedPoll.pollId} />
+
+            <Text style={[styles.normalText, hmsRoomStyles.semiBoldHighText]}>
+              Questions
+            </Text>
+          </React.Fragment>
+        ) : (
+          <Text style={[styles.normalText, hmsRoomStyles.semiBoldMediumText]}>
+            {selectedPoll?.createdBy?.name} started a{' '}
+            {selectedPoll?.type === HMSPollType.quiz ? 'quiz' : 'poll'}
+          </Text>
+        )}
 
         {selectedPoll ? (
           <PollAndQuizQuestionResponseCards
@@ -117,6 +228,22 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
           }}
         />
       ) : null}
+
+      {selectedPoll &&
+      selectedPoll.state === HMSPollState.stopped &&
+      selectedPoll.type === HMSPollType.quiz ? (
+        <HMSPrimaryButton
+          title={'View Leaderboard'}
+          loading={false}
+          onPress={viewLeaderboard}
+          style={{
+            marginTop: 16,
+            marginBottom: 16,
+            marginRight: 24,
+            alignSelf: 'flex-end',
+          }}
+        />
+      ) : null}
     </View>
   );
 };
@@ -158,4 +285,51 @@ const styles = StyleSheet.create({
     marginRight: 8,
     padding: 8,
   },
+
+  // -----------------
+
+  // Utilities
+  fullView: {
+    flex: 1,
+  },
+  // Header
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 24,
+    marginHorizontal: 24,
+  },
+  headerControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 1,
+  },
+  headerText: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    marginRight: 12,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  backIcon: {
+    marginRight: 8,
+  },
+  // Divider
+  halfDivider: {
+    marginHorizontal: 24,
+    marginVertical: 0,
+    marginTop: 24,
+    width: undefined,
+  },
+  divider: {
+    marginHorizontal: 24,
+    marginVertical: 24,
+    width: undefined,
+  },
 });