mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-04-24 03:49:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

screens changes

Browse Source
This commit is contained in:
Violet Caulfield
2025-02-17 19:07:55 -06:00
parent 826f96ed94
commit 5d72f561f7
6 changed files with 118 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Player/screens/index.tsx
-4
View File
@@ -18,7 +18,6 @@ import { trigger } from "react-native-haptic-feedback";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { useIsFocused } from "@react-navigation/native";
import { Freeze } from "react-freeze";
const scrubGesture = Gesture.Pan();
@@ -70,8 +69,6 @@ export default function PlayerScreen({
]);
return (
<Freeze freeze={freeze}>
<SafeAreaView edges={["right", "left"]}>
{ nowPlaying && (
<>
@@ -363,6 +360,5 @@ export default function PlayerScreen({
</>
)}
</SafeAreaView>
</Freeze>
);
}
components/Player/screens/queue.tsx
+51 -56
View File
@@ -6,11 +6,8 @@ import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { useSafeAreaFrame } from "react-native-safe-area-context";
import DraggableFlatList from "react-native-draggable-flatlist";
import { trigger } from "react-native-haptic-feedback";
import { getTokens, Separator, View } from "tamagui";
import { FadeIn, FadeOut, ReduceMotion, SequencedTransition } from "react-native-reanimated";
import { useFocusEffect, useIsFocused } from "@react-navigation/native";
import { useCallback, useState } from "react";
import { Freeze } from "react-freeze";
import { Separator } from "tamagui";
import { useIsFocused } from "@react-navigation/native";
export default function Queue({ navigation }: { navigation: NativeStackNavigationProp<StackParamList>}): React.JSX.Element {
@@ -32,56 +29,54 @@ export default function Queue({ navigation }: { navigation: NativeStackNavigatio
const freeze = !useIsFocused();
return (
<Freeze freeze={freeze}>
<DraggableFlatList
contentInsetAdjustmentBehavior="automatic"
data={playQueue}
dragHitSlop={{ left: -50 }} // https://github.com/computerjazz/react-native-draggable-flatlist/issues/336
extraData={nowPlaying}
// enableLayoutAnimationExperimental
getItemLayout={(data, index) => (
{ length: width / 9, offset: width / 9 * index, index}
)}
initialScrollIndex={scrollIndex !== -1 ? scrollIndex: 0}
ItemSeparatorComponent={() => <Separator />}
// itemEnteringAnimation={FadeIn}
// itemExitingAnimation={FadeOut}
// itemLayoutAnimation={SequencedTransition}
keyExtractor={({ item }, index) => {
return `${index}-${item.Id}`
}}
numColumns={1}
onDragEnd={({ data, from, to}) => {
useReorderQueue.mutate({ newOrder: data, from, to });
}}
renderItem={({ item: queueItem, getIndex, drag, isActive }) => {
const index = getIndex();
return (
<Track
queue={queue}
navigation={navigation}
track={queueItem.item}
index={getIndex()}
showArtwork
onPress={() => {
useSkip.mutate(index);
}}
onLongPress={() => {
trigger('impactLight');
drag();
}}
isNested
showRemove
onRemove={() => {
if (index)
useRemoveFromQueue.mutate(index)
}}
/>
)
}}
/>
</Freeze>
<DraggableFlatList
contentInsetAdjustmentBehavior="automatic"
data={playQueue}
dragHitSlop={{ left: -50 }} // https://github.com/computerjazz/react-native-draggable-flatlist/issues/336
extraData={nowPlaying}
// enableLayoutAnimationExperimental
getItemLayout={(data, index) => (
{ length: width / 9, offset: width / 9 * index, index}
)}
initialScrollIndex={scrollIndex !== -1 ? scrollIndex: 0}
ItemSeparatorComponent={() => <Separator />}
// itemEnteringAnimation={FadeIn}
// itemExitingAnimation={FadeOut}
// itemLayoutAnimation={SequencedTransition}
keyExtractor={({ item }, index) => {
return `${index}-${item.Id}`
}}
numColumns={1}
onDragEnd={({ data, from, to}) => {
useReorderQueue.mutate({ newOrder: data, from, to });
}}
renderItem={({ item: queueItem, getIndex, drag, isActive }) => {
const index = getIndex();
return (
<Track
queue={queue}
navigation={navigation}
track={queueItem.item}
index={getIndex()}
showArtwork
onPress={() => {
useSkip.mutate(index);
}}
onLongPress={() => {
trigger('impactLight');
drag();
}}
isNested
showRemove
onRemove={() => {
if (index)
useRemoveFromQueue.mutate(index)
}}
/>
)
}}
/>
)
}