mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-01-07 03:20:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

player styling changes

Browse Source 
track component flex changes

make album artwork bigger on album screen
This commit is contained in:
Violet Caulfield
2025-01-12 09:14:10 -06:00
parent 0f5c815b18
commit c90bb89f09
3 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/Album/component.tsx
View File

@@ -12,7 +12,7 @@ import { usePlayerContext } from "../../player/provider";
import RunTimeTicks from "../Global/helpers/runtimeticks";
import Track from "../Global/components/track";
import { useItemTracks } from "@/api/queries/tracks";
import { SafeAreaView } from "react-native-safe-area-context";
import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
interface AlbumProps {
album: BaseItemDto,
@@ -21,10 +21,11 @@ interface AlbumProps {
export default function Album(props: AlbumProps): React.JSX.Element {
const { apiClient, sessionId } = useApiClientContext();
const { apiClient } = useApiClientContext();
const { nowPlaying } = usePlayerContext();
const { width } = useSafeAreaFrame();
const { data: tracks, isLoading } = useItemTracks(props.album.Id!, apiClient!, true);
return (
@@ -39,8 +40,8 @@ export default function Album(props: AlbumProps): React.JSX.Element {
{ ...queryConfig.images})}
imageStyle={{
position: "relative",
width: 300,
height: 300,
width: width / 1.1,
height: width / 1.1,
borderRadius: 2
}}
/>

4
components/Global/components/track.tsx
View File

@@ -43,7 +43,7 @@ export default function Track({
tracklist
});
}}
paddingVertical={"$2"}
paddingVertical={"$3"}
paddingHorizontal={"$1"}
>
<XStack justifyContent="flex-start" flex={1}>
@@ -52,7 +52,7 @@ export default function Track({
</Text>
</XStack>
<XStack alignContent="flex-start" flex={5}>
<XStack alignContent="flex-start" flex={6}>
<Text
color={isPlaying ? Colors.Primary : Colors.White}
lineBreakStrategyIOS="standard"

15
components/Player/component.tsx
View File

@@ -60,13 +60,13 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
borderRadius: 2
}}
/>
<BlurView style={{
<BlurView blurType="dark" style={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: "absolute",
zIndex: -98
zIndex: -1
}}
/>
@@ -91,7 +91,7 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
/>
</XStack>
<XStack margin={10}>
<XStack margin={20}>
<YStack justifyContent="flex-start" flex={4}>
<Text fontSize={"$6"}>{nowPlaying?.title ?? "Untitled Track"}</Text>
<Text
@@ -113,17 +113,24 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
</XStack>
</XStack>
<XStack justifyContent="center" marginHorizontal={20}>
<XStack justifyContent="center" marginVertical={20}>
{/* playback progress goes here */}
<HorizontalSlider
value={progressState}
max={progress!.duration}
width={width / 1.1}
props={{
onSlideStart: (event, value) => {
setSeeking(true);
},
onSlideMove: (event, value) => {
setProgressState(value);
},
onSlideEnd: (event, value) => {
const position = value;
useSeekTo.mutate(position);
setSeeking(false);
}
}}
/>