Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2026-03-28 15:22:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

now playing layout mock-up

Browse Source
This commit is contained in:
austinried
2021-06-14 11:14:58 +09:00
parent b38ba9aaed
commit 1b78acd5fa
5 changed files with 186 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/NowPlayingLayout.tsx Normal file
View File

@@ -0,0 +1,127 @@
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
const NowPlayingLayout = () => {
return (
<View style={{ // background
backgroundColor: 'darkblue',
flex: 1,
}}>
{/* top bar */}
<View style={{
height: 70,
flexDirection: 'row',
}}>
<View style={{ width: 70, height: 70, backgroundColor: 'grey' }}></View>
<View style={{ flex: 1, alignItems: 'center', height: 70, }}>
<View style={{ flex: 1 }}></View>
<Text style={styles.text}>Playing from Your Library</Text>
<Text style={styles.text}>Songs</Text>
<View style={{ flex: 1 }}></View>
</View>
<View style={{ width: 70, height: 70, backgroundColor: 'grey' }}></View>
</View>
{/* album art */}
<View style={{
flex: 5,
// backgroundColor: 'darkorange',
alignItems: 'center',
}}>
<View style={{ flex: 1 }}></View>
<View style={{
width: 320,
height: 320,
backgroundColor: 'grey',
}}></View>
<View style={{ flex: 1 }}></View>
</View>
{/* song/album/artist title */}
<View style={{
flex: 1,
// backgroundColor: 'green',
alignItems: 'center',
}}>
<Text style={{ ...styles.text, fontSize: 26, }}>Name of the Song</Text>
<Text style={{ ...styles.text, fontSize: 20, fontWeight: 'normal' }}>Cool Artist</Text>
</View>
{/* seek bar */}
<View style={{
flex: 0.7,
// backgroundColor: 'red',
flexDirection: 'row',
alignItems: 'center'
}}>
<View style={{ width: 20 }}></View>
<View style={{
flex: 1,
}}>
<View>
<View style={{
backgroundColor: 'grey',
height: 3,
marginBottom: 3,
// flex: 1,
}} />
<View style={{
flexDirection: 'row'
}}>
<Text style={{ ...styles.text, fontWeight: 'normal' }}>00:00</Text>
<View style={{ flex: 1 }} />
<Text style={{ ...styles.text, fontWeight: 'normal' }}>00:00</Text>
</View>
</View>
</View>
<View style={{ width: 20 }}></View>
</View>
{/* main player controls */}
<View style={{
height: 90,
// backgroundColor: 'darkorange',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<View style={{ width: 14 }} />
<View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
<View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
<View style={{ width: 90, height: 90, backgroundColor: 'grey' }} />
<View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
<View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
<View style={{ width: 14 }} />
</View>
{/* extra controls */}
<View style={{
flex: 1,
// backgroundColor: 'green',
flexDirection: 'row',
}}>
<View style={{ width: 14 }} />
<View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
<View style={{ flex: 1 }} />
<View style={{ width: 60, height: 60, backgroundColor: 'grey' }} />
<View style={{ width: 14 }} />
</View>
</View>
);
}
const styles = StyleSheet.create({
text: {
color: 'white',
fontWeight: 'bold',
},
});
export default NowPlayingLayout;