@theoplayer/react-native-ui/lib/module/ui/components/button/FullscreenButton.js

A React Native UI for @theoplayer/react-native

import React, { useCallback, useContext } from 'react';
import { PresentationMode } from 'react-native-theoplayer';
import { ActionButton } from './actionbutton/ActionButton';
import { PlayerContext } from '../util/PlayerContext';
import { FullscreenExitSvg } from './svg/FullscreenExitSvg';
import { FullscreenEnterSvg } from './svg/FullscreenEnterSvg';
import { usePresentationMode } from '../../hooks/usePresentationMode';
import { TestIDs } from '../../utils/TestIDs';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * The button to enable/disable fullscreen for the `react-native-theoplayer` UI.
 */
export function FullscreenButton(props) {
  const {
    icon
  } = props;
  const {
    player
  } = useContext(PlayerContext);
  const presentationMode = usePresentationMode();
  const toggleFullScreen = useCallback(() => {
    switch (player.presentationMode) {
      case 'picture-in-picture':
      case 'inline':
        player.presentationMode = PresentationMode.fullscreen;
        break;
      case 'fullscreen':
        player.presentationMode = PresentationMode.inline;
        break;
    }
  }, [player]);
  const enterSvg = icon?.enter ?? /*#__PURE__*/_jsx(FullscreenEnterSvg, {});
  const exitSvg = icon?.exit ?? /*#__PURE__*/_jsx(FullscreenExitSvg, {});
  return /*#__PURE__*/_jsx(ActionButton, {
    style: props.style,
    testID: props.testID ?? TestIDs.FULLSCREEN_BUTTON,
    svg: presentationMode === 'fullscreen' ? exitSvg : enterSvg,
    onPress: toggleFullScreen
  });
}
//# sourceMappingURL=FullscreenButton.js.map