From 91476ed5b6bad57e69ab66051b1744ecde37f782 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 20 Jun 2020 22:49:51 +0200 Subject: [PATCH] Add image caching layer --- app.json | 2 +- .../project.pbxproj | 4 ++- .../xcschemes/JellyfinAudioPlayer.xcscheme | 2 +- ios/Podfile.lock | 29 +++++++++++++++++++ package-lock.json | 5 ++++ package.json | 4 ++- src/components/App.tsx | 2 +- src/screens/Albums/components/Album.tsx | 3 +- src/screens/Albums/components/Albums.tsx | 3 +- src/screens/Player/components/NowPlaying.tsx | 5 ++-- 10 files changed, 50 insertions(+), 9 deletions(-) diff --git a/app.json b/app.json index c63f606..ac99af4 100644 --- a/app.json +++ b/app.json @@ -1,4 +1,4 @@ { "name": "JellyfinAudioPlayer", - "displayName": "JellyfinAudioPlayer" + "displayName": "Audio Player" } \ No newline at end of file diff --git a/ios/JellyfinAudioPlayer.xcodeproj/project.pbxproj b/ios/JellyfinAudioPlayer.xcodeproj/project.pbxproj index 382b280..15eb174 100644 --- 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; diff --git a/ios/JellyfinAudioPlayer.xcodeproj/xcshareddata/xcschemes/JellyfinAudioPlayer.xcscheme b/ios/JellyfinAudioPlayer.xcodeproj/xcshareddata/xcschemes/JellyfinAudioPlayer.xcscheme index 14c04b3..6b06247 100644 --- a/ios/JellyfinAudioPlayer.xcodeproj/xcshareddata/xcschemes/JellyfinAudioPlayer.xcscheme +++ b/ios/JellyfinAudioPlayer.xcodeproj/xcshareddata/xcschemes/JellyfinAudioPlayer.xcscheme @@ -41,7 +41,7 @@ 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 diff --git a/package-lock.json b/package-lock.json index c80652a..4c022a6 100644 --- 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", diff --git a/package.json b/package.json index 37fe316..794c3e7 100644 --- 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", diff --git a/src/components/App.tsx b/src/components/App.tsx index fbb4791..0cef05e 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -39,7 +39,7 @@ export default class App extends Component { return ( - + diff --git a/src/screens/Albums/components/Album.tsx b/src/screens/Albums/components/Album.tsx index bc3f8db..1121258 100644 --- 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; 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; diff --git a/src/screens/Albums/components/Albums.tsx b/src/screens/Albums/components/Albums.tsx index cdec58b..32c5314 100644 --- 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; diff --git a/src/screens/Player/components/NowPlaying.tsx b/src/screens/Player/components/NowPlaying.tsx index 2fb1d50..9773534 100644 --- 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;