kake26/rpimc
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor update

Browse source
This commit is contained in:
kake26 2021-12-29 11:42:34 -06:00
parent 37dea6c47a
commit ed27109a51
7 changed files with 366 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/screens/AboutScreen.js
View file

@ -4,8 +4,9 @@ import {
Text, Text,
} from 'react-native'; } from 'react-native';
class AboutScreen extends React.Component { const AboutScreen = ({ navigation }) => {
static navigationOptions = ({ navigation }) => {
const navigationOptions = ({ navigation }) => {
return { return {
title: navigation.getParam('otherParam', 'About'), title: navigation.getParam('otherParam', 'About'),
headerStyle: { headerStyle: {
@ -15,14 +16,14 @@ class AboutScreen extends React.Component {
}; };
}; };
render() {
return ( return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>About Screen{"\n"}{"\n"} <Text>About Screen{"\n"}{"\n"}
RPI Media Center Control v 1.0 beta</Text> RPI Media Center Control v 1.0 beta</Text>
</View> </View>
); );
} }
}
export default AboutScreen; export default AboutScreen;

28
src/screens/AboutScreen.js.old Executable file
View file

@ -0,0 +1,28 @@
import React from 'react';
import {
View,
Text,
} from 'react-native';
class AboutScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'About'),
headerStyle: {
backgroundColor: '#3333ff',
},
headerTintColor: '#fff',
};
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>About Screen{"\n"}{"\n"}
RPI Media Center Control v 1.0 beta</Text>
</View>
);
}
}
export default AboutScreen;

84
src/screens/FilesScreen.js
View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import { import {
@ -22,53 +22,51 @@ function play(name) {
} }
class FilesScreen extends React.Component {
constructor(props){
super(props); const FilesScreen = ({ navigation }) => {
this.state ={ data: []};
} const [movies, setValue] = useState('');
static navigationOptions = ({ navigation }) => {
return { const navigationOptions = ({ navigation }) => {
title: navigation.getParam('otherParam', 'File Selection'), return {
headerStyle: { title: navigation.getParam('otherParam', 'File Selection'),
backgroundColor: '#3333ff', headerStyle: {
}, backgroundColor: '#3333ff',
headerTintColor: '#fff', },
headerTintColor: '#fff',
};
}; };
};
useEffect(() => {
componentDidMount() {
axios.get('http://192.168.1.158:8080/list/')
.then(res => {
this.setState({
data: res.data.data,
})
})
} axios.get('http://192.168.1.158:8080/list/')
.then(res => {
this.setState({
data: res.data.data,
render() { })
let movies = this.state.data })
});
return ( return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Pick a movie</Text> <Text>Pick a movie</Text>
<FlatList <FlatList
keyExtractor={movies => movies} keyExtractor={movies => movies}
data={movies} data={movies}
renderItem={({ item }) => { renderItem={({ item }) => {
return <Button title={item} type="outline" onPress = {() => play(item)} return <Button title={item} type="outline" onPress = {() => play(item)}
/> />
}} }}
/> />
</View> </View>
);
} );
}
}
export default FilesScreen; export default FilesScreen;

74
src/screens/FilesScreen.js.old Executable file
View file

@ -0,0 +1,74 @@
import React from 'react';
import axios from 'axios';
import {
View,
Text,
FlatList, // Solves the problem with the 5 movie limit in the app
} from 'react-native';
// these imports make headers and buttons look better
import {
Header,
Button,
} from 'react-native-elements';
function play(name) {
// Play handler
axios.get('http://192.168.1.158:8080/play/'+name)
.then(res => {
// Still don't care about response
})
}
class FilesScreen extends React.Component {
constructor(props){
super(props);
this.state ={ data: []};
}
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'File Selection'),
headerStyle: {
backgroundColor: '#3333ff',
},
headerTintColor: '#fff',
};
};
componentDidMount() {
axios.get('http://192.168.1.158:8080/list/')
.then(res => {
this.setState({
data: res.data.data,
})
})
}
render() {
let movies = this.state.data
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Pick a movie</Text>
<FlatList
keyExtractor={movies => movies}
data={movies}
renderItem={({ item }) => {
return <Button title={item} type="outline" onPress = {() => play(item)}
/>
}}
/>
</View>
);
}
}
export default FilesScreen;

113
src/screens/HomeScreen.js
View file

