Refactor settings screen

components/AppInfoFooter.js

@@ -0,0 +1,31 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { colors, Text } from 'react-native-elements';
+import Constants from 'expo-constants';
+
+import { getAppName } from '../utils/Device';
+
+const AppInfoFooter = () => (
+ <View style={styles.container}>
+ <Text style={styles.text}>{`${getAppName()}`}</Text>
+ <Text style={styles.text}>{`${Constants.nativeAppVersion} (${Constants.nativeBuildVersion})`}</Text>
+ <Text style={styles.text}>{`Expo Version: ${Constants.expoVersion}`}</Text>
+ </View>
+);
+
+const styles = StyleSheet.create({
+ container: {
+ margin: 15
+ },
+ text: {
+ color: colors.grey4,
+ fontSize: 15
+ }
+});
+
+export default AppInfoFooter;

components/BrowserListItem.js

@@ -0,0 +1,34 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import React from 'react';
+import { ListItem } from 'react-native-elements';
+import PropTypes from 'prop-types';
+
+import { openBrowser } from '../utils/WebBrowser';
+
+const BrowserListItem = ({item, index}) => (
+ <ListItem
+ title={item.name}
+ leftIcon={item.icon}
+ topDivider={index === 0}
+ bottomDivider
+ chevron
+ onPress={() => {
+ openBrowser(item.url);
+ }}
+ />
+);
+
+BrowserListItem.propTypes = {
+ item: PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ icon: PropTypes.string.isRequired,
+ url: PropTypes.string.isRequired
+ }).isRequired,
+ index: PropTypes.number.isRequired
+};
+
+export default BrowserListItem;

components/ButtonListItem.js

@@ -0,0 +1,25 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Button } from 'react-native-elements';
+import PropTypes from 'prop-types';
+
+const ButtonListItem = ({item}) => (
+ <Button {...item} buttonStyle={{ ...styles.button, ...item.buttonStyle }} />
+);
+
+ButtonListItem.propTypes = {
+ item: PropTypes.object.isRequired
+};
+
+const styles = StyleSheet.create({
+ button: {
+ margin: 15
+ }
+});
+
+export default ButtonListItem;

components/ServerListItem.js

@@ -0,0 +1,79 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import React from 'react';
+import { StyleSheet, View, Platform } from 'react-native';
+import { Button, Icon, ListItem, colors } from 'react-native-elements';
+import PropTypes from 'prop-types';
+
+import { getIconName } from '../utils/Icons';
+
+const ServerListItem = ({item, index, activeServer, onDelete, onPress}) => {
+ let title;
+ let subtitle;
+ if (item.info) {
+ title = item.info.ServerName;
+ subtitle = `Version: ${item.info.Version}\n${item.urlString}`;
+ } else {
+ title = item.url.host;
+ subtitle = `Version: unknown\n${item.urlString}`;
+ }
+
+ return (
+ <ListItem
+ title={title}
+ titleStyle={styles.title}
+ subtitle={subtitle}
+ leftElement={(
+ index === activeServer ? (
+ <Icon
+ name={getIconName('checkmark')}
+ type='ionicon'
+ size={24}
+ containerStyle={styles.leftElement}
+ />
+ ) : (
+ <View style={styles.leftElement} />
+ )
+ )}
+ rightElement={(
+ <Button
+ type='clear'
+ icon={{
+ name: getIconName('trash'),
+ type: 'ionicon',
+ iconStyle: styles.deleteButton
+ }}
+ onPress={() => onDelete(index)}
+ />
+ )}
+ topDivider={index === 0}
+ bottomDivider
+ onPress={() => onPress(index)}
+ />
+ );
+};
+
+ServerListItem.propTypes = {
+ item: PropTypes.object.isRequired,
+ index: PropTypes.number.isRequired,
+ activeServer: PropTypes.number.isRequired,
+ onDelete: PropTypes.func.isRequired,
+ onPress: PropTypes.func.isRequired
+};
+
+const styles = StyleSheet.create({
+ title: {
+ marginBottom: 2
+ },
+ leftElement: {
+ width: 12
+ },
+ deleteButton: {
+ color: Platform.OS === 'ios' ? colors.platform.ios.error : colors.platform.android.error
+ }
+});
+
+export default ServerListItem;

constants/Links.js

@@ -7,6 +7,7 @@ import { Platform } from 'react-native';
 
 export default [
  {
+ key: 'links-website',
  name: 'Jellyfin Website',
  url: 'https://jellyfin.org/',
  icon: {
@@ -15,6 +16,7 @@ export default [
  }
  },
  {
+ key: 'links-documentation',
  name: 'Documentation',
  url: 'https://docs.jellyfin.org',
  icon: {
@@ -23,6 +25,7 @@ export default [
  }
  },
  {
+ key: 'links-source',
  name: 'Source Code',
  url: 'https:/jellyfin/jellyfin-expo',
  icon: {
@@ -31,6 +34,7 @@ export default [
  }
  },
  {
+ key: 'links-feature',
  name: 'Request a Feature',
  url: 'https://features.jellyfin.org/',
  icon: {
@@ -39,6 +43,7 @@ export default [
  }
  },
  {
+ key: 'links-issue',
  name: 'Report an Issue',
  url: 'https:/jellyfin/jellyfin-expo/issues',
  icon: {

models/ServerModel.js

@@ -0,0 +1,53 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { action, autorun, computed, observable } from 'mobx';
+import { ignore } from 'mobx-sync';
+import { task } from 'mobx-task';
+
+import JellyfinValidator from '../utils/JellyfinValidator';
+
+export default class ServerModel {
+ @observable
+ id
+
+ @observable
+ url
+
+ @ignore
+ @observable
+ online = false
+
+ @observable
+ info
+
+ constructor(id, url, info) {
+ this.id = id;
+ this.url = url;
+ this.info = info;
+
+ autorun(() => {
+ this.urlString = this.parseUrlString;
+ });
+ }
+
+ @computed
+ get parseUrlString() {
+ try {
+ return JellyfinValidator.getServerUrl(this);
+ } catch (ex) {
+ return '';
+ }
+ }
+
+ @task
+ async fetchInfo() {
+ return await JellyfinValidator.fetchServerInfo(this)
+ .then(action(info => {
+ this.online = true;
+ this.info = info;
+ }));
+ }
+}

navigation/AppNavigator.js

@@ -71,7 +71,7 @@ const AppNavigator = observer(() => {
  return (
  <NavigationContainer theme={theme}>
  <Stack.Navigator
- initialRouteName={(rootStore.serverStore.servers.length > 0) ? 'Main' : 'AddServer'}
+ initialRouteName={(rootStore.serverStore.servers?.length > 0) ? 'Main' : 'AddServer'}
  headerMode='screen'
  screenOptions={{ headerShown: false }}
  >
@@ -95,7 +95,7 @@ const AppNavigator = observer(() => {
  name='AddServer'
  component={AddServerScreen}
  options={{
- headerShown: rootStore.serverStore.servers.length > 0,
+ headerShown: rootStore.serverStore.servers?.length > 0,
  title: 'Add Server'
  }}
  />

package.json

@@ -26,6 +26,7 @@
  "mobx": "^5.15.4",
  "mobx-react": "^6.2.2",
  "mobx-sync": "^3.0.0",
+ "mobx-task": "^2.0.1",
  "prop-types": "^15.7.2",
  "react": "16.9.0",
  "react-lifecycles-compat": "^3.0.4",