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

A React Native UI for @theoplayer/react-native

import React 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
  } = props;
  return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
    children: context => /*#__PURE__*/_jsx(View, {
      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;
  return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
    children: context => /*#__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