javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Upgrade to latest react-native

Browse Source
This commit is contained in:
Lei Nelissen
2022-11-12 16:22:39 +01:00
parent c19b9d8920
commit c7aec30e39
24 changed files with 6835 additions and 8383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/App.tsx
View File

@@ -47,7 +47,6 @@ export default function App(): JSX.Element {
Capability.Stop,
Capability.SeekTo,
],
stopWithApp: true
});
}
setupTrackPlayer();

4
src/components/Colors.tsx
View File

@@ -1,4 +1,4 @@
import { BlurView, BlurViewProperties } from '@react-native-community/blur';
import { BlurView, BlurViewProps } from '@react-native-community/blur';
import { THEME_COLOR } from 'CONSTANTS';
import React, { PropsWithChildren } from 'react';
import { useContext } from 'react';
@@ -97,7 +97,7 @@ export function DefaultStylesProvider(props: DefaultStylesProviderProps) {
return props.children(defaultStyles);
}
export function ColoredBlurView(props: PropsWithChildren<BlurViewProperties>) {
export function ColoredBlurView(props: PropsWithChildren<BlurViewProps>) {
const scheme = useColorScheme();
return Platform.OS === 'ios' ? (

2
src/components/DownloadIcon.tsx
View File

@@ -58,7 +58,6 @@ function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) {
// apply them to the circle using native props
useEffect(() => {
const subscription = offsetAnimation.addListener((offset) => {
// @ts-expect-error undocumented functionality
const setNativeProps = circleRef.current?.setNativeProps as (props: CircleProps) => void | undefined;
setNativeProps?.({ strokeDashoffset: offset.value });
});
@@ -93,7 +92,6 @@ function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) {
cy={radius}
r={radius - 1}
stroke={iconFill}
// @ts-expect-error react-native-svg has outdated react-native typings
ref={circleRef}
strokeWidth={1.5}
strokeDasharray={[ circumference, circumference ]}

9
src/components/Progresstrack.tsx
View File

@@ -19,7 +19,14 @@ export function calculateProgressTranslation(
) {
'worklet';
const completion = position / reference;
const output = (1 - (completion || 0)) * -1 * width;
// GUARD: Check whether the calculated number is valid and not infinite
if (Number.isNaN(completion) || !Number.isFinite(completion)) {
return 0;
}
const output = (1 - completion) * -1 * width;
return output;
}

13
src/screens/Music/overlays/NowPlaying/index.tsx
View File

@@ -95,12 +95,10 @@ function SelectActionButton() {
<PlayIcon fill={defaultStyles.text.color} height={18} width={18} />
</Pressable>
);
// @ts-expect-error For some reason buffering isn't stated right in the types
case 'buffering':
case State.Buffering:
case State.Connecting:
return (
<Pressable onPress={TrackPlayer.stop}>
<Pressable onPress={TrackPlayer.pause}>
<ActivityIndicator />
</Pressable>
);
@@ -111,7 +109,7 @@ function SelectActionButton() {
function NowPlaying() {
const { index, track } = useCurrentTrack();
const { buffered, duration, position } = useProgress();
const { buffered, position } = useProgress();
const defaultStyles = useDefaultStyles();
const previousIndex = usePrevious(index);
const navigation = useNavigation<MusicNavigationProp>();
@@ -124,7 +122,8 @@ function NowPlaying() {
}, [navigation]);
useEffect(() => {
const hasChangedTrack = previousIndex !== index || duration === 0;
const hasChangedTrack = previousIndex !== index || track?.duration === 0;
const duration = (track?.duration || 0) / 10_000_000;
Animated.timing(bufferAnimation.current, {
toValue: calculateProgressTranslation(buffered, duration, NOW_PLAYING_POPOVER_WIDTH),
@@ -137,7 +136,7 @@ function NowPlaying() {
duration: hasChangedTrack ? 0 : 500,
useNativeDriver: true,
}).start();
}, [buffered, duration, position, index, previousIndex]);
}, [buffered, track?.duration, position, index, previousIndex]);
if (!track) {
return null;
@@ -146,7 +145,7 @@ function NowPlaying() {
return (
<Container>
<ShadowOverlay pointerEvents='none'>
<Shadow distance={30} viewStyle={{ alignSelf: 'stretch', flexBasis: '100%' }} startColor="#00000017">
<Shadow distance={30} style={{ alignSelf: 'stretch', flexBasis: '100%' }} startColor="#00000017">
<View style={{ flex: 1, borderRadius: 8 }} />
</Shadow>
</ShadowOverlay>

8
src/screens/modals/Player/components/ProgressBar.tsx
View File

@@ -18,6 +18,7 @@ import Reanimated, {
runOnJS,
} from 'react-native-reanimated';
import ReText from 'components/ReText';
import useCurrentTrack from 'utility/useCurrentTrack';
const DRAG_HANDLE_SIZE = 20;
const PADDING_TOP = 12;
@@ -50,7 +51,8 @@ const DragHandle = styled(Reanimated.View)`
`;
function ProgressBar() {
const { position, buffered, duration } = useProgress();
const { position, buffered } = useProgress();
const { track } = useCurrentTrack();
const width = useSharedValue(0);
const pos = useSharedValue(0);
@@ -120,9 +122,9 @@ function ProgressBar() {
useEffect(() => {
pos.value = position;
buf.value = buffered;
dur.value = duration;
dur.value = (track?.duration || 0) / 10_000_000;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [position, buffered, duration]);
}, [position, buffered, track?.duration]);
const dragHandleStyles = useAnimatedStyle(() => {
return {

1
src/store/downloads/actions.ts
View File

@@ -49,6 +49,7 @@ export const downloadTrack = createAsyncThunk(
dispatch(initializeDownload({ id, jobId, size: contentLength, location }));
},
progress: (result) => {
console.log('PROGRESS', result, url);
// Dispatch a progress update
dispatch(progressDownload({ id, progress: result.bytesWritten / result.contentLength }));
},

3
src/utility/JellyfinApi.ts
View File

@@ -20,7 +20,6 @@ const baseTrackOptions: Record<string, string> = {
static: 'true',
};
/**
* Generate a track object from a Jellyfin ItemId so that
* react-native-track-player can easily consume it.
@@ -54,7 +53,7 @@ export function generateTrackUrl(trackId: string, credentials: Credentials) {
};
const trackParams = new URLSearchParams(trackOptions).toString();
const url = encodeURI(`${credentials?.uri}/Audio/${trackId}/universal?${trackParams}`);
const url = encodeURI(`${credentials?.uri}/Audio/${trackId}/universal?`) + trackParams;
return url;
}

1
src/utility/MimeTypes.ts
View File

@@ -9,6 +9,7 @@ const MimeTypes = {
'audio/dsp': '.dsp',
'audio/flac': '.flac',
'audio/m4b': '.m4b',
'audio/mpeg': '.mp3',
'audio/vorbis': '.vorbis',
'audio/x-ape': '.ape',
'audio/xsp': '.xsp',

2
src/utility/PlaybackService.ts
View File

@@ -27,7 +27,7 @@ export default async function() {
});
TrackPlayer.addEventListener(Event.RemoteStop, () => {
TrackPlayer.destroy();
TrackPlayer.reset();
});
TrackPlayer.addEventListener(Event.RemoteSeek, (event) => {

6
src/utility/useCurrentTrack.ts
View File

@@ -17,8 +17,10 @@ export default function useCurrentTrack(): CurrentTrackResponse {
const retrieveCurrentTrack = useCallback(async () => {
const queue = await TrackPlayer.getQueue();
const currentTrackIndex = await TrackPlayer.getCurrentTrack();
setTrack(queue[currentTrackIndex]);
setIndex(currentTrackIndex);
if (currentTrackIndex !== null) {
setTrack(queue[currentTrackIndex]);
setIndex(currentTrackIndex);
}
}, [setTrack, setIndex]);
// Then execute the function on component mount and track changes

4
src/utility/usePlayTracks.ts
View File

@@ -82,6 +82,10 @@ export default function usePlayTracks() {
case 'add-after-currently-playing': {
// Try and locate the current track
const currentTrackIndex = await TrackPlayer.getCurrentTrack();
if (currentTrackIndex === null) {
break;
}
// Since the argument is the id to insert the track BEFORE, we need
// to get the current track + 1