javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add connection notice

Browse Source
This commit is contained in:
Lei Nelissen
2022-01-02 22:50:49 +01:00
parent cab3935a92
commit 611cbc8c69
6 changed files with 60 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ios/Podfile.lock
View File

@@ -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

15
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

3
src/assets/cloud-slash.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 808 B

33
src/screens/Player/components/ConnectionNotice.tsx Normal file
View File

@@ -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;

2
src/screens/Player/index.tsx
View File

@@ -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 />