Initial commit

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+    "env": {
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "rules": {
+    }
+}

.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"eslint.enable": true
+}

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Platform, StatusBar, StyleSheet, View } from 'react-native';
+import { AppLoading } from 'expo';
+import { Asset } from 'expo-asset';
+import Constants from 'expo-constants';
+import * as Font from 'expo-font';
+import { Ionicons } from '@expo/vector-icons';
+
+import AppNavigator from './navigation/AppNavigator';
+import Colors from './constants/Colors'
+
+export default class App extends React.Component {
+  state = {
+    isLoadingComplete: false,
+  };
+
+  render() {
+    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
+      return (
+        <AppLoading
+          startAsync={this._loadResourcesAsync}
+          onError={this._handleLoadingError}
+          onFinish={this._handleFinishLoading}
+          autoHideSplash={false}
+        />
+      );
+    } else {
+      return (
+        <View style={styles.container}>
+          {Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}
+          <AppNavigator />
+        </View>
+      );
+    }
+  }
+
+  _loadImagesAsync = () => {
+    const images = [
+      require('./assets/images/splash.png'),
+      require('./assets/images/logowhite.png')
+    ];
+    return images.map(image => Asset.fromModule(image).downloadAsync());
+  }
+
+  _loadResourcesAsync = async () => {
+    return Promise.all([
+      Font.loadAsync({
+        // This is the font that we are using for our tab bar
+        ...Ionicons.font
+      }),
+      ...this._loadImagesAsync()
+    ]);
+  };
+
+  _handleLoadingError = error => {
+    // In this case, you might want to report the error to your error
+    // reporting service, for example Sentry
+    console.warn(error);
+  };
+
+  _handleFinishLoading = () => {
+    this.setState({ isLoadingComplete: true });
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.backgroundColor,
+    // Padding for the StatusBar
+    paddingTop: Constants.statusBarHeight || 0
+  }
+});

__tests__/App-test.js

@@ -0,0 +1,22 @@
+import 'react-native';
+import React from 'react';
+import App from '../App';
+import renderer from 'react-test-renderer';
+import NavigationTestUtils from 'react-navigation/NavigationTestUtils';
+
+describe('App snapshot', () => {
+  jest.useFakeTimers();
+  beforeEach(() => {
+    NavigationTestUtils.resetInternalState();
+  });
+
+  it('renders the loading screen', async () => {
+    const tree = renderer.create(<App />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders the root without loading screen', async () => {
+    const tree = renderer.create(<App skipLoadingScreen />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "Jellyfin",
+    "slug": "jellyfin-expo",
+    "privacy": "unlisted",
+    "sdkVersion": "34.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "primaryColor": "#00a4dc",
+    "icon": "./assets/images/icon.png",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#101010"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

babel.config.js

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

components/TabBarIcon.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Ionicons } from '@expo/vector-icons';
+
+import Colors from '../constants/Colors';
+
+export default class TabBarIcon extends React.Component {
+  render() {
+    return (
+      <Ionicons
+        name={this.props.name}
+        size={26}
+        style={{ marginBottom: -3 }}
+        color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
+      />
+    );
+  }
+}

constants/Colors.js

@@ -0,0 +1,18 @@
+const backgroundColor = '#101010';
+const headerTintColor = '#fff';
+const tintColor = '#00a4dc';
+
+export default {
+  backgroundColor,
+  tintColor,
+  headerTintColor,
+  tabIconDefault: '#ccc',
+  tabIconSelected: tintColor,
+  tabBar: '#fefefe',
+  errorBackground: 'red',
+  errorText: '#fff',
+  warningBackground: '#EAEB5E',
+  warningText: '#666804',
+  noticeBackground: tintColor,
+  noticeText: '#fff',
+};

constants/Layout.js

@@ -0,0 +1,12 @@
+import { Dimensions } from 'react-native';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default {
+  window: {
+    width,
+    height,
+  },
+  isSmallDevice: width < 375,
+};

constants/Storage.js

@@ -0,0 +1,5 @@
+const prefix = 'org.jellyfin.expo';
+
+export default {
+  Servers: `${prefix}:Servers`
+}

navigation/AppNavigator.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createAppContainer, createSwitchNavigator } from 'react-navigation';
+
+import MainTabNavigator from './MainTabNavigator';
+import AddServerScreen from '../screens/AddServerScreen';
+import ServerLoadingScreen from '../screens/ServerLoadingScreen';
+
+export default createAppContainer(createSwitchNavigator({
+  ServerLoading: ServerLoadingScreen,
+  AddServer: AddServerScreen,
+  Main: MainTabNavigator
+}, {
+  initialRouteName: 'ServerLoading'
+}));

navigation/MainTabNavigator.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
+
+import Colors from '../constants/Colors'
+import TabBarIcon from '../components/TabBarIcon';
+import HomeScreen from '../screens/HomeScreen';
+import SettingsScreen from '../screens/SettingsScreen';
+
+const defaultNavigationOptions = {
+  headerStyle: {
+    backgroundColor: Colors.backgroundColor
+  },
+  headerTintColor: Colors.headerTintColor
+}
+
+const HomeStack = createStackNavigator({
+  Home: HomeScreen,
+}, {
+  defaultNavigationOptions
+});
+
+HomeStack.navigationOptions = {
+  tabBarLabel: 'Home',
+  // eslint-disable-next-line react/display-name
+  tabBarIcon: ({ focused }) => (
+    <TabBarIcon
+      focused={focused}
+      name={
+        Platform.OS === 'ios'
+          ? 'ios-tv'
+          : 'md-tv'
+      }
+    />
+  ),
+};
+
+const SettingsStack = createStackNavigator({
+  Settings: SettingsScreen,
+}, {
+  defaultNavigationOptions
+});
+
+SettingsStack.navigationOptions = {
+  tabBarLabel: 'Settings',
+  // eslint-disable-next-line react/display-name
+  tabBarIcon: ({ focused }) => (
+    <TabBarIcon
+      focused={focused}
+      name={
+        Platform.OS === 'ios'
+          ? 'ios-options'
+          : 'md-options'
+      }
+    />
+  ),
+};
+
+export default createBottomTabNavigator({
+  HomeStack,
+  SettingsStack,
+}, {
+  tabBarOptions: {
+    activeTintColor: Colors.tabIconSelected,
+    inactiveTintColor: Colors.tabIconDefault,
+    style: {
+      backgroundColor: Colors.backgroundColor
+    },
+    // Force toolbar label to be under the icon
+    adaptive: false
+  }
+});