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

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

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Platform, View } from 'react-native';
import { useSelector } from 'react-redux';
import { WebView } from 'react-native-webview';
import { PipModes } from '../utils/types';
import { useIsLandscapeOrientation } from '../utils/dimension';
import { WhiteboardFullScreenButton } from './WhiteboardFullScreenButton';
export const _Whiteboard = /*#__PURE__*/React.forwardRef((_props, webviewRef) => {
  const localWebviewRef = React.useRef(null);
  React.useImperativeHandle(webviewRef, () => localWebviewRef, []);
  const whiteboardUrl = useSelector(state => {
    var _state$hmsStates$whit;
    return (_state$hmsStates$whit = state.hmsStates.whiteboard) === null || _state$hmsStates$whit === void 0 ? void 0 : _state$hmsStates$whit.url;
  });

  //#region reconnection handling
  let webviewError = React.useRef(null);
  const webviewErrorHandler = React.useCallback(e => {
    webviewError.current = e.nativeEvent;
  }, []);
  if (Platform.OS === 'ios') {
    const prevReconnecting = React.useRef(null);
    const reconnecting = useSelector(state => state.hmsStates.reconnecting);
    if (whiteboardUrl && localWebviewRef.current !== null && webviewError.current !== null && prevReconnecting.current === true && reconnecting === false) {
      localWebviewRef.current.reload();
    }
    prevReconnecting.current = reconnecting;
  }
  //#endregion reconnection handling

  const isPipModeActive = useSelector(state => state.app.pipModeStatus === PipModes.ACTIVE);
  const isLandscapeOrientation = useIsLandscapeOrientation();
  if (!whiteboardUrl) return null;
  return /*#__PURE__*/React.createElement(View, {
    style: {
      flex: 1,
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(HMSWebView, {
    ref: localWebviewRef,
    url: whiteboardUrl,
    onError: webviewErrorHandler
  }), isPipModeActive || isLandscapeOrientation ? null : /*#__PURE__*/React.createElement(WhiteboardFullScreenButton, null));
});
export const Whiteboard = /*#__PURE__*/React.memo(_Whiteboard);

//# Memoized Webview

const _HMSWebView = /*#__PURE__*/React.forwardRef((props, webviewRef) => {
  return /*#__PURE__*/React.createElement(WebView, _extends({
    ref: webviewRef,
    source: {
      uri: props.url
    },
    style: {
      flex: 1
    },
    javaScriptEnabled: true,
    domStorageEnabled: true
  }, props));
});
const HMSWebView = /*#__PURE__*/React.memo(_HMSWebView);
//# sourceMappingURL=Whiteboard.js.map