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

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

import React, { useCallback, useRef, useState, useEffect } from 'react';
import { StyleSheet, View, Keyboard, Platform } from 'react-native';
import { useSelector } from 'react-redux';
import { Easing, KeyboardState, cancelAnimation, runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { HeaderFooterHideDelayMs, PipModes } from '../utils/types';
import { Footer } from './Footer';
import { DisplayView } from './DisplayView';
import { Header } from './Header';
import { useHMSLayoutConfig, useKeyboardState } from '../hooks-util';
import { HMSStatusBar } from './StatusBar';
import { AnimatedFooter } from './AnimatedFooter';
import { AnimatedHeader } from './AnimatedHeader';
import { useIsLandscapeOrientation } from '../utils/dimension';
// import { ReconnectionView } from './ReconnectionView';

export const MeetingScreenContent = ({
  peerTrackNodes
}) => {
  const offset = useSharedValue(1);
  const timerIdRef = useRef(null);
  const [controlsHidden, setControlsHidden] = useState(false);
  const isLandscapeOrientation = useIsLandscapeOrientation();
  const prevIsLandscapeOrientation = useRef(isLandscapeOrientation);
  const isPipModeActive = useSelector(state => state.app.pipModeStatus === PipModes.ACTIVE);
  const whiteboardActive = Platform.OS === 'android' ? useSelector(state => !!state.hmsStates.whiteboard) : null;
  const {
    keyboardState
  } = useKeyboardState();
  const dismissKeyboard = useCallback(() => {
    Keyboard.dismiss();
  }, []);
  const clearTimer = useCallback(() => {
    if (timerIdRef.current !== null) {
      clearTimeout(timerIdRef.current);
      timerIdRef.current = null;
    }
  }, []);
  const toggleControls = useCallback((fromTimeout = false) => {
    'worklet';

    if (fromTimeout !== true && (keyboardState.value === KeyboardState.OPEN || keyboardState.value === KeyboardState.OPENING)) {
      runOnJS(dismissKeyboard)();
    } else {
      runOnJS(clearTimer)();
      cancelAnimation(offset);
      offset.value = withTiming(offset.value === 1 ? 0 : 1, {
        duration: 200,
        easing: Easing.ease
      }, finished => {
        if (finished) {
          runOnJS(setControlsHidden)(offset.value === 0);
        }
      });
    }
  }, [dismissKeyboard, clearTimer]);
  if (!!whiteboardActive && (isLandscapeOrientation ? offset.value === 1 : offset.value < 1)) {
    cancelAnimation(offset);
    offset.value = withTiming(isLandscapeOrientation ? 0 : 1, {
      duration: 200,
      easing: Easing.ease
    }, finished => {
      if (finished) {
        runOnJS(setControlsHidden)(offset.value === 0);
      }
    });
  }

  //#region Hiding Header & Footer when user switches from Portrait to Landscape
  if (prevIsLandscapeOrientation.current === false && isLandscapeOrientation && offset.value === 1) {
    cancelAnimation(offset);
    offset.value = withTiming(0, {
      duration: 200,
      easing: Easing.ease
    }, finished => {
      if (finished) {
        runOnJS(setControlsHidden)(offset.value === 0);
      }
    });
  }
  prevIsLandscapeOrientation.current = isLandscapeOrientation;
  //#endregion

  // Handles Auto hiding the controls for the first time
  // to make this feature discoverable
  useEffect(() => {
    if (!!whiteboardActive) {
      return;
    }
    clearTimer();
    timerIdRef.current = setTimeout(() => {
      timerIdRef.current = null;
      toggleControls(true);
    }, HeaderFooterHideDelayMs);
    return clearTimer;
  }, [clearTimer, toggleControls, !!whiteboardActive]);
  const tapGesture = Gesture.Tap().enabled(Platform.select({
    android: !whiteboardActive,
    default: true
  })).onEnd(() => toggleControls()).requireExternalGestureToFail();
  const enabledByDefault = useHMSLayoutConfig(layoutConfig => {
    var _layoutConfig$screens;
    return (layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens = layoutConfig.screens) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.preview) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.default) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.elements) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.noise_cancellation) === null || _layoutConfig$screens === void 0 ? void 0 : _layoutConfig$screens.enabled_by_default) || false;
  });
  const shouldEnableNoiseCancellation = Platform.OS === 'ios' && enabledByDefault;
  const noiseCancellationPlugin = useSelector(state => state.hmsStates.noiseCancellationPlugin);
  React.useEffect(() => {
    if (shouldEnableNoiseCancellation) {
      noiseCancellationPlugin === null || noiseCancellationPlugin === void 0 || noiseCancellationPlugin.enable();
    }
  }, []);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(HMSStatusBar, {
    hidden: controlsHidden,
    barStyle: 'light-content'
  }), /*#__PURE__*/React.createElement(GestureDetector, {
    gesture: tapGesture
  }, /*#__PURE__*/React.createElement(View, {
    collapsable: false,
    style: styles.container
  }, isPipModeActive && Platform.OS === 'android' ? null : /*#__PURE__*/React.createElement(AnimatedHeader, {
    offset: offset
  }, /*#__PURE__*/React.createElement(Header, null)), /*#__PURE__*/React.createElement(DisplayView, {
    offset: offset,
    peerTrackNodes: peerTrackNodes
  }), isPipModeActive && Platform.OS === 'android' ? null : /*#__PURE__*/React.createElement(AnimatedFooter, {
    offset: offset
  }, /*#__PURE__*/React.createElement(Footer, null)))));
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative'
  },
  takeLessSpaceAsItCan: {
    flex: 0
  },
  reconnectionWrapper: {
    flex: 1
  }
});
//# sourceMappingURL=MeetingScreenContent.js.map