Add rudimentary settings screen

.eslintrc.js

@@ -6,7 +6,8 @@ module.exports = {
     extends: [
         'eslint:recommended',
         'plugin:react/recommended',
-        'plugin:@typescript-eslint/eslint-recommended'
+        'plugin:@typescript-eslint/eslint-recommended',
+        // "plugin:@typescript-eslint/recommended"
     ],
     globals: {
         Atomics: 'readonly',
@@ -43,6 +44,10 @@ module.exports = {
         semi: [
             'error',
             'always'
+        ],
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "error"
         ]
     }
 };

src/screens/Player/components/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import TrackPlayer, { State as PlayerState } from 'react-native-track-player';
 import styled from 'styled-components/native';
-import { View, Text, Dimensions } from 'react-native';
+import { Text, Dimensions } from 'react-native';
 import { padStart, debounce } from 'lodash';
 import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
 
@@ -14,20 +14,24 @@ const Container = styled.View`
     position: relative;
 `;
 
-const Bar = styled.View<{ progress: number }>`
+interface ProgressProp {
+    progress: number;
+}
+
+const Bar = styled.View<ProgressProp>`
     background-color: salmon;
     height: 4px;
     border-radius: 2px;
-    width: ${props => props.progress * 100}%;
+    width: ${(props: ProgressProp) => props.progress * 100}%;
 `;
 
-const PositionIndicator = styled.View<{ progress: number }>`
+const PositionIndicator = styled.View<ProgressProp>`
     width: 20px;
     height: 20px;
     border-radius: 100px;
     border: 1px solid #eee;
     background-color: white;
-    transform: translateX(${props => props.translation ? props.translation - 20  : -10}px) translateY(-8.5px);
+    transform: translateX(-10px) translateY(-8.5px);
     position: absolute;
     top: 0;
     left: ${props => props.progress * 100}%;

src/screens/Settings/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, Text, SafeAreaView } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import styled from 'styled-components/native';
+
+const InputContainer = styled.View`
+    margin: 10px 0;
+`;
+
+const Input = styled.TextInput`
+    background-color: #fbfbfb;
+    padding: 15px;
+    margin-top: 5px;
+    border-radius: 5px;
+`;
+
+export default function Settings() {
+    
+
+    return (
+        <ScrollView>
+            <SafeAreaView>
+                <View style={{ padding: 20 }}>
+                    <Text style={{ fontSize: 36, marginBottom: 24, fontWeight: 'bold' }}>Settings</Text>
+                    <InputContainer>
+                        <Text>Jellyfin Server URL</Text>
+                        <Input placeholder="https://jellyfin.yourserver.com/" />
+                    </InputContainer>
+                    <InputContainer>
+                        <Text>Jellyfin API Key</Text>
+                        <Input placeholder="deadbeefdeadbeefdeadbeef" />
+                    </InputContainer>
+                    <InputContainer>
+                        <Text>Jellyfin User ID</Text>
+                        <Input placeholder="deadbeefdeadbeefdeadbeef" />
+                    </InputContainer>
+                </View>
+            </SafeAreaView>
+        </ScrollView>
+    );
+}

src/screens/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { createBottomTabNavigator, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
 import Player from './Player';
 import Albums from './Albums';
-
+import Settings from './Settings';
 
 const Tab = createBottomTabNavigator();
 
@@ -11,6 +11,7 @@ export default function Routes() {
         <Tab.Navigator>
             <Tab.Screen name="Now Playing" component={Player} />
             <Tab.Screen name="Albums" component={Albums} />
+            <Tab.Screen name="Settings" component={Settings} />
         </Tab.Navigator>
     );
 }