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

package/src/components/HLSChatView.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { useHLSViewsConstraints, useHMSRoomStyleSheet } from '../hooks-util';
+import { HLSChatHeaderView } from './HLSChatHeaderView';
+import { HLSChatFooterView } from './HLSChatFooterView';
+import { HLSChatMessages } from './HLSChatMessages';
+import { HLSDescriptionPane } from './HLSDescriptionPane';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import type { RootState } from '../redux';
+import { HLSNotifications } from './HLSNotifications';
+
+export const HLSChatView = () => {
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const { chatWrapperConstraints } = useHLSViewsConstraints();
+  const hlsFullScreen = useSelector(
+    (state: RootState) => state.app.hlsFullScreen
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    wrapper: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+  }));
+
+  if (hlsFullScreen) {
+    return null;
+  }
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        bottom: isLandscapeOrientation ? undefined : 0,
+        right: 0,
+        width: chatWrapperConstraints.width,
+        height: chatWrapperConstraints.height,
+      }}
+    >
+      <View style={[{ flex: 1, position: 'relative' }, hmsRoomStyles.wrapper]}>
+        {isLandscapeOrientation ? null : <HLSChatHeaderView />}
+
+        <HLSChatMessages />
+
+        <HLSChatFooterView />
+
+        <HLSNotifications />
+
+        {/* Below is absolute positioned and only visible when state is true */}
+        {isLandscapeOrientation ? null : <HLSDescriptionPane />}
+      </View>
+    </View>
+  );
+};

package/src/components/HLSCloseMeetingControl.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { CloseIcon } from '../Icons';
+import { ModalTypes } from '../utils/types';
+import { useModalType } from '../hooks-util';
+
+interface HLSPlayerControlsProps {
+  onPress?: () => void;
+}
+
+export const _HLSCloseMeetingControl: React.FC<HLSPlayerControlsProps> = ({
+  onPress,
+}) => {
+  const { handleModalVisibleType } = useModalType();
+
+  const handleCloseBtnPress = () => {
+    onPress?.();
+    handleModalVisibleType(ModalTypes.LEAVE_ROOM);
+  };
+
+  return (
+    <GestureDetector gesture={Gesture.Tap()}>
+      <TouchableOpacity onPress={handleCloseBtnPress} style={styles.icon}>
+        <CloseIcon size="medium" />
+      </TouchableOpacity>
+    </GestureDetector>
+  );
+};
+
+export const HLSCloseMeetingControl = React.memo(_HLSCloseMeetingControl);
+
+const styles = StyleSheet.create({
+  icon: {
+    padding: 4,
+    alignSelf: 'flex-start',
+  },
+});

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/HLSDescriptionPane.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Linking, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import {
+  useHLSViewsConstraints,
+  useHMSConferencingScreenConfig,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import { HLSChatHeaderView } from './HLSChatHeaderView';
+import {
+  HLSDescriptionPaneHeader,
+  HLSDescriptionPaneHeaderHeight,
+} from './HLSDescriptionPaneHeader';
+import { HLSAnimatedDescriptionPane } from './HLSAnimatedDescriptionPane';
+import { setHlsDescriptionPaneVisible } from '../redux/actions';
+import type { RootState } from '../redux';
+
+interface HLSDescriptionPaneProps {}
+
+export const HLSDescriptionPane: React.FC<HLSDescriptionPaneProps> = () => {
+  const dispatch = useDispatch();
+  const paneVisible = useSelector(
+    (state: RootState) => state.app.hlsDescriptionPaneVisible
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    wrapper: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+    regularSurfaceMedium: {
+      fontFamily: `${typography.font_family}-Regular`,
+      color: theme.palette.on_surface_medium,
+    },
+    link: {
+      color: theme.palette.primary_bright,
+    },
+  }));
+
+  const { descriptionPaneConstraints } = useHLSViewsConstraints();
+
+  const descriptionPaneContentHeight =
+    descriptionPaneConstraints.height - HLSDescriptionPaneHeaderHeight;
+
+  const desPaneTranslationValue = useSharedValue(0);
+
+  const _closeDescriptionPane = () => {
+    dispatch(setHlsDescriptionPaneVisible(false));
+  };
+
+  const hideDescriptionPane = () => {
+    if (paneVisible) {
+      desPaneTranslationValue.value = withTiming(0, { duration: 280 }, () => {
+        runOnJS(_closeDescriptionPane)();
+      });
+    }
+  };
+
+  React.useEffect(() => {
+    if (!paneVisible) {
+      return;
+    }
+    desPaneTranslationValue.value = withTiming(1, { duration: 280 });
+    return () => {
+      cancelAnimationFrame(desPaneTranslationValue.value);
+    };
+  }, [paneVisible]);
+
+  const description = useHMSConferencingScreenConfig((confScreenConfig) => {
+    return confScreenConfig?.elements?.header?.description;
+  });
+
+  const handleLinkPress = async (url: string) => {
+    const canOpen = await Linking.canOpenURL(url);
+    if (canOpen) {
+      Linking.openURL(url);
+    }
+  };
+
+  if (!paneVisible) {
+    return null;
+  }
+
+  // TODO: for links to work, add query in manifest.xml
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        width: descriptionPaneConstraints.width,
+        height: descriptionPaneConstraints.height,
+        zIndex: 10,
+      }}
+    >
+      <HLSDescriptionPaneHeader
+        close={hideDescriptionPane}
+        animatedValue={desPaneTranslationValue}
+      />
+
+      <View style={{ flex: 1, overflow: 'hidden' }}>
+        <HLSAnimatedDescriptionPane
+          height={descriptionPaneContentHeight}
+          sharedValue={desPaneTranslationValue}
+        >
+          <ScrollView
+            style={hmsRoomStyles.wrapper}
+            contentContainerStyle={{ paddingBottom: 40 }}
+          >
+            <HLSChatHeaderView expanded={true} />
+
+            {description ? (
+              <Text
+                style={[styles.description, hmsRoomStyles.regularSurfaceMedium]}
+              >
+                {splitLinksAndContent(description, {
+                  pressHandler: handleLinkPress,
+                  style: hmsRoomStyles.link,
+                })}
+              </Text>
+            ) : null}
+          </ScrollView>
+        </HLSAnimatedDescriptionPane>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginHorizontal: 16,
+  },
+});
+
+function splitLinksAndContent(
+  text: string,
+  { pressHandler, style }: any
+): string | (string | React.ReactElement)[] {
+  // Regular expression to find links in a string
+  const pattern = /http[s]?:\/\/\S+/g;
+
+  // Find all links in the text
+  const links = text.match(pattern) || [];
+
+  if (links.length <= 0) {
+    return text;
+  }
+
+  // Split the text into an array of links and content
+  const parts = text.replace(pattern, '^<link>^').split('^');
+
+  return parts.map((p, i) => {
+    if (p !== '<link>') {
+      return p;
+    }
+    const link = links.pop();
+    return link ? (
+      <Text key={link + i} onPress={() => pressHandler(link)} style={style}>
+        {link}
+      </Text>
+    ) : (
+      p
+    );
+  });
+}

