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

package/src/components/HLSPlayerContainer.tsx

@@ -1,29 +1,96 @@
 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 = useRef(null);
+  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 (
-    <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>
+        <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);