renil/lx-music-mobile-mod
1
0
Fork 0
mirror of https://github.com/ikun0014/lx-music-mobile.git synced 2025-07-03 13:42:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

修复本地歌曲封面无法显示背景的问题

Browse Source
This commit is contained in:
lyswhut 2023-12-17 20:05:35 +08:00
parent ba96774ecc
commit fa879a8c4e
2 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/PageContent.tsx
View File

@ -11,6 +11,9 @@ interface Props {
children: React.ReactNode children: React.ReactNode
} }
const formatUri = <T extends string | null>(url: T) => {
return (typeof url == 'string' && url.startsWith('/')) ? `file://${url}` : url
}
export default ({ children }: Props) => { export default ({ children }: Props) => {
const theme = useTheme() const theme = useTheme()
@ -45,7 +48,7 @@ export default ({ children }: Props) => {
console.log('picUpdated', playerState.musicInfo.pic) console.log('picUpdated', playerState.musicInfo.pic)
pic = playerState.musicInfo.pic pic = playerState.musicInfo.pic
if (!isDynamicBg) return if (!isDynamicBg) return
void Image.prefetch(playerState.musicInfo.pic).then(() => { void Image.prefetch(formatUri(playerState.musicInfo.pic)).then(() => {
if (pic != playerState.musicInfo.pic || isUnmounted) return if (pic != playerState.musicInfo.pic || isUnmounted) return
setPic(playerState.musicInfo.pic) setPic(playerState.musicInfo.pic)
}).catch(() => { }).catch(() => {
@ -90,21 +93,23 @@ export default ({ children }: Props) => {
</View> </View>
</View> </View>
), [children, theme, windowSize.height, windowSize.width]) ), [children, theme, windowSize.height, windowSize.width])
const picComponent = useMemo(() => ( const picComponent = useMemo(() => {
<View style={{ flex: 1, overflow: 'hidden' }}> return (
<ImageBackground <View style={{ flex: 1, overflow: 'hidden' }}>
style={{ position: 'absolute', left: 0, top: 0, height: windowSize.height, width: windowSize.width, backgroundColor: theme['c-content-background'] }} <ImageBackground
source={{ uri: pic! }} style={{ position: 'absolute', left: 0, top: 0, height: windowSize.height, width: windowSize.width, backgroundColor: theme['c-content-background'] }}
resizeMode="cover" source={{ uri: formatUri(pic!) }}
blurRadius={30} resizeMode="cover"
> blurRadius={30}
<View style={{ flex: 1, flexDirection: 'column', backgroundColor: theme['c-content-background'], opacity: 0.8 }}></View> >
</ImageBackground> <View style={{ flex: 1, flexDirection: 'column', backgroundColor: theme['c-content-background'], opacity: 0.8 }}></View>
<View style={{ flex: 1, flexDirection: 'column' }}> </ImageBackground>
{children} <View style={{ flex: 1, flexDirection: 'column' }}>
{children}
</View>
</View> </View>
</View> )
), [children, pic, theme, windowSize.height, windowSize.width]) }, [children, pic, theme, windowSize.height, windowSize.width])
return pic ? picComponent : themeComponent return pic ? picComponent : themeComponent
} }

2
src/components/TimeoutExitEditModal.tsx
View File

@ -240,7 +240,7 @@ const styles = createStyle({
inputContent: { inputContent: {
marginTop: 8, marginTop: 8,
flex: 1, flex: 1,
// flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
}, },
input: { input: {