mirror of
https://github.com/austinried/subtracks.git
synced 2025-12-27 00:59:28 +01:00
now playing layout mock-up
This commit is contained in:
austinried
parent
b38ba9aaed
commit
1b78acd5fa
120
App.tsx
120
App.tsx
@ -1,115 +1,13 @@
|
||||
/**
|
||||
* Sample React Native App
|
||||
* https://github.com/facebook/react-native
|
||||
*
|
||||
* Generated with the TypeScript template
|
||||
* https://github.com/react-native-community/react-native-template-typescript
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
import React from 'react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import Layout from './src/components/NowPlayingLayout';
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
Text,
|
||||
useColorScheme,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import {
|
||||
Colors,
|
||||
DebugInstructions,
|
||||
Header,
|
||||
LearnMoreLinks,
|
||||
ReloadInstructions,
|
||||
} from 'react-native/Libraries/NewAppScreen';
|
||||
|
||||
const Section: React.FC<{
|
||||
title: string;
|
||||
}> = ({children, title}) => {
|
||||
const isDarkMode = useColorScheme() === 'dark';
|
||||
const App = () => {
|
||||
return (
|
||||
<View style={styles.sectionContainer}>
|
||||
<Text
|
||||
style={[
|
||||
styles.sectionTitle,
|
||||
{
|
||||
color: isDarkMode ? Colors.white : Colors.black,
|
||||
},
|
||||
]}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.sectionDescription,
|
||||
{
|
||||
color: isDarkMode ? Colors.light : Colors.dark,
|
||||
},
|
||||
]}>
|
||||
{children}
|
||||
</Text>
|
||||
</View>
|
||||
<RecoilRoot>
|
||||
<Layout />
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const App = () => {
|
||||
const isDarkMode = useColorScheme() === 'dark';
|
||||
|
||||
const backgroundStyle = {
|
||||
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={backgroundStyle}>
|
||||
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
|
||||
<ScrollView
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
style={backgroundStyle}>
|
||||
<Header />
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: isDarkMode ? Colors.black : Colors.white,
|
||||
}}>
|
||||
<Section title="Step One">
|
||||
Edit <Text style={styles.highlight}>App.js</Text> to change this
|
||||
screen and then come back to see your edits.
|
||||
</Section>
|
||||
<Section title="See Your Changes">
|
||||
<ReloadInstructions />
|
||||
</Section>
|
||||
<Section title="Debug">
|
||||
<DebugInstructions />
|
||||
</Section>
|
||||
<Section title="Learn More">
|
||||
Read the docs to discover what to do next:
|
||||
</Section>
|
||||
<LearnMoreLinks />
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
sectionContainer: {
|
||||
marginTop: 32,
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 24,
|
||||
fontWeight: '600',
|
||||
},
|
||||
sectionDescription: {
|
||||
marginTop: 8,
|
||||
fontSize: 18,
|
||||
fontWeight: '400',
|
||||
},
|
||||
highlight: {
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
||||
12
index.js
12
index.js
@ -1,9 +1,11 @@
|
||||
/**
|
||||
* @format
|
||||
*/
|
||||
import { AppRegistry, LogBox } from 'react-native';
|
||||
|
||||
// ignore recoil's timer warning on android:
|
||||
// https://github.com/facebookexperimental/Recoil/issues/1030
|
||||
LogBox.ignoreLogs(["timer"]);
|
||||
|
||||
import {AppRegistry} from 'react-native';
|
||||
import App from './App';
|
||||
import {name as appName} from './app.json';
|
||||
import { name as appName } from './app.json';
|
||||
|
||||
|
||||
AppRegistry.registerComponent(appName, () => App);
|
||||
|
||||
40
package-lock.json
generated
40
package-lock.json
generated
@ -9,7 +9,8 @@
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"react": "17.0.1",
|
||||
"react-native": "0.64.1"
|
||||
"react-native": "0.64.1",
|
||||
"recoil": "^0.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.9",
|
||||
@ -6279,6 +6280,11 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/hamt_plus": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
|
||||
"integrity": "sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE="
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
@ -10748,6 +10754,25 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/recoil": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/recoil/-/recoil-0.3.1.tgz",
|
||||
"integrity": "sha512-KNA3DRqgxX4rRC8E7fc6uIw7BACmMPuraIYy+ejhE8tsw7w32CetMm8w7AMZa34wzanKKkev3vl3H7Z4s0QSiA==",
|
||||
"dependencies": {
|
||||
"hamt_plus": "1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.13.1"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
|
||||
@ -17989,6 +18014,11 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"hamt_plus": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
|
||||
"integrity": "sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE="
|
||||
},
|
||||
"has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
@ -21426,6 +21456,14 @@
|
||||
"resolve": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"recoil": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/recoil/-/recoil-0.3.1.tgz",
|
||||
"integrity": "sha512-KNA3DRqgxX4rRC8E7fc6uIw7BACmMPuraIYy+ejhE8tsw7w32CetMm8w7AMZa34wzanKKkev3vl3H7Z4s0QSiA==",
|
||||
"requires": {
|
||||
"hamt_plus": "1.0.2"
|
||||
}
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "17.0.1",
|
||||
"react-native": "0.64.1"
|
||||
"react-native": "0.64.1",
|
||||
"recoil": "^0.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.9",
|
||||
|
||||
127
src/components/NowPlayingLayout.tsx
Normal file
127
src/components/NowPlayingLayout.tsx
Normal 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;
|
||||
Loading…
x
Reference in New Issue
Block a user