From 76f2db19e580849fa10611842bb89ab58866bf3e Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Wed, 4 May 2022 19:12:01 +0200 Subject: [PATCH] Change modal to native stacks --- package-lock.json | 26 +++++++++++++++++++ package.json | 1 + src/components/DismissableScrollView.tsx | 26 +++++++++++++++++++ .../Music/overlays/NowPlaying/index.tsx | 16 +++++++++--- src/screens/index.tsx | 16 +++++------- .../Player/components/Casting.android.tsx | 0 .../Player/components/Casting.d.ts | 0 .../Player/components/Casting.ios.tsx | 0 .../Player/components/ConnectionNotice.tsx | 0 .../Player/components/MediaControls.tsx | 0 .../Player/components/NowPlaying.tsx | 0 .../Player/components/ProgressBar.tsx | 0 .../{ => modals}/Player/components/Queue.tsx | 0 src/screens/{ => modals}/Player/index.tsx | 4 ++- src/screens/modals/TrackPopupMenu.tsx | 5 ++-- 15 files changed, 78 insertions(+), 16 deletions(-) create mode 100644 src/components/DismissableScrollView.tsx rename src/screens/{ => modals}/Player/components/Casting.android.tsx (100%) rename src/screens/{ => modals}/Player/components/Casting.d.ts (100%) rename src/screens/{ => modals}/Player/components/Casting.ios.tsx (100%) rename src/screens/{ => modals}/Player/components/ConnectionNotice.tsx (100%) rename src/screens/{ => modals}/Player/components/MediaControls.tsx (100%) rename src/screens/{ => modals}/Player/components/NowPlaying.tsx (100%) rename src/screens/{ => modals}/Player/components/ProgressBar.tsx (100%) rename src/screens/{ => modals}/Player/components/Queue.tsx (100%) rename src/screens/{ => modals}/Player/index.tsx (81%) diff --git a/package-lock.json b/package-lock.json index 9af407b..3e6a277 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@react-native/normalize-color": "^2.0.0", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/native": "^6.0.10", + "@react-navigation/native-stack": "^6.6.2", "@react-navigation/stack": "^6.2.1", "@reduxjs/toolkit": "^1.8.1", "@sentry/react-native": "^3.4.2", @@ -3720,6 +3721,22 @@ "react-native": "*" } }, + "node_modules/@react-navigation/native-stack": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.6.2.tgz", + "integrity": "sha512-pFMuzhxbPml5MBvJVAzHWoaUkQaefAOKpuUnAs/AxNQuHQwwnxRmDit1PQLuIPo7g7DlfwFXagDHE1R0tbnS8Q==", + "dependencies": { + "@react-navigation/elements": "^1.3.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "node_modules/@react-navigation/native/node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -19966,6 +19983,15 @@ } } }, + "@react-navigation/native-stack": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.6.2.tgz", + "integrity": "sha512-pFMuzhxbPml5MBvJVAzHWoaUkQaefAOKpuUnAs/AxNQuHQwwnxRmDit1PQLuIPo7g7DlfwFXagDHE1R0tbnS8Q==", + "requires": { + "@react-navigation/elements": "^1.3.3", + "warn-once": "^0.1.0" + } + }, "@react-navigation/routers": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz", diff --git a/package.json b/package.json index 6921975..537c107 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@react-native/normalize-color": "^2.0.0", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/native": "^6.0.10", + "@react-navigation/native-stack": "^6.6.2", "@react-navigation/stack": "^6.2.1", "@reduxjs/toolkit": "^1.8.1", "@sentry/react-native": "^3.4.2", diff --git a/src/components/DismissableScrollView.tsx b/src/components/DismissableScrollView.tsx new file mode 100644 index 0000000..948a94c --- /dev/null +++ b/src/components/DismissableScrollView.tsx @@ -0,0 +1,26 @@ +import {GestureHandlerRefContext} from '@react-navigation/stack'; +import React, {PropsWithChildren, useCallback, useState} from 'react'; +import {ScrollViewProps} from 'react-native'; +import {ScrollView} from 'react-native-gesture-handler'; + +export const DismissableScrollView = ( + props: PropsWithChildren, +) => { + const [scrolledTop, setScrolledTop] = useState(true); + const onScroll = useCallback(({nativeEvent}) => { + console.log(nativeEvent.contentOffset); + setScrolledTop(nativeEvent.contentOffset.y <= 0); + }, []); + return ( + + {(ref) => ( + + )} + + ); +}; \ No newline at end of file diff --git a/src/screens/Music/overlays/NowPlaying/index.tsx b/src/screens/Music/overlays/NowPlaying/index.tsx index fb8f4c5..fd003c5 100644 --- a/src/screens/Music/overlays/NowPlaying/index.tsx +++ b/src/screens/Music/overlays/NowPlaying/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useCallback, useEffect, useRef } from 'react'; import { ActivityIndicator, Animated, Dimensions, Easing, Pressable, View } from 'react-native'; import FastImage from 'react-native-fast-image'; import styled, { css } from 'styled-components/native'; @@ -12,6 +12,7 @@ import { Shadow } from 'react-native-shadow-2'; import usePrevious from 'utility/usePrevious'; import Text from 'components/Text'; import { ColoredBlurView } from 'components/Colors'; +import { useNavigation } from '@react-navigation/native'; const NOW_PLAYING_POPOVER_MARGIN = 6; const NOW_PLAYING_POPOVER_WIDTH = Dimensions.get('screen').width - 2 * NOW_PLAYING_POPOVER_MARGIN; @@ -115,10 +116,15 @@ function NowPlaying() { const { index, track } = useCurrentTrack(); const { buffered, duration, position } = useProgress(); const previousIndex = usePrevious(index); + const navigation = useNavigation(); const bufferAnimation = useRef(new Animated.Value(0)); const progressAnimation = useRef(new Animated.Value(0)); + const openNowPlayingModal = useCallback(() => { + navigation.navigate('Player'); + }, [navigation]); + useEffect(() => { const hasChangedTrack = previousIndex !== index || duration === 0; @@ -147,11 +153,13 @@ function NowPlaying() { - + - {track.title} - {track.artist}{track.album ? ` — ${track.album}` : ''} + {track.title} + + {track.artist}{track.album ? ` — ${track.album}` : ''} + diff --git a/src/screens/index.tsx b/src/screens/index.tsx index bd3fcf1..ff8455a 100644 --- a/src/screens/index.tsx +++ b/src/screens/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs'; -import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack'; +import { StackNavigationProp } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { CompositeNavigationProp } from '@react-navigation/native'; import { THEME_COLOR } from 'CONSTANTS'; @@ -21,12 +22,12 @@ import { ModalStackParams } from './types'; import { t } from '@localisation'; import ErrorReportingAlert from 'utility/ErrorReportingAlert'; import ErrorReportingPopup from './modals/ErrorReportingPopup'; +import Player from './modals/Player'; -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); type Screens = { - NowPlaying: undefined; Music: undefined; Settings: undefined; } @@ -78,20 +79,17 @@ type Routes = { SetJellyfinServer: undefined; } - export default function Routes() { return ( + }} id="MAIN"> - + + ); } diff --git a/src/screens/Player/components/Casting.android.tsx b/src/screens/modals/Player/components/Casting.android.tsx similarity index 100% rename from src/screens/Player/components/Casting.android.tsx rename to src/screens/modals/Player/components/Casting.android.tsx diff --git a/src/screens/Player/components/Casting.d.ts b/src/screens/modals/Player/components/Casting.d.ts similarity index 100% rename from src/screens/Player/components/Casting.d.ts rename to src/screens/modals/Player/components/Casting.d.ts diff --git a/src/screens/Player/components/Casting.ios.tsx b/src/screens/modals/Player/components/Casting.ios.tsx similarity index 100% rename from src/screens/Player/components/Casting.ios.tsx rename to src/screens/modals/Player/components/Casting.ios.tsx diff --git a/src/screens/Player/components/ConnectionNotice.tsx b/src/screens/modals/Player/components/ConnectionNotice.tsx similarity index 100% rename from src/screens/Player/components/ConnectionNotice.tsx rename to src/screens/modals/Player/components/ConnectionNotice.tsx diff --git a/src/screens/Player/components/MediaControls.tsx b/src/screens/modals/Player/components/MediaControls.tsx similarity index 100% rename from src/screens/Player/components/MediaControls.tsx rename to src/screens/modals/Player/components/MediaControls.tsx diff --git a/src/screens/Player/components/NowPlaying.tsx b/src/screens/modals/Player/components/NowPlaying.tsx similarity index 100% rename from src/screens/Player/components/NowPlaying.tsx rename to src/screens/modals/Player/components/NowPlaying.tsx diff --git a/src/screens/Player/components/ProgressBar.tsx b/src/screens/modals/Player/components/ProgressBar.tsx similarity index 100% rename from src/screens/Player/components/ProgressBar.tsx rename to src/screens/modals/Player/components/ProgressBar.tsx diff --git a/src/screens/Player/components/Queue.tsx b/src/screens/modals/Player/components/Queue.tsx similarity index 100% rename from src/screens/Player/components/Queue.tsx rename to src/screens/modals/Player/components/Queue.tsx diff --git a/src/screens/Player/index.tsx b/src/screens/modals/Player/index.tsx similarity index 81% rename from src/screens/Player/index.tsx rename to src/screens/modals/Player/index.tsx index 75a2641..819a618 100644 --- a/src/screens/Player/index.tsx +++ b/src/screens/modals/Player/index.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import { StyleSheet, ScrollView } from 'react-native'; +import { StyleSheet } from 'react-native'; import MediaControls from './components/MediaControls'; 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'; +import { DismissableScrollView } from 'components/DismissableScrollView'; +import { ScrollView } from 'react-native-gesture-handler'; const styles = StyleSheet.create({ inner: { diff --git a/src/screens/modals/TrackPopupMenu.tsx b/src/screens/modals/TrackPopupMenu.tsx index e0a1788..f0401d6 100644 --- a/src/screens/modals/TrackPopupMenu.tsx +++ b/src/screens/modals/TrackPopupMenu.tsx @@ -16,6 +16,7 @@ import { useDispatch } from 'react-redux'; import { queueTrackForDownload, removeDownloadedTrack } from 'store/downloads/actions'; import usePlayTracks from 'utility/usePlayTracks'; import { selectIsDownloaded } from 'store/downloads/selectors'; +import { View } from 'react-native'; type Route = RouteProp; @@ -68,7 +69,7 @@ function TrackPopupMenu() { }, [trackId, dispatch, closeModal]); return ( - + {track?.Name} {track?.Album} - {track?.AlbumArtist} @@ -82,7 +83,7 @@ function TrackPopupMenu() { )} - + ); }