react-native-awesome-medialib/lib/commonjs/components/video_player/styles.js

A useful media selector module base on native component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.fullscreenStyle = exports.inlineStyle = exports.windowHeight = exports.windowWidth = void 0;

var _reactNative = require("react-native");

var _Colors = require("../../utils/Colors");

var _deepmerge = _interopRequireDefault(require("deepmerge"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const windowWidth = _reactNative.Dimensions.get('window').width;

exports.windowWidth = windowWidth;

const windowHeight = _reactNative.Dimensions.get('window').height;

exports.windowHeight = windowHeight;
const PROGRESS_MARGIN = 16;

const inlineStyle = _reactNative.StyleSheet.create({
  container: {},
  viewContainer: {
    width: '100%',
    height: '100%',
    position: 'relative',
    backgroundColor: _Colors.white
  },
  video: {
    width: '100%',
    height: '100%',
    backgroundColor: _Colors.black
  },
  controlContainer: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    zIndex: 2
  },
  controlPlayerWrapper: {
    position: 'absolute',
    width: 50,
    height: 50,
    top: '50%',
    left: '50%',
    transform: [{
      translateX: -25
    }, {
      translateY: -25
    }],
    overflow: 'hidden'
  },
  controlTitleWrapper: {
    paddingTop: 20,
    paddingLeft: 50
  },
  controlTitle: {
    fontSize: 22,
    fontWeight: '600',
    color: _Colors.white
  },
  controlToolBar: {
    position: 'absolute',
    width: '100%',
    height: 37,
    left: 0,
    bottom: 0,
    paddingLeft: 13,
    paddingRight: 13,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  toolBarFullscreen: {
    width: 24,
    height: 24
  },
  toolBarProgress: {
    flex: 1,
    height: 2,
    marginLeft: PROGRESS_MARGIN,
    marginRight: PROGRESS_MARGIN,
    backgroundColor: _Colors.white
  },
  toolBarProgressTrack: {
    position: 'relative',
    width: 0,
    height: '100%',
    backgroundColor: _Colors.white
  },
  toolBarTrackPoint: {
    position: 'absolute',
    top: '50%',
    right: 0,
    width: 16,
    height: 16,
    transform: [{
      translateX: 8
    }, {
      translateY: -8
    }],
    backgroundColor: _Colors.white,
    borderRadius: 16
  },
  toolBarTimeText: {
    color: _Colors.white,
    textAlign: 'center',
    fontWeight: '500',
    fontSize: 12,
    width: 47
  },
  toolBarDuration: {
    marginRight: 20
  }
});

exports.inlineStyle = inlineStyle;
const fullscreenStyle = (0, _deepmerge.default)(inlineStyle, _reactNative.StyleSheet.create({
  container: {
    position: 'absolute',
    zIndex: 3,
    top: 0,
    left: 0,
    // 伪全屏宽高互换
    width: windowHeight,
    height: windowWidth,
    backgroundColor: _Colors.black,
    transform: [{
      translateY: windowHeight * 0.5 - windowWidth * 0.5
    }, {
      translateX: windowWidth * 0.5 - windowHeight * 0.5
    }, {
      rotate: '90deg'
    }]
  },
  toolBarTimeText: {
    fontSize: 16
  }
}));
exports.fullscreenStyle = fullscreenStyle;
//# sourceMappingURL=styles.js.map