mirror of
https://github.com/LBRYFoundation/lbry-android.git
synced 2025-08-30 16:51:26 +00:00
ceeef6324e
* file page download progress display and media loading / playback tweaks * Moved MediaPlayer component to be a child of the top-level view * hide tracking controls when player controls are hidden in fullscreen mode
118 lines
2.1 KiB
JavaScript
118 lines
2.1 KiB
JavaScript
import { StyleSheet } from 'react-native';
|
|
import Colors from './colors';
|
|
|
|
const mediaPlayerStyle = StyleSheet.create({
|
|
player: {
|
|
flex: 1,
|
|
width: '100%',
|
|
height: '100%'
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
paddingBottom: 16
|
|
},
|
|
fullscreenContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center'
|
|
},
|
|
progress: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
width: '100%',
|
|
height: 3
|
|
},
|
|
innerProgressCompleted: {
|
|
height: 4,
|
|
backgroundColor: Colors.LbryGreen,
|
|
},
|
|
innerProgressRemaining: {
|
|
height: 4,
|
|
backgroundColor: '#2c2c2c',
|
|
},
|
|
trackingControls: {
|
|
height: 3,
|
|
position: 'absolute',
|
|
bottom: 14
|
|
},
|
|
containedTrackingControls: {
|
|
left: 0,
|
|
width: '100%'
|
|
},
|
|
fullscreenTrackingControls: {
|
|
alignSelf: 'center',
|
|
width: '70%'
|
|
},
|
|
playerControls: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
playerControlsContainer: {
|
|
backgroundColor: 'transparent',
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
playPauseButton: {
|
|
position: 'absolute',
|
|
width: 64,
|
|
height: 64,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
toggleFullscreenButton: {
|
|
position: 'absolute',
|
|
width: 36,
|
|
height: 36,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
right: 0,
|
|
bottom: 14,
|
|
},
|
|
elapsedDuration: {
|
|
fontFamily: 'Metropolis-Regular',
|
|
position: 'absolute',
|
|
left: 8,
|
|
bottom: 24,
|
|
fontSize: 12,
|
|
color: '#ffffff'
|
|
},
|
|
totalDuration: {
|
|
fontFamily: 'Metropolis-Regular',
|
|
position: 'absolute',
|
|
right: 40,
|
|
bottom: 24,
|
|
fontSize: 12,
|
|
color: '#ffffff'
|
|
},
|
|
seekerCircle: {
|
|
borderRadius: 12,
|
|
position: 'relative',
|
|
top: 14,
|
|
left: 15,
|
|
height: 12,
|
|
width: 12,
|
|
backgroundColor: '#40c0a9'
|
|
},
|
|
seekerHandle: {
|
|
backgroundColor: 'transparent',
|
|
position: 'absolute',
|
|
height: 36,
|
|
width: 48,
|
|
bottom: 0,
|
|
marginLeft: -16
|
|
},
|
|
bigSeekerCircle: {
|
|
borderRadius: 24,
|
|
position: 'relative',
|
|
top: 8,
|
|
left: 15,
|
|
height: 24,
|
|
width: 24,
|
|
backgroundColor: '#40c0a9'
|
|
}
|
|
});
|
|
|
|
export default mediaPlayerStyle;
|