@100mslive/react-native-room-kit 1.1.6 → 1.1.8

package/src/components/GridView.tsx

@@ -16,6 +16,7 @@ import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
 import { useIsLandscapeOrientation } from '../utils/dimension';
+import { WhiteboardContainer } from './WhiteboardContainer';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -52,6 +53,9 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     const screenshareTilesAvailable = useSelector(
       (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
     );
+    const whiteboardActive = useSelector(
+      (state: RootState) => !!state.hmsStates.whiteboard
+    );
     const regularTilesAvailable = pairedPeers.length > 0;
 
     const isLandscapeOrientation = useIsLandscapeOrientation();
@@ -147,9 +151,12 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
             setHmsViewRefs={setHmsViewRefs}
             onPeerTileMorePress={onPeerTileMorePress}
           />
+        ) : whiteboardActive ? (
+          <WhiteboardContainer />
         ) : null}
 
-        {screenshareTilesAvailable && isLandscapeOrientation ? null : (
+        {(whiteboardActive || screenshareTilesAvailable) &&
+        isLandscapeOrientation ? null : (
           <RegularTiles
             ref={regularTilesFlatlistRef}
             pairedPeers={pairedPeers}
@@ -209,8 +216,10 @@ const RegularTiles = React.forwardRef<
   const dispatch = useDispatch();
   const { height: safeHeight } = useSafeAreaFrame();
 
-  const screenshareTilesAvailable = useSelector(
-    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+  const screenshareTilesOrWhiteboardActive = useSelector(
+    (state: RootState) =>
+      state.app.screensharePeerTrackNodes.length > 0 ||
+      !!state.hmsStates.whiteboard
   );
   const activeIndex = useSelector(
     (state: RootState) => state.app.gridViewActivePage
@@ -248,7 +257,7 @@ const RegularTiles = React.forwardRef<
   );
 
   return (
-    <View style={{ flex: screenshareTilesAvailable ? undefined : 1 }}>
+    <View style={{ flex: screenshareTilesOrWhiteboardActive ? undefined : 1 }}>
       <FlatList
         ref={flatlistRef}
         horizontal={true}
@@ -275,7 +284,7 @@ const RegularTiles = React.forwardRef<
           list={pairedPeers}
           activeIndex={activeIndex}
           style={
-            screenshareTilesAvailable || isLandscapeOrientation
+            screenshareTilesOrWhiteboardActive || isLandscapeOrientation
               ? { marginVertical: isLandscapeOrientation ? 4 : 8 }
               : null
           }

package/src/components/HLSChatMessages.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { FlatList, Platform, StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import { FlashList } from '@shopify/flash-list';
 import type { HMSMessage } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
@@ -32,11 +31,10 @@ export const HLSChatMessages = () => {
         <PinnedMessages />
 
         {messages.length > 0 ? (
-          <FlashList
-            data={messages}
+          <FlatList
             inverted={true}
-            estimatedItemSize={62}
-            contentContainerStyle={{ paddingBottom: 12 }}
+            data={messages}
+            contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
             showsVerticalScrollIndicator={Platform.OS !== 'android'}
             // contentContainerStyle={styles.listContentContainer} // Bug: Android inverted flashlist will apply padding on left when `paddingRight: 12` is applied
             keyboardShouldPersistTaps="always"

package/src/components/HLSChatView.tsx

@@ -10,13 +10,16 @@ import { HLSDescriptionPane } from './HLSDescriptionPane';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import type { RootState } from '../redux';
 import { HLSNotifications } from './HLSNotifications';
+import { PipModes } from '../utils/types';
 
 export const HLSChatView = () => {
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const { chatWrapperConstraints } = useHLSViewsConstraints();
-  const hlsFullScreen = useSelector(
-    (state: RootState) => state.app.hlsFullScreen
-  );
+  const fullScreenMode = useSelector((state: RootState) => {
+    const hlsFullScreen = state.app.hlsFullScreen;
+    const isPipModeActive = state.app.pipModeStatus === PipModes.ACTIVE;
+    return hlsFullScreen || isPipModeActive;
+  });
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     wrapper: {
@@ -24,7 +27,7 @@ export const HLSChatView = () => {
     },
   }));
 
-  if (hlsFullScreen) {
+  if (fullScreenMode) {
     return null;
   }
 

package/src/components/HLSCloseMeetingControl.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { CloseIcon } from '../Icons';
+import { ModalTypes } from '../utils/types';
+import { useModalType } from '../hooks-util';
+
+interface HLSPlayerControlsProps {
+  onPress?: () => void;
+}
+
+export const _HLSCloseMeetingControl: React.FC<HLSPlayerControlsProps> = ({
+  onPress,
+}) => {
+  const { handleModalVisibleType } = useModalType();
+
+  const handleCloseBtnPress = () => {
+    onPress?.();
+    handleModalVisibleType(ModalTypes.LEAVE_ROOM);
+  };
+
+  return (
+    <GestureDetector gesture={Gesture.Tap()}>
+      <TouchableOpacity onPress={handleCloseBtnPress} style={styles.icon}>
+        <CloseIcon size="medium" />
+      </TouchableOpacity>
+    </GestureDetector>
+  );
+};
+
+export const HLSCloseMeetingControl = React.memo(_HLSCloseMeetingControl);
+
+const styles = StyleSheet.create({
+  icon: {
+    padding: 4,
+    alignSelf: 'flex-start',
+  },
+});

package/src/components/HLSClosedCaptionControl.tsx

@@ -0,0 +1,140 @@
+import React, { useRef, useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useSelector } from 'react-redux';
+import {
+  useHMSHLSPlayerPlaybackState,
+  HMSHLSPlayerPlaybackState,
+} from '@100mslive/react-native-hms';
+import type { HMSHLSPlayer } from '@100mslive/react-native-hms';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { CCIcon } from '../Icons';
+import type { RootState } from '../redux';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+
+interface HLSClosedCaptionControlProps {
+  playerRef: React.RefObject<React.ElementRef<typeof HMSHLSPlayer>>;
+  onPress?: () => void;
+}
+
+export const _HLSClosedCaptionControl: React.FC<
+  HLSClosedCaptionControlProps
+> = ({ playerRef, onPress }) => {
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isStreamUrlPresent = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.room?.hlsStreamingState.variants?.[0]?.hlsStreamUrl
+  );
+
+  let startedPlayingFirstTimeRef = useRef(false);
+  let prevPlaybackStateRef = useRef(HMSHLSPlayerPlaybackState.UNKNOWN);
+  const playbackState = useHMSHLSPlayerPlaybackState();
+
+  if (
+    prevPlaybackStateRef.current === HMSHLSPlayerPlaybackState.UNKNOWN &&
+    playbackState === HMSHLSPlayerPlaybackState.PLAYING
+  ) {
+    prevPlaybackStateRef.current = playbackState;
+    startedPlayingFirstTimeRef.current = true;
+  }
+
+  const [isCCSupported, setIsCCSupported] = useState(false);
+  const [isCCEnabled, setIsCCEnabled] = useState(true);
+
+  const handleCCBtnPress = () => {
+    if (!isCCSupported || !playerRef.current) {
+      return;
+    }
+    onPress?.();
+    if (isCCEnabled) {
+      playerRef.current.disableClosedCaption();
+      setIsCCEnabled(false);
+    } else {
+      playerRef.current.enableClosedCaption();
+      setIsCCEnabled(true);
+    }
+  };
+
+  React.useEffect(() => {
+    if (
+      isHLSStreamingOn &&
+      isStreamUrlPresent &&
+      startedPlayingFirstTimeRef.current &&
+      playerRef.current
+    ) {
+      let mounted = true;
+
+      playerRef.current
+        .isClosedCaptionSupported()
+        .then((supported) => {
+          if (mounted) {
+            setIsCCSupported(supported);
+          }
+        })
+        .catch(() => {});
+      playerRef.current
+        .isClosedCaptionEnabled()
+        .then((enabled) => {
+          if (mounted) {
+            setIsCCEnabled(enabled);
+          }
+        })
+        .catch(() => {});
+
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [
+    isHLSStreamingOn,
+    isStreamUrlPresent,
+    startedPlayingFirstTimeRef.current,
+  ]);
+
+  if (!isCCSupported) {
+    return null;
+  }
+
+  return (
+    <GestureDetector gesture={Gesture.Tap()}>
+      <TouchableOpacity
+        onPress={handleCCBtnPress}
+        style={[styles.icon, styles.gap]}
+      >
+        <CCIcon size="medium" enabled={isCCEnabled} />
+      </TouchableOpacity>
+    </GestureDetector>
+  );
+};
+
+export const HLSClosedCaptionControl = React.memo(_HLSClosedCaptionControl);
+
+const styles = StyleSheet.create({
+  detectorContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 5,
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  controlsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginHorizontal: 8,
+  },
+  normalRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    padding: 4,
+    alignSelf: 'flex-start',
+  },
+  gap: {
+    marginLeft: 16,
+  },
+});

package/src/components/HLSDistanceFromLive.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Platform, StyleSheet, Text } from 'react-native';
+import {
+  HMSHLSPlaylistType,
+  useHMSHLSPlayerStat,
+  useIsHLSStreamLive,
+} from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+
+import { useHMSRoomStyle } from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+import type { RootState } from '../redux';
+
+interface HLSDistanceFromLiveProps {}
+
+export const _HLSDistanceFromLive: React.FC<HLSDistanceFromLiveProps> = () => {
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isDVRStream = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.hlsStreamingState.variants?.[0]?.playlistType ===
+      HMSHLSPlaylistType.DVR
+  );
+  const isStreamLive = useIsHLSStreamLive();
+
+  if (!isHLSStreamingOn || !isDVRStream || isStreamLive) return null;
+
+  return <HLSDistanceFromLiveText />;
+};
+
+export const HLSDistanceFromLiveText = React.memo(() => {
+  const distanceFromLiveEdge = useHMSHLSPlayerStat('distanceFromLive');
+
+  const textStyle = useHMSRoomStyle((_, typography) => ({
+    fontFamily: `${typography.font_family}-Regular`,
+    color: '#ffffff',
+  }));
+
+  const hhmmss = msToHMS(
+    distanceFromLiveEdge - Platform.select({ default: 10000, ios: 1000 })
+  );
+
+  return <Text style={[styles.text, textStyle]}>-{hhmmss}</Text>;
+});
+
+export const HLSDistanceFromLive = React.memo(_HLSDistanceFromLive);
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    marginLeft: 8,
+  },
+});
+
+function msToHMS(ms: number) {
+  const seconds = Math.floor((ms / 1000) % 60);
+  const minutes = Math.floor((ms / 1000 / 60) % 60);
+  const hours = Math.floor((ms / 1000 / 3600) % 24);
+
+  const humanized = [
+    minutes > 0 ? minutes.toString().padStart(2, '0') : '0',
+    seconds.toString().padStart(2, '0'),
+  ];
+
+  if (hours > 0) humanized.unshift(hours.toString().padStart(2, '0'));
+
+  return humanized.join(':');
+}

package/src/components/HLSFullScreenControl.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { MaximizeIcon, MinimizeIcon } from '../Icons';
+import type { RootState } from '../redux';
+import { setHlsFullScreen } from '../redux/actions';
+
+interface HLSFullScreenControlProps {
+  onPress?: () => void;
+}
+
+export const _HLSFullScreenControl: React.FC<HLSFullScreenControlProps> = ({
+  onPress,
+}) => {
+  const dispatch = useDispatch();
+  const hlsFullScreen = useSelector(
+    (state: RootState) => state.app.hlsFullScreen
+  );
+  const toggleFullScreen = () => {
+    onPress?.();
+    dispatch(setHlsFullScreen(!hlsFullScreen));
+  };
+
+  return (
+    <GestureDetector gesture={Gesture.Tap()}>
+      <TouchableOpacity onPress={toggleFullScreen} style={styles.icon}>
+        {hlsFullScreen ? (
+          <MinimizeIcon size="medium" />
+        ) : (
+          <MaximizeIcon size="medium" />
+        )}
+      </TouchableOpacity>
+    </GestureDetector>
+  );
+};
+
+export const HLSFullScreenControl = React.memo(_HLSFullScreenControl);
+
+const styles = StyleSheet.create({
+  icon: {
+    padding: 4,
+    alignSelf: 'flex-start',
+  },
+});

package/src/components/HLSGoLiveControl.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { useSelector } from 'react-redux';
+import {
+  HMSHLSPlaylistType,
+  useIsHLSStreamLive,
+} from '@100mslive/react-native-hms';
+import type { HMSHLSPlayer } from '@100mslive/react-native-hms';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+import type { RootState } from '../redux';
+
+interface HLSGoLiveControlProps {
+  playerRef: React.RefObject<React.ElementRef<typeof HMSHLSPlayer>>;
+  onPress?: () => void;
+}
+
+export const _HLSGoLiveControl: React.FC<HLSGoLiveControlProps> = ({
+  playerRef,
+  onPress,
+}) => {
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isDVRStream = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.hlsStreamingState.variants?.[0]?.playlistType ===
+      HMSHLSPlaylistType.DVR
+  );
+  const isStreamLive = useIsHLSStreamLive();
+
+  const handleGoLivePress = () => {
+    onPress?.();
+    playerRef.current?.seekToLivePosition();
+  };
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      semiBoldSurfaceHigh: {
+        fontFamily: `${typography.font_family}-SemiBold`,
+        color: theme.palette.on_surface_high,
+      },
+      semiBoldSurfaceMedium: {
+        fontFamily: `${typography.font_family}-SemiBold`,
+        color: theme.palette.on_surface_medium,
+      },
+      liveIndicatorDot: {
+        backgroundColor: theme.palette.alert_error_default,
+      },
+      notLiveIndicatorDot: {
+        backgroundColor: theme.palette.on_surface_low,
+      },
+    }),
+    []
+  );
+
+  if (!isHLSStreamingOn || !isDVRStream) return null;
+
+  return (
+    <GestureDetector gesture={Gesture.Tap()}>
+      <TouchableOpacity onPress={handleGoLivePress} style={styles.liveButton}>
+        <View
+          style={[
+            styles.liveIndicatorDot,
+            isStreamLive
+              ? hmsRoomStyles.liveIndicatorDot
+              : hmsRoomStyles.notLiveIndicatorDot,
+          ]}
+        />
+        <Text
+          style={[
+            styles.liveText,
+            isStreamLive
+              ? hmsRoomStyles.semiBoldSurfaceHigh
+              : hmsRoomStyles.semiBoldSurfaceMedium,
+          ]}
+        >
+          {isStreamLive ? 'LIVE' : 'GO LIVE'}
+        </Text>
+      </TouchableOpacity>
+    </GestureDetector>
+  );
+};
+
+export const HLSGoLiveControl = React.memo(_HLSGoLiveControl);
+
+const styles = StyleSheet.create({
+  liveButton: {
+    padding: 4,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  liveIndicatorDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 8,
+  },
+  liveText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+  },
+});

