@@ -28,7 +28,8 @@ import { SafeScrollView, useNavigationOffsets } from '@/components/SafeNavigator
|
|||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
index: {
|
index: {
|
||||||
marginRight: 12
|
marginRight: 12,
|
||||||
|
textAlign: 'right',
|
||||||
},
|
},
|
||||||
activeText: {
|
activeText: {
|
||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
@@ -105,6 +106,26 @@ const TrackListView: React.FC<TrackListViewProps> = ({
|
|||||||
const navigation = useNavigation<NavigationProp>();
|
const navigation = useNavigation<NavigationProp>();
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
// Visual helpers
|
||||||
|
const { indexWidth } = useMemo(() => {
|
||||||
|
// Retrieve the largest index in the current set of tracks
|
||||||
|
const largestIndex = trackIds.reduce((max, trackId, i) => {
|
||||||
|
// Retrieve the index for this trackid, depending on settings
|
||||||
|
const index = listNumberingStyle === 'index'
|
||||||
|
? i + 1
|
||||||
|
: tracks[trackId]?.IndexNumber;
|
||||||
|
|
||||||
|
// Check that the current index is larger than the current max.
|
||||||
|
return index > max ? index: max;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
// Retrieve the number of digits in the largest index
|
||||||
|
const noDigits = largestIndex.toFixed(0).toString().length;
|
||||||
|
|
||||||
|
// Set a minWidth proportional to the largest amount of digits in an index
|
||||||
|
return StyleSheet.create({ indexWidth: { minWidth: noDigits * 8 } });
|
||||||
|
}, [trackIds, tracks, listNumberingStyle]);
|
||||||
|
|
||||||
// Setup callbacks
|
// Setup callbacks
|
||||||
const playEntity = useCallback(() => { playTracks(trackIds); }, [playTracks, trackIds]);
|
const playEntity = useCallback(() => { playTracks(trackIds); }, [playTracks, trackIds]);
|
||||||
const shuffleEntity = useCallback(() => { playTracks(trackIds, { shuffle: true }); }, [playTracks, trackIds]);
|
const shuffleEntity = useCallback(() => { playTracks(trackIds, { shuffle: true }); }, [playTracks, trackIds]);
|
||||||
@@ -162,6 +183,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
|
|||||||
defaultStyles.textQuarterOpacity,
|
defaultStyles.textQuarterOpacity,
|
||||||
currentTrack?.backendId === trackId && styles.activeText,
|
currentTrack?.backendId === trackId && styles.activeText,
|
||||||
currentTrack?.backendId === trackId && defaultStyles.themeColorQuarterOpacity,
|
currentTrack?.backendId === trackId && defaultStyles.themeColorQuarterOpacity,
|
||||||
|
indexWidth,
|
||||||
]}
|
]}
|
||||||
numberOfLines={1}
|
numberOfLines={1}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user