Release new version

ios/JellyfinAudioPlayer.xcodeproj/project.pbxproj

@@ -554,7 +554,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 19;
+				CURRENT_PROJECT_VERSION = 31;
 				DEVELOPMENT_TEAM = 238P3C58WC;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -588,8 +588,9 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 19;
+				CURRENT_PROJECT_VERSION = 31;
 				DEVELOPMENT_TEAM = 238P3C58WC;
 				INFOPLIST_FILE = JellyfinAudioPlayer/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -704,8 +705,8 @@
 				CLANG_WARN_SUSPICIOUS_MOVE = YES;
 				CLANG_WARN_UNREACHABLE_CODE = YES;
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				CODE_SIGN_IDENTITY = "Apple Development";
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
+				CODE_SIGN_IDENTITY = "Apple Distribution: Bureau Moeilijke Dingen BV (238P3C58WC)";
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Distribution: Bureau Moeilijke Dingen BV (238P3C58WC)";
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;

ios/JellyfinAudioPlayer/AppDelegate.m

@@ -60,9 +60,4 @@ static void InitializeFlipper(UIApplication *application) {
 #endif
 }
 
-- (void)application:(UIApplication *)application handleEventsForBackgroundURLSession:(NSString *)identifier completionHandler:(void (^)())completionHandler
-{
-  [RNFSManager setCompletionHandlerForIdentifier:identifier completionHandler:completionHandler];
-}
-
 @end

ios/JellyfinAudioPlayer/Info.plist

@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>19</string>
+	<string>31</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>

ios/JellyfinAudioPlayerTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>19</string>
+	<string>31</string>
 </dict>
 </plist>

ios/Podfile.lock

@@ -285,6 +285,8 @@ PODS:
     - React-Core
   - react-native-flipper (0.127.0):
     - React-Core
+  - react-native-netinfo (7.1.7):
+    - React-Core
   - react-native-safe-area-context (3.3.2):
     - React-Core
   - react-native-slider (4.1.12):
@@ -375,34 +377,6 @@ PODS:
     - React-Core
   - RNLocalize (2.1.7):
     - React-Core
-  - RNReanimated (2.3.1):
-    - DoubleConversion
-    - FBLazyVector
-    - FBReactNativeSpec
-    - glog
-    - RCT-Folly
-    - RCTRequired
-    - RCTTypeSafety
-    - React
-    - React-callinvoker
-    - React-Core
-    - React-Core/DevSupport
-    - React-Core/RCTWebSocket
-    - React-CoreModules
-    - React-cxxreact
-    - React-jsi
-    - React-jsiexecutor
-    - React-jsinspector
-    - React-RCTActionSheet
-    - React-RCTAnimation
-    - React-RCTBlob
-    - React-RCTImage
-    - React-RCTLinking
-    - React-RCTNetwork
-    - React-RCTSettings
-    - React-RCTText
-    - ReactCommon/turbomodule/core
-    - Yoga
   - RNScreens (3.10.1):
     - React-Core
     - React-RCTImage
@@ -468,6 +442,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-airplay-button (from `../node_modules/react-native-airplay-button`)
   - react-native-flipper (from `../node_modules/react-native-flipper`)
+  - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-track-player (from `../node_modules/react-native-track-player`)
@@ -491,7 +466,6 @@ DEPENDENCIES:
   - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNLocalize (from `../node_modules/react-native-localize`)
-  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - "RNSentry (from `../node_modules/@sentry/react-native`)"
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -558,6 +532,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-airplay-button"
   react-native-flipper:
     :path: "../node_modules/react-native-flipper"
+  react-native-netinfo:
+    :path: "../node_modules/@react-native-community/netinfo"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-slider:
@@ -604,8 +580,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-gesture-handler"
   RNLocalize:
     :path: "../node_modules/react-native-localize"
-  RNReanimated:
-    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNSentry:
@@ -649,6 +623,7 @@ SPEC CHECKSUMS:
   React-logger: 933f80c97c633ee8965d609876848148e3fef438
   react-native-airplay-button: 90c7ba52402c8e92342003b8a1ff78dfb4357a9e
   react-native-flipper: b9e2e817604af8da0d5a9ba20a8516e780e30f3c
