@100mslive/react-native-room-kit 1.1.5 → 1.1.7

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import {
+  useHMSConferencingScreenConfig,
+  useHMSLayoutConfig,
+} from '../hooks-util';
+import { HMSManageRaiseHand } from './HMSManageRaiseHand';
+import {
+  useCanPublishAudio,
+  useCanPublishScreen,
+  useCanPublishVideo,
+} from '../hooks-sdk';
+
+export const HLSHandRaiseButton = () => {
+  const canPublishAudio = useCanPublishAudio();
+  const canPublishVideo = useCanPublishVideo();
+  const canPublishScreen = useCanPublishScreen();
+
+  const canRaiseHand = useHMSConferencingScreenConfig(
+    (confScreenConfig) => !!confScreenConfig?.elements?.hand_raise
+  );
+  const isOnStage = useHMSLayoutConfig((layoutConfig) => {
+    return !!layoutConfig?.screens?.conferencing?.default?.elements
+      ?.on_stage_exp;
+  });
+
+  const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
+
+  const canShowHandRaiseInFooter = canRaiseHand && !isOnStage && isViewer;
+
+  if (!canShowHandRaiseInFooter) {
+    return null;
+  }
+
+  return (
+    <View style={{ marginLeft: 12 }}>
+      <HMSManageRaiseHand />
+    </View>
+  );
+};

package/src/components/HLSManageChatTextInput.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  useHLSViewsConstraints,
+  useHMSChatState,
+  useHMSRoomStyleSheet,
+  useIsAllowedToSendMessage,
+  useIsLocalPeerBlockedFromChat,
+} from '../hooks-util';
+import { ChatPaused } from './Chat/ChatPaused';
+import { PeerBlockedFromChat } from './Chat/PeerBlockedFromChat';
+import { ChatFilterBottomSheetOpener } from './Chat/ChatFilterBottomSheetOpener';
+import { HMSSendMessageInput } from './HMSSendMessageInput';
+import type { RootState } from '../redux';
+import { ChatFilterBottomSheet } from './Chat/ChatFilterBottomSheet';
+import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
+
+export const HLSManageChatTextInput = () => {
+  const { chatState } = useHMSChatState();
+  const isAllowedToSendMessage = useIsAllowedToSendMessage();
+  const isChatRecipientSelected = useSelector(
+    (state: RootState) => state.chatWindow.sendTo !== null
+  );
+  const isLocalPeerBlockedFromChat = useIsLocalPeerBlockedFromChat();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    input: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.surface_default,
+    },
+  }));
+
+  const { chatWrapperConstraints } = useHLSViewsConstraints();
+  const { bottom: bottomInset } = useSafeAreaInsets();
+
+  const keyboardAvoidingStyles = React.useMemo(
+    () => ({
+      active: { width: chatWrapperConstraints.width - 32 },
+      inactive: { width: '100%' },
+    }),
+    [chatWrapperConstraints]
+  );
+
+  if (isLocalPeerBlockedFromChat) {
+    return <PeerBlockedFromChat style={styles.shrink} />;
+  }
+
+  if (chatState.enabled) {
+    return (
+      <>
+        {/* INFO: Chat action button UI might be broken,
+        but hls-viewer might not have permission to take action */}
+        <View style={styles.grow}>
+          <ChatFilterBottomSheetOpener useFilterModal={true} />
+
+          {isAllowedToSendMessage && isChatRecipientSelected ? (
+            <HMSKeyboardAvoidingView
+              bottomOffset={bottomInset}
+              styleWhenActive={keyboardAvoidingStyles.active}
+              styleWhenInactive={keyboardAvoidingStyles.inactive}
+            >
+              <HMSSendMessageInput
+                containerStyle={[styles.input, hmsRoomStyles.input]}
+              />
+            </HMSKeyboardAvoidingView>
+          ) : null}
+        </View>
+
+        <ChatFilterBottomSheet />
+      </>
+    );
+  }
+
+  if (isAllowedToSendMessage) {
+    return <ChatPaused style={styles.shrink} />;
+  }
+
+  return <View style={styles.grow} />;
+};
+
+const styles = StyleSheet.create({
+  input: {
+    flex: 0,
+    height: 40,
+    marginHorizontal: 0,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  shrink: {
+    flexShrink: 1,
+  },
+  grow: {
+    flexGrow: 1,
+  },
+});

package/src/components/HLSNotifications.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { HMSNotifications } from './HMSNotifications';
+
+const _HLSNotifications = () => {
+  const { bottom: bottomInset } = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          bottom: bottomInset + 90,
+        },
+      ]}
+    >
+      <HMSNotifications />
+    </View>
+  );
+};
+
+export const HLSNotifications = React.memo(_HLSNotifications);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: '100%',
+    bottom: 0,
+    zIndex: 1,
+  },
+});

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

