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

This only realy need to update once a second

Browse Source 
player component styling
This commit is contained in:
Violet Caulfield
2025-01-13 06:49:18 -06:00
parent 6238755892
commit 76f9fdcd19
2 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/Player/component.tsx
View File

@@ -6,7 +6,7 @@ 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 { H5, Text } from "../Global/helpers/text";
import { useSafeAreaFrame } from "react-native-safe-area-context";
import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
import { HorizontalSlider } from "../Global/helpers/slider";
import PlayPauseButton from "./helpers/buttons";
import React, { useEffect, useState } from "react";
@@ -43,12 +43,12 @@ export default function Player({ navigation }: { navigation: NativeStackNavigati
]);
return (
<View>
<SafeAreaView edges={["right", "left"]}>
{ nowPlaying && (
<>
<YStack>
<YStack justifyContent="center">
<YStack alignContent="center">
<Text>Playing from</Text>
<H5>THING</H5>
</YStack>
@@ -72,7 +72,7 @@ export default function Player({ navigation }: { navigation: NativeStackNavigati
/>
</XStack>
<XStack margin={20}>
<XStack marginHorizontal={20} paddingVertical={5}>
<YStack justifyContent="flex-start" flex={4}>
<Text fontSize={"$6"}>{nowPlaying?.title ?? "Untitled Track"}</Text>
<Text
@@ -100,7 +100,7 @@ export default function Player({ navigation }: { navigation: NativeStackNavigati
<HorizontalSlider
value={progressState}
max={progress!.duration}
width={width / 1.25}
width={width / 1.1}
props={{
// If user swipes off of the slider we should seek to the spot
onPressOut: (event) => {
@@ -124,13 +124,11 @@ export default function Player({ navigation }: { navigation: NativeStackNavigati
</XStack>
<XStack alignContent="space-between">
<XStack>
<XStack alignContent="flex-start">
<RunTimeSeconds>{progressState}</RunTimeSeconds>
</XStack>
<Spacer />
<XStack alignContent="flex-end">
<RunTimeSeconds>{progress!.duration}</RunTimeSeconds>
</XStack>
@@ -160,6 +158,6 @@ export default function Player({ navigation }: { navigation: NativeStackNavigati
</YStack>
</>
)}
</View>
</SafeAreaView>
);
}

2
player/config.ts
View File

@@ -1 +1 @@
export const UPDATE_INTERVAL: number = 500
export const UPDATE_INTERVAL: number = 1000