Add image caching layer

app.json

@@ -1,4 +1,4 @@
 {
   "name": "JellyfinAudioPlayer",
-  "displayName": "JellyfinAudioPlayer"
+  "displayName": "Audio Player"
 }

ios/JellyfinAudioPlayer.xcodeproj/project.pbxproj

@@ -17,6 +17,7 @@
 		2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		2DCD954D1E0B4F2C00145EB5 /* JellyfinAudioPlayerTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* JellyfinAudioPlayerTests.m */; };
 		463612208457EBB4B723000A /* libPods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 842AB597D56E84A4ACDC4735 /* libPods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.a */; };
+		4F46F441249A56FF00308470 /* main.jsbundle in Resources */ = {isa = PBXBuildFile; fileRef = 008F07F21AC5B25A0029DE68 /* main.jsbundle */; };
 		9C3FCC29E5AD02738E8E3F28 /* libPods-JellyfinAudioPlayer-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7D43C7610851B9666193E3F6 /* libPods-JellyfinAudioPlayer-tvOSTests.a */; };
 		A807E2BB233D6F9347D8A95C /* libPods-JellyfinAudioPlayer.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 71370E61E2CC6BD9372ADCF3 /* libPods-JellyfinAudioPlayer.a */; };
 		A9112B4690DCDB63E46B6C30 /* libPods-JellyfinAudioPlayer-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E35451F7979C52C1692C4C9F /* libPods-JellyfinAudioPlayer-tvOS.a */; };
