blur

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
+      {backgroundImg ? (
-        source={backgroundImg}
+        <Image
-        resizeMode="cover"
+          source={backgroundImg}
-        style={{
+          resizeMode="cover"
-          position: "absolute",
+          // blurRadius={!isWeb ? blurIntensity : undefined}
-          top: 0,
+          blurIntensity={blurIntensity}
-          left: 0,
+          style={{
-          width: "100%",
+            position: "absolute",
-          height: "100%",
+            top: 0,
-        }}
+            left: 0,
-      />
+            width: "100%",
+            height: "100%",
+            ...(isWeb && blurIntensity
+              ? { filter: `blur(${blurIntensity}px)` }
+              : {}),
+          }}
+        />
+      ) : null}
       <PageContainer
         {...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
         style={{

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) => (

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,