mirror/Jellify
1
0
Fork 0
mirror of https://github.com/anultravioletaurora/Jellify.git synced 2026-02-12 00:58:33 -06: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

79
components/Artist/index.tsx
View File

@@ -13,7 +13,6 @@ import { YStack } from "tamagui";
import BlurhashedImage from "../Global/components/blurhashed-image";
import FavoriteButton from "../Global/components/favorite-button";
import { ItemCard } from "../Global/components/item-card";
import { Freeze } from "react-freeze";
import { H2 } from "../Global/helpers/text";
export function ArtistScreen({
@@ -24,8 +23,6 @@ export function ArtistScreen({
navigation: NativeStackNavigationProp<StackParamList>
}): React.JSX.Element {
const freeze = !useIsFocused();
const { artist } = route.params;
navigation.setOptions({
@@ -64,45 +61,43 @@ export function ArtistScreen({
});
return (
<Freeze freeze={freeze}>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
removeClippedSubviews
>
<YStack alignContent="center" justifyContent="center" minHeight={bannerHeight}>
<BlurhashedImage
borderRadius={0}
item={artist}
width={width}
/>
</YStack>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
removeClippedSubviews
>
<YStack alignContent="center" justifyContent="center" minHeight={bannerHeight}>
<BlurhashedImage
borderRadius={0}
item={artist}
width={width}
/>
</YStack>
<H2>Albums</H2>
<FlatList
contentContainerStyle={{
flexGrow: 1,
alignContent: 'center'
}}
data={albums}
numColumns={columns} // TODO: Make this adjustable
renderItem={({ item: album }) => {
return (
<ItemCard
caption={album.Name}
subCaption={album.ProductionYear?.toString()}
width={(width / 1.1) / columns}
squared
item={album}
onPress={() => {
navigation.navigate('Album', {
album
})
}}
/>
)
}}
/>
</ScrollView>
</Freeze>
<H2>Albums</H2>
<FlatList
contentContainerStyle={{
flexGrow: 1,
alignContent: 'center'
}}
data={albums}
numColumns={columns} // TODO: Make this adjustable
renderItem={({ item: album }) => {
return (
<ItemCard
caption={album.Name}
subCaption={album.ProductionYear?.toString()}
width={(width / 1.1) / columns}
squared
item={album}
onPress={() => {
navigation.navigate('Album', {
album
})
}}
/>
)
}}
/>
</ScrollView>
)
}

50
components/Home/component.tsx
View File

@@ -8,8 +8,6 @@ import { useHomeContext } from "./provider";
import { H3 } from "../Global/helpers/text";
import Client from "../../api/client";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { useIsFocused } from "@react-navigation/native";
import { Freeze } from "react-freeze";
export function ProvidedHome({
navigation
@@ -17,40 +15,36 @@ export function ProvidedHome({
navigation: NativeStackNavigationProp<StackParamList>
}): React.JSX.Element {
const freeze = !useIsFocused()
const { refreshing: refetching, onRefresh } = useHomeContext()
return (
<Freeze freeze={freeze}>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
refreshControl={
<RefreshControl
refreshing={refetching}
onRefresh={onRefresh}
/>
}
removeClippedSubviews // Save memory usage
>
<YStack alignContent='flex-start'>
<XStack margin={"$2"}>
<H3>{`Hi, ${Client.user!.name}`}</H3>
</XStack>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
refreshControl={
<RefreshControl
refreshing={refetching}
onRefresh={onRefresh}
/>
}
removeClippedSubviews // Save memory usage
>
<YStack alignContent='flex-start'>
<XStack margin={"$2"}>
<H3>{`Hi, ${Client.user!.name}`}</H3>
</XStack>
<Separator marginVertical={"$2"} />
<Separator marginVertical={"$2"} />
<RecentArtists navigation={navigation} />
<RecentArtists navigation={navigation} />
<Separator marginVertical={"$3"} />
<Separator marginVertical={"$3"} />
<RecentlyPlayed navigation={navigation} />
<RecentlyPlayed navigation={navigation} />
<Separator marginVertical={"$3"} />
<Separator marginVertical={"$3"} />
<Playlists navigation={navigation}/>
</YStack>
</ScrollView>
</Freeze>
<Playlists navigation={navigation}/>
</YStack>
</ScrollView>
);
}

6
components/Home/stack.tsx
View File

@@ -28,12 +28,6 @@ export default function Home(): React.JSX.Element {
<Stack.Screen
name="Home"
component={ProvidedHome}
options={{
// headerLargeTitle: true,
// headerLargeTitleStyle: {
// fontFamily: 'Aileron-Bold'
// }
}}
/>
<Stack.Screen

4
components/Player/screens/index.tsx
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>
);
}

107
components/Player/screens/queue.tsx
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)
}}
/>
)
}}
/>
)
}

10
index.js
View File

@@ -7,11 +7,17 @@ import TrackPlayer from 'react-native-track-player';
import Client from './api/client';
import { enableFreeze, enableScreens } from "react-native-screens";
// Initialize API client instance
Client.instance;
enableFreeze(true);
// Enable React Navigation freeze for detaching inactive screens
enableFreeze();
// TODO: I don't think this is needed with React Navigation 6+
enableScreens();
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent('RNCarPlayScene', () => App)
AppRegistry.registerComponent('RNCarPlayScene', () => App);
// Register RNTP playback service for remote controls
TrackPlayer.registerPlaybackService(() => PlaybackService);