Add image caching layer

2020-06-20 22:49:51 +02:00
parent 7aceac79c5
commit 91476ed5b6
10 changed files with 50 additions and 9 deletions
--- a/app.json
+++ b/app.json
@@ -1,4 +1,4 @@
 {
  "name": "JellyfinAudioPlayer",
-  "displayName": "JellyfinAudioPlayer"
+  "displayName": "Audio Player"
 }
--- a/ios/JellyfinAudioPlayer.xcodeproj/project.pbxproj
+++ b/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;
--- a/ios/JellyfinAudioPlayer.xcodeproj/xcshareddata/xcschemes/JellyfinAudioPlayer.xcscheme
+++ b/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"
--- a/ios/Podfile.lock
+++ b/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

--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/App.tsx
+++ b/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>
--- a/src/screens/Albums/components/Album.tsx
+++ b/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;
--- a/src/screens/Albums/components/Albums.tsx
+++ b/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;
--- a/src/screens/Player/components/NowPlaying.tsx
+++ b/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;