lbry-android/app/src/styles/filePage.js
2018-09-24 14:19:34 +01:00

210 lines
4 KiB
JavaScript

import { StyleSheet, Dimensions } from 'react-native';
import Colors from './colors';
const screenDimension = Dimensions.get('window');
const screenWidth = screenDimension.width;
const containedMediaHeight = ((screenWidth * 9) / 16); // 16:9 display ratio
const containedMediaHeightWithControls = containedMediaHeight + 17;
const filePageStyle = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
pageContainer: {
flex: 1
},
divider: {
backgroundColor: Colors.LighterGrey,
width: '100%',
height: 1,
marginTop: 4,
marginBottom: 20
},
innerPageContainer: {
flex: 1,
marginBottom: 60
},
innerPageContainerFsMode: {
flex: 1,
marginBottom: 0
},
mediaContainer: {
alignItems: 'center',
width: screenWidth,
height: containedMediaHeightWithControls
},
emptyClaimText: {
fontFamily: 'Metropolis-Regular',
textAlign: 'center',
fontSize: 20,
marginLeft: 16,
marginRight: 16
},
scrollContainer: {
flex: 1,
marginTop: -16
},
scrollContent: {
paddingTop: 10
},
scrollContainerActions: {
flex: 1
},
title: {
fontFamily: 'Metropolis-Bold',
fontSize: 24,
marginTop: 12,
marginLeft: 20,
marginRight: 20,
marginBottom: 12
},
channelName: {
fontFamily: 'Metropolis-SemiBold',
fontSize: 20,
marginLeft: 20,
marginRight: 20,
marginBottom: 20,
color: Colors.LbryGreen
},
description: {
color: Colors.DescriptionGrey,
fontFamily: 'Metropolis-Regular',
fontSize: 16,
lineHeight: 20,
marginLeft: 20,
marginRight: 20,
marginBottom: 16
},
thumbnail: {
width: screenWidth,
height: containedMediaHeight,
justifyContent: 'center',
alignItems: 'center'
},
downloadButton: {
position: 'absolute',
top: '40%'
},
player: {
position: 'absolute',
left: 0,
top: 0,
zIndex: 301,
elevation: 21
},
containedPlayer: {
width: '100%',
height: containedMediaHeightWithControls,
},
containedPlayerLandscape: {
width: '100%',
height: '100%'
},
fullscreenPlayer: {
width: '100%',
height: '100%',
right: 0,
bottom: 0
},
playerBackground: {
position: 'absolute',
left: 0,
top: 0,
zIndex: 300,
elevation: 20,
backgroundColor: Colors.Black
},
containedPlayerBackground: {
width: '100%',
height: containedMediaHeight,
},
fullscreenPlayerBackground: {
width: '100%',
height: '100%',
right: 0,
bottom: 0
},
filePriceContainer: {
backgroundColor: '#61fcd8',
justifyContent: 'center',
position: 'absolute',
right: 16,
top: 16,
width: 56,
height: 24,
borderRadius: 4
},
filePriceText: {
fontFamily: 'Metropolis-Bold',
fontSize: 12,
textAlign: 'center',
color: '#0c604b'
},
actions: {
paddingLeft: 16,
paddingRight: 16,
paddingTop: 16,
paddingBottom: 8,
marginTop: -14,
width: '100%',
},
actionButton: {
alignSelf: 'flex-start',
backgroundColor: Colors.White,
paddingLeft: 24,
paddingRight: 24
},
loading: {
position: 'absolute',
top: '40%'
},
busyContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
dmcaContainer: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingLeft: 24,
paddingRight: 24
},
dmcaText: {
fontFamily: 'Metropolis-Regular',
fontSize: 18,
lineHeight: 24
},
dmcaLink: {
color: Colors.LbryGreen,
fontFamily: 'Metropolis-Regular',
fontSize: 18,
lineHeight: 24,
marginTop: 24
},
infoText: {
fontFamily: 'Metropolis-Regular',
fontSize: 20,
textAlign: 'center',
marginLeft: 10
},
viewer: {
position: 'absolute',
flex: 1,
left: 0,
right: 0,
top: 0,
bottom: 60,
zIndex: 100
},
link: {
color: Colors.LbryGreen
},
linkTapped: {
color: "rgba(64, 184, 154, .2)"
}
});
export default filePageStyle;