package/src/components/HLSDescriptionPaneHeader.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { ChevronIcon } from '../Icons';
+import Animated, {
+  useAnimatedStyle,
+  type SharedValue,
+  interpolate,
+} from 'react-native-reanimated';
+
+export interface HLSDescriptionPaneHeaderProps {
+  close(): void;
+  animatedValue: SharedValue<number>;
+}
+
+export const HLSDescriptionPaneHeaderHeight = 16 * 2 + 24; // vertical padding + content height
+
+export const HLSDescriptionPaneHeader: React.FC<
+  HLSDescriptionPaneHeaderProps
+> = ({ close, animatedValue }) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+      borderBottomColor: theme.palette.border_bright,
+    },
+    semiBoldSurfaceHigh: {
+      fontFamily: `${typography.font_family}-SemiBold`,
+      color: theme.palette.on_surface_high,
+    },
+  }));
+
+  const animatedChevronStyles = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          rotateZ: `${interpolate(animatedValue.value, [0, 1], [0, -180])}deg`,
+        },
+      ],
+    }),
+    []
+  );
+
+  const closeHlsDescriptionPane = () => {
+    close();
+  };
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <Text style={[styles.title, hmsRoomStyles.semiBoldSurfaceHigh]}>
+        About Session
+      </Text>
+
+      <TouchableOpacity
+        hitSlop={{ bottom: 12, left: 12, top: 12, right: 12 }}
+        onPress={closeHlsDescriptionPane}
+      >
+        <Animated.View style={animatedChevronStyles}>
+          <ChevronIcon direction="down" />
+        </Animated.View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+  },
+  title: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});

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/HLSFooter.tsx

@@ -4,7 +4,7 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { Footer } from './Footer';
 import { AnimatedHLSFooter } from './AnimatedHLSFooter';
-import { HLSChatView } from './HMSOverlayChatView';
+import { HMSOverlayChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
 import { HMSNotifications } from './HMSNotifications';
 
@@ -17,7 +17,7 @@ export const HLSFooter: React.FC<HLSFooterProps> = ({ offset }) => {
 
   return (
     <AnimatedHLSFooter offset={offset} style={styles.animatedContainer}>
-      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
+      {overlayChatVisible ? <HMSOverlayChatView offset={offset} /> : null}
 
       <HMSNotifications />
 

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',
+  },
+});