@100mslive/react-native-room-kit/lib/module/components/HLSDescriptionPane.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

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 { splitLinksAndContent } from '../utils/functions';
export const HLSDescriptionPane = () => {
  const dispatch = useDispatch();
  const paneVisible = useSelector(state => 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 => {
    var _confScreenConfig$ele;
    return confScreenConfig === null || confScreenConfig === void 0 || (_confScreenConfig$ele = confScreenConfig.elements) === null || _confScreenConfig$ele === void 0 || (_confScreenConfig$ele = _confScreenConfig$ele.header) === null || _confScreenConfig$ele === void 0 ? void 0 : _confScreenConfig$ele.description;
  });
  const handleLinkPress = async url => {
    const canOpen = await Linking.canOpenURL(url);
    if (canOpen) {
      await Linking.openURL(url);
    }
  };
  if (!paneVisible) {
    return null;
  }

  // TODO: for links to work, add query in manifest.xml

  return /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      bottom: 0,
      width: descriptionPaneConstraints.width,
      height: descriptionPaneConstraints.height,
      zIndex: 10
    }
  }, /*#__PURE__*/React.createElement(HLSDescriptionPaneHeader, {
    close: hideDescriptionPane,
    animatedValue: desPaneTranslationValue
  }), /*#__PURE__*/React.createElement(View, {
    style: {
      flex: 1,
      overflow: 'hidden'
    }
  }, /*#__PURE__*/React.createElement(HLSAnimatedDescriptionPane, {
    height: descriptionPaneContentHeight,
    sharedValue: desPaneTranslationValue
  }, /*#__PURE__*/React.createElement(ScrollView, {
    style: hmsRoomStyles.wrapper,
    contentContainerStyle: {
      paddingBottom: 40
    }
  }, /*#__PURE__*/React.createElement(HLSChatHeaderView, {
    expanded: true
  }), description ? /*#__PURE__*/React.createElement(Text, {
    style: [styles.description, hmsRoomStyles.regularSurfaceMedium]
  }, splitLinksAndContent(description, {
    pressHandler: handleLinkPress,
    style: hmsRoomStyles.link
  })) : null))));
};
const styles = StyleSheet.create({
  description: {
    fontSize: 14,
    lineHeight: 20,
    marginHorizontal: 16
  }
});
//# sourceMappingURL=HLSDescriptionPane.js.map