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

package/src/components/HLSPlayer.tsx

@@ -1,6 +1,5 @@
-import React, { useRef } from 'react';
-import type { ComponentRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import {
   View,
   Text,
@@ -12,96 +11,53 @@ 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 { changeShowHLSStats } from '../redux/actions';
+// import { HLSPlayerStatsView } from './HLSPlayerStatsView';
 import { HLSPlayerEmoticons } from './HLSPlayerEmoticons';
-import { CustomControls } from './CustomHLSPlayerControls';
 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 const _HLSPlayer: React.FC = () => {
-  const dispatch = useDispatch();
+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 hmsHlsPlayerRef = useRef<ComponentRef<typeof HMSHLSPlayer>>(null);
-  const showHLSStats = useSelector(
-    (state: RootState) => state.app.joinConfig.showHLSStats
-  );
-  const showCustomHLSPlayerControls = useSelector(
-    (state: RootState) => state.app.joinConfig.showCustomHLSPlayerControls
-  );
+  // 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 hlsPlayerActions = <
-    T extends
-      | 'play'
-      | 'stop'
-      | 'pause'
-      | 'resume'
-      | 'seekForward'
-      | 'seekBackward'
-      | 'seekToLive'
-      | 'setVolume',
-  >(
-    action: T,
-    ...args: any[]
-  ) => {
-    switch (action) {
-      case 'play': {
-        hmsHlsPlayerRef.current?.play(args[0]);
-        break;
-      }
-      case 'stop': {
-        hmsHlsPlayerRef.current?.stop();
-        break;
-      }
-      case 'pause': {
-        hmsHlsPlayerRef.current?.pause();
-        break;
-      }
-      case 'resume': {
-        hmsHlsPlayerRef.current?.resume();
-        break;
-      }
-      case 'seekForward': {
-        hmsHlsPlayerRef.current?.seekForward(args[0]);
-        break;
-      }
-      case 'seekBackward': {
-        hmsHlsPlayerRef.current?.seekBackward(args[0]);
-        break;
-      }
-      case 'seekToLive': {
-        hmsHlsPlayerRef.current?.seekToLivePosition();
-        break;
-      }
-      case 'setVolume': {
-        hmsHlsPlayerRef.current?.setVolume(args[0]);
-        break;
-      }
-    }
-  };
+  // const handleClosePress = () => {
+  //   dispatch(changeShowHLSStats(false));
+  // };
 
   const hlsPlayerConstraints = useHLSPlayerConstraints();
+  const { playerWrapperConstraints } = useHLSViewsConstraints();
   const [playerKey, setPlayerKey] = React.useState(1);
 
   const prevReconnectingRef = React.useRef<null | boolean>(null);
@@ -111,6 +67,8 @@ export const _HLSPlayer: React.FC = () => {
 
   const hlsPlayerPlaybackState = useHMSHLSPlayerPlaybackState();
 
+  const subtitles = useHMSHLSPlayerSubtitles();
+
   const isPlaybackFailed =
     hlsPlayerPlaybackState === HMSHLSPlayerPlaybackState.FAILED;
 
@@ -147,6 +105,10 @@ export const _HLSPlayer: React.FC = () => {
       color: theme.palette.alert_warning,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
+    semiboldWhite: {
+      fontFamily: `${typography.font_family}-SemiBold`,
+      color: '#ffffff',
+    },
   }));
 
   const { primary_bright: PrimaryBrightColor } = useHMSRoomColorPalette();
@@ -164,26 +126,50 @@ export const _HLSPlayer: React.FC = () => {
 
   return (
     <>
-      <HMSHLSPlayer
-        key={playerKey}
-        ref={hmsHlsPlayerRef}
-        enableStats={showHLSStats}
-        enableControls={enableHLSPlayerControls}
-        style={{
-          width: hlsPlayerConstraints.width,
-          height: hlsPlayerConstraints.height,
-        }}
-      />
+      <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 ? (
+      {/* {showHLSStats ? (
         <HLSPlayerStatsView onClosePress={handleClosePress} />
-      ) : null}
-
-      {showCustomHLSPlayerControls ? (
-        <CustomControls handleControlPress={hlsPlayerActions} />
-      ) : null}
+      ) : null} */}
 
       {isPlayerBuffering ? (
         <View
@@ -212,17 +198,25 @@ export const _HLSPlayer: React.FC = () => {
       ) : null}
     </>
   );
-};
+});
 
 export const HLSPlayer = React.memo(_HLSPlayer);
 
 const styles = StyleSheet.create({
-  hlsView: {
+  container: {
     flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  hlsPlayerContainer: {
-    // flex: 1,
+  playerAndCaptionWrapper: {
     position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playerContainer: {
+    flex: undefined,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
   },
   textContainer: {
     flex: 1,
@@ -236,6 +230,22 @@ const styles = StyleSheet.create({
     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%',

package/src/components/HLSPlayerContainer.tsx

@@ -1,29 +1,104 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+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';
+import { PipModes } from '../utils/types';
+import type { RootState } from '../redux';
 
 export const _HLSPlayerContainer: React.FC = () => {
-  // const hlsPlayerRef = useRef(null);
+  const hlsPlayerRef =
+    React.useRef<React.ElementRef<typeof HMSHLSPlayer>>(null);
   const { playerWrapperConstraints } = useHLSViewsConstraints();
+  const isPipModeActive = useSelector(
+    (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+  );
+
+  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 (
-    <View
-      style={[
-        styles.hlsPlayerContainer,
-        {
-          backgroundColor: 'black',
-          width: playerWrapperConstraints.width,
-          height: playerWrapperConstraints.height,
-        },
-      ]}
-    >
-      <HLSPlayer />
+    <GestureDetector gesture={tapGesture}>
+      <View
+        collapsable={false}
+        style={[
+          styles.hlsPlayerContainer,
+          {
+            backgroundColor: 'black',
+            width: playerWrapperConstraints.width,
+            height: playerWrapperConstraints.height,
+          },
+        ]}
+      >
+        <HLSPlayer ref={hlsPlayerRef} />
 
-      <HLSPlayerControls />
-    </View>
+        {isPipModeActive ? null : (
+          <HLSPlayerControls
+            playerRef={hlsPlayerRef}
+            animatedValue={animatedValue}
+            cancelCurrentControlAnimation={cancelCurrentControlAnimation}
+            hideControlsAfterDelay={hideControlsAfterDelay}
+            resetHideControlAnimation={resetHideControlAnimation}
+          />
+        )}
+      </View>
+    </GestureDetector>
   );
 };
 

package/src/components/HLSPlayerControls.tsx

@@ -1,85 +1,164 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
+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 {
-  // CCIcon,
-  CloseIcon,
-  MaximizeIcon,
-  MinimizeIcon,
-} from '../Icons';
-import { ModalTypes } from '../utils/types';
-import { useModalType } from '../hooks-util';
 import type { RootState } from '../redux';
-import { setHlsFullScreen } from '../redux/actions';
+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';
 
-export const _HLSPlayerControls: React.FC = () => {
-  // const isHLSStreaming = useIsHLSStreamingOn();
-  // const isStreamUrlPresent = useSelector(
-  //   (state: RootState) =>
-  //     !!state.hmsStates.room?.hlsStreamingState.variants?.[0]?.hlsStreamUrl
-  // );
-  const dispatch = useDispatch();
+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 { handleModalVisibleType } = useModalType();
-
-  const handleCloseBtnPress = () => {
-    handleModalVisibleType(ModalTypes.LEAVE_ROOM);
-  };
 
-  // const handleCCBtnPress = () => {
-  //   //
-  // };
+  const hideControlsStyles: ViewStyle = useAnimatedStyle(
+    () => ({
+      opacity: animatedValue.value,
+    }),
+    []
+  );
 
-  const toggleFullScreen = () => {
-    dispatch(setHlsFullScreen(!hlsFullScreen));
-  };
+  const hideControlsProps: ViewProps = useAnimatedProps(
+    () => ({
+      pointerEvents: animatedValue.value < 0.8 ? 'none' : 'auto',
+    }),
+    []
+  );
 
   return (
-    <View style={styles.container}>
-      <View style={styles.controlsRow}>
-        <TouchableOpacity onPress={handleCloseBtnPress} style={styles.icon}>
-          <CloseIcon size="medium" />
-        </TouchableOpacity>
+    <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}
+          />
 
-        {/* <View style={[styles.normalRow, styles.gap]}>
-          <TouchableOpacity
-            onPress={handleCCBtnPress}
-            style={[styles.icon, styles.gap]}
-          >
-            <CCIcon size="medium" enabled={true} />
-          </TouchableOpacity>
-        </View> */}
-      </View>
+          <HLSSeekforwardControl
+            playerRef={playerRef}
+            onPress={resetHideControlAnimation}
+          />
+        </View>
+      </Animated.View>
 
-      <View style={styles.controlsRow}>
-        <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]}>
-          <TouchableOpacity onPress={toggleFullScreen} style={styles.icon}>
-            {hlsFullScreen ? (
-              <MinimizeIcon size="medium" />
-            ) : (
-              <MaximizeIcon size="medium" />
-            )}
-          </TouchableOpacity>
+          <View style={[styles.normalRow, styles.gap]}>
+            <HLSClosedCaptionControl
+              playerRef={playerRef}
+              onPress={resetHideControlAnimation}
+            />
+          </View>
         </View>
-      </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({
-  container: {
+  floatingContainer: {
     position: 'absolute',
     width: '100%',
-    height: '100%',
     zIndex: 5,
-    justifyContent: 'space-between',
   },
   controlsRow: {
     flexDirection: 'row',

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