From d63fb7bac2f841bbbfe102701142ca3e8855480c Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Fri, 13 Mar 2026 16:30:54 -0400
Subject: [PATCH] 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.
---
 apps/native/src/app/title/[id].tsx | 70 ++++++++++++++++--------------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/apps/native/src/app/title/[id].tsx b/apps/native/src/app/title/[id].tsx
index 26e6922..0fd13ef 100644
--- a/apps/native/src/app/title/[id].tsx
+++ b/apps/native/src/app/title/[id].tsx
@@ -263,34 +263,23 @@ 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}
+        {/* Base darkening overlay */}
+        <View
+          className="absolute inset-0"
+          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.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 */}
         <LinearGradient
@@ -314,12 +303,29 @@ export default function TitleDetailScreen() {
             }
             className="absolute inset-0 items-center justify-center"
           >
-            <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>
+            {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>
         )}