From c6a5501cffbc87ed69acc168786cd4879039a84b Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Fri, 3 Oct 2025 10:35:25 +0200
Subject: [PATCH] blur

---
 src/layouts/Page.js                     | 34 +++++++++++++++----------
 src/screens/HitParade/HitParade.js      |  4 +++
 src/screens/Library/MusicDetails.web.js |  4 +--
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/layouts/Page.js b/src/layouts/Page.js
index b29627a..a749efb 100644
--- a/src/layouts/Page.js
+++ b/src/layouts/Page.js
@@ -6,9 +6,9 @@ import React from "reactn";
 import { responsiveHeight } from "../actions/responsiveSizes.js";
 import BaseHeader from "../components/BaseHeader";
 import NavigateHeader from "../components/NavigateHeader";
-import { gutters } from "../styles";
-import { isWeb } from "../hooks/useLayoutType.js";
 import ShareBtn from "../components/ShareBtn/ShareBtn";
+import { isWeb } from "../hooks/useLayoutType.js";
+import { gutters } from "../styles";
 
 export default ({
   children,
@@ -35,6 +35,7 @@ export default ({
   width = undefined,
   maxWidth = 1200,
   shareBtn = false,
+  blurIntensity = 0,
 }) => {
   const PageContainer =
     containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
@@ -51,17 +52,24 @@ export default ({
         position: "relative",
       }}
     >
-      <Image
-        source={backgroundImg}
-        resizeMode="cover"
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-        }}
-      />
+      {backgroundImg ? (
+        <Image
+          source={backgroundImg}
+          resizeMode="cover"
+          // blurRadius={!isWeb ? blurIntensity : undefined}
+          blurIntensity={blurIntensity}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            ...(isWeb && blurIntensity
+              ? { filter: `blur(${blurIntensity}px)` }
+              : {}),
+          }}
+        />
+      ) : null}
       <PageContainer
         {...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
         style={{
diff --git a/src/screens/HitParade/HitParade.js b/src/screens/HitParade/HitParade.js
index 54f85f0..88b7b63 100644
--- a/src/screens/HitParade/HitParade.js
+++ b/src/screens/HitParade/HitParade.js
@@ -186,6 +186,9 @@ const HitParade = () => {
     <Page
       backgroundImg={isWeb ? background.libraryBgWeb : background.hitParadeBG}
       headerType="NONE"
+      width="100%"
+      maxWidth={null}
+      blurIntensity={isWeb ? 2 : 0}
     >
       <View style={{ gap: 12, flex: 1 }}>
         <Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
@@ -228,6 +231,7 @@ const HitParade = () => {
               ...Style.containerRow,
               justifyContent: "space-between",
               width: "auto",
+              gap: 12,
             }}
           >
             {["Chansons", "Playbacks"].map((item, index) => (
diff --git a/src/screens/Library/MusicDetails.web.js b/src/screens/Library/MusicDetails.web.js
index 177e00f..e546334 100644
--- a/src/screens/Library/MusicDetails.web.js
+++ b/src/screens/Library/MusicDetails.web.js
@@ -451,7 +451,7 @@ const MusicDetails = ({ route }) => {
       >
         {/* Left column: player */}
         <BlurView
-          intensity={1}
+          intensity={40}
           style={{
             flex: 1,
             paddingRight: 8,
@@ -605,7 +605,7 @@ const MusicDetails = ({ route }) => {
 
         {lines.length > 0 && (
           <BlurView
-            intensity={1}
+            intensity={40}
             style={{
               flex: 1,
               paddingLeft: 8,