+  react-native-netinfo: 27f287f2d191693f3b9d01a4273137fcf91c3b5d
   react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
   react-native-slider: 6e9b86e76cce4b9e35b3403193a6432ed07e0c81
   react-native-track-player: 23dd515aacf1d36a0e522ef7fdbc55f13f26d4fb
@@ -672,7 +647,6 @@ SPEC CHECKSUMS:
   RNFS: 3ab21fa6c56d65566d1fb26c2228e2b6132e5e32
   RNGestureHandler: e5c7cab5f214503dcefd6b2b0cefb050e1f51c4a
   RNLocalize: f567ea0e35116a641cdffe6683b0d212d568f32a
-  RNReanimated: da3860204e5660c0dd66739936732197d359d753
   RNScreens: 522705f2e5c9d27efb17f24aceb2bf8335bc7b8e
   RNSentry: 04bb48bfdd435f5b218cf363f89e6419e9a2460c
   RNSVG: 4ecc2e8f38b6ebe7889909570c26f3abe8059767

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@react-native-community/async-storage": "^1.12.1",
         "@react-native-community/masked-view": "^0.1.11",
+        "@react-native-community/netinfo": "^7.1.7",
         "@react-native-community/picker": "^1.8.1",
         "@react-native-community/slider": "^4.1.12",
         "@react-navigation/bottom-tabs": "^6.0.9",
@@ -3229,6 +3230,14 @@
         "react-native": ">=0.57"
       }
     },
+    "node_modules/@react-native-community/netinfo": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-7.1.7.tgz",
+      "integrity": "sha512-QCEuvbTAD7vyCsSsgbWedhTfXlClp4TVHVWYYMjnN7nz6xgZbSp+MI3oo7X5C4JlDHpRm/Q+63hsCgAqKt3WVA==",
+      "peerDependencies": {
+        "react-native": ">=0.59"
+      }
+    },
     "node_modules/@react-native-community/picker": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@react-native-community/picker/-/picker-1.8.1.tgz",
@@ -18920,6 +18929,12 @@
       "integrity": "sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==",
       "requires": {}
     },
