diff --git a/api/queries/query.config.ts b/api/queries/query.config.ts index 927e8e4c..71af3a5a 100644 --- a/api/queries/query.config.ts +++ b/api/queries/query.config.ts @@ -20,8 +20,8 @@ export const queryConfig = { format: ImageFormat.Png }, playerArtwork: { - fillHeight: 750, - fillWidth: 750, + fillHeight: 1000, + fillWidth: 1000, format: ImageFormat.Jpg } } \ No newline at end of file diff --git a/components/Player/component.tsx b/components/Player/component.tsx index 422989dd..db18c4a0 100644 --- a/components/Player/component.tsx +++ b/components/Player/component.tsx @@ -8,24 +8,48 @@ import { getImageApi } from "@jellyfin/sdk/lib/utils/api"; import { ImageType } from "@jellyfin/sdk/lib/generated-client/models"; import { queryConfig } from "../../api/queries/query.config"; import { Text } from "../Global/helpers/text"; -import { SafeAreaView } from "react-native-safe-area-context"; +import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context"; import { BottomTabNavigationEventMap } from "@react-navigation/bottom-tabs"; import { NavigationHelpers, ParamListBase } from "@react-navigation/native"; import { HorizontalSlider } from "../Global/helpers/slider"; import PlayPauseButton from "./helpers/buttons"; +import { BlurView } from "@react-native-community/blur"; +import React from "react"; export default function Player({ navigation }: { navigation : NavigationHelpers }): React.JSX.Element { const { apiClient } = useApiClientContext(); - const { queue, playbackState, nowPlaying, useTogglePlayback, progress } = usePlayerContext(); + const { nowPlaying, progress } = usePlayerContext(); + + const { width } = useSafeAreaFrame(); return ( { nowPlaying && ( + <> + {/* Blurred album artwork background */} + + + - @@ -71,8 +95,8 @@ export default function Player({ navigation }: { navigation : NavigationHelpers< + width={width} + /> @@ -82,6 +106,7 @@ export default function Player({ navigation }: { navigation : NavigationHelpers< + )} );