Add connection notice

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

@@ -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/screens/Player/components/ConnectionNotice.tsx

@@ -0,0 +1,33 @@
+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';
+
+const Well = styled.View`
+    border-radius: 8px;
+    background-color: ${THEME_COLOR}22;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    padding: 12px;
+    margin: 12px 0;
+`;
+
+function ConnectionNotice() {
+    const { isInternetReachable } = useNetInfo();
+
+    if (!isInternetReachable) {
+        return (
+            <Well>
+                <CloudSlash width={24} height={24} fill={THEME_COLOR} />
+                <Text style={{ color: THEME_COLOR, marginLeft: 12 }}>You are currently offline. You can only play previously downloaded music.</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 />