+    "@react-native-community/netinfo": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-7.1.7.tgz",
+      "integrity": "sha512-QCEuvbTAD7vyCsSsgbWedhTfXlClp4TVHVWYYMjnN7nz6xgZbSp+MI3oo7X5C4JlDHpRm/Q+63hsCgAqKt3WVA==",
+      "requires": {}
+    },
     "@react-native-community/picker": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@react-native-community/picker/-/picker-1.8.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "JellyfinAudioPlayer",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "main": "src/index.js",
   "private": true,
   "scripts": {
@@ -14,6 +14,7 @@
   "dependencies": {
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/masked-view": "^0.1.11",
+    "@react-native-community/netinfo": "^7.1.7",
     "@react-native-community/picker": "^1.8.1",
     "@react-native-community/slider": "^4.1.12",
     "@react-navigation/bottom-tabs": "^6.0.9",

src/assets/cloud-slash.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5674 20.4658C23.7207 19.9736 25.2324 18.2334 25.2324 16.1328C25.2324 14.2607 24.1689 12.5996 22.4199 11.8701C22.4287 7.89746 19.5635 5.03223 15.8809 5.03223C13.543 5.03223 11.7852 6.23633 10.6865 7.83594C10.124 7.67773 9.50879 7.67773 8.9375 7.83594L21.5674 20.4658ZM20.3369 22.7773C20.6182 23.0498 21.0576 23.0498 21.3301 22.7773C21.5938 22.5049 21.6025 22.0566 21.3301 21.7842L6.52051 6.9834C6.23926 6.70215 5.78223 6.71973 5.51855 6.9834C5.25488 7.24707 5.26367 7.71289 5.51855 7.96777L20.3369 22.7773ZM8.18164 20.6592H16.6631L6.24805 10.2705C6.11621 10.6045 6.03711 10.9736 6.01953 11.3779C4.00684 11.7383 2.76758 13.54 2.76758 15.7461C2.76758 18.418 5.10547 20.6592 8.18164 20.6592Z" />
+</svg>

src/components/Colors.ts

@@ -22,7 +22,7 @@ function generateStyles(scheme: ColorSchemeName) {
             borderColor: scheme === 'dark' ? '#262626' : '#ddd',
         },
         activeBackground: {
-            backgroundColor: `${THEME_COLOR}${scheme === 'dark' ? '66' : '16'}`,
+            backgroundColor: `${THEME_COLOR}${scheme === 'dark' ? '26' : '16'}`,
         },
         imageBackground: {
             backgroundColor: scheme === 'dark' ? '#333' : '#ddd',

src/localisation/lang/en/locale.json

@@ -55,5 +55,6 @@
     "delete-album": "Delete Album",
     "delete-playlist": "Delete Playlist",
     "total-download-size": "Total Download Size",
-    "retry-failed-downloads": "Retry Failed Downloads"
+    "retry-failed-downloads": "Retry Failed Downloads",
+    "you-are-offline-message": "You are currently offline. You can only play previously downloaded music."
 }

src/localisation/lang/nl/locale.json

@@ -44,5 +44,18 @@
     "playlist": "Playlist",
     "play-playlist": "Speel Playlist",
     "shuffle-album": "Shuffle Album",
-    "shuffle-playlist": "Shuffle Playlist"
+    "shuffle-playlist": "Shuffle Playlist",
+    "downloads": "Downloads",
+    "download-track": "Download Track",
+    "download-album": "Download Album",
+    "download-playlist": "Download Playlist",
+    "no-downloads": "Je hebt nog geen nummers gedownload",
+    "delete-track": "Verwijder Track",
+    "delete-all-tracks": "Verwijder alle nummbers",
+    "delete-album": "Verwijder Album",
+    "delete-playlist": "Verwijder Playlist",
+    "total-download-size": "Totale grootte downloads",
+    "retry-failed-downloads": "Probeer Mislukte Downloads Opnieuw",
+    "you-are-offline-message": "Je bent op dit moment offline. Je kunt alleen eerder gedownloade nummers afspelen."
+
 }

src/localisation/types.ts

@@ -53,4 +53,5 @@ export type LocaleKeys = 'play-next'
 | 'delete-track'
 | 'total-download-size'
 | 'no-downloads'
-| 'retry-failed-downloads'
+| 'retry-failed-downloads'
+| 'you-are-offline-message'

src/screens/Downloads/index.tsx

@@ -92,7 +92,7 @@ function Downloads() {
                 <DownloadIcon trackId={item} />
             </View>
             <View style={{ flexShrink: 1, marginRight: 8 }}>
-                <Text style={{ fontSize: 16, marginBottom: 4 }} numberOfLines={1}>
+                <Text style={[{ fontSize: 16, marginBottom: 4 }, defaultStyles.text]} numberOfLines={1}>
                     {tracks[item]?.Name}
                 </Text>
                 <Text style={[{ flexShrink: 1, fontSize: 11 }, defaultStyles.textHalfOpacity]} numberOfLines={1}>

src/screens/Music/stacks/components/TrackListView.tsx

@@ -55,7 +55,6 @@ const TrackContainer = styled.View<{isPlaying: boolean}>`
     flex-direction: row;
 
     ${props => props.isPlaying && css`
-        background-color: ${THEME_COLOR}16;
         margin: 0 -20px;
         padding: 15px 24px;
     `}
@@ -140,7 +139,10 @@ const TrackListView: React.FC<TrackListViewProps> = ({
                         onPress={selectTrack}
                         onLongPress={longPressTrack}
                     >
-                        <TrackContainer isPlaying={currentTrack?.backendId === trackId || false} style={defaultStyles.border}>
+                        <TrackContainer
+                            isPlaying={currentTrack?.backendId === trackId || false}
+                            style={[defaultStyles.border, currentTrack?.backendId === trackId || false ? defaultStyles.activeBackground : null ]}
+                        >
                             <Text
                                 style={[
                                     defaultStyles.text,

src/screens/Player/components/ConnectionNotice.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useNetInfo } from '@react-native-community/netinfo';
+import { THEME_COLOR } from 'CONSTANTS';
+import styled from 'styled-components/native';
+import CloudSlash from 'assets/cloud-slash.svg';
+import { Text } from 'react-native';
+import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
+
+const Well = styled.View`
+    border-radius: 8px;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    padding: 12px;
+    margin: 12px 0;
+`;
+
+function ConnectionNotice() {
+    const defaultStyles = useDefaultStyles();
+    const { isInternetReachable } = useNetInfo();
+
+    if (!isInternetReachable) {
+        return (
+            <Well style={defaultStyles.activeBackground}>
+                <CloudSlash width={24} height={24} fill={THEME_COLOR} />
+                <Text style={{ color: THEME_COLOR, marginLeft: 12 }}>
+                    {t('you-are-offline-message')}
+                </Text>
+            </Well>
+        );
+    }
+
+    return null;
+}
+
+export default ConnectionNotice;

src/screens/Player/index.tsx

@@ -5,6 +5,7 @@ import ProgressBar from './components/ProgressBar';
 import NowPlaying from './components/NowPlaying';
 import Queue from './components/Queue';
 import useDefaultStyles from 'components/Colors';
+import ConnectionNotice from './components/ConnectionNotice';
 
 const styles = StyleSheet.create({
     inner: {
@@ -18,6 +19,7 @@ export default function Player() {
     return (
         <ScrollView contentContainerStyle={styles.inner} style={defaultStyles.view}>
             <NowPlaying />
+            <ConnectionNotice />
             <MediaControls />
             <ProgressBar />
             <Queue />

src/store/downloads/index.ts

@@ -7,7 +7,7 @@ interface State {
     ids: EntityId[];
 }
 
-const initialState: State = {
+export const initialState: State = {
     entities: {},
     ids: [],
 };

src/store/index.ts

@@ -1,19 +1,32 @@
 import { configureStore, getDefaultMiddleware, combineReducers } from '@reduxjs/toolkit';
 import { useSelector, TypedUseSelectorHook, useDispatch } from 'react-redux';
 import AsyncStorage from '@react-native-community/async-storage';
-import { persistStore, persistReducer, PersistConfig } from 'redux-persist';
+import { persistStore, persistReducer, PersistConfig, createMigrate } from 'redux-persist';
 import autoMergeLevel2 from 'redux-persist/es/stateReconciler/autoMergeLevel2';
 
+import settings from './settings';
+import music, { initialState as musicInitialState } from './music';
+import downloads, { initialState as downloadsInitialState } from './downloads';
+import { PersistState } from 'redux-persist/es/types';
+
 const persistConfig: PersistConfig<AppState> = {
     key: 'root',
     storage: AsyncStorage,
-    stateReconciler: autoMergeLevel2
+    version: 1,
+    stateReconciler: autoMergeLevel2,
+    migrate: createMigrate({
+        // @ts-expect-error migrations are poorly typed
+        1: (state: AppState & PersistState) => {
+            return {
+                ...state,
+                settings: state.settings,
+                downloads: downloadsInitialState,
+                music: musicInitialState
+            };
+        }
+    })
 };
 
-import settings from './settings';
-import music from './music';
-import downloads from './downloads';
-
 const reducers = combineReducers({
     settings,
     music: music.reducer,
@@ -22,11 +35,16 @@ const reducers = combineReducers({
 
 const persistedReducer = persistReducer(persistConfig, reducers);
 
+const middlewares = [];
+if (__DEV__) {
+    middlewares.push(require('redux-flipper').default());
+}
+
 const store = configureStore({
     reducer: persistedReducer,
     middleware: getDefaultMiddleware({ serializableCheck: false, immutableCheck: false }).concat(
         // logger,
-        __DEV__ ? require('redux-flipper').default() : undefined,
+        ...middlewares,
     ),
 });
 

src/store/music/index.ts

@@ -35,7 +35,7 @@ export interface State {
     }
 }
 
-const initialState: State = {
+export const initialState: State = {
     albums: {
         ...albumAdapter.getInitialState(),
         isLoading: false,