2018-09-01 23:04:50 +02:00
|
|
|
import { Dimensions, PixelRatio, StyleSheet } from 'react-native';
|
2018-06-19 22:58:26 +02:00
|
|
|
import Colors from './colors';
|
2018-03-11 16:32:13 +01:00
|
|
|
|
2018-08-28 21:23:48 +02:00
|
|
|
const screenDimension = Dimensions.get('window');
|
|
|
|
const screenWidth = screenDimension.width;
|
|
|
|
const screenHeight = screenDimension.height;
|
2018-09-01 23:04:50 +02:00
|
|
|
const screenWidthPixels = PixelRatio.getPixelSizeForLayoutSize(screenWidth);
|
|
|
|
const screenHeightPixels = PixelRatio.getPixelSizeForLayoutSize(screenHeight);
|
2018-08-28 21:23:48 +02:00
|
|
|
// calculate thumbnail width and height based on device's aspect ratio
|
|
|
|
const horizontalMargin = 48; // left and right margins (24 + 24)
|
2018-09-01 23:04:50 +02:00
|
|
|
const verticalMargin = (screenWidthPixels > 720 && screenHeightPixels > 1920) ? 0 : ((screenWidthPixels <= 720) ? 20 : 16);
|
2018-08-28 21:23:48 +02:00
|
|
|
const mediaWidth = screenWidth - horizontalMargin;
|
2018-09-01 23:04:50 +02:00
|
|
|
const mediaHeight = ((screenWidth / screenHeight) * ((screenWidthPixels <= 720) ? screenWidth : mediaWidth)) - verticalMargin;
|
2018-08-28 21:23:48 +02:00
|
|
|
|
2018-03-11 16:32:13 +01:00
|
|
|
const discoverStyle = StyleSheet.create({
|
|
|
|
container: {
|
2018-05-25 00:47:55 +02:00
|
|
|
flex: 1
|
2018-03-11 16:32:13 +01:00
|
|
|
},
|
|
|
|
scrollContainer: {
|
2018-05-26 01:20:44 +02:00
|
|
|
flex: 1,
|
2018-06-05 20:52:10 +02:00
|
|
|
marginBottom: 60,
|
|
|
|
paddingTop: 12
|
|
|
|
},
|
|
|
|
trendingContainer: {
|
|
|
|
flex: 1,
|
|
|
|
marginBottom: 60,
|
|
|
|
paddingTop: 30
|
2018-03-11 16:32:13 +01:00
|
|
|
},
|
2018-05-25 00:47:55 +02:00
|
|
|
busyContainer: {
|
|
|
|
flex: 1,
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
flexDirection: 'row'
|
|
|
|
},
|
2018-03-11 16:32:13 +01:00
|
|
|
title: {
|
2018-03-22 07:26:04 +01:00
|
|
|
fontFamily: 'Metropolis-Regular',
|
2018-03-11 16:32:13 +01:00
|
|
|
fontSize: 20,
|
|
|
|
textAlign: 'center',
|
2018-05-25 00:47:55 +02:00
|
|
|
marginLeft: 10
|
2018-03-11 16:32:13 +01:00
|
|
|
},
|
|
|
|
categoryName: {
|
2018-06-19 22:58:26 +02:00
|
|
|
fontFamily: 'Metropolis-SemiBold',
|
2018-03-11 16:32:13 +01:00
|
|
|
fontSize: 20,
|
|
|
|
marginLeft: 24,
|
|
|
|
marginTop: 16,
|
|
|
|
marginBottom: 16,
|
2018-06-19 22:58:26 +02:00
|
|
|
color: Colors.Black
|
2018-03-11 16:32:13 +01:00
|
|
|
},
|
|
|
|
fileItem: {
|
|
|
|
marginLeft: 24,
|
|
|
|
marginRight: 24,
|
|
|
|
marginBottom: 48
|
|
|
|
},
|
2018-08-28 21:23:48 +02:00
|
|
|
fileItemMedia: {
|
|
|
|
width: mediaWidth,
|
2018-09-24 15:59:00 +02:00
|
|
|
height: mediaHeight,
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center'
|
2018-08-28 21:23:48 +02:00
|
|
|
},
|
2018-03-11 16:32:13 +01:00
|
|
|
fileItemName: {
|
2018-03-22 07:26:04 +01:00
|
|
|
fontFamily: 'Metropolis-Bold',
|
2018-03-11 16:32:13 +01:00
|
|
|
marginTop: 8,
|
2018-06-07 07:57:41 +02:00
|
|
|
fontSize: 18
|
2018-03-11 16:32:13 +01:00
|
|
|
},
|
|
|
|
channelName: {
|
2018-03-22 07:26:04 +01:00
|
|
|
fontFamily: 'Metropolis-SemiBold',
|
2018-06-07 07:57:41 +02:00
|
|
|
fontSize: 16,
|
2018-03-11 16:32:13 +01:00
|
|
|
marginTop: 4,
|
2018-06-19 22:58:26 +02:00
|
|
|
color: Colors.LbryGreen
|
2018-03-11 16:32:13 +01:00
|
|
|
},
|
|
|
|
filePriceContainer: {
|
|
|
|
backgroundColor: '#61fcd8',
|
|
|
|
justifyContent: 'center',
|
|
|
|
position: 'absolute',
|
|
|
|
right: 16,
|
|
|
|
top: 16,
|
|
|
|
width: 56,
|
|
|
|
height: 24,
|
2018-06-19 22:58:26 +02:00
|
|
|
borderRadius: 4
|
2018-03-11 16:32:13 +01:00
|
|
|
},
|
|
|
|
filePriceText: {
|
2018-03-22 07:26:04 +01:00
|
|
|
fontFamily: 'Metropolis-Bold',
|
2018-03-11 16:32:13 +01:00
|
|
|
fontSize: 12,
|
|
|
|
textAlign: 'center',
|
2018-03-22 07:26:04 +01:00
|
|
|
color: '#0c604b'
|
2018-03-11 16:32:13 +01:00
|
|
|
},
|
2018-08-29 22:19:49 +02:00
|
|
|
drawerMenuButton: {
|
|
|
|
height: '100%',
|
|
|
|
justifyContent: 'center'
|
|
|
|
},
|
2018-03-11 16:32:13 +01:00
|
|
|
drawerHamburger: {
|
2018-08-29 22:19:49 +02:00
|
|
|
marginLeft: 16,
|
|
|
|
marginRight: 16
|
2018-04-09 20:39:35 +02:00
|
|
|
},
|
|
|
|
rightHeaderIcon: {
|
|
|
|
marginRight: 16
|
2018-03-30 13:02:19 +02:00
|
|
|
},
|
|
|
|
overlay: {
|
|
|
|
flex: 1,
|
|
|
|
opacity: 1,
|
|
|
|
backgroundColor: '#222222',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
padding: 32,
|
|
|
|
position: 'absolute',
|
|
|
|
left: 0,
|
|
|
|
top: 0,
|
|
|
|
width: '100%',
|
|
|
|
height: '100%'
|
|
|
|
},
|
|
|
|
overlayText: {
|
2018-09-05 15:43:39 +02:00
|
|
|
color: Colors.White,
|
2018-03-30 13:02:19 +02:00
|
|
|
fontSize: 14,
|
|
|
|
textAlign: 'center',
|
|
|
|
fontFamily: 'Metropolis-Regular'
|
2018-09-05 15:43:39 +02:00
|
|
|
},
|
|
|
|
rewardTitleContainer: {
|
|
|
|
alignItems: 'center',
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'space-between'
|
|
|
|
},
|
|
|
|
rewardIcon: {
|
2018-11-21 11:09:54 +01:00
|
|
|
color: Colors.Red,
|
2018-09-05 15:43:39 +02:00
|
|
|
flex: 0.1,
|
|
|
|
textAlign: 'right',
|
|
|
|
marginTop: 6
|
|
|
|
},
|
|
|
|
rewardTitle: {
|
|
|
|
flex: 0.9
|
2018-12-01 23:07:21 +01:00
|
|
|
},
|
|
|
|
menuText: {
|
|
|
|
fontFamily: 'Metropolis-Regular',
|
|
|
|
fontSize: 16
|
|
|
|
},
|
|
|
|
titleText: {
|
|
|
|
fontFamily: 'Metropolis-Regular'
|
2018-03-11 16:32:13 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
export default discoverStyle;
|