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

package/src/components/HLSClosedCaptionControl.tsx

@@ -0,0 +1,140 @@
+import React, { useRef, useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useSelector } from 'react-redux';
+import {
+  useHMSHLSPlayerPlaybackState,
+  HMSHLSPlayerPlaybackState,
+} from '@100mslive/react-native-hms';
+import type { HMSHLSPlayer } from '@100mslive/react-native-hms';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { CCIcon } from '../Icons';
+import type { RootState } from '../redux';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+
+interface HLSClosedCaptionControlProps {
+  playerRef: React.RefObject<React.ElementRef<typeof HMSHLSPlayer>>;
+  onPress?: () => void;
+}
+
+export const _HLSClosedCaptionControl: React.FC<
+  HLSClosedCaptionControlProps
+> = ({ playerRef, onPress }) => {
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isStreamUrlPresent = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.room?.hlsStreamingState.variants?.[0]?.hlsStreamUrl
+  );
+
+  let startedPlayingFirstTimeRef = useRef(false);
+  let prevPlaybackStateRef = useRef(HMSHLSPlayerPlaybackState.UNKNOWN);
+  const playbackState = useHMSHLSPlayerPlaybackState();
+
+  if (
+    prevPlaybackStateRef.current === HMSHLSPlayerPlaybackState.UNKNOWN &&
+    playbackState === HMSHLSPlayerPlaybackState.PLAYING
+  ) {
+    prevPlaybackStateRef.current = playbackState;
+    startedPlayingFirstTimeRef.current = true;
+  }
+
+  const [isCCSupported, setIsCCSupported] = useState(false);
+  const [isCCEnabled, setIsCCEnabled] = useState(true);
+
+  const handleCCBtnPress = () => {
+    if (!isCCSupported || !playerRef.current) {
+      return;
+    }
+    onPress?.();
+    if (isCCEnabled) {
+      playerRef.current.disableClosedCaption();
+      setIsCCEnabled(false);
+    } else {
+      playerRef.current.enableClosedCaption();
+      setIsCCEnabled(true);
+    }
+  };
+
+  React.useEffect(() => {
+    if (
+      isHLSStreamingOn &&
+      isStreamUrlPresent &&
+      startedPlayingFirstTimeRef.current &&
+      playerRef.current
+    ) {
+      let mounted = true;
+
+      playerRef.current
+        .isClosedCaptionSupported()
+        .then((supported) => {
+          if (mounted) {
+            setIsCCSupported(supported);
+          }
+        })
+        .catch(() => {});
+      playerRef.current
+        .isClosedCaptionEnabled()
+        .then((enabled) => {
+          if (mounted) {
+            setIsCCEnabled(enabled);
+          }
+        })
+        .catch(() => {});
+
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [
+    isHLSStreamingOn,
+    isStreamUrlPresent,
+    startedPlayingFirstTimeRef.current,
+  ]);
+
+  if (!isCCSupported) {
+    return null;
+  }
+
+  return (
+    <GestureDetector gesture={Gesture.Tap()}>
+      <TouchableOpacity
+        onPress={handleCCBtnPress}
+        style={[styles.icon, styles.gap]}
+      >
+        <CCIcon size="medium" enabled={isCCEnabled} />
+      </TouchableOpacity>
+    </GestureDetector>
+  );
+};
+
+export const HLSClosedCaptionControl = React.memo(_HLSClosedCaptionControl);
+
+const styles = StyleSheet.create({
+  detectorContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 5,
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  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/HLSDistanceFromLive.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Platform, StyleSheet, Text } from 'react-native';
+import {
+  HMSHLSPlaylistType,
+  useHMSHLSPlayerStat,
+  useIsHLSStreamLive,
+} from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+
+import { useHMSRoomStyle } from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+import type { RootState } from '../redux';
+
+interface HLSDistanceFromLiveProps {}
+
+export const _HLSDistanceFromLive: React.FC<HLSDistanceFromLiveProps> = () => {
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isDVRStream = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.hlsStreamingState.variants?.[0]?.playlistType ===
+      HMSHLSPlaylistType.DVR
+  );
+  const isStreamLive = useIsHLSStreamLive();
+
+  if (!isHLSStreamingOn || !isDVRStream || isStreamLive) return null;
+
+  return <HLSDistanceFromLiveText />;
+};
+
+export const HLSDistanceFromLiveText = React.memo(() => {
+  const distanceFromLiveEdge = useHMSHLSPlayerStat('distanceFromLive');
+
+  const textStyle = useHMSRoomStyle((_, typography) => ({
+    fontFamily: `${typography.font_family}-Regular`,
+    color: '#ffffff',
+  }));
+
+  const hhmmss = msToHMS(
+    distanceFromLiveEdge - Platform.select({ default: 10000, ios: 1000 })
+  );
+
+  return <Text style={[styles.text, textStyle]}>-{hhmmss}</Text>;
+});
+
+export const HLSDistanceFromLive = React.memo(_HLSDistanceFromLive);
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    marginLeft: 8,
+  },
+});
+
+function msToHMS(ms: number) {
+  const seconds = Math.floor((ms / 1000) % 60);
+  const minutes = Math.floor((ms / 1000 / 60) % 60);
+  const hours = Math.floor((ms / 1000 / 3600) % 24);
+
+  const humanized = [
+    minutes > 0 ? minutes.toString().padStart(2, '0') : '0',
+    seconds.toString().padStart(2, '0'),
+  ];
+
+  if (hours > 0) humanized.unshift(hours.toString().padStart(2, '0'));
+
+  return humanized.join(':');
+}

package/src/components/HLSFullScreenControl.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { MaximizeIcon, MinimizeIcon } from '../Icons';
+import type { RootState } from '../redux';
+import { setHlsFullScreen } from '../redux/actions';
+
+interface HLSFullScreenControlProps {
+  onPress?: () => void;
+}
+
+export const _HLSFullScreenControl: React.FC<HLSFullScreenControlProps> = ({
+  onPress,
+}) => {
+  const dispatch = useDispatch();
+  const hlsFullScreen = useSelector(
+    (state: RootState) => state.app.hlsFullScreen
+  );
+  const toggleFullScreen = () => {
+    onPress?.();
+    dispatch(setHlsFullScreen(!hlsFullScreen));
+  };
+
+  return (
+    <GestureDetector gesture={Gesture.Tap()}>
+      <TouchableOpacity onPress={toggleFullScreen} style={styles.icon}>
+        {hlsFullScreen ? (
+          <MinimizeIcon size="medium" />
+        ) : (
+          <MaximizeIcon size="medium" />
+        )}
+      </TouchableOpacity>
+    </GestureDetector>
+  );
+};
+
+export const HLSFullScreenControl = React.memo(_HLSFullScreenControl);
+
+const styles = StyleSheet.create({
+  icon: {
+    padding: 4,
+    alignSelf: 'flex-start',
+  },
+});

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/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

@@ -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%',