Resolve colors and app icon

ios/JellyfinAudioPlayer/Base.lproj/LaunchScreen.xib

@@ -13,11 +13,7 @@
             <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
-                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="BackgroundGradient" translatesAutoresizingMaskIntoConstraints="NO" id="QGC-dh-tmw">
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="AppIconWithoutBackground" translatesAutoresizingMaskIntoConstraints="NO" id="pm1-3o-5h4">
-                    <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
-                    <autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
-                </imageView>
-                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="IconWithoutBackground" translatesAutoresizingMaskIntoConstraints="NO" id="pm1-3o-5h4">
                     <rect key="frame" x="173" y="173" width="135" height="135"/>
                     <autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMaxX="YES" flexibleMinY="YES" flexibleMaxY="YES"/>
                 </imageView>
@@ -29,7 +25,6 @@
         </view>
     </objects>
     <resources>
-        <image name="BackgroundGradient" width="1080" height="1080"/>
+        <image name="AppIconWithoutBackground" width="1080" height="1080"/>
-        <image name="IconWithoutBackground" width="1080" height="1080"/>
     </resources>
 </document>

ios/JellyfinAudioPlayer/Images.xcassets/AppIconWithoutBackground.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "BackgroundGradient.pdf",
+      "filename" : "AppIcon.pdf",
       "idiom" : "universal",
       "scale" : "1x"
     },

ios/JellyfinAudioPlayer/Images.xcassets/IconWithoutBackground.imageset/Contents.json

@@ -1,24 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "IconWithoutBackground.pdf",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  },
-  "properties" : {
-    "preserves-vector-representation" : true
-  }
-}

ios/Podfile.lock

@@ -327,8 +327,6 @@ PODS:
     - React
   - RNSVG (12.1.0):
     - React
-  - RNTableView (3.0.0):
-    - React
   - SDWebImage (5.8.1):
     - SDWebImage/Core (= 5.8.1)
   - SDWebImage/Core (5.8.1)
@@ -398,7 +396,6 @@ DEPENDENCIES:
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
-  - RNTableView (from `../node_modules/react-native-tableview`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -492,8 +489,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-screens"
   RNSVG:
     :path: "../node_modules/react-native-svg"
-  RNTableView:
-    :path: "../node_modules/react-native-tableview"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -539,14 +534,13 @@ SPEC CHECKSUMS:
   React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256
   ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
   RNCAsyncStorage: d059c3ee71738c39834a627476322a5a8cd5bf36
-  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
+  RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
   RNCPicker: 55b9b4240d0a9eba8733d02616775d4040de2e7d
   RNFastImage: 35ae972d6727c84ee3f5c6897e07f84d0a3445e9
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43
   RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
-  RNTableView: e8723c30aec3b259222a12e7d05d763566286a46
   SDWebImage: e3eae2eda88578db0685a0c88597fdadd9433f05
   SDWebImageWebPCoder: 36f8f47bd9879a8aea6044765c1351120fd8e3a8
   Yoga: 3ebccbdd559724312790e7742142d062476b698e

src/components/AlphabetScroller.tsx

@@ -29,7 +29,7 @@ const Letter = styled.Text`
     text-align: center;
     padding: 1px 0;
     font-size: 12px;
-    color: salmon;
+    color: #FF3C00;
 `;
 
 interface Props {

src/components/ListButton.tsx

@@ -16,8 +16,8 @@ const Container = styled.TouchableOpacity`
 const ListButton: React.FC<TouchableOpacityProps> = ({ children, ...props }) => {
     return (
         <Container {...props}>
-            <Text style={{ color: 'salmon', fontSize: 16 }}>{children}</Text>
+            <Text style={{ color: '#FF3C00', fontSize: 16 }}>{children}</Text>
-            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill="salmon" />
+            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#FF3C00" />
         </Container>
     );
 };

src/screens/Music/stacks/Album.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { StackParams } from '../types';
 import { Text, ScrollView, Dimensions, Button, RefreshControl } from 'react-native';
 import { useGetImage } from 'utility/JellyfinApi';
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 import { useRoute, RouteProp } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import { useDispatch } from 'react-redux';
@@ -13,6 +13,7 @@ import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import usePlayAlbum from 'utility/usePlayAlbum';
 import usePlayTrack from 'utility/usePlayTrack';
 import TouchableHandler from 'components/TouchableHandler';
+import useCurrentTrack from 'utility/useCurrentTrack';
 
 type Route = RouteProp<StackParams, 'Album'>;
 
@@ -25,11 +26,17 @@ const AlbumImage = styled(FastImage)`
     margin: 10px auto;
 `;
 
-const TrackContainer = styled.View`
+const TrackContainer = styled.View<{isPlaying: boolean}>`
     padding: 15px;
     border-bottom-width: 1px;
     border-bottom-color: #eee;
     flex-direction: row;
+
+    ${props => props.isPlaying && css`
+        background-color: #FF3C0016;
+        margin: 0 -20px;
+        padding: 15px 35px;
+    `}
 `;
 
 const Album: React.FC = () => {
@@ -43,6 +50,7 @@ const Album: React.FC = () => {
     const dispatch = useDispatch();
     const getImage = useGetImage();
     const playAlbum = usePlayAlbum();
+    const currentTrack = useCurrentTrack();
 
     // Setup callbacks
     const selectAlbum = useCallback(() => { playAlbum(id); }, [playAlbum, id]);
@@ -74,8 +82,10 @@ const Album: React.FC = () => {
             <Button title="Play Album" onPress={selectAlbum} />
             {album?.Tracks?.length ? album.Tracks.map((trackId) =>
                 <TouchableHandler key={trackId} id={trackId} onPress={selectTrack}>
-                    <TrackContainer>
+                    <TrackContainer isPlaying={trackId === currentTrack?.id}>
-                        <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>{tracks[trackId]?.IndexNumber}</Text>
+                        <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>
+                            {tracks[trackId]?.IndexNumber}
+                        </Text>
                         <Text>{tracks[trackId]?.Name}</Text>
                     </TrackContainer>
                 </TouchableHandler>

src/screens/Player/components/ProgressBar.tsx

@@ -72,7 +72,7 @@ export default class ProgressBar extends Component<{}, State> {
                     maximumValue={duration || 0}
                     onValueChange={this.handleGesture}
                     onSlidingComplete={this.handleEndOfGesture}
-                    minimumTrackTintColor={'#ff8c69'}
+                    minimumTrackTintColor={'#FF3C00'}
                     disabled={!duration}
                 />
                 <NumberBar>

src/screens/Player/components/Queue.tsx

@@ -13,7 +13,7 @@ const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean }>`
 
     ${props => props.active && css`
         font-weight: 900;
-        background-color: #ff8c6922;
+        background-color: #FF3C0016;
         padding: 20px 35px;
         margin: 0 -25px;
     `}

src/screens/index.tsx

@@ -47,7 +47,7 @@ function Screens() {
                 }
             })}
             tabBarOptions={{
-                activeTintColor: 'salmon',
+                activeTintColor: '#FF3C00',
                 inactiveTintColor: 'gray',
             }}
         >