mirror/Jellify
1
0
Fork 0
mirror of https://github.com/anultravioletaurora/Jellify.git synced 2026-04-29 18:20:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

unmount queue on unmount plz

Browse Source
This commit is contained in:
Violet Caulfield
2025-02-17 08:50:09 -06:00
parent 52db454b38
commit f5d9f20aaf
1 changed files with 58 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Player/screens/queue.tsx
+58 -50
View File
@@ -6,13 +6,14 @@ 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 } from "tamagui";
import { getTokens, Separator, View } from "tamagui";
import { FadeIn, FadeOut, ReduceMotion, SequencedTransition } from "react-native-reanimated";
import { useFocusEffect } from "@react-navigation/native";
import { useCallback } from "react";
import { useCallback, useState } from "react";
export default function Queue({ navigation }: { navigation: NativeStackNavigationProp<StackParamList>}): React.JSX.Element {
const [hidden, setHidden] = useState<boolean>(false);
const { width } = useSafeAreaFrame();
const { playQueue, queue, useClearQueue, useRemoveFromQueue, useReorderQueue, useSkip, nowPlaying } = usePlayerContext();
@@ -32,62 +33,69 @@ export default function Queue({ navigation }: { navigation: NativeStackNavigatio
useCallback(() => {
console.debug("Mounted Queue");
setHidden(false);
return () => {
console.debug("Queue unmounted");
setHidden(true);
}
}, [])
)
return (
<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
hidden ? (
<View />
) : (
<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)
}}
/>
)
}}
/>
navigation={navigation}
track={queueItem.item}
index={getIndex()}
showArtwork
onPress={() => {
useSkip.mutate(index);
}}
onLongPress={() => {
trigger('impactLight');
drag();
}}
isNested
showRemove
onRemove={() => {
if (index)
useRemoveFromQueue.mutate(index)
}}
/>
)
}}
/>
)
)
}