@theoplayer/react-native-ui/lib/module/ui/components/button/PipButton.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 { PipExitSvg } from './svg/PipExitSvg';
import { PipEnterSvg } from './svg/PipEnterSvg';
import { usePresentationMode } from '../../hooks/usePresentationMode';
import { TestIDs } from '../../utils/TestIDs';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * The default button to enable picture-in-picture for the `react-native-theoplayer` UI.
 */
export function PipButton(props) {
  const {
    icon
  } = props;
  const {
    player,
    ui
  } = useContext(PlayerContext);
  const presentationMode = usePresentationMode();
  const togglePip = useCallback(() => {
    switch (player.presentationMode) {
      case 'inline':
      case 'fullscreen':
        ui.enterPip_();
        break;
      case 'picture-in-picture':
        player.presentationMode = PresentationMode.inline;
        break;
    }
  }, [player, ui]);
  const enterSvg = icon?.enter ?? /*#__PURE__*/_jsx(PipEnterSvg, {});
  const exitSvg = icon?.exit ?? /*#__PURE__*/_jsx(PipExitSvg, {});
  return /*#__PURE__*/_jsx(ActionButton, {
    style: props.style,
    testID: props.testID ?? TestIDs.PIP_BUTTON,
    svg: presentationMode === 'picture-in-picture' ? exitSvg : enterSvg,
    onPress: togglePip
  });
}
//# sourceMappingURL=PipButton.js.map