react-native-video-basic-controls/src/MediaControls.style.ts

Controls for the React Native <Video> component at react-native-video.

import { StyleSheet } from 'react-native';

const containerBackgroundColor = 'rgba(45, 59, 62, 0.3)';
const white = '#fff';

export default StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: containerBackgroundColor,
    bottom: 0,
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    left: 0,
    paddingHorizontal: 20,
    paddingVertical: 13,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  controlsRow: {
    alignItems: 'center',
    alignSelf: 'stretch',
    flex: 1,
    justifyContent: 'space-evenly',
    flexDirection: 'row',
  },
  fullScreenContainer: {
    alignItems: 'center',
    alignSelf: 'stretch',
    justifyContent: 'center',
    paddingLeft: 20,
  },
  playButton: {
    alignItems: 'center',
    height: 50,
    justifyContent: 'center',
    width: 50,
    borderRadius: 50,
    // backgroundColor:'grey'
  },
  playIcon: {
    height: 22,
    resizeMode: 'contain',
    width: 22,
  },
  progressColumnContainer: {
    flex: 1,
  },
  progressContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginBottom: -25,
  },
  progressSlider: {
    alignSelf: 'stretch',
  },
  replayIcon: {
    height: 20,
    resizeMode: 'stretch',
    width: 25,
  },
  thumb: {
    borderRadius: 50,
    height: 20,
    width: 20,
  },
  timeRow: {
    alignSelf: 'stretch',
  },
  timerLabel: {
    color: white,
    fontSize: 12,
  },
  timerLabelsContainer: {
    alignSelf: 'stretch',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: -7,
  },
  toolbar: {
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'flex-end',
  },
  toolbarRow: {
    alignItems: 'flex-start',
    flexDirection: 'row',
    justifyContent: 'flex-start',
  },
  track: {
    borderRadius: 1,
    height: 5,
  },
  VSliderLeft: {
    position: 'absolute',
    top: 10,
    bottom: 10,
    left: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  VSliderRight: {
    position: 'absolute',
    top: 10,
    bottom: 10,
    right: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  swipeSlider: {
    flex: 1,
    // backgroundColor: 'transparent',
    // backgroundColor: '#000',
    height: '100%',
    width: '100%',
  },
  playerButt: {
    flex: 1,
    alignItems: 'center',
  },
});