package/src/components/HLSPlayer.tsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  ActivityIndicator,
+} from 'react-native';
+import {
+  HMSHLSPlayer,
+  HMSHLSPlayerPlaybackState,
+  useHMSHLSPlayerPlaybackState,
+  useHMSHLSPlayerSubtitles,
+} from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+// import { changeShowHLSStats } from '../redux/actions';
+// import { HLSPlayerStatsView } from './HLSPlayerStatsView';
+import { HLSPlayerEmoticons } from './HLSPlayerEmoticons';
+import { COLORS, hexToRgbA } from '../utils/theme';
+import { HMSHLSNotStarted } from './HMSHLSNotStarted';
+import { CrossCircleIcon } from '../Icons';
+import {
+  useHLSPlayerConstraints,
+  useHLSViewsConstraints,
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+import { HMSPinchGesture } from './PeerVideoTile/HMSPinchGesture';
+
+export interface HLSPlayerProps {}
+
+export const _HLSPlayer = React.forwardRef<
+  React.ElementRef<typeof HMSHLSPlayer>,
+  HLSPlayerProps
+>((_props, hlsPlayerRef) => {
+  // const dispatch = useDispatch();
+  const isHLSStreaming = useIsHLSStreamingOn();
+  const isStreamUrlPresent = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.room?.hlsStreamingState.variants?.[0]?.hlsStreamUrl
+  );
+  // const showHLSStats = useSelector(
+  //   (state: RootState) => state.app.joinConfig.showHLSStats
+  // );
+  // const showCustomHLSPlayerControls = useSelector(
+  //   (state: RootState) => state.app.joinConfig.showCustomHLSPlayerControls
+  // );
+  const enableHLSPlayerControls = useSelector(
+    (state: RootState) => state.app.joinConfig.enableHLSPlayerControls
+  );
+
+  // const handleClosePress = () => {
+  //   dispatch(changeShowHLSStats(false));
+  // };
+
+  const hlsPlayerConstraints = useHLSPlayerConstraints();
+  const { playerWrapperConstraints } = useHLSViewsConstraints();
+  const [playerKey, setPlayerKey] = React.useState(1);
+
+  const prevReconnectingRef = React.useRef<null | boolean>(null);
+  const reconnecting = useSelector(
+    (state: RootState) => state.hmsStates.reconnecting
+  );
+
+  const hlsPlayerPlaybackState = useHMSHLSPlayerPlaybackState();
+
+  const subtitles = useHMSHLSPlayerSubtitles();
+
+  const isPlaybackFailed =
+    hlsPlayerPlaybackState === HMSHLSPlayerPlaybackState.FAILED;
+
+  const isPlayerBuffering =
+    hlsPlayerPlaybackState === HMSHLSPlayerPlaybackState.BUFFERING;
+
+  React.useEffect(() => {
+    const prevReconnecting = prevReconnectingRef.current;
+
+    if (
+      Platform.OS === 'android' &&
+      prevReconnecting && // previously were in reconnection state
+      reconnecting === false && // now in reconnected state
+      isPlaybackFailed // and player playback is in failed state
+    ) {
+      // Recreate the HLS PLayer instance
+      setPlayerKey((prevKey) => (prevKey += 1));
+    }
+
+    prevReconnectingRef.current = reconnecting;
+  }, [reconnecting, isPlaybackFailed]);
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    failedContainer: {
+      backgroundColor: theme.palette.background_dim
+        ? hexToRgbA(theme.palette.background_dim, 0.7)
+        : COLORS.LOADING_BACKDROP,
+    },
+    failedText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    warningText: {
+      color: theme.palette.alert_warning,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    semiboldWhite: {
+      fontFamily: `${typography.font_family}-SemiBold`,
+      color: '#ffffff',
+    },
+  }));
+
+  const { primary_bright: PrimaryBrightColor } = useHMSRoomColorPalette();
+
+  if (!isHLSStreaming) return <HMSHLSNotStarted />;
+
+  if (!isStreamUrlPresent)
+    return (
+      <View style={styles.textContainer}>
+        <Text style={[styles.warningSubtitle, hmsRoomStyles.warningText]}>
+          Stream URL not found!
+        </Text>
+      </View>
+    );
+
+  return (
+    <>
+      <View style={styles.container}>
+        <View
+          style={[
+            styles.playerAndCaptionWrapper,
+            {
+              width: playerWrapperConstraints.width,
+              height: hlsPlayerConstraints.height,
+            },
+          ]}
+        >
+          <HMSPinchGesture>
+            <View pointerEvents="none" style={styles.playerContainer}>
+              <HMSHLSPlayer
+                key={playerKey}
+                ref={hlsPlayerRef}
+                enableStats={true}
+                enableControls={enableHLSPlayerControls}
+                containerStyle={styles.playerContainer}
+                style={{
+                  width: hlsPlayerConstraints.width,
+                  height: hlsPlayerConstraints.height,
+                }}
+              />
+            </View>
+          </HMSPinchGesture>
+
+          <View
+            style={[
+              { width: playerWrapperConstraints.width - 48, left: 24 },
+              styles.closedCaptionsContainer,
+            ]}
+          >
+            <Text style={[styles.closedCaptions, hmsRoomStyles.semiboldWhite]}>
+              {subtitles}
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      <HLSPlayerEmoticons />
+
+      {/* {showHLSStats ? (
+        <HLSPlayerStatsView onClosePress={handleClosePress} />
+      ) : null} */}
+
+      {isPlayerBuffering ? (
+        <View
+          style={[
+            styles.playbackFailedContainer,
+            hmsRoomStyles.failedContainer,
+          ]}
+        >
+          <ActivityIndicator size={'large'} color={PrimaryBrightColor} />
+        </View>
+      ) : null}
+
+      {isPlaybackFailed ? (
+        <View
+          style={[
+            styles.playbackFailedContainer,
+            hmsRoomStyles.failedContainer,
+          ]}
+        >
+          <CrossCircleIcon />
+
+          <Text style={[styles.playbackFailed, hmsRoomStyles.failedText]}>
+            Playback Failed
+          </Text>
+        </View>
+      ) : null}
+    </>
+  );
+});
+
+export const HLSPlayer = React.memo(_HLSPlayer);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playerAndCaptionWrapper: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playerContainer: {
+    flex: undefined,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  textContainer: {
+    flex: 1,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  warningSubtitle: {
+    fontSize: 16,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    textAlign: 'center',
+  },
+  closedCaptionsContainer: {
+    position: 'absolute',
+    bottom: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closedCaptions: {
+    fontSize: 14,
+    lineHeight: 16,
+    textAlign: 'center',
+    textShadowColor: 'rgba(0, 0, 0, 0.8)',
+    textShadowRadius: 3,
+    textShadowOffset: { width: 1, height: 1 },
+  },
+  playbackFailedContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+  playbackFailed: {
+    fontSize: 24,
+    lineHeight: 32,
+    letterSpacing: 0.5,
+    textAlign: 'center',
+    marginTop: 8,
+  },
+});