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

package/src/components/HLSSeekbar.tsx

@@ -0,0 +1,381 @@
+import React, { useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  Easing,
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import {
+  HMSHLSPlayerPlaybackState,
+  HMSHLSPlaylistType,
+  useHMSHLSPlayerPlaybackState,
+  useHMSHLSPlayerStat,
+} from '@100mslive/react-native-hms';
+import type {
+  HLSPlayerDurationDetails,
+  HMSHLSPlayer,
+} from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+
+import {
+  useHLSStreamResumePause,
+  useHLSViewsConstraints,
+  useHMSRoomStyle,
+} from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+import type { RootState } from '../redux';
+
+interface HLSSeekbarProps {
+  playerRef: React.RefObject<React.ElementRef<typeof HMSHLSPlayer>>;
+  onStart: () => void;
+  onEnd: () => void;
+}
+
+export const _HLSSeekbar: React.FC<HLSSeekbarProps> = (props) => {
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isDVRStream = useSelector((state: RootState) => {
+    return (
+      state.hmsStates.room?.hlsStreamingState.variants?.[0]?.playlistType ===
+      HMSHLSPlaylistType.DVR
+    );
+  });
+
+  if (!isHLSStreamingOn || !isDVRStream) return null;
+
+  return <_Seekbar {...props} />;
+};
+
+const _Seekbar: React.FC<HLSSeekbarProps> = React.memo(
+  ({ playerRef, onStart, onEnd }) => {
+    const { playerWrapperConstraints } = useHLSViewsConstraints();
+    const hlsPlayerDurationDetails = useRef<null | HLSPlayerDurationDetails>(
+      null
+    );
+    const prevSeekbarPositionValue = useSharedValue(0);
+    const seekbarPositionValue = useSharedValue(0);
+    const seekbarHeightValue = useSharedValue(4);
+    const streamStartedAt = useSelector((state: RootState) => {
+      return state.hmsStates.room?.hlsStreamingState.variants?.[0]?.startedAt;
+    });
+    const distanceFromLiveEdge = useHMSHLSPlayerStat('distanceFromLive');
+    const distanceFromLiveEdgeValue = useDerivedValue(
+      () => distanceFromLiveEdge,
+      [distanceFromLiveEdge]
+    );
+
+    const seekbarRoomStyle = useHMSRoomStyle((theme) => ({
+      backgroundColor: theme.palette.primary_default,
+    }));
+
+    const { isPaused, pauseStream, resumeStream } =
+      useHLSStreamResumePause(playerRef);
+
+    const seekToBarPosition = () => {
+      if (!streamStartedAt) return;
+      const liveStreamDuration = Date.now() - streamStartedAt.getTime();
+      const rollingWindowTime =
+        hlsPlayerDurationDetails.current?.rollingWindowTime;
+      const durationOfStream =
+        rollingWindowTime && liveStreamDuration >= rollingWindowTime
+          ? rollingWindowTime
+          : liveStreamDuration;
+
+      // console.log(
+      //   '$$$ rolling window time > ',
+      //   hlsPlayerDurationDetails.current?.rollingWindowTime
+      // );
+      // console.log('$$$ live stream duration > ', liveStreamDuration);
+      // console.log('$$$ current stream duration > ', durationOfStream);
+
+      const prevPosition = prevSeekbarPositionValue.value;
+      const currPosition = seekbarPositionValue.value;
+      const diff = currPosition - prevPosition;
+      const seekByMillis = (durationOfStream / 100) * Math.abs(diff);
+
+      const seekBySecs = seekByMillis / 1000;
+      if (diff >= 0) {
+        playerRef.current?.seekForward(seekBySecs);
+      } else {
+        playerRef.current?.seekBackward(seekBySecs);
+      }
+      resumeStream();
+    };
+
+    const activeSeekbarStyle = useAnimatedStyle(
+      () => ({
+        width: interpolate(
+          seekbarPositionValue.value,
+          [0, 100],
+          [0, playerWrapperConstraints.width],
+          {
+            extrapolateLeft: Extrapolation.CLAMP,
+            extrapolateRight: Extrapolation.CLAMP,
+          }
+        ),
+        height: seekbarHeightValue.value,
+      }),
+      [playerWrapperConstraints.width]
+    );
+
+    const activeSeekbarThumbStyle = useAnimatedStyle(
+      () => ({
+        width: seekbarHeightValue.value * 3,
+        height: seekbarHeightValue.value * 3,
+        borderRadius: (seekbarHeightValue.value * 3) / 2,
+        bottom: -seekbarHeightValue.value,
+        left: -(seekbarHeightValue.value * 3) / 2,
+        transform: [
+          {
+            translateX: interpolate(
+              seekbarPositionValue.value,
+              [0, 100],
+              [0, playerWrapperConstraints.width],
+              {
+                extrapolateLeft: Extrapolation.CLAMP,
+                extrapolateRight: Extrapolation.CLAMP,
+              }
+            ),
+          },
+        ],
+      }),
+      [playerWrapperConstraints.width]
+    );
+
+    const panGesture = Gesture.Pan()
+      .maxPointers(1)
+      .minPointers(1)
+      .hitSlop({ top: 12, bottom: 12 })
+      .onStart((e) => {
+        'worklet';
+        onStart();
+        runOnJS(pauseStream)();
+        prevSeekbarPositionValue.value = seekbarPositionValue.value;
+        seekbarPositionValue.value = interpolate(
+          e.x,
+          [0, playerWrapperConstraints.width],
+          [0, 100],
+          {
+            extrapolateLeft: Extrapolation.CLAMP,
+            extrapolateRight: Extrapolation.CLAMP,
+          }
+        );
+        seekbarHeightValue.value = withTiming(6, {
+          duration: 160,
+          easing: Easing.linear,
+        });
+      })
+      .onUpdate((e) => {
+        'worklet';
+        seekbarPositionValue.value = interpolate(
+          e.x,
+          [0, playerWrapperConstraints.width],
+          [0, 100],
+          {
+            extrapolateLeft: Extrapolation.CLAMP,
+            extrapolateRight: Extrapolation.CLAMP,
+          }
+        );
+      })
+      .onEnd(() => {
+        'worklet';
+        onEnd();
+        seekbarHeightValue.value = withTiming(4, {
+          duration: 160,
+          easing: Easing.linear,
+        });
+        runOnJS(seekToBarPosition)();
+      });
+
+    React.useEffect(() => {
+      if (streamStartedAt && !isPaused) {
+        const intervalId = setInterval(() => {
+          const liveStreamDuration = Date.now() - streamStartedAt.getTime();
+
+          const rollingWindowTime =
+            hlsPlayerDurationDetails.current?.rollingWindowTime;
+
+          const durationOfStream =
+            rollingWindowTime && liveStreamDuration >= rollingWindowTime
+              ? rollingWindowTime
+              : liveStreamDuration;
+
+          // console.log(
+          //   '$$$ rolling window time > ',
+          //   hlsPlayerDurationDetails.current?.rollingWindowTime
+          // );
+          // console.log('$$$ live stream duration > ', liveStreamDuration);
+          // console.log('$$$ current stream duration > ', durationOfStream);
+
+          const currentPosition =
+            durationOfStream - distanceFromLiveEdgeValue.value;
+
+          // console.log('currentPosition > ', currentPosition);
+
+          seekbarPositionValue.value = interpolate(
+            currentPosition,
+            [0, durationOfStream],
+            [0, 100],
+            {
+              extrapolateLeft: Extrapolation.CLAMP,
+              extrapolateRight: Extrapolation.CLAMP,
+            }
+          );
+        }, 1000);
+
+        return () => {
+          clearInterval(intervalId);
+        };
+      }
+    }, [isPaused, streamStartedAt]);
+
+    let startedPlayingFirstTime = false;
+    let prevPlaybackState = HMSHLSPlayerPlaybackState.UNKNOWN;
+    const playbackState = useHMSHLSPlayerPlaybackState();
+
+    if (
+      prevPlaybackState === HMSHLSPlayerPlaybackState.UNKNOWN &&
+      playbackState === HMSHLSPlayerPlaybackState.PLAYING
+    ) {
+      prevPlaybackState = playbackState;
+      startedPlayingFirstTime = true;
+    }
+
+    React.useEffect(() => {
+      if (startedPlayingFirstTime && playerRef.current) {
+        let mounted = true;
+
+        playerRef.current
+          .getPlayerDurationDetails()
+          .then((data) => {
+            if (mounted) {
+              console.log('$$$ getPlayerDurationDetails > ', data);
+              hlsPlayerDurationDetails.current = data;
+              if (
+                typeof data.rollingWindowTime === 'number' &&
+                data.rollingWindowTime < 300000
+              ) {
+                hlsPlayerDurationDetails.current.rollingWindowTime = 300000;
+              }
+            }
+          })
+          .catch(() => {});
+
+        return () => {
+          mounted = false;
+        };
+      }
+    }, [startedPlayingFirstTime]);
+
+    return (
+      <GestureDetector gesture={panGesture}>
+        <View
+          collapsable={false}
+          hitSlop={{ top: 12, bottom: 12 }}
+          style={[styles.container, { width: playerWrapperConstraints.width }]}
+        >
+          <Animated.View
+            style={[
+              styles.inactiveSeekbar,
+              { width: playerWrapperConstraints.width },
+            ]}
+          >
+            <Animated.View
+              style={[styles.seekbar, seekbarRoomStyle, activeSeekbarStyle]}
+            />
+            <Animated.View
+              style={[
+                styles.seekbarThumb,
+                seekbarRoomStyle,
+                activeSeekbarThumbStyle,
+              ]}
+            />
+          </Animated.View>
+        </View>
+      </GestureDetector>
+    );
+  }
+);
+
+export const HLSSeekbar = React.memo(_HLSSeekbar);
+
+const styles = StyleSheet.create({
+  container: {
+    height: 6,
+    justifyContent: 'flex-end',
+  },
+  inactiveSeekbar: {
+    position: 'relative',
+    backgroundColor: 'rgba(255, 255, 255, 0.25)',
+  },
+  seekbar: {
+    height: 4,
+  },
+  seekbarThumb: {
+    position: 'absolute',
+    bottom: -4,
+    right: 0,
+    zIndex: 100,
+  },
+});
+
+/**
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * 200 -> 200 * 40%
+ *
+ * 180 - 33.33% = 60;
+ *
+ * currentStreamDuration * (diff in current and prev) * 100 / prev
+ *
+ * 0 |----------| 150
+ * prev  = 135
+ *
+ * curr = 90
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * //// 2 * 30 = 60
+ * 1.5 * 30 = 45
+ *
+ * 180
+ *
+ * 120
+ *
+ * 0 |------____| 100
+ *
+ *
+ * 200 * 40% = 80
+ *
+ * 200 * 30% = 60
+ *
+ *
+ * 30*90
+ *
+ * 0 |---------_| 100
+ *             Prev = 90
+ *   |------|
+ *          Curr = 60
+ *
+ *  90 - 60 = 30
+ *
+ *  seekbackward(80)
+ */

package/src/components/HLSSeekforwardControl.tsx

@@ -0,0 +1,97 @@
+import {
+  HMSHLSPlaylistType,
+  useIsHLSStreamLive,
+} 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 HLSSeekforwardControlProps {
+  playerRef: React.RefObject<React.ElementRef<typeof HMSHLSPlayer>>;
+  onPress?: () => void;
+}
+
+const _HLSSeekforwardControl: React.FC<HLSSeekforwardControlProps> = ({
+  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 isStreamLive = useIsHLSStreamLive();
+
+  const handdleSeekForward = () => {
+    onPress?.();
+    playerRef.current?.seekForward(10);
+  };
+
+  const tapGestureHandler = React.useMemo(() => {
+    return Gesture.Tap()
+      .enabled(!isStreamLive)
+      .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(handdleSeekForward)();
+      });
+  }, [isStreamLive]);
+
+  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={[{ marginLeft: 24 }, animatedStyle]}
+      >
+        <SeekArrowIcon
+          style={{ opacity: isStreamLive ? 0.2 : 1 }}
+          type="forward"
+        />
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+export const HLSSeekforwardControl = React.memo(_HLSSeekforwardControl);

package/src/components/HLSStreamStartedTime.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../redux';
+
+export interface HLSStreamStartedTimeProps {
+  prefix?: React.ReactElement;
+}
+
+export const HLSStreamStartedTime: React.FC<HLSStreamStartedTimeProps> = ({
+  prefix,
+}) => {
+  const streamStartedTime = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.hlsStreamingState.variants?.[0]?.startedAt
+  );
+  const [streamStartedBeforeMillis, setStreamStartedBeforeMillis] =
+    React.useState(0);
+
+  React.useEffect(() => {
+    if (streamStartedTime) {
+      const beforeMilliSecs = Date.now() - streamStartedTime.getTime();
+
+      setStreamStartedBeforeMillis(beforeMilliSecs);
+
+      const intervalId = setInterval(() => {
+        setStreamStartedBeforeMillis((secs) => {
+          secs += 1000;
+          return secs;
+        });
+      }, 1000);
+
+      return () => {
+        clearInterval(intervalId);
+      };
+    }
+  }, [streamStartedTime]);
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    regularSurfaceMedium: {
+      fontFamily: `${typography.font_family}-Regular`,
+      color: theme.palette.on_surface_medium,
+    },
+  }));
+
+  if (!streamStartedTime) {
+    return null;
+  }
+
+  const { h, min, sec } = msToTime(streamStartedBeforeMillis);
+
+  return (
+    <>
+      {prefix}
+
+      <Text style={[styles.subtitle, hmsRoomStyles.regularSurfaceMedium]}>
+        Started {h > 0 ? `${h} h` : min > 0 ? `${min} min` : `${sec} sec`} ago
+      </Text>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  subtitle: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+});
+
+function msToTime(duration: number) {
+  return {
+    ms: duration,
+    sec: Math.floor(duration / 1000),
+    min: Math.floor(duration / 1000 / 60),
+    h: Math.floor(duration / 1000 / 60 / 60),
+  };
+}

