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

package/src/components/HLSPlayerContainer.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { HMSHLSPlayer } from '@100mslive/react-native-hms';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import {
+  Easing,
+  cancelAnimation,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useHLSViewsConstraints } from '../hooks-util';
+import { HLSPlayer } from './HLSPlayer';
+import { HLSPlayerControls } from './HLSPlayerControls';
+
+export const _HLSPlayerContainer: React.FC = () => {
+  const hlsPlayerRef =
+    React.useRef<React.ElementRef<typeof HMSHLSPlayer>>(null);
+  const { playerWrapperConstraints } = useHLSViewsConstraints();
+
+  const animatedValue = useSharedValue(1);
+
+  const cancelCurrentControlAnimation = React.useCallback(() => {
+    'worklet';
+    cancelAnimation(animatedValue);
+  }, []);
+
+  const hideControlsAfterDelay = React.useCallback((duration = 500) => {
+    'worklet';
+    animatedValue.value = withDelay(
+      5000,
+      withTiming(0, { duration, easing: Easing.ease })
+    );
+  }, []);
+
+  const resetHideControlAnimation = React.useCallback(() => {
+    cancelCurrentControlAnimation();
+    hideControlsAfterDelay();
+  }, [cancelCurrentControlAnimation, hideControlsAfterDelay]);
+
+  const hideControls = React.useCallback((duration = 500) => {
+    'worklet';
+    animatedValue.value = withTiming(0, { duration, easing: Easing.ease });
+  }, []);
+
+  React.useEffect(() => {
+    resetHideControlAnimation();
+  }, [resetHideControlAnimation]);
+
+  const tapGesture = React.useMemo(() => {
+    return Gesture.Tap().onStart(() => {
+      cancelCurrentControlAnimation();
+      if (animatedValue.value < 1) {
+        animatedValue.value = withTiming(
+          1,
+          { duration: 200, easing: Easing.ease },
+          (finished) => {
+            if (finished) {
+              hideControlsAfterDelay();
+            }
+          }
+        );
+      } else {
+        hideControls(200);
+      }
+    });
+  }, [cancelCurrentControlAnimation, hideControls, hideControlsAfterDelay]);
+
+  return (
+    <GestureDetector gesture={tapGesture}>
+      <View
+        collapsable={false}
+        style={[
+          styles.hlsPlayerContainer,
+          {
+            backgroundColor: 'black',
+            width: playerWrapperConstraints.width,
+            height: playerWrapperConstraints.height,
+          },
+        ]}
+      >
+        <HLSPlayer ref={hlsPlayerRef} />
+
+        <HLSPlayerControls
+          playerRef={hlsPlayerRef}
+          animatedValue={animatedValue}
+          cancelCurrentControlAnimation={cancelCurrentControlAnimation}
+          hideControlsAfterDelay={hideControlsAfterDelay}
+          resetHideControlAnimation={resetHideControlAnimation}
+        />
+      </View>
+    </GestureDetector>
+  );
+};
+
+export const HLSPlayerContainer = React.memo(_HLSPlayerContainer);
+
+const styles = StyleSheet.create({
+  hlsView: {
+    flex: 1,
+  },
+  hlsPlayerContainer: {
+    // flex: 1,
+    position: 'relative',
+  },
+  textContainer: {
+    flex: 1,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  warningSubtitle: {
+    fontSize: 16,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    textAlign: 'center',
+  },
+  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,
+  },
+});

