@theoplayer/react-native-ui/lib/module/ui/components/controlbar/ControlBar.js

A React Native UI for @theoplayer/react-native

import React, { useContext } from 'react';
import { View } from 'react-native';
import { PlayerContext } from '../util/PlayerContext';

/**
 * The default style for the control bar.
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const DEFAULT_CONTROL_BAR_STYLE = {
  flexDirection: 'row',
  justifyContent: 'flex-end'
};
/**
 * A control bar component that renders all children horizontally.
 */
export const ControlBar = props => {
  const {
    style,
    children,
    pointerEvents
  } = props;
  const context = useContext(PlayerContext);
  return /*#__PURE__*/_jsx(View, {
    ...props,
    pointerEvents: pointerEvents ?? 'box-none',
    style: [DEFAULT_CONTROL_BAR_STYLE, {
      height: context.style.dimensions.controlBarHeight
    }, style],
    children: children
  });
};
/**
 * A control bar that can only render 3 properties in the left/middle/right. This is used to create controls in the center of the player.
 */
export const CenteredControlBar = props => {
  const {
    style,
    middle,
    left,
    right
  } = props;
  const context = useContext(PlayerContext);
  return /*#__PURE__*/_jsxs(ControlBar, {
    style: [{
      height: context.style.dimensions.centerControlBarHeight,
      width: '60%',
      justifyContent: 'space-between'
    }, style],
    children: [/*#__PURE__*/_jsx(View, {
      style: {
        height: context.style.dimensions.centerControlBarHeight
      },
      children: left
    }), middle, /*#__PURE__*/_jsx(View, {
      style: {
        height: context.style.dimensions.centerControlBarHeight
      },
      children: right
    })]
  });
};
//# sourceMappingURL=ControlBar.js.map