package/src/components/HLSViewerScreenContent.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { HMSStatusBar } from './StatusBar';
+import { HLSPlayerContainer } from './HLSPlayerContainer';
+import { LeaveRoomBottomSheet } from './LeaveRoomBottomSheet';
+import { PreviewForRoleChangeModal } from './PreviewForRoleChangeModal';
+import { ChatAndParticipantsBottomSheet } from './ChatAndParticipants';
+import { DefaultModal } from './DefaultModal';
+import { ModalTypes, PipModes } from '../utils/types';
+import {
+  useHMSRoleChangeRequest,
+  useHMSRoomStyleSheet,
+  useHMSSessionStoreListeners,
+  useModalType,
+} from '../hooks-util';
+import { ChangeAspectRatio } from './Modals';
+import type { RootState } from '../redux';
+import { HLSChatView } from './HLSChatView';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+
+interface HLSViewerScreenContentProps {}
+
+export const HLSViewerScreenContent: React.FC<
+  HLSViewerScreenContentProps
+> = ({}) => {
+  const isPipModeActive = useSelector(
+    (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+  );
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+  }));
+
+  const {
+    modalVisibleType: modalVisible,
+    handleModalVisibleType: setModalVisible,
+  } = useModalType();
+
+  useHMSSessionStoreListeners();
+
+  useHMSRoleChangeRequest();
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <HMSStatusBar barStyle={'light-content'} />
+
+      <SafeAreaView
+        style={[
+          styles.container,
+          hmsRoomStyles.container,
+          isLandscapeOrientation ? styles.landscapeContainer : null,
+        ]}
+      >
+        <HLSPlayerContainer />
+
+        <HLSChatView />
+      </SafeAreaView>
+
+      {isPipModeActive ? null : (
+        <>
+          <LeaveRoomBottomSheet />
+
+          <PreviewForRoleChangeModal />
+
+          <ChatAndParticipantsBottomSheet />
+
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={modalVisible === ModalTypes.HLS_PLAYER_ASPECT_RATIO}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            <ChangeAspectRatio
+              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
+            />
+          </DefaultModal>
+        </>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    position: 'relative',
+  },
+  landscapeContainer: {
+    flexDirection: 'row',
+  },
+});