@ -1,4 +1,6 @@
import React from 'react'; //import React from 'react';
import React, { useState, useEffect } from 'react';
import { useAsyncStorage } from '@react-native-async-storage/async-storage';
import { import {
Button, Button,
} from 'react-native-elements'; } from 'react-native-elements';
@ -19,56 +21,71 @@ axios.get('http://192.168.1.158:8080/'+name)
}) })
} }
class HomeScreen extends React.Component { const HomeScreen = ({ navigation }) => {
static navigationOptions = ({ navigation }) => {
return { const navigationOptions = ({ navigation }) => {
title: navigation.getParam('otherParam', 'RPI Media Center Control'), return {
headerStyle: { title: navigation.getParam('otherParam', 'RPI Media Center Control'),
backgroundColor: '#3333ff', headerStyle: {
}, backgroundColor: '#3333ff',
headerTintColor: '#fff', },
}; headerTintColor: '#fff',
}; };
};
render() {
return ( const [value, setValue] = useState('value');
const { getItem, setItem } = useAsyncStorage('@storage_key');
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Controls</Text> const readItemFromStorage = async () => {
const item = await getItem();
<Button setValue(item);
title="Select file to play" type="outline" };
onPress={() => this.props.navigation.navigate('Files')}
/><Text>{"\n"}</Text> const writeItemToStorage = async newValue => {
await setItem(newValue);
<View style={{flexDirection: 'row' }}> setValue(newValue);
<Button };
icon={<AntDesign name="pausecircleo" size={24} color="black" />} title="Pause" type="outline"
onPress = {() => bp('pause/')} useEffect(() => {
/> readItemFromStorage();
<Button }, []);
icon={<AntDesign name="playcircleo" size={24} color="black" />} title="Resume" type="outline"
onPress = {() => bp('resume/')} return (
/> <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Button <Text>Server IP: {value}</Text>
icon={<MaterialCommunityIcons name="stop-circle-outline" size={24} color="black" />} title="Stop" type="outline" <Text>Controls</Text>
onPress = {() => bp('stop/')}
/><Text>{"\n"}</Text> <Button
</View> title="Select file to play" type="outline"
<Text>{"\n"}</Text> onPress={() => navigation.navigate('Files')} //navigationOptions.navigate('Files')}
<Button
title="Settings" type="outline"
onPress={() => this.props.navigation.navigate('Settings')}
/><Text>{"\n"}</Text> /><Text>{"\n"}</Text>
<View style={{flexDirection: 'row' }}>
<Button
icon={<AntDesign name="pausecircleo" size={24} color="black" />} title="Pause" type="outline"
onPress = {() => bp('pause/')}
/>
<Button <Button
title="About" type="outline" icon={<AntDesign name="playcircleo" size={24} color="black" />} title="Resume" type="outline"
onPress={() => this.props.navigation.navigate('About')} onPress = {() => bp('resume/')}
/> />
</View> <Button
icon={<MaterialCommunityIcons name="stop-circle-outline" size={24} color="black" />} title="Stop" type="outline"
); onPress = {() => bp('stop/')}
} /><Text>{"\n"}</Text>
} </View>
<Text>{"\n"}</Text>
<Button
title="Settings" type="outline"
onPress={() => navigation.navigate('Settings')}
/><Text>{"\n"}</Text>
<Button
title="About" type="outline"
onPress={() => navigation.navigate('About')}
/>
</View>
);
}
export default HomeScreen; export default HomeScreen;

74
src/screens/HomeScreen.js.old Executable file
View file

@ -0,0 +1,74 @@
import React from 'react';
import {
Button,
} from 'react-native-elements';
import {
View,
Text,
} from 'react-native';
// play,pause,stop icons
import { AntDesign } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import axios from 'axios'; // Took a while to figure out how to use it, but its simpler then the
function bp(name) {
// Button press handler important
axios.get('http://192.168.1.158:8080/'+name)
.then(res => {
// We don't care fore now
})
}
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'RPI Media Center Control'),
headerStyle: {
backgroundColor: '#3333ff',
},
headerTintColor: '#fff',
};
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Controls</Text>
<Button
title="Select file to play" type="outline"
onPress={() => this.props.navigation.navigate('Files')}
/><Text>{"\n"}</Text>
<View style={{flexDirection: 'row' }}>
<Button
icon={<AntDesign name="pausecircleo" size={24} color="black" />} title="Pause" type="outline"
onPress = {() => bp('pause/')}
/>
<Button
icon={<AntDesign name="playcircleo" size={24} color="black" />} title="Resume" type="outline"
onPress = {() => bp('resume/')}
/>
<Button
icon={<MaterialCommunityIcons name="stop-circle-outline" size={24} color="black" />} title="Stop" type="outline"
onPress = {() => bp('stop/')}
/><Text>{"\n"}</Text>
</View>
<Text>{"\n"}</Text>
<Button
title="Settings" type="outline"
onPress={() => this.props.navigation.navigate('Settings')}
/><Text>{"\n"}</Text>
<Button
title="About" type="outline"
onPress={() => this.props.navigation.navigate('About')}
/>
</View>
);
}
}
export default HomeScreen;

78
src/screens/SettingsScreen.js.old Executable file
View file

@ -0,0 +1,78 @@
import React from 'react';
import {
View,
Text,
TextInput,
} from 'react-native';
import {
Header,
Button,
} from 'react-native-elements';
class SettingsScreen extends React.Component {
// 1
constructor(props) {
super(props);
let initv = this.getMyStringValue;
this.state = { value : initv };
}
setStringValue = async (value) => {
try {
await AsyncStorage.setItem('key', value)
} catch(e) {
// save error
}
//console.log('Done.')
}
getMyStringValue = async () => {
try {
return await AsyncStorage.getItem('@key')
} catch(e) {
// read error
}
//console.log('Done.')
//this.state.value =rv;
}
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'Settings'),
headerStyle: {
backgroundColor: '#3333ff',
},
headerTintColor: '#fff',
};
};
render() {
let value = this.state.value;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Settings Screen{"\n"}{"\n"}
RPI Media Center Control v 1.0 beta Settings{"\n"}</Text>
<Text>{"\n"}server IP/hostname: </Text>
<TextInput onChangeText={newValue => this.setStringValue(newValue)} style={{borderWidth: 1, width: 100}} >{value}</TextInput>
<Text>{"\n"}</Text>
</View>
);
}
}
export default SettingsScreen;