Added Blur

ios/Podfile.lock

@@ -8,6 +8,35 @@ PODS:
   - hermes-engine (0.80.0):
     - hermes-engine/Pre-built (= 0.80.0)
   - hermes-engine/Pre-built (0.80.0)
+  - JellifyBlur (0.1.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
   - libwebp (1.5.0):
     - libwebp/demux (= 1.5.0)
     - libwebp/mux (= 1.5.0)
@@ -2825,6 +2854,7 @@ DEPENDENCIES:
   - fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
+  - JellifyBlur (from `../node_modules/jellify-blur`)
   - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
   - RCTRequired (from `../node_modules/react-native/Libraries/Required`)
@@ -2942,6 +2972,8 @@ EXTERNAL SOURCES:
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
     :tag: hermes-2025-05-06-RNv0.80.0-4eb6132a5bf0450bf4c6c91987675381d7ac8bca
+  JellifyBlur:
+    :path: "../node_modules/jellify-blur"
   RCT-Folly:
     :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTDeprecation:
@@ -3129,6 +3161,7 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 7068e976238b29e97b3bafd09a994542af7d5c0b
+  JellifyBlur: 1f1e30702383cdb9d33b3fc9dc78525fd9340d5c
   libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
   RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
   RCTDeprecation: ff787f6c860a1b97dd1bc27264b61d23ad1994da

package.json

@@ -66,6 +66,7 @@
     "react-native-config": "^1.5.5",
     "react-native-device-info": "^14.0.4",
     "react-native-dns-lookup": "^1.0.6",
+    "jellify-blur":"git+https://github.com/riteshshukla04/JellifyBlur.git",
     "react-native-draggable-flatlist": "^4.0.3",
     "react-native-fast-image": "^8.6.3",
     "react-native-fs": "^2.20.0",

src/components/Player/components/blurred-background.tsx

@@ -1,36 +1,84 @@
-import React, { useMemo } from 'react'
-import { usePlayerContext } from '../../../providers/Player'
-import { Blurhash } from 'react-native-blurhash'
+import React from 'react';
+import { Image } from 'react-native';
+import { JellifyBlurView } from 'jellify-blur';
+import { usePlayerContext } from '../../../providers/Player';
+import { useJellifyContext } from '../../../providers';
+import { View } from 'tamagui';
+import { getImageApi } from '@jellyfin/sdk/lib/utils/api';
 
-export default function BlurredBackground({
-	width,
-	height,
-}: {
-	width: number
-	height: number
-}): React.JSX.Element {
-	const { nowPlaying } = usePlayerContext()
 
-	const blurhash = useMemo(() => {
-		return nowPlaying &&
-			nowPlaying.item.ImageBlurHashes &&
-			nowPlaying.item.ImageBlurHashes.Primary
-			? Object.values(nowPlaying.item.ImageBlurHashes.Primary)[0]
-			: ''
-	}, [nowPlaying])
-
-	return (
-		<Blurhash
-			blurhash={blurhash}
-			decodeHeight={32}
-			decodeWidth={32}
-			resizeMode='stretch'
-			style={{
-				flex: 1,
-				width,
-				height,
-				opacity: 0.5,
-			}}
-		/>
-	)
+interface BlurredBackgroundProps {
+  width: number;
+  height: number;
 }
+
+export default function BlurredBackground({ width, height }: BlurredBackgroundProps): React.JSX.Element {
+  const { nowPlaying } = usePlayerContext();
+  const { api } = useJellifyContext();
+
+  // Get the artwork URL for the current playing item
+  const getArtworkUrl = () => {
+    return getImageApi(api!).getItemImageUrlById(nowPlaying!.item.AlbumId!)
+  };
+
+  const artworkUrl = getArtworkUrl();
+
+  return (
+    <View
+      position="absolute"
+      top={0}
+      left={0}
+      width={width}
+      height={height}
+      zIndex={-1}
+    >
+      {artworkUrl ? (
+        <JellifyBlurView
+          blurType="dark"
+          blurAmount={90}
+          style={{
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+          }}
+        >
+          <Image
+            source={{ uri: artworkUrl }}
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+            }}
+            resizeMode="cover"
+          />
+          {/* Additional dark overlay for better text readability */}
+          <View
+            position="absolute"
+            top={0}
+            left={0}
+            width="100%"
+            height="100%"
+            backgroundColor="rgba(0, 0, 0, 0.3)"
+          />
+        </JellifyBlurView>
+      ) : (
+        // Fallback background when no artwork is available
+        <JellifyBlurView
+          blurType="dark"
+          blurAmount={95}
+          style={{
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+          }}
+        >
+          <View
+            width="100%"
+            height="100%"
+            backgroundColor="$background"
+          />
+        </JellifyBlurView>
+      )}
+    </View>
+  );
+} 

src/components/Player/mini-player.tsx

@@ -37,11 +37,12 @@ export function Miniplayer({
 	// Get progress from the track player with the specified update interval
 	const progress = useProgress(UPDATE_INTERVAL, false)
 
-	const { width } = useWindowDimensions()
+	const { width, height } = useWindowDimensions()
 
 	return (
 		<ZStack height={'$8'}>
-			<BlurredBackground width={width} height={40} />
+			<BlurredBackground width={width} height={height} />
+
 			{nowPlaying && (
 				<>
 					<YStack>
@@ -129,6 +130,7 @@ export function Miniplayer({
 					</YStack>
 				</>
 			)}
+		
 		</ZStack>
 	)
 }