refactor(native): move liquid glass effect from backdrop to play button

Replace the conditional GlassView backdrop overlay with plain tinted
Views, and apply the liquid glass effect to the play button circle
instead when supported.
This commit is contained in:
2026-03-13 16:30:54 -04:00
parent b6eb53e9b8
commit d63fb7bac2
+19 -13
View File
@@ -263,25 +263,16 @@ export default function TitleDetailScreen() {
contentFit="cover"
/>
)}
{/* Backdrop overlay: glass effect on supported devices, colored Views elsewhere */}
{isLiquidGlassAvailable() && palette?.vibrant ? (
<GlassView
glassEffectStyle="regular"
tintColor={palette.vibrant}
className="absolute inset-0"
/>
) : (
<>
{/* Base darkening overlay */}
<View
className="absolute inset-0"
style={{ backgroundColor: "rgba(0,0,0,0.45)" }}
style={{ backgroundColor: "rgba(0,0,0,0.1)" }}
/>
{/* Colored tint from palette */}
{palette?.darkMuted && (
<View
className="absolute inset-0"
style={{ backgroundColor: palette.darkMuted, opacity: 0.25 }}
style={{ backgroundColor: palette.darkMuted, opacity: 0.2 }}
/>
)}
{palette?.vibrant && (
@@ -290,8 +281,6 @@ export default function TitleDetailScreen() {
style={{ backgroundColor: palette.vibrant, opacity: 0.06 }}
/>
)}
</>
)}
{/* Bottom fade to background */}
<LinearGradient
colors={["transparent", "rgba(0,0,0,0.6)", "rgba(0,0,0,0.95)"]}
@@ -314,12 +303,29 @@ export default function TitleDetailScreen() {
}
className="absolute inset-0 items-center justify-center"
>
{isLiquidGlassAvailable() ? (
<GlassView
glassEffectStyle="clear"
colorScheme="dark"
isInteractive={true}
style={{
width: 56,
height: 56,
borderRadius: 28,
alignItems: "center",
justifyContent: "center",
}}
>
<IconPlayerPlay size={28} color="white" fill="white" />
</GlassView>
) : (
<View
className="h-14 w-14 items-center justify-center rounded-full"
style={{ backgroundColor: "rgba(0,0,0,0.6)" }}
>
<IconPlayerPlay size={28} color="white" fill="white" />
</View>
)}
</Pressable>
)}