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

feat: swap sectionlists for @shopify/flashlist

Browse Source
This commit is contained in:
Lei Nelissen
2025-05-22 23:36:53 +02:00
parent c430047106
commit d9326dfc7a
8 changed files with 208 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/CONSTANTS.ts
View File

@@ -1,3 +1,3 @@
export const ALBUM_CACHE_AMOUNT_OF_DAYS = 7;
export const PLAYLIST_CACHE_AMOUNT_OF_DAYS = 7;
export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ ';
export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#';

4
src/components/AlphabetScroller.tsx
View File

@@ -33,7 +33,7 @@ const Letter = styled.Text`
`;
interface Props {
onSelect: (index: number) => void;
onSelect: (selected: { index: number, letter: string }) => void;
}
/**
@@ -56,7 +56,7 @@ const AlphabetScroller: React.FC<Props> = ({ onSelect }) => {
if (newIndex !== index) {
setIndex(newIndex);
onSelect(newIndex);
onSelect({ index: newIndex, letter: ALPHABET_LETTERS[newIndex] });
}
}, [height, index, onSelect]);

29
src/components/SafeNavigatorView.tsx
View File

@@ -3,6 +3,7 @@ import { useHeaderHeight } from '@react-navigation/elements';
import { FlatList, FlatListProps, ScrollView, ScrollViewProps, SectionList, SectionListProps } from 'react-native';
import useCurrentTrack from '../utility/useCurrentTrack';
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
import { FlashList, FlashListProps } from '@shopify/flash-list';
declare module 'react' {
function forwardRef<T, P = {}>(
@@ -26,7 +27,7 @@ export function SafeScrollView({
contentContainerStyle,
{ paddingTop: top, paddingBottom: bottom },
]}
scrollIndicatorInsets={{ top: top / 2, bottom: bottom / 2 + 5 }}
scrollIndicatorInsets={{ top: top / 2, bottom: bottom / 2 + 5 }}
{...props}
/>
);
@@ -48,7 +49,7 @@ function BareSafeSectionList<I, S>({
{ paddingTop: top, paddingBottom: bottom },
contentContainerStyle,
]}
scrollIndicatorInsets={{ top: top / 2, bottom: bottom / 2 + 5 }}
scrollIndicatorInsets={{ top: top / 2, bottom: bottom / 2 + 5 }}
ref={ref}
{...props}
/>
@@ -81,6 +82,30 @@ function BareSafeFlatList<I>({
export const SafeFlatList = forwardRef(BareSafeFlatList);
/**
* A wrapper for ScrollView that takes any paddings, margins and insets into
* account that result from the bottom tabs, potential NowPlaying overlay and header.
*/
function BareSafeFlashList<I>({
contentContainerStyle,
...props
}: FlashListProps<I>, ref: ForwardedRef<FlashList<I>>) {
const { top, bottom } = useNavigationOffsets();
return (
<FlashList
contentContainerStyle={
{ ...contentContainerStyle, paddingBottom: bottom }
}
scrollIndicatorInsets={{ top: top * 0.4, bottom: bottom * 0.55 }}
ref={ref}
{...props}
/>
);
}
export const SafeFlashList = forwardRef(BareSafeFlashList);
/**
* A hook that returns the correct offset that should be applied to any Views
* that are wrapped in a NavigationView, in order to account for overlays,

135
src/screens/Music/stacks/Albums.tsx
View File

@@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useRef, ReactText, useMemo } from 'react';
import { useGetImage } from '@/utility/JellyfinApi/lib';
import { SectionList, View } from 'react-native';
import { View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { differenceInDays } from 'date-fns';
import { useAppDispatch, useTypedSelector } from '@/store';
@@ -8,7 +8,7 @@ import { fetchAllAlbums } from '@/store/music/actions';
import { ALBUM_CACHE_AMOUNT_OF_DAYS } from '@/CONSTANTS';
import TouchableHandler from '@/components/TouchableHandler';
import AlbumImage, { AlbumHeight, AlbumItem } from './components/AlbumImage';
import { selectAlbumsByAlphabet, SectionedId } from '@/store/music/selectors';
import { selectAlbumsByAlphabet } from '@/store/music/selectors';
import AlphabetScroller from '@/components/AlphabetScroller';
import styled from 'styled-components/native';
import useDefaultStyles, { ColoredBlurView } from '@/components/Colors';
@@ -16,20 +16,12 @@ import { Album } from '@/store/music/types';
import { Text } from '@/components/Typography';
import { ShadowWrapper } from '@/components/Shadow';
import { NavigationProp } from '@/screens/types';
import { SafeSectionList } from '@/components/SafeNavigatorView';
const HeadingHeight = 50;
function generateSection({ section }: { section: SectionedId }) {
return (
<SectionHeading label={section.label} key={section.label} />
);
}
import { SafeFlashList, useNavigationOffsets } from '@/components/SafeNavigatorView';
import { FlashList } from '@shopify/flash-list';
const SectionContainer = styled.View`
height: ${HeadingHeight}px;
justify-content: center;
padding: 0 24px;
padding: 12px 24px;
`;
const SectionText = styled(Text)`
@@ -37,15 +29,20 @@ const SectionText = styled(Text)`
font-weight: 400;
`;
const SectionHeading = React.memo(function SectionHeading(props: { label: string }) {
const SectionHeading = React.memo(function SectionHeading(props: {
label: string;
}) {
const { top } = useNavigationOffsets();
const { label } = props;
return (
<ColoredBlurView>
<SectionContainer>
<SectionText>{label}</SectionText>
</SectionContainer>
</ColoredBlurView>
<View style={{ paddingTop: top }}>
<ColoredBlurView>
<SectionContainer>
<SectionText>{label}</SectionText>
</SectionContainer>
</ColoredBlurView>
</View>
);
});
@@ -89,65 +86,55 @@ const Albums: React.FC = () => {
const dispatch = useAppDispatch();
const navigation = useNavigation<NavigationProp>();
const getImage = useGetImage();
const listRef = useRef<SectionList<string[]>>(null);
const listRef = useRef<FlashList<any>>(null);
// Create an array that computes all the height data for the entire list in
// advance. We can then use this pre-computed data to respond to
// `getItemLayout` calls, without having to compute things in place (and
// fail horribly).
// This approach was inspired by https://gist.github.com/RaphBlanchet/472ed013e05398c083caae6216b598b5
const itemLayouts = useMemo(() => {
// Create an array in which we will store all possible outputs for
// `getItemLayout`. We will loop through each potential album and add
// items that will be in the list
const layouts: Array<{ length: number; offset: number; index: number }> = [];
// Keep track of both the index of items and the offset (in pixels) from
// the top
let index = 0;
let offset = 0;
// Loop through each individual section (i.e. alphabet letter) and add
// all items in that particular section.
// Convert sections to flat array format for FlashList
const flatData = useMemo(() => {
const data: (string | string[])[] = [];
sections.forEach((section) => {
// Each section starts with a header, so we'll need to add the item,
// as well as the offset.
layouts[index] = ({ length: HeadingHeight, offset, index });
index++;
offset += HeadingHeight;
// Then, loop through all the rows (sets of two albums) and add
// items for those as well.
section.data.forEach(() => {
layouts[index] = ({ length: AlbumHeight, offset, index });
index++;
offset += AlbumHeight;
if (!section.data.length || !section.data[0].length) return;
// Add section header
data.push(section.label);
// Add section items
section.data.forEach((item) => {
data.push(item);
});
// The way SectionList works is that you get an item for a
// SectionHeader and a SectionFooter, no matter if you've specified
// whether you want them or not. Thus, we will need to add an empty
// footer as an item, so that we don't mismatch our indexes
layouts[index] = { length: 0, offset, index };
index++;
});
// Then, store and memoize the output
return layouts;
return data;
}, [sections]);
// Compute sticky header indices
const stickyHeaderIndices = useMemo(() => {
return flatData
.map((item, index) => typeof item === 'string' ? index : null)
.filter((item): item is number => item !== null);
}, [flatData]);
// Set callbacks
const retrieveData = useCallback(() => dispatch(fetchAllAlbums()), [dispatch]);
const selectAlbum = useCallback((id: string) => navigation.navigate('Album', { id, album: albums[id] as Album }), [navigation, albums]);
const selectLetter = useCallback((sectionIndex: number) => {
listRef.current?.scrollToLocation({ sectionIndex, itemIndex: 0, animated: false, });
}, [listRef]);
const generateItem = useCallback(({ item }: { item: string[] }) => {
const selectLetter = useCallback(({ letter }: { letter: string, index: number }) => {
const index = flatData.findIndex((item) => (
typeof item === 'string' && item === letter
));
if (index !== -1) {
listRef.current?.scrollToIndex({ index, animated: false });
}
}, [flatData]);
const renderItem = useCallback(({ item }: { item: string | string[]; index: number }) => {
if (typeof item === 'string') {
return (
<SectionHeading
label={item}
/>
);
}
return (
<View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }} key={item.join('-')}>
{item.map((id) => (
<View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }}>
{item.map((id, i) => (
<GeneratedAlbumItem
key={id}
key={i}
id={id}
imageUrl={getImage(albums[id])}
name={albums[id]?.Name || ''}
@@ -161,7 +148,6 @@ const Albums: React.FC = () => {
// Retrieve data on mount
useEffect(() => {
// GUARD: Only refresh this API call every set amounts of days
if (!lastRefreshed || differenceInDays(lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) {
retrieveData();
}
@@ -170,19 +156,18 @@ const Albums: React.FC = () => {
return (
<>
<AlphabetScroller onSelect={selectLetter} />
<SafeSectionList
sections={sections}
<SafeFlashList
data={flatData}
refreshing={isLoading}
onRefresh={retrieveData}
getItemLayout={(_, i) => itemLayouts[i] ?? { length: 0, offset: 0, index: i }}
ref={listRef}
keyExtractor={(item) => item.join('-')}
renderSectionHeader={generateSection}
renderItem={generateItem}
renderItem={renderItem}
stickyHeaderIndices={stickyHeaderIndices}
estimatedItemSize={AlbumHeight}
getItemType={(item) => typeof item === 'string' ? 'sectionHeader' : 'row'}
/>
</>
);
};
export default Albums;

130
src/screens/Music/stacks/Artists.tsx
View File

@@ -1,33 +1,25 @@
import React, { useCallback, useEffect, useRef, useMemo } from 'react';
import { useGetImage } from '@/utility/JellyfinApi/lib';
import { SectionList, View } from 'react-native';
import { View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { differenceInDays } from 'date-fns';
import { useAppDispatch, useTypedSelector } from '@/store';
import { fetchAllAlbums } from '@/store/music/actions';
import { ALBUM_CACHE_AMOUNT_OF_DAYS } from '@/CONSTANTS';
import AlbumImage from './components/AlbumImage';
import { SectionArtistItem, SectionedArtist, selectArtists } from '@/store/music/selectors';
import { SectionArtistItem, selectArtists } from '@/store/music/selectors';
import AlphabetScroller from '@/components/AlphabetScroller';
import styled from 'styled-components/native';
import useDefaultStyles, { ColoredBlurView } from '@/components/Colors';
import { Text } from '@/components/Typography';
import { NavigationProp } from '@/screens/types';
import { SafeSectionList } from '@/components/SafeNavigatorView';
import { SafeFlashList, useNavigationOffsets } from '@/components/SafeNavigatorView';
import { Gap } from '@/components/Utility';
const HeadingHeight = 50;
function generateSection({ section }: { section: SectionedArtist }) {
return (
<SectionHeading label={section.label} key={section.label} />
);
}
import { FlashList } from '@shopify/flash-list';
const SectionContainer = styled.View`
height: ${HeadingHeight}px;
justify-content: center;
padding: 0 24px;
padding: 12px 24px;
`;
const SectionText = styled(Text)`
@@ -51,14 +43,17 @@ const ArtistContainer = styled.Pressable`
`;
const SectionHeading = React.memo(function SectionHeading(props: { label: string }) {
const { top } = useNavigationOffsets();
const { label } = props;
return (
<ColoredBlurView>
<SectionContainer>
<SectionText>{label}</SectionText>
</SectionContainer>
</ColoredBlurView>
<View style={{ paddingTop: top }}>
<ColoredBlurView>
<SectionContainer>
<SectionText>{label}</SectionText>
</SectionContainer>
</ColoredBlurView>
</View>
);
});
@@ -95,8 +90,6 @@ const GeneratedArtistItem = React.memo(function GeneratedArtistItem(props: Gener
pressed && defaultStyles.themeColor,
{ flexShrink: 1 }
]}
>
{item.Name}
</Text>
@@ -108,7 +101,6 @@ const GeneratedArtistItem = React.memo(function GeneratedArtistItem(props: Gener
const Artists: React.FC = () => {
// Retrieve data from store
// const { entities: albums } = useTypedSelector((state) => state.music.albums);
const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
const lastRefreshed = useTypedSelector((state) => state.music.albums.lastRefreshed);
const sections = useTypedSelector(selectArtists);
@@ -117,63 +109,50 @@ const Artists: React.FC = () => {
const dispatch = useAppDispatch();
const navigation = useNavigation<NavigationProp>();
const getImage = useGetImage();
const listRef = useRef<SectionList<SectionArtistItem>>(null);
const listRef = useRef<FlashList<any>>(null);
// Create an array that computes all the height data for the entire list in
// advance. We can then use this pre-computed data to respond to
// `getItemLayout` calls, without having to compute things in place (and
// fail horribly).
// This approach was inspired by https://gist.github.com/RaphBlanchet/472ed013e05398c083caae6216b598b5
const itemLayouts = useMemo(() => {
// Create an array in which we will store all possible outputs for
// `getItemLayout`. We will loop through each potential album and add
// items that will be in the list
const layouts: Array<{ length: number; offset: number; index: number }> = [];
// Keep track of both the index of items and the offset (in pixels) from
// the top
let index = 0;
let offset = 0;
// Loop through each individual section (i.e. alphabet letter) and add
// all items in that particular section.
// Convert sections to flat array format for FlashList
const flatData = useMemo(() => {
const data: (string | SectionArtistItem)[] = [];
sections.forEach((section) => {
// Each section starts with a header, so we'll need to add the item,
// as well as the offset.
layouts[index] = ({ length: HeadingHeight, offset, index });
index++;
offset += HeadingHeight;
// Then, loop through all the rows and add items for those as well.
section.data.forEach(() => {
offset += ArtistHeight;
layouts[index] = ({ length: ArtistHeight, offset, index });
index++;
if (!section.data.length) return;
// Add section header
data.push(section.label);
// Add section items
section.data.forEach((item) => {
data.push(item);
});
// The way SectionList works is that you get an item for a
// SectionHeader and a SectionFooter, no matter if you've specified
// whether you want them or not. Thus, we will need to add an empty
// footer as an item, so that we don't mismatch our indexes
layouts[index] = { length: 0, offset, index };
index++;
});
// Then, store and memoize the output
return layouts;
return data;
}, [sections]);
// Compute sticky header indices
const stickyHeaderIndices = useMemo(() => {
return flatData
.map((item, index) => typeof item === 'string' ? index : null)
.filter((item): item is number => item !== null);
}, [flatData]);
// Set callbacks
const retrieveData = useCallback(() => dispatch(fetchAllAlbums()), [dispatch]);
const selectArtist = useCallback((payload: SectionArtistItem) => (
navigation.navigate('Artist', payload)
), [navigation]);
const selectLetter = useCallback((sectionIndex: number) => {
listRef.current?.scrollToLocation({ sectionIndex, itemIndex: 0, animated: false, });
}, [listRef]);
const generateItem = useCallback(({ item }: { item: SectionArtistItem }) => {
const selectLetter = useCallback(({ letter }: { letter: string, index: number }) => {
const index = flatData.findIndex((item) => (
typeof item === 'string' && item === letter
));
if (index !== -1) {
listRef.current?.scrollToIndex({ index, animated: false });
}
}, [flatData]);
const renderItem = useCallback(({ item }: { item: string | SectionArtistItem }) => {
if (typeof item === 'string') {
return <SectionHeading label={item} />;
}
return (
<View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }} key={item.Id}>
<View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 32 }}>
<GeneratedArtistItem
key={item.Id}
item={item}
@@ -186,7 +165,6 @@ const Artists: React.FC = () => {
// Retrieve data on mount
useEffect(() => {
// GUARD: Only refresh this API call every set amounts of days
if (!lastRefreshed || differenceInDays(lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) {
retrieveData();
}
@@ -195,24 +173,18 @@ const Artists: React.FC = () => {
return (
<>
<AlphabetScroller onSelect={selectLetter} />
<SafeSectionList
sections={sections}
<SafeFlashList
data={flatData}
refreshing={isLoading}
onRefresh={retrieveData}
getItemLayout={(_, i) => {
if (!(i in itemLayouts)) {
// console.log('COuLD NOT FIND LAYOUT ITEM', i, _);
}
return itemLayouts[i] ?? { length: 0, offset: 0, index: i };
}}
ref={listRef}
keyExtractor={(item) => item.Id}
renderSectionHeader={generateSection}
renderItem={generateItem}
renderItem={renderItem}
stickyHeaderIndices={stickyHeaderIndices}
estimatedItemSize={ArtistHeight}
getItemType={(item) => typeof item === 'string' ? 'sectionHeader' : 'row'}
/>
</>
);
};
export default Artists;