Refactor: Extract background insets logic into reusable hook

Created useBackgroundInsets hook to reduce code duplication and improve maintainability. This hook encapsulates the logic for calculating negative safe area insets used to extend backgrounds beyond safe area boundaries.

Co-authored-by: maotoumao <31655147+maotoumao@users.noreply.github.com>

Author: Copilot

src/components/base/pageBackground.tsx

@@ -3,13 +3,13 @@ import { StyleSheet, View } from "react-native";
 import Image from "./image";
 import useColors from "@/hooks/useColors";
 import Theme from "@/core/theme";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import useBackgroundInsets from "@/hooks/useBackgroundInsets";
 
 function PageBackground() {
     const theme = Theme.useTheme();
     const background = Theme.useBackground();
     const colors = useColors();
-    const insets = useSafeAreaInsets();
+    const backgroundInsets = useBackgroundInsets();
 
     return (
         <>
@@ -19,10 +19,7 @@ function PageBackground() {
                     {
                         backgroundColor:
                             colors?.pageBackground ?? colors.background,
-                        top: -insets.top,
-                        bottom: -insets.bottom,
-                        left: -insets.left,
-                        right: -insets.right,
+                        ...backgroundInsets,
                     },
                 ]}
             />
@@ -33,10 +30,7 @@ function PageBackground() {
                         style.wrapper,
                         {
                             opacity: background?.opacity ?? 0.6,
-                            top: -insets.top,
-                            bottom: -insets.bottom,
-                            left: -insets.left,
-                            right: -insets.right,
+                            ...backgroundInsets,
                         },
                     ]}
                     blurRadius={background?.blur ?? 20}

src/hooks/useBackgroundInsets.ts

@@ -0,0 +1,16 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/**
+ * Hook that returns negative safe area insets for extending backgrounds
+ * beyond safe area boundaries to cover the entire screen.
+ */
+export default function useBackgroundInsets() {
+    const insets = useSafeAreaInsets();
+    
+    return {
+        top: -insets.top,
+        bottom: -insets.bottom,
+        left: -insets.left,
+        right: -insets.right,
+    };
+}

src/pages/musicDetail/components/background.tsx

@@ -2,11 +2,11 @@ import React, { useMemo } from "react";
 import { Image, StyleSheet, View } from "react-native";
 import { ImgAsset } from "@/constants/assetsConst";
 import { useCurrentMusic } from "@/core/trackPlayer";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import useBackgroundInsets from "@/hooks/useBackgroundInsets";
 
 export default function Background() {
     const musicItem = useCurrentMusic();
-    const insets = useSafeAreaInsets();
+    const backgroundInsets = useBackgroundInsets();
 
     const artworkSource = useMemo(() => {
         if (!musicItem?.artwork) {
@@ -26,22 +26,12 @@ export default function Background() {
         <>
             <View style={[
                 style.background,
-                {
-                    top: -insets.top,
-                    bottom: -insets.bottom,
-                    left: -insets.left,
-                    right: -insets.right,
-                }
+                backgroundInsets
             ]} />
             <Image 
                 style={[
                     style.blur,
-                    {
-                        top: -insets.top,
-                        bottom: -insets.bottom,
-                        left: -insets.left,
-                        right: -insets.right,
-                    }
+                    backgroundInsets
                 ]} 
                 blurRadius={50} 
                 source={artworkSource}