package/src/components/HLSPlayPauseControl.tsx

@@ -0,0 +1,69 @@
+import { HMSHLSPlaylistType } from '@100mslive/react-native-hms';
+import type { HMSHLSPlayer } from '@100mslive/react-native-hms';
+import * as React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+import type { RootState } from '../redux';
+import { PauseIcon, PlayIcon } from '../Icons';
+import { useHLSStreamResumePause } from '../hooks-util';
+
+export interface HLSPlayPauseControlProps {
+  playerRef: React.RefObject<React.ElementRef<typeof HMSHLSPlayer>>;
+  onPress?: () => void;
+}
+
+const _HLSPlayPauseControl: React.FC<HLSPlayPauseControlProps> = ({
+  playerRef,
+  onPress,
+}) => {
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isDVRStream = useSelector((state: RootState) => {
+    return (
+      state.hmsStates.room?.hlsStreamingState.variants?.[0]?.playlistType ===
+      HMSHLSPlaylistType.DVR
+    );
+  });
+
+  const { isPaused, pauseStream, resumeStream } =
+    useHLSStreamResumePause(playerRef);
+
+  const togglePlayPause = () => {
+    onPress?.();
+    if (isPaused) {
+      resumeStream();
+    } else {
+      pauseStream();
+    }
+  };
+
+  if (!isHLSStreamingOn || !isDVRStream) return null;
+
+  return (
+    <GestureDetector gesture={Gesture.Tap()}>
+      <TouchableOpacity
+        onPress={togglePlayPause}
+        style={{ alignSelf: 'center' }}
+      >
+        <View style={styles.container}>
+          {isPaused ? <PlayIcon /> : <PauseIcon />}
+        </View>
+      </TouchableOpacity>
+    </GestureDetector>
+  );
+};
+
+export const HLSPlayPauseControl = React.memo(_HLSPlayPauseControl);
+
+const styles = StyleSheet.create({
+  container: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+});