Skip to content

Commit 644bcb1

Browse files
author
Flixor
committed
Mobile: Back button ui improvements
1 parent 62232c0 commit 644bcb1

1 file changed

Lines changed: 24 additions & 43 deletions

File tree

‎apps/mobile/src/screens/Details.tsx‎

Lines changed: 24 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export default function Details({ route }: RouteParams) {
105105
};
106106
const isUnifiedLayout = detailsSettings.layout === 'unified';
107107
const [loading, setLoading] = useState(true);
108+
const [glassKey, setGlassKey] = useState(0); // Force GlassView re-render on focus
108109
const [meta, setMeta] = useState<any>(null);
109110
const [episodes, setEpisodes] = useState<any[]>([]);
110111
const [seasons, setSeasons] = useState<any[]>([]);
@@ -273,6 +274,8 @@ export default function Details({ route }: RouteParams) {
273274
useCallback(() => {
274275
TopBarStore.setVisible(false);
275276
TopBarStore.setTabBarVisible(false);
277+
// Force GlassView to re-render on focus (fixes iOS liquid glass not showing after navigation)
278+
setGlassKey(k => k + 1);
276279
// No cleanup - let underlying screens (Home/Browse) manage their own TopBar state
277280
}, [])
278281
);
@@ -939,7 +942,7 @@ export default function Details({ route }: RouteParams) {
939942
>
940943
{/* Blur background */}
941944
<View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
942-
<ConditionalBlurView intensity={90} tint="dark" style={StyleSheet.absoluteFillObject} />
945+
<ConditionalBlurView intensity={50} tint="dark" style={StyleSheet.absoluteFillObject} />
943946
<View style={[StyleSheet.absoluteFillObject, { backgroundColor: headerOverlayColor }]} />
944947
{/* Bottom separator */}
945948
<View
@@ -956,20 +959,9 @@ export default function Details({ route }: RouteParams) {
956959
{/* Header content */}
957960
<View style={{ paddingTop: insets.top, paddingBottom: 12 }}>
958961
<View style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 }}>
959-
{/* Back button in sticky header */}
960-
<Pressable onPress={() => nav.goBack()} style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
961-
{Platform.OS === 'ios' && GlassViewComp && liquidGlassAvailable ? (
962-
<GlassViewComp style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
963-
<Ionicons name="chevron-back" color="#fff" size={22} />
964-
</GlassViewComp>
965-
) : (
966-
<>
967-
<ConditionalBlurView intensity={60} tint="dark" style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
968-
<Ionicons name="chevron-back" color="#fff" size={22} />
969-
</ConditionalBlurView>
970-
<View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 18, borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' }} pointerEvents="none" />
971-
</>
972-
)}
962+
{/* Back button in sticky header - uses simple styling since header already has blur */}
963+
<Pressable onPress={() => nav.goBack()} style={{ width: 36, height: 36, borderRadius: 18, backgroundColor: 'rgba(0,0,0,0.3)', alignItems: 'center', justifyContent: 'center' }}>
964+
<Ionicons name="chevron-back" color="#fff" size={22} />
973965
</Pressable>
974966
{/* Centered logo or title */}
975967
<View style={{ flex: 1, alignItems: 'center', marginHorizontal: 8 }}>
@@ -981,31 +973,16 @@ export default function Details({ route }: RouteParams) {
981973
</Text>
982974
)}
983975
</View>
984-
{/* Watchlist button */}
976+
{/* Watchlist button - uses simple styling since header already has blur */}
985977
<Pressable
986978
onPress={handleStickyWatchlistToggle}
987979
disabled={watchlistLoading}
988-
style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden', opacity: watchlistLoading ? 0.5 : 1 }}
980+
style={{ width: 36, height: 36, borderRadius: 18, backgroundColor: 'rgba(0,0,0,0.3)', alignItems: 'center', justifyContent: 'center', opacity: watchlistLoading ? 0.5 : 1 }}
989981
>
990-
{Platform.OS === 'ios' && GlassViewComp && liquidGlassAvailable ? (
991-
<GlassViewComp style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
992-
{watchlistLoading ? (
993-
<ActivityIndicator size="small" color="#fff" />
994-
) : (
995-
<Ionicons name={inWatchlist ? 'bookmark' : 'bookmark-outline'} size={18} color="#fff" />
996-
)}
997-
</GlassViewComp>
982+
{watchlistLoading ? (
983+
<ActivityIndicator size="small" color="#fff" />
998984
) : (
999-
<>
1000-
<ConditionalBlurView intensity={60} tint="dark" style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
1001-
{watchlistLoading ? (
1002-
<ActivityIndicator size="small" color="#fff" />
1003-
) : (
1004-
<Ionicons name={inWatchlist ? 'bookmark' : 'bookmark-outline'} size={18} color="#fff" />
1005-
)}
1006-
</ConditionalBlurView>
1007-
<View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 18, borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' }} pointerEvents="none" />
1008-
</>
985+
<Ionicons name={inWatchlist ? 'bookmark' : 'bookmark-outline'} size={18} color="#fff" />
1009986
)}
1010987
</Pressable>
1011988
</View>
@@ -1020,20 +997,23 @@ export default function Details({ route }: RouteParams) {
1020997
contentContainerStyle={{ paddingBottom: 32 + insets.bottom }}
1021998
>
1022999
{/* Hero backdrop with parallax */}
1023-
<View style={{ overflow: 'hidden' }}>
1024-
<View style={{ width: '100%', aspectRatio: 16/9, backgroundColor: '#111' }}>
1000+
<View style={{ overflow: 'hidden' }} pointerEvents="box-none">
1001+
<View style={{ width: '100%', aspectRatio: 16/9, backgroundColor: '#111' }} pointerEvents="box-none">
10251002
{backdrop() && FastImage ? (
1026-
<Animated.View style={[{ width: '100%', height: '100%' }, backdropAnimatedStyle]}>
1003+
<Animated.View style={[{ width: '100%', height: '100%' }, backdropAnimatedStyle]} pointerEvents="none">
10271004
<FastImage source={{ uri: backdrop() }} style={{ width: '100%', height: '120%' }} resizeMode="cover" />
10281005
</Animated.View>
10291006
) : null}
10301007
{/* Top-left back button */}
10311008
<View style={{ position: 'absolute', left: 12, top: insets.top + 8, flexDirection: 'row' }}>
1032-
<Pressable onPress={() => nav.goBack()} style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
1009+
<Pressable onPress={() => nav.goBack()} style={{ width: 36, height: 36 }}>
10331010
{Platform.OS === 'ios' && GlassViewComp && liquidGlassAvailable ? (
1034-
<GlassViewComp style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
1035-
<Ionicons name="chevron-back" color="#fff" size={22} />
1036-
</GlassViewComp>
1011+
<>
1012+
<GlassViewComp key={`glass-${glassKey}`} style={{ position: 'absolute', width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }} isInteractive glassEffectStyle="clear" tintColor="rgba(59, 55, 55, 0.15)" />
1013+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} pointerEvents="none">
1014+
<Ionicons name="chevron-back" color="#fff" size={22} />
1015+
</View>
1016+
</>
10371017
) : (
10381018
<>
10391019
<ConditionalBlurView intensity={60} tint="dark" style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -1049,10 +1029,11 @@ export default function Details({ route }: RouteParams) {
10491029
colors={getGradientColors as [string, string, ...string[]]}
10501030
locations={[0, 0.3, 0.5, 0.7, 1]}
10511031
style={{ position: 'absolute', left: 0, right: 0, bottom: -1, height: '70%' }}
1032+
pointerEvents="none"
10521033
/>
10531034
{/* TMDB logo overlay with parallax */}
10541035
{meta?.logoUrl && FastImage ? (
1055-
<Animated.View style={[{ position: 'absolute', bottom: 24, left: '10%', right: '10%', height: 48 }, logoAnimatedStyle]}>
1036+
<Animated.View style={[{ position: 'absolute', bottom: 24, left: '10%', right: '10%', height: 48 }, logoAnimatedStyle]} pointerEvents="none">
10561037
<FastImage source={{ uri: meta.logoUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />
10571038
</Animated.View>
10581039
) : null}

0 commit comments

Comments
 (0)