feat: finish offsets on new navigation views

2023-04-23 23:31:35 +02:00
parent 81b9ba683a
commit c8283fc580
12 changed files with 227 additions and 152 deletions
--- a/src/screens/Music/stacks/Albums.tsx
+++ b/src/screens/Music/stacks/Albums.tsx
@@ -17,7 +17,7 @@ import { Album } from 'store/music/types';
 import { Text } from 'components/Typography';
 import { ShadowWrapper } from 'components/Shadow';
 import { NavigationProp } from 'screens/types';
-import { useNavigatorPadding } from 'utility/SafeNavigatorView';
+import { SafeSectionList } from 'components/SafeNavigatorView';

 const HeadingHeight = 50;

@@ -80,8 +80,6 @@ const GeneratedAlbumItem = React.memo(function GeneratedAlbumItem(props: Generat
 });

 const Albums: React.FC = () => {
-    const navigatorPadding = useNavigatorPadding();
-
    // Retrieve data from store
    const { entities: albums } = useTypedSelector((state) => state.music.albums);
    const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
@@ -173,9 +171,7 @@ const Albums: React.FC = () => {
    return (
        <>
            <AlphabetScroller onSelect={selectLetter} />
-            <SectionList
-                contentInset={{ top: navigatorPadding.paddingTop }}
-                contentContainerStyle={navigatorPadding}
+            <SafeSectionList
                sections={sections} 
                refreshing={isLoading}
                onRefresh={retrieveData}
--- a/src/screens/Music/stacks/Playlists.tsx
+++ b/src/screens/Music/stacks/Playlists.tsx
@@ -11,7 +11,7 @@ import AlbumImage, { AlbumItem } from './components/AlbumImage';
 import { EntityId } from '@reduxjs/toolkit';
 import useDefaultStyles from 'components/Colors';
 import { NavigationProp } from 'screens/types';
-import { useNavigatorPadding } from 'utility/SafeNavigatorView';
+import { SafeFlatList, useNavigationOffsets } from 'components/SafeNavigatorView';

 interface GeneratedAlbumItemProps {
    id: ReactText;
@@ -35,7 +35,7 @@ const GeneratedPlaylistItem = React.memo(function GeneratedPlaylistItem(props: G
 });

 const Playlists: React.FC = () => {
-    const navigatorPadding = useNavigatorPadding();
+    const offsets = useNavigationOffsets();

    // Retrieve data from store
    const { entities, ids } = useTypedSelector((state) => state.music.playlists);
@@ -96,11 +96,10 @@ const Playlists: React.FC = () => {
    });
    
    return (
-        <FlatList
+        <SafeFlatList
            refreshControl={
-                <RefreshControl refreshing={isLoading} onRefresh={retrieveData} progressViewOffset={navigatorPadding.paddingTop} />
+                <RefreshControl refreshing={isLoading} onRefresh={retrieveData} progressViewOffset={offsets.top} />
            }
-            contentContainerStyle={navigatorPadding}
            data={ids} 
            getItemLayout={getItemLayout}
            ref={listRef}
--- a/src/screens/Music/stacks/RecentAlbums.tsx
+++ b/src/screens/Music/stacks/RecentAlbums.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
-import { Text, SafeAreaView, FlatList, StyleSheet } from 'react-native';
+import { Text, SafeAreaView, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useAppDispatch, useTypedSelector } from 'store';
 import { fetchRecentAlbums } from 'store/music/actions';
@@ -17,6 +17,7 @@ import Divider from 'components/Divider';
 import styled from 'styled-components/native';
 import { ShadowWrapper } from 'components/Shadow';
 import { NavigationProp } from 'screens/types';
+import { SafeFlatList } from 'components/SafeNavigatorView';

 const styles = StyleSheet.create({
    columnWrapper: {
@@ -71,7 +72,7 @@ const RecentAlbums: React.FC = () => {
    
    return (
        <SafeAreaView>
-            <FlatList
+            <SafeFlatList
                data={recentAlbums as string[]} 
                refreshing={isLoading}
                onRefresh={retrieveData}
--- a/src/screens/Music/stacks/components/TrackListView.tsx
+++ b/src/screens/Music/stacks/components/TrackListView.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback, useMemo } from 'react';
-import { ScrollView, RefreshControl, StyleSheet, View } from 'react-native';
+import { Platform, RefreshControl, StyleSheet, View } from 'react-native';
 import { useGetImage } from 'utility/JellyfinApi';
 import styled, { css } from 'styled-components/native';
 import { useNavigation } from '@react-navigation/native';
@@ -25,8 +25,8 @@ import { Text } from 'components/Typography';

 import CoverImage from 'components/CoverImage';
 import ticksToDuration from 'utility/ticksToDuration';
-import { useNavigatorPadding } from 'utility/SafeNavigatorView';
 import { t } from '@localisation';
+import { SafeScrollView, useNavigationOffsets } from 'components/SafeNavigatorView';

 const styles = StyleSheet.create({
    index: {
@@ -44,7 +44,7 @@ const AlbumImageContainer = styled.View`
    align-items: center;
 `;

-const TrackContainer = styled.View<{ isPlaying: boolean }>`
+const TrackContainer = styled.View<{ isPlaying: boolean, small?: boolean }>`
    padding: 12px 4px;
    flex-direction: row;
    border-radius: 6px;
@@ -54,6 +54,10 @@ const TrackContainer = styled.View<{ isPlaying: boolean }>`
        margin: 0 -12px;
        padding: 12px 16px;
    `}
+
+    ${props => props.small && css`
+        padding: ${Platform.select({ ios: '8px 4px', android: '4px'})};
+    `}
 `;

 export interface TrackListViewProps extends PropsWithChildren<{}> {
@@ -85,7 +89,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
    children
 }) => {
    const defaultStyles = useDefaultStyles();
-    const navigatorPadding = useNavigatorPadding();
+    const offsets = useNavigationOffsets();

    // Retrieve state
    const tracks = useTypedSelector((state) => state.music.tracks.entities);
@@ -123,107 +127,109 @@ const TrackListView: React.FC<TrackListViewProps> = ({
    }, [dispatch, downloadedTracks]);

    return (
-        <ScrollView
+        <SafeScrollView
            style={defaultStyles.view}
-            contentContainerStyle={[{ padding: 24, paddingTop: 32 + navigatorPadding.paddingTop, paddingBottom: 64 + navigatorPadding.paddingBottom } ]}
            refreshControl={
-                <RefreshControl refreshing={isLoading} onRefresh={refresh} progressViewOffset={navigatorPadding.paddingTop} />
+                <RefreshControl refreshing={isLoading} onRefresh={refresh} progressViewOffset={offsets.top} />
            }
        >
-            <AlbumImageContainer>
-                <CoverImage src={getImage(entityId)} />
-            </AlbumImageContainer>
-            <Header>{title}</Header>
-            <SubHeader>{artist}</SubHeader>
-            <WrappableButtonRow>
-                <WrappableButton title={playButtonText} icon={Play} onPress={playEntity} testID="play-album" />
-                <WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} testID="shuffle-album" />
-            </WrappableButtonRow>
-            <View style={{ marginTop: 8 }}>
-                {trackIds.map((trackId, i) =>
-                    <TouchableHandler
-                        key={trackId}
-                        id={i}
-                        onPress={selectTrack}
-                        onLongPress={longPressTrack}
-                        testID={`play-track-${trackId}`}
-                    >
-                        <TrackContainer
-                            isPlaying={currentTrack?.backendId === trackId || false}
-                            style={[defaultStyles.border, currentTrack?.backendId === trackId || false ? defaultStyles.activeBackground : null ]}
+            <View style={{ padding: 24, paddingTop: 32, paddingBottom: 64 }}>
+                <AlbumImageContainer>
+                    <CoverImage src={getImage(entityId)} />
+                </AlbumImageContainer>
+                <Header>{title}</Header>
+                <SubHeader>{artist}</SubHeader>
+                <WrappableButtonRow>
+                    <WrappableButton title={playButtonText} icon={Play} onPress={playEntity} testID="play-album" />
+                    <WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} testID="shuffle-album" />
+                </WrappableButtonRow>
+                <View style={{ marginTop: 8 }}>
+                    {trackIds.map((trackId, i) =>
+                        <TouchableHandler
+                            key={trackId}
+                            id={i}
+                            onPress={selectTrack}
+                            onLongPress={longPressTrack}
+                            testID={`play-track-${trackId}`}
                        >
-                            <Text
-                                style={[
-                                    styles.index,
-                                    { opacity: 0.25 },
-                                    currentTrack?.backendId === trackId && styles.activeText
-                                ]}
-                                numberOfLines={1}
+                            <TrackContainer
+                                isPlaying={currentTrack?.backendId === trackId || false}
+                                style={[defaultStyles.border, currentTrack?.backendId === trackId || false ? defaultStyles.activeBackground : null ]}
+                                small={itemDisplayStyle === 'playlist'}
                            >
-                                {listNumberingStyle === 'index' 
-                                    ? i + 1
-                                    : tracks[trackId]?.IndexNumber}
-                            </Text>
-                            <View style={{ flexShrink: 1 }}>
                                <Text
-                                    style={{ 
-                                        ...currentTrack?.backendId === trackId && styles.activeText,
-                                        flexShrink: 1,
-                                        marginRight: 4,
-                                    }}
+                                    style={[
+                                        styles.index,
+                                        { opacity: 0.25 },
+                                        currentTrack?.backendId === trackId && styles.activeText
+                                    ]}
                                    numberOfLines={1}
                                >
-                                    {tracks[trackId]?.Name}
+                                    {listNumberingStyle === 'index' 
+                                        ? i + 1
+                                        : tracks[trackId]?.IndexNumber}
                                </Text>
-                                {itemDisplayStyle === 'playlist' && (
+                                <View style={{ flexShrink: 1 }}>
                                    <Text
                                        style={{ 
                                            ...currentTrack?.backendId === trackId && styles.activeText,
                                            flexShrink: 1,
                                            marginRight: 4,
-                                            opacity:currentTrack?.backendId === trackId ? 0.5 : 0.25,
                                        }}
                                        numberOfLines={1}
                                    >
-                                        {tracks[trackId]?.Artists.join(', ')}
+                                        {tracks[trackId]?.Name}
                                    </Text>
-                                )}
-                            </View>
-                            <View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
-                                <Text
-                                    style={[
-                                        { marginRight: 12, opacity: 0.25 },
-                                        currentTrack?.backendId === trackId && styles.activeText
-                                    ]}
-                                    numberOfLines={1}
-                                >
-                                    {ticksToDuration(tracks[trackId]?.RunTimeTicks || 0)}
-                                </Text>
-                                <DownloadIcon trackId={trackId} fill={currentTrack?.backendId === trackId ? `${THEME_COLOR}44` : undefined} />
-                            </View>
-                        </TrackContainer>
-                    </TouchableHandler>
-                )}
-                <Text style={{ paddingTop: 24, paddingBottom: 12, textAlign: 'center', opacity: 0.5 }}>{t('total-duration')}{': '}{ticksToDuration(totalDuration)}</Text>
-                <WrappableButtonRow style={{ marginTop: 24 }}>
-                    <WrappableButton
-                        icon={CloudDownArrow}
-                        title={downloadButtonText}
-                        onPress={downloadAllTracks}
-                        disabled={downloadedTracks.length === trackIds.length}
-                        testID="download-album"
-                    />
-                    <WrappableButton
-                        icon={Trash}
-                        title={deleteButtonText}
-                        onPress={deleteAllTracks}
-                        disabled={downloadedTracks.length === 0}
-                        testID="delete-album"
-                    />
-                </WrappableButtonRow>
+                                    {itemDisplayStyle === 'playlist' && (
+                                        <Text
+                                            style={{ 
+                                                ...currentTrack?.backendId === trackId && styles.activeText,
+                                                flexShrink: 1,
+                                                marginRight: 4,
+                                                opacity:currentTrack?.backendId === trackId ? 0.5 : 0.25,
+                                            }}
+                                            numberOfLines={1}
+                                        >
+                                            {tracks[trackId]?.Artists.join(', ')}
+                                        </Text>
+                                    )}
+                                </View>
+                                <View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
+                                    <Text
+                                        style={[
+                                            { marginRight: 12, opacity: 0.25 },
+                                            currentTrack?.backendId === trackId && styles.activeText
+                                        ]}
+                                        numberOfLines={1}
+                                    >
+                                        {ticksToDuration(tracks[trackId]?.RunTimeTicks || 0)}
+                                    </Text>
+                                    <DownloadIcon trackId={trackId} fill={currentTrack?.backendId === trackId ? `${THEME_COLOR}44` : undefined} />
+                                </View>
+                            </TrackContainer>
+                        </TouchableHandler>
+                    )}
+                    <Text style={{ paddingTop: 24, paddingBottom: 12, textAlign: 'center', opacity: 0.5 }}>{t('total-duration')}{': '}{ticksToDuration(totalDuration)}</Text>
+                    <WrappableButtonRow style={{ marginTop: 24 }}>
+                        <WrappableButton
+                            icon={CloudDownArrow}
+                            title={downloadButtonText}
+                            onPress={downloadAllTracks}
+                            disabled={downloadedTracks.length === trackIds.length}
+                            testID="download-album"
+                        />
+                        <WrappableButton
+                            icon={Trash}
+                            title={deleteButtonText}
+                            onPress={deleteAllTracks}
+                            disabled={downloadedTracks.length === 0}
+                            testID="delete-album"
+                        />
+                    </WrappableButtonRow>
+                </View>
+                {children}
            </View>
-            {children}
-        </ScrollView>
+        </SafeScrollView>
    );
 };