package/src/components/HLSPlayerControls.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { ViewProps, ViewStyle } from 'react-native';
+import { useSelector } from 'react-redux';
+import Animated, {
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { HMSHLSPlayer } from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import { HLSGoLiveControl } from './HLSGoLiveControl';
+import { HLSSeekbar } from './HLSSeekbar';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import { HLSCloseMeetingControl } from './HLSCloseMeetingControl';
+import { HLSClosedCaptionControl } from './HLSClosedCaptionControl';
+import { HLSFullScreenControl } from './HLSFullScreenControl';
+import { HLSDistanceFromLive } from './HLSDistanceFromLive';
+import { HLSPlayPauseControl } from './HLSPlayPauseControl';
+import { HLSSeekbackwardControl } from './HLSSeekbackwardControl';
+import { HLSSeekforwardControl } from './HLSSeekforwardControl';
+
+interface HLSPlayerControlsProps {
+  playerRef: React.RefObject<React.ElementRef<typeof HMSHLSPlayer>>;
+  cancelCurrentControlAnimation: () => void;
+  hideControlsAfterDelay: () => void;
+  resetHideControlAnimation: () => void;
+  animatedValue: SharedValue<number>;
+}
+
+export const _HLSPlayerControls: React.FC<HLSPlayerControlsProps> = ({
+  playerRef,
+  cancelCurrentControlAnimation,
+  hideControlsAfterDelay,
+  animatedValue,
+  resetHideControlAnimation,
+}) => {
+  const { bottom: bottomSafeInset } = useSafeAreaInsets();
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const hlsFullScreen = useSelector(
+    (state: RootState) => state.app.hlsFullScreen
+  );
+
+  const hideControlsStyles: ViewStyle = useAnimatedStyle(
+    () => ({
+      opacity: animatedValue.value,
+    }),
+    []
+  );
+
+  const hideControlsProps: ViewProps = useAnimatedProps(
+    () => ({
+      pointerEvents: animatedValue.value < 0.8 ? 'none' : 'auto',
+    }),
+    []
+  );
+
+  return (
+    <React.Fragment>
+      {/* Play/Pause Controls */}
+      <Animated.View
+        animatedProps={hideControlsProps}
+        style={[
+          { height: '100%' },
+          styles.floatingContainer,
+          hideControlsStyles,
+        ]}
+      >
+        <View
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <HLSSeekbackwardControl
+            playerRef={playerRef}
+            onPress={resetHideControlAnimation}
+          />
+
+          <HLSPlayPauseControl
+            playerRef={playerRef}
+            onPress={resetHideControlAnimation}
+          />
+
+          <HLSSeekforwardControl
+            playerRef={playerRef}
+            onPress={resetHideControlAnimation}
+          />
+        </View>
+      </Animated.View>
+
+      {/* Header Controls */}
+      <Animated.View
+        animatedProps={hideControlsProps}
+        style={[{ top: 0 }, styles.floatingContainer, hideControlsStyles]}
+      >
+        <View style={styles.controlsRow}>
+          <HLSCloseMeetingControl onPress={resetHideControlAnimation} />
+
+          <View style={[styles.normalRow, styles.gap]}>
+            <HLSClosedCaptionControl
+              playerRef={playerRef}
+              onPress={resetHideControlAnimation}
+            />
+          </View>
+        </View>
+      </Animated.View>
+
+      {/* Footer Controls */}
+      <Animated.View
+        animatedProps={hideControlsProps}
+        style={[
+          { bottom: isLandscapeOrientation ? bottomSafeInset : 0 },
+          styles.floatingContainer,
+          hideControlsStyles,
+        ]}
+      >
+        <View
+          style={{
+            flexDirection:
+              isLandscapeOrientation || hlsFullScreen
+                ? 'column-reverse'
+                : 'column',
+          }}
+        >
+          <View style={styles.controlsRow}>
+            <View style={styles.normalRow}>
+              <HLSGoLiveControl
+                playerRef={playerRef}
+                onPress={resetHideControlAnimation}
+              />
+              <HLSDistanceFromLive />
+            </View>
+
+            <View style={[styles.normalRow, styles.gap]}>
+              <HLSFullScreenControl onPress={resetHideControlAnimation} />
+            </View>
+          </View>
+
+          <HLSSeekbar
+            playerRef={playerRef}
+            onStart={cancelCurrentControlAnimation}
+            onEnd={hideControlsAfterDelay}
+          />
+        </View>
+      </Animated.View>
+    </React.Fragment>
+  );
+};
+
+export const HLSPlayerControls = React.memo(_HLSPlayerControls);
+
+const styles = StyleSheet.create({
+  floatingContainer: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 5,
+  },
+  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/HLSRecordingStatusText.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import type { TextProps } from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import { useIsAnyRecordingOn, useIsAnyRecordingPaused } from '../hooks-sdk';
+
+interface HLSRecordingStatusTextProps extends TextProps {
+  prefix?: React.ReactElement;
+  suffix?: React.ReactElement;
+}
+
+export const HLSRecordingStatusText: React.FC<HLSRecordingStatusTextProps> = ({
+  prefix,
+  suffix,
+  ...restProps
+}) => {
+  const isRecordingOn = useIsAnyRecordingOn();
+  const isRecordingPaused = useIsAnyRecordingPaused();
+  const startingOrStoppingRecording = useSelector(
+    (state: RootState) =>
+      state.app.startingOrStoppingRecording ||
+      state.hmsStates.room?.browserRecordingState.state ===
+        HMSRecordingState.STARTING ||
+      state.hmsStates.room?.serverRecordingState.state ===
+        HMSRecordingState.STARTING ||
+      state.hmsStates.room?.hlsRecordingState?.state ===
+        HMSRecordingState.STARTING
+  );
+
+  if (startingOrStoppingRecording || !(isRecordingPaused && isRecordingOn)) {
+    return null;
+  }
+
+  return (
+    <>
+      {prefix}
+      <Text {...restProps}>
+        {isRecordingPaused
+          ? 'Recording Paused'
+          : isRecordingOn
+            ? 'Recording'
+            : ''}
+      </Text>
+      {suffix}
+    </>
+  );
+};

package/src/components/HLSRoomOptionsButton.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { useCanShowRoomOptionsButton } from '../hooks-util';
+import { HMSRoomOptions } from './HMSRoomOptions';
+
+export const HLSRoomOptionsButton = () => {
+  const canShowOptions = useCanShowRoomOptionsButton();
+
+  if (!canShowOptions) {
+    return null;
+  }
+
+  return (
+    <View style={{ marginLeft: 12 }}>
+      <HMSRoomOptions />
+    </View>
+  );
+};

package/src/components/HLSSeekbackwardControl.tsx

@@ -0,0 +1,88 @@
+import { HMSHLSPlaylistType } from '@100mslive/react-native-hms';
+import type { HMSHLSPlayer } from '@100mslive/react-native-hms';
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+import type { RootState } from '../redux';
+import { SeekArrowIcon } from '../Icons';
+import Animated, {
+  Easing,
+  cancelAnimation,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+export interface HLSSeekbackwardControlProps {
+  playerRef: React.RefObject<React.ElementRef<typeof HMSHLSPlayer>>;
+  onPress?: () => void;
+}
+
+const _HLSSeekbackwardControl: React.FC<HLSSeekbackwardControlProps> = ({
+  playerRef,
+  onPress,
+}) => {
+  const animatedValue = useSharedValue(0);
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isDVRStream = useSelector((state: RootState) => {
+    return (
+      state.hmsStates.room?.hlsStreamingState.variants?.[0]?.playlistType ===
+      HMSHLSPlaylistType.DVR
+    );
+  });
+
+  const handdleSeekBackward = () => {
+    onPress?.();
+    playerRef.current?.seekBackward(10);
+  };
+
+  const tapGestureHandler = React.useMemo(() => {
+    return Gesture.Tap().onStart(() => {
+      cancelAnimation(animatedValue);
+      animatedValue.value = withTiming(
+        1,
+        { duration: 200, easing: Easing.ease },
+        (finished) => {
+          if (finished) {
+            animatedValue.value = withTiming(0, {
+              duration: 100,
+              easing: Easing.ease,
+            });
+          }
+        }
+      );
+      runOnJS(handdleSeekBackward)();
+    });
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(animatedValue.value, [0, 1], [1, 0.8]),
+      transform: [
+        {
+          rotateZ: `${interpolate(animatedValue.value, [0, 1], [0, -17])} deg`,
+        },
+      ],
+    }),
+    []
+  );
+
+  if (!isHLSStreamingOn || !isDVRStream) return null;
+
+  return (
+    <GestureDetector gesture={tapGestureHandler}>
+      <Animated.View
+        collapsable={false}
+        style={[{ marginRight: 24 }, animatedStyle]}
+      >
+        <SeekArrowIcon type="backward" />
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+export const HLSSeekbackwardControl = React.memo(_HLSSeekbackwardControl);