mirror of
https://github.com/austinried/subtracks.git
synced 2025-12-27 09:09:29 +01:00
081251061d
* start of music store refactor moving stuff into a state cache better separate it from view logic * added paginated list/album list * reworked fetchAlbumList to remove ui state refactored home screen to use new method i broke playing songs somehow, JS thread goes into a loop * don't reset parts manually, do it all at once * fixed perf issue related to too many rerenders rerenders were caused by strict equality check on object/array picks switched artistInfo to new store updated zustand and fixed deprecation warnings * update typescript and use workspace tsc version for vscode * remove old artistInfo * switched to new playlist w/songs removed more unused stuff * remove unused + (slightly) rework search * refactor star * use only original/large imges for covers/artist fix view artist from context menu add loading indicators to song list and artist views (show info we have right away) * set starred/unstar assuming it works and correct state on error * reorg, remove old music slice files * added back fix for song cover art * sort artists by localCompare name * update licenses * fix now playing background grey bar * update react-native-gesture-handler for node-fetch security alert * fix another gradient height grey bar issue * update licenses again * remove thumbnail cache * rename to remove "Library" from methods * Revert "remove thumbnail cache" This reverts commit e0db4931f11bbf4cd8e73102d06505c6ae85f4a6. * use ids for lists, pull state later * Revert "use only original/large imges for covers/artist" This reverts commit c9aea9065ce6ebe3c8b09c10dd74d4de153d76fd. * deep equal ListItem props for now this needs a bigger refactor * use immer as middleware * refactor api client to use string method hoping to use this for requestKey/deduping next * use thumbnails in list items * Revert "refactor api client to use string method" This reverts commit 234326135b7af96cb91b941e7ca515f45c632556. * rename/cleanup * store servers by id * get rid of settings selectors * renames for clarity remove unused estimateContentLength setting * remove trackplayer selectors * fix migration for library filter settings * fixed shuffle order reporting wrong track/queue * removed the other selectors * don't actually need es6/react for our state * fix slow artist sort on star localeCompare is too slow for large lists
109 lines
3.1 KiB
TypeScript
109 lines
3.1 KiB
TypeScript
import NowPlayingBar from '@app/components/NowPlayingBar'
|
|
import PressableOpacity from '@app/components/PressableOpacity'
|
|
import { useFirstRun } from '@app/hooks/settings'
|
|
import colors from '@app/styles/colors'
|
|
import dimensions from '@app/styles/dimensions'
|
|
import font from '@app/styles/font'
|
|
import { bottomTabIcons, OutlineFillIcon } from '@app/styles/icons'
|
|
import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
|
|
import { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs/lib/typescript/src/types'
|
|
import { NavigationHelpers, ParamListBase } from '@react-navigation/native'
|
|
import React from 'react'
|
|
import { Image, ImageStyle, StyleSheet, Text, View } from 'react-native'
|
|
|
|
const BottomTabButton = React.memo<{
|
|
routeKey: string
|
|
label: string
|
|
name: string
|
|
isFocused: boolean
|
|
icon: OutlineFillIcon
|
|
navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
|
|
}>(({ routeKey, label, name, isFocused, icon, navigation }) => {
|
|
const firstRun = useFirstRun()
|
|
|
|
const disabled = firstRun && name !== 'settings'
|
|
|
|
const onPress = () => {
|
|
const event = navigation.emit({
|
|
type: 'tabPress',
|
|
target: routeKey,
|
|
canPreventDefault: true,
|
|
})
|
|
|
|
if (!isFocused && !event.defaultPrevented) {
|
|
navigation.navigate(name)
|
|
}
|
|
}
|
|
|
|
const focusColor = isFocused ? colors.text.primary : colors.text.secondary
|
|
const imgSource = isFocused ? icon.fill : icon.outline
|
|
const imgFocusStyle: ImageStyle = {
|
|
tintColor: focusColor,
|
|
opacity: isFocused ? 1 : 0.6,
|
|
}
|
|
const imgStyle = [styles.image, imgFocusStyle]
|
|
const textStyle = [styles.text, { color: focusColor }]
|
|
|
|
return (
|
|
<PressableOpacity onPress={onPress} style={styles.button} disabled={disabled}>
|
|
<Image source={imgSource} style={imgStyle} fadeDuration={0} />
|
|
<Text style={textStyle}>{label}</Text>
|
|
</PressableOpacity>
|
|
)
|
|
})
|
|
|
|
const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => (
|
|
<View>
|
|
<NowPlayingBar />
|
|
<View style={styles.container}>
|
|
{state.routes.map((route, index) => {
|
|
const { options } = descriptors[route.key] as any
|
|
const label =
|
|
options.tabBarLabel !== undefined
|
|
? (options.tabBarLabel as string)
|
|
: options.title !== undefined
|
|
? options.title
|
|
: route.name
|
|
|
|
return (
|
|
<BottomTabButton
|
|
key={route.key}
|
|
routeKey={route.key}
|
|
label={label}
|
|
name={route.name}
|
|
isFocused={state.index === index}
|
|
icon={bottomTabIcons[route.name]}
|
|
navigation={navigation}
|
|
/>
|
|
)
|
|
})}
|
|
</View>
|
|
</View>
|
|
)
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
height: dimensions.tabBar,
|
|
backgroundColor: colors.gradient.high,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-around',
|
|
paddingHorizontal: 28,
|
|
},
|
|
button: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
height: '100%',
|
|
},
|
|
image: {
|
|
height: 26,
|
|
width: 26,
|
|
},
|
|
text: {
|
|
fontSize: 10,
|
|
fontFamily: font.regular,
|
|
},
|
|
})
|
|
|
|
export default BottomTabBar
|