mirror of
https://github.com/austinried/subtracks.git
synced 2025-12-27 00:59:28 +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
98 lines
2.3 KiB
TypeScript
98 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { Image, View, StyleSheet, Text } from 'react-native'
|
|
import { Store, useStore } from '@app/state/store'
|
|
import colors from '@app/styles/colors'
|
|
import GradientBackground from '@app/components/GradientBackground'
|
|
import font from '@app/styles/font'
|
|
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
|
|
|
|
const selectHydrated = (store: Store) => store.hydrated
|
|
|
|
const SplashPage: React.FC<{}> = ({ children }) => {
|
|
const [ready, setReady] = useState(false)
|
|
const hydrated = useStore(selectHydrated)
|
|
const opacity = useSharedValue(0)
|
|
|
|
const animatedStyles = useAnimatedStyle(() => {
|
|
return {
|
|
opacity: opacity.value,
|
|
}
|
|
})
|
|
|
|
const minSplashTime = new Promise(resolve => setTimeout(resolve, 1000))
|
|
|
|
const prepare = async () => {
|
|
return
|
|
}
|
|
|
|
const promise = Promise.all([prepare(), minSplashTime])
|
|
|
|
useEffect(() => {
|
|
opacity.value = withTiming(1, {
|
|
duration: 200,
|
|
})
|
|
promise
|
|
.then(() => {
|
|
setReady(true)
|
|
})
|
|
.then(() => {
|
|
opacity.value = withTiming(0, {
|
|
duration: 500,
|
|
})
|
|
})
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
const splash = (
|
|
<Animated.View style={[styles.splashContainer, animatedStyles]} pointerEvents="none">
|
|
<GradientBackground style={styles.background} height="100%">
|
|
<View style={styles.logoContainer}>
|
|
<Image style={styles.image} source={require('@res/casette.png')} fadeDuration={0} />
|
|
<Text style={styles.text}>subtracks</Text>
|
|
</View>
|
|
</GradientBackground>
|
|
</Animated.View>
|
|
)
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{ready && hydrated && children}
|
|
{splash}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
splashContainer: {
|
|
position: 'absolute',
|
|
height: '100%',
|
|
width: '100%',
|
|
},
|
|
background: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
logoContainer: {
|
|
elevation: 5,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
image: {
|
|
height: 150,
|
|
width: 150,
|
|
marginBottom: -10,
|
|
tintColor: colors.accent,
|
|
},
|
|
text: {
|
|
fontFamily: font.bold,
|
|
fontSize: 31,
|
|
color: colors.text.primary,
|
|
},
|
|
})
|
|
|
|
export default SplashPage
|