initial add

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

.gitignore

@@ -0,0 +1,18 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store
+
+# more stuff
+*.bash
+

App.js

@@ -0,0 +1,28 @@
+// Nav stuff
+
+import { createAppContainer } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+
+// Screens one per file to keep things clean
+
+import HomeScreen from './src/screens/HomeScreen';
+import AboutScreen from './src/screens/AboutScreen';
+import SettingsScreen from './src/screens/SettingsScreen';
+import FilesScreen from './src/screens/FilesScreen';
+
+// Clean up of code before I fix the last little issue with it
+
+
+const AppNavigator = createStackNavigator(
+  {
+    Home: HomeScreen,
+    About: AboutScreen,
+    Files: FilesScreen,
+    Settings: SettingsScreen,
+  },
+  {
+    initialRouteName: 'Home',
+  }
+);
+
+export default createAppContainer(AppNavigator);

app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "csrv",
+    "slug": "csrv",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": [
+      "android"
+    ],
+    "version": "1.2.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "package": "com.rpicsrv.csrv",
+      "versionCode": 2
+    }    
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package.json

@@ -0,0 +1,31 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "0.1.5",
+    "axios": "^0.19.2",
+    "expo": "~36.0.0",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-elements": "^1.2.7",
+    "react-native-gesture-handler": "^1.5.3",
+    "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "0.6.0",
+    "react-native-screens": "2.0.0-alpha.12",
+    "react-native-web": "~0.11.7",
+    "react-navigation": "^4.0.10",
+    "react-navigation-stack": "^2.0.16"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "babel-preset-expo": "~8.0.0"
+  },
+  "private": true
+}

src/screens/AboutScreen.js

@@ -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;

src/screens/FilesScreen.js

@@ -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;

src/screens/HomeScreen.js

@@ -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;

src/screens/SettingsScreen.js

@@ -0,0 +1,63 @@
+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);
+      this.state = { text: "" };
+    }
+  
+    //2
+    changeText(inputText) {
+      const formattedText = "\u{1F632}" + inputText;
+      this.setState({ text: formattedText });
+    }
+  
+    //3
+    endEditing() {
+      const formattedText = this.state.text + "\u{2708}";
+      this.setState({ text: formattedText });
+    }
+    
+    static navigationOptions = ({ navigation }) => {
+      return {
+        title: navigation.getParam('otherParam', 'Settings'),
+        headerStyle: {
+          backgroundColor: '#3333ff',
+        },
+        headerTintColor: '#fff',
+      };
+    };
+   
+  
+   
+    render() {
+      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 name="IP" style={{borderWidth: 1, width: 100}} ></TextInput>
+      <Text>{"\n"}</Text>
+      
+         
+        
+        <Button title="Save" type="outline"
+        />
+        </View>
+  
+      );
+    }
+  }
+
+  export default SettingsScreen;