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

A React Native UI for @theoplayer/react-native

import { ActionButton } from './actionbutton/ActionButton';
import React, { useCallback, useContext } from 'react';
import { PlayerContext } from '../util/PlayerContext';
import { PlaySvg } from './svg/PlaySvg';
import { PauseSvg } from './svg/PauseSvg';
import { ReplaySvg } from './svg/ReplaySvg';
import { usePaused } from '../../hooks/usePaused';
import { useEnded } from '../../hooks/useEnded';
import { TestIDs } from '../../utils/TestIDs';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * The default play/pause button for the `react-native-theoplayer` UI.
 */
export function PlayButton(props) {
  const {
    icon,
    style
  } = props;
  const playSvg = icon?.play ?? /*#__PURE__*/_jsx(PlaySvg, {});
  const pauseSvg = icon?.pause ?? /*#__PURE__*/_jsx(PauseSvg, {});
  const replaySvg = icon?.replay ?? /*#__PURE__*/_jsx(ReplaySvg, {});
  const {
    player
  } = useContext(PlayerContext);
  const paused = usePaused();
  const ended = useEnded();
  const togglePlayPause = useCallback(() => {
    if (player.paused) {
      player.play();
    } else {
      player.pause();
    }
  }, [player]);
  return /*#__PURE__*/_jsx(ActionButton, {
    style: style,
    testID: props.testID ?? TestIDs.PLAY_BUTTON,
    touchable: true,
    svg: ended ? replaySvg : paused ? playSvg : pauseSvg,
    onPress: togglePlayPause
  });
}
//# sourceMappingURL=PlayButton.js.map