jake/sofa
1
Fork 0
mirror of https://github.com/jakejarvis/sofa.git synced 2026-08-29 01:35:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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:
jake
2026-03-13 16:30:54 -04:00
parent b6eb53e9b8
commit d63fb7bac2
1 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/native/src/app/title/[id].tsx
+38 -32
View File
@@ -263,34 +263,23 @@ export default function TitleDetailScreen() {
contentFit="cover" contentFit="cover"
/> />
)} )}
{/* Backdrop overlay: glass effect on supported devices, colored Views elsewhere */} {/* Base darkening overlay */}
{isLiquidGlassAvailable() && palette?.vibrant ? ( <View
<GlassView className="absolute inset-0"
glassEffectStyle="regular" style={{ backgroundColor: "rgba(0,0,0,0.1)" }}
tintColor={palette.vibrant} />
{/* Colored tint from palette */}
{palette?.darkMuted && (
<View
className="absolute inset-0" className="absolute inset-0"
style={{ backgroundColor: palette.darkMuted, opacity: 0.2 }}
/>
)}
{palette?.vibrant && (
<View
className="absolute inset-0"
style={{ backgroundColor: palette.vibrant, opacity: 0.06 }}
/> />
) : (
<>
{/* Base darkening overlay */}
<View
className="absolute inset-0"
style={{ backgroundColor: "rgba(0,0,0,0.45)" }}
/>
{/* Colored tint from palette */}
{palette?.darkMuted && (
<View
className="absolute inset-0"
style={{ backgroundColor: palette.darkMuted, opacity: 0.25 }}
/>
)}
{palette?.vibrant && (
<View
className="absolute inset-0"
style={{ backgroundColor: palette.vibrant, opacity: 0.06 }}
/>
)}
</>
)} )}
{/* Bottom fade to background */} {/* Bottom fade to background */}
<LinearGradient <LinearGradient
@@ -314,12 +303,29 @@ export default function TitleDetailScreen() {
} }
className="absolute inset-0 items-center justify-center" className="absolute inset-0 items-center justify-center"
> >
<View {isLiquidGlassAvailable() ? (
className="h-14 w-14 items-center justify-center rounded-full" <GlassView
style={{ backgroundColor: "rgba(0,0,0,0.6)" }} glassEffectStyle="clear"
> colorScheme="dark"
<IconPlayerPlay size={28} color="white" fill="white" /> isInteractive={true}
</View> 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> </Pressable>
)} )}