Add help modal to add server screen

App.js

@@ -21,7 +21,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import ThemeSwitcher from './components/ThemeSwitcher';
 import { useStores } from './hooks/useStores';
-import AppNavigator from './navigation/AppNavigator';
+import RootNavigator from './navigation/RootNavigator';
 import StaticScriptLoader from './utils/StaticScriptLoader';
 
 // Import i18n configuration
@@ -119,7 +119,7 @@ const App = observer(({ skipLoadingScreen }) => {
  hidden={rootStore.isFullscreen}
  />
  <NavigationContainer theme={rootStore.settingStore.theme.Navigation}>
- <AppNavigator />
+ <RootNavigator />
  </NavigationContainer>
  </ThemeProvider>
  </SafeAreaProvider>

constants/Links.js

@@ -5,6 +5,8 @@
  */
 import { getIconName } from '../utils/Icons';
 
+export const QuickStartUrl = 'https://jellyfin.org/docs/general/quick-start.html';
+
 export default [
  {
  key: 'links-website',

constants/Screens.js

@@ -4,10 +4,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 export default {
+ App: 'App',
  MainScreen: 'Main',
  AddServerScreen: 'AddServer',
  HomeScreen: 'HomeScreen',
  HomeTab: 'Home',
+ ServerHelpScreen: 'ServerHelpScreen',
  SettingsTab: 'Settings',
  ErrorScreen: 'ErrorScreen'
 };

langs/en.json

@@ -1,6 +1,7 @@
 {
  "common": {
  "cancel": "Cancel",
+ "ok": "OK",
  "unknown": "Unknown"
  },
  "headings": {
@@ -44,6 +45,11 @@
  "errorUrl": "URL: {{url}}",
  "retry": "Try again?"
  },
+ "serverHelp": {
+ "heading": "What is Jellyfin?",
+ "description": "Jellyfin is the volunteer-built media solution. It allows you to host your own media and access it from anywhere.\n\n\nIn order to use this client, you need to host your own Jellyfin server.",
+ "learnMore": "Learn more about how to host your own server"
+ },
  "settings": {
  "version": "Version: {{version}}",
  "keepAwake": "Keep Screen Awake",

navigation/RootNavigator.js

@@ -0,0 +1,38 @@
+/**
+ * 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 { enableScreens } from 'react-native-screens';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+
+import Screens from '../constants/Screens';
+import ServerHelpScreen from '../screens/ServerHelpScreen';
+
+import AppNavigator from './AppNavigator';
+
+enableScreens();
+const RootStack = createNativeStackNavigator();
+
+const RootNavigator = () => {
+ return (
+ <RootStack.Navigator
+ screenOptions={{
+ headerShown: false,
+ stackPresentation: 'modal'
+ }}
+ >
+ <RootStack.Screen
+ name={Screens.App}
+ component={AppNavigator}
+ />
+ <RootStack.Screen
+ name={Screens.ServerHelpScreen}
+ component={ServerHelpScreen}
+ />
+ </RootStack.Navigator>
+ );
+};
+
+export default RootNavigator;

screens/AddServerScreen.js

@@ -3,16 +3,20 @@
  * 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 { useNavigation } from '@react-navigation/native';
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Image, KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native';
-import { ThemeContext } from 'react-native-elements';
+import { Icon, Text, ThemeContext } from 'react-native-elements';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useTranslation } from 'react-i18next';
 
-import { useStores } from '../hooks/useStores';
 import ServerInput from '../components/ServerInput';
+import Screens from '../constants/Screens';
+import { useStores } from '../hooks/useStores';
+import { getIconName } from '../utils/Icons';
 
 const AddServerScreen = () => {
+ const navigation = useNavigation();
  const { t } = useTranslation();
  const { rootStore } = useStores();
  const { theme } = useContext(ThemeContext);
@@ -40,10 +44,32 @@ const AddServerScreen = () => {
  fadeDuration={0} // we need to adjust Android devices (https://facebook.github.io/react-native/docs/image#fadeduration) fadeDuration prop to `0` as it's default value is `300`
  />
  </View>
- <ServerInput
- label={t('addServer.address')}
- placeholder='https://jellyfin.org'
- />
+ <View>
+ <ServerInput
+ label={
+ <View style={styles.labelContainer}>
+ <Text
+ style={{
+ ...styles.label,
+ color: theme.colors.grey1
+ }}
+ >
+ {t('addServer.address')}
+ </Text>
+ <Icon
+ type='ionicon'
+ name={getIconName('help-circle')}
+ containerStyle={styles.icon}
+ color={theme.colors.black}
+ onPress={() => {
+ navigation.navigate(Screens.ServerHelpScreen);
+ }}
+ />
+ </View>
+ }
+ placeholder='https://jellyfin.org'
+ />
+ </View>
  </SafeAreaView>
  </KeyboardAvoidingView>
  );
@@ -68,6 +94,17 @@ const styles = StyleSheet.create({
  flex: 1,
  resizeMode: 'contain',
  maxWidth: '100%'
+ },
+ labelContainer: {
+ flexDirection: 'row',
+ alignItems: 'flex-end'
+ },
+ label: {
+ fontSize: 16,
+ fontWeight: 'bold'
+ },
+ icon: {
+ paddingHorizontal: 10
  }
 });
 

screens/ServerHelpScreen.js

@@ -0,0 +1,89 @@
+/**
+ * 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 { useNavigation } from '@react-navigation/native';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Image, StyleSheet, useWindowDimensions } from 'react-native';
+import { Button, Text } from 'react-native-elements';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { QuickStartUrl } from '../constants/Links';
+import { isCompact } from '../utils/Device';
+import { openBrowser } from '../utils/WebBrowser';
+
+const ServerHelpScreen = () => {
+ const navigation = useNavigation();
+ const { t } = useTranslation();
+ const window = useWindowDimensions();
+
+ return (
+ <SafeAreaView
+ style={styles.screen}
+ edges={[ 'right', 'bottom', 'left' ]}
+ >
+ {isCompact(window) ? null : <Image
+ style={styles.icon}
+ source={require('../assets/images/icon-transparent.png')}
+ fadeDuration={0} // we need to adjust Android devices (https://facebook.github.io/react-native/docs/image#fadeduration) fadeDuration prop to `0` as it's default value is `300`
+ />}
+
+ <Text h2 style={styles.heading}>
+ {t('serverHelp.heading')}
+ </Text>
+
+ <Text style={styles.text}>
+ {t('serverHelp.description')}
+ </Text>
+
+ <Button
+ style={styles.learnMoreButton}
+ title={t('serverHelp.learnMore')}
+ type='clear'
+ onPress={() => {
+ openBrowser(QuickStartUrl);
+ }}
+ />
+
+ <Button
+ title={t('common.ok')}
+ onPress={() => {
+ navigation.goBack();
+ }}
+ />
+ </SafeAreaView>
+ );
+};
+
+const styles = StyleSheet.create({
+ screen: {
+ paddingTop: 20,
+ paddingHorizontal: 15,
+ flex: 1
+ },
+ icon: {
+ height: 120,
+ width: 120,
+ alignSelf: 'center',
+ resizeMode: 'contain',
+ marginVertical: 20
+ },
+ heading: {
+ textAlign: 'center',
+ marginBottom: 20
+ },
+ text: {
+ flexGrow: 1,
+ marginHorizontal: 20,
+ textAlign: 'center',
+ lineHeight: 24
+ },
+ learnMoreButton: {
+ marginHorizontal: 40,
+ marginVertical: 20
+ }
+});
+
+export default ServerHelpScreen;