@@ -341,6 +342,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				4F46F441249A56FF00308470 /* main.jsbundle in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 			);
@@ -376,7 +378,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
 		};
 		05D2621E5320B14963E6BA49 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;

ios/JellyfinAudioPlayer.xcodeproj/xcshareddata/xcschemes/JellyfinAudioPlayer.xcscheme

@@ -41,7 +41,7 @@
       </Testables>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Debug"
+      buildConfiguration = "Release"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"

ios/Podfile.lock

@@ -67,6 +67,15 @@ PODS:
     - DoubleConversion
     - glog
   - glog (0.3.5)
+  - libwebp (1.1.0):
+    - libwebp/demux (= 1.1.0)
+    - libwebp/mux (= 1.1.0)
+    - libwebp/webp (= 1.1.0)
+  - libwebp/demux (1.1.0):
+    - libwebp/webp
+  - libwebp/mux (1.1.0):
+    - libwebp/demux
+  - libwebp/webp (1.1.0)
   - OpenSSL-Universal (1.0.2.19):
     - OpenSSL-Universal/Static (= 1.0.2.19)
   - OpenSSL-Universal/Static (1.0.2.19)
@@ -304,6 +313,10 @@ PODS:
     - React
   - RNCPicker (1.6.3):
     - React
+  - RNFastImage (8.1.5):
+    - React
+    - SDWebImage (~> 5.0)
+    - SDWebImageWebPCoder (~> 0.4.1)
   - RNGestureHandler (1.6.1):
     - React
   - RNReanimated (1.9.0):
@@ -312,6 +325,12 @@ PODS:
     - React
   - RNSVG (12.1.0):
     - React
+  - SDWebImage (5.8.1):
+    - SDWebImage/Core (= 5.8.1)
+  - SDWebImage/Core (5.8.1)
+  - SDWebImageWebPCoder (0.4.1):
+    - libwebp (~> 1.0)
+    - SDWebImage/Core (~> 5.5)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -369,6 +388,7 @@ DEPENDENCIES:
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - "RNCPicker (from `../node_modules/@react-native-community/picker`)"
+  - RNFastImage (from `../node_modules/react-native-fast-image`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -387,7 +407,10 @@ SPEC REPOS:
     - Flipper-PeerTalk
     - Flipper-RSocket
     - FlipperKit
+    - libwebp
     - OpenSSL-Universal
+    - SDWebImage
+    - SDWebImageWebPCoder
     - YogaKit
 
 EXTERNAL SOURCES:
@@ -451,6 +474,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/masked-view"
   RNCPicker:
     :path: "../node_modules/@react-native-community/picker"
+  RNFastImage:
+    :path: "../node_modules/react-native-fast-image"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -478,6 +503,7 @@ SPEC CHECKSUMS:
   FlipperKit: 6dc9b8f4ef60d9e5ded7f0264db299c91f18832e
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
+  libwebp: 946cb3063cea9236285f7e9a8505d806d30e07f3
   OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355
   RCTRequired: cec6a34b3ac8a9915c37e7e4ad3aa74726ce4035
   RCTTypeSafety: 93006131180074cffa227a1075802c89a49dd4ce
@@ -504,10 +530,13 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: db711e29e5e0500d9bd21aa0c2e397efa45302b1
   RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
   RNCPicker: 1c63b084bcbcd33d159a83144543f3bda4cd1793
+  RNFastImage: 35ae972d6727c84ee3f5c6897e07f84d0a3445e9
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43
   RNScreens: 62211832af51e0aebcf6e8c36bcf7dd65592f244
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
+  SDWebImage: e3eae2eda88578db0685a0c88597fdadd9433f05
+  SDWebImageWebPCoder: 36f8f47bd9879a8aea6044765c1351120fd8e3a8
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

package-lock.json

@@ -8690,6 +8690,11 @@
         }
       }
     },
+    "react-native-fast-image": {
+      "version": "8.1.5",
+      "resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.1.5.tgz",
+      "integrity": "sha512-DoAWGLeQ2hbllummrpXH9B38OgM0TFmNYCF34F90/hdHZirqUtYHzF4QDdb/NV7ebSijHmM3mpkzct8PXtcYyg=="
+    },
     "react-native-gesture-handler": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz",

package.json

@@ -8,7 +8,8 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "build:ios": "react-native bundle --entry-file='index.ts' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
@@ -27,6 +28,7 @@
     "lodash": "^4.17.15",
     "react": "16.11.0",
     "react-native": "0.62.2",
+    "react-native-fast-image": "^8.1.5",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^1.9.0",
     "react-native-safe-area-context": "^3.0.5",

src/components/App.tsx

@@ -39,7 +39,7 @@ export default class App extends Component<State> {
 
         return (
             <Provider store={store}>
-                <PersistGate loading={null} persistor={persistedStore}>    
+                <PersistGate loading={null} persistor={persistedStore}>
                     <NavigationContainer>
                         <Routes />
                     </NavigationContainer>

src/screens/Albums/components/Album.tsx

@@ -5,6 +5,7 @@ import { Text, ScrollView, Dimensions, Button, TouchableOpacity, RefreshControl
 import { generateTrack, useGetImage } from '../../../utility/JellyfinApi';
 import styled from 'styled-components/native';
 import { useRoute, RouteProp } from '@react-navigation/native';
+import FastImage from 'react-native-fast-image';
 import { useDispatch } from 'react-redux';
 import { useTypedSelector } from '../../../store';
 import { fetchTracksByAlbum } from '../../../store/music/actions';
@@ -13,7 +14,7 @@ type Route = RouteProp<StackParams, 'Album'>;
 
 const Screen = Dimensions.get('screen');
 
-const AlbumImage = styled.Image`
+const AlbumImage = styled(FastImage)`
     border-radius: 10px;
     width: ${Screen.width * 0.6}px;
     height: ${Screen.width * 0.6}px;

src/screens/Albums/components/Albums.tsx

@@ -8,6 +8,7 @@ import { useDispatch } from 'react-redux';
 import { useTypedSelector } from '../../../store';
 import { fetchAllAlbums } from '../../../store/music/actions';
 import { useNavigation } from '@react-navigation/native';
+import FastImage from 'react-native-fast-image';
 
 const Screen = Dimensions.get('screen');
 
@@ -24,7 +25,7 @@ const AlbumItem = styled.View`
     padding: 10px;
 `;
 
-const AlbumImage = styled.Image`
+const AlbumImage = styled(FastImage)`
     border-radius: 10px;
     width: ${Screen.width / 2 - 40}px;
     height: ${Screen.width / 2 - 40}px;

src/screens/Player/components/NowPlaying.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Text, Dimensions, Image, View } from 'react-native';
+import { Text, Dimensions, View } from 'react-native';
 import useCurrentTrack from '../../../utility/useCurrentTrack';
 import styled from 'styled-components/native';
+import FastImage from 'react-native-fast-image';
 
 const Screen = Dimensions.get('screen');
 
-const Artwork = styled.Image`
+const Artwork = styled(FastImage)`
     border-radius: 10px;
     background-color: #fbfbfb;
     width: ${Screen.width * 0.8}px;