Emily/bottom play bar #38
Conversation
|
|
||
| const styles = StyleSheet.create({ | ||
| card: { | ||
| backgroundColor: '#D9D9D9', |
There was a problem hiding this comment.
If there's a corresponding color in Colors.ts, use that! If it doesn't exist but there should be one, feel free to define a new color constant there.
| @@ -7,6 +7,7 @@ const createI18n = (language: string): i18nInstance => { | |||
| const i18n = i18next.createInstance().use(initReactI18next); | |||
|
|
|||
| i18n.init({ | |||
| compatibilityJSON: 'v3', | |||
There was a problem hiding this comment.
This change shouldn't be relevant here
src/screens/PlayScreen/Play.tsx
Outdated
| @@ -38,6 +72,18 @@ function PlayScreen() { | |||
| </Text> | |||
| <Text style={styles.author_text}>Shaldon Ferris</Text> | |||
|
|
|||
| {/* <RectButton | |||
| }; | ||
|
|
||
| export type RootStackScreenProps<T extends keyof RootStackParamList> = | ||
| NativeStackScreenProps<RootStackParamList, T>; | ||
|
|
||
| export type HomeStackScreenProps<T extends keyof HomeStackParamList> = | ||
| NativeStackScreenProps<HomeStackParamList, T>; | ||
| CompositeScreenProps< |
There was a problem hiding this comment.
Would recommend adding a comment here to explain why we do this -- something like
// Note: we use composite screen props to support navigating to the 'Play' screen from any stack
src/screens/PlayScreen/Play.tsx
Outdated
|
|
||
| // TODO: Use toggleAudio when it is necessary, may be fixed in later PRs. | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| async function toggleAudio( |
There was a problem hiding this comment.
Remove this function for now -- you can find it in the commit history in this PR if you need it later.
| function BottomPlayBar({ onPress, children, style }: BottomPlayBarProps) { | ||
| return ( | ||
| <Pressable style={[styles.card, style]} onPress={onPress}> | ||
| {children} | ||
| </Pressable> | ||
| ); | ||
| } | ||
|
|
||
| type SearchBottomPlayBarProps = { |
There was a problem hiding this comment.
I would rename this to NowPlayingBar or something for consistency with your wrapper naming. Also bc this bar doesn't actually handle any of the positioning logic, so including the word 'bottom' could be misleading.
🎉 What's new in this PR 🎉
☁️ ☁️ Description ☁️ ☁️
This PR includes a new BottomPlayBar modal that will eventually be able to play and pause the current audio on every screen. In order to implement this, we had to rearrange our Navigation stack and have "PlayScreen" live outside of the "Navigation Bar" screen in RootNavigator.tsx
Screenshots 📲
⚡ How to review ⚡
Navigation.tsx could be potentially reviewed. We wrapped each navigation stack in CompositeScreenProps to fix the nagivation props error in each screen.
🌱 Next steps 🌱
Next steps will be to implement audio playing functionality within this modal. We need to be able to pass the current audio object to this modal for it to use audio util controls like pause and play through every screen. The modal could also use some extra styling to center its components
Relevant Links 🔗
Online sources ℹ️
Related PRs 🙌
CC: @davidqing6432