Lyrics implementation prototype (#224)

* Lyrics implementation prototype

* feat: update lyrics view

* chore: add docs

* chore: cleanup

* feat: animate active text

* fix: hide lyrics button when there are none

* feat: create lyrics preview in now playing modal

* fix: header overlay color

Closes #224 
Closes #151 
Closes #100 

---------

Co-authored-by: Lei Nelissen <lei@codified.nl>

src/screens/Music/overlays/NowPlaying/index.tsx

@@ -17,9 +17,11 @@ import { calculateProgressTranslation } from '@/components/Progresstrack';
 import { NavigationProp } from '@/screens/types';
 import { ShadowWrapper } from '@/components/Shadow';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-const NOW_PLAYING_POPOVER_MARGIN = 6;
-const NOW_PLAYING_POPOVER_WIDTH = Dimensions.get('screen').width - 2 * NOW_PLAYING_POPOVER_MARGIN;
+export const NOW_PLAYING_POPOVER_MARGIN = 6;
+export const NOW_PLAYING_POPOVER_WIDTH = Dimensions.get('screen').width - 2 * NOW_PLAYING_POPOVER_MARGIN;
+export const NOW_PLAYING_POPOVER_HEIGHT = 58;
 
 const PopoverPosition = css`
     position: absolute;
@@ -34,6 +36,7 @@ const Container = styled.ScrollView`
 `;
 
 const InnerContainer = styled.TouchableOpacity`
+    height: ${NOW_PLAYING_POPOVER_HEIGHT}px;
     padding: 12px;
     overflow: hidden;
     flex: 1;
@@ -105,11 +108,12 @@ function SelectActionButton() {
     }
 }
 
-function NowPlaying({ offset = 0 }: { offset?: number }) {
+function NowPlaying({ offset = 0, inset }: { offset?: number, inset?: boolean }) {
     const { index, track } = useCurrentTrack();
     const { buffered, position } = useProgress();
     const defaultStyles = useDefaultStyles();
     const tabBarHeight = useBottomTabBarHeight();
+    const insets = useSafeAreaInsets();
     const previousBuffered = usePrevious(buffered);
     const previousPosition = usePrevious(position);
 
@@ -163,7 +167,14 @@ function NowPlaying({ offset = 0 }: { offset?: number }) {
     }
 
     return (
-        <Container style={{ bottom: tabBarHeight + NOW_PLAYING_POPOVER_MARGIN + offset }}>
+        <Container
+            style={{ 
+                bottom: (tabBarHeight || 0) 
+                    + (inset ? insets.bottom : 0)
+                    + NOW_PLAYING_POPOVER_MARGIN
+                    + offset 
+            }}
+        >
             {/** TODO: Fix shadow overflow on Android */}
             {Platform.OS === 'ios' ? (
                 <ShadowOverlay pointerEvents='none'>