Add tracks to TrackPlayer on initial render

app/containers/message/Components/Audio/index.tsx

@@ -22,7 +22,7 @@ import { IAttachment } from '../../../../definitions';
 import { TSupportedThemes } from '../../../../theme';
 import { setupService } from './services';
 import Slider from './Slider';
-import { useTracks } from './tracksStorage';
+import { addTrack, clearTracks, getTrackIndex, useTracks } from './tracksStorage';
 
 interface IButton {
 	loading: boolean;
@@ -140,6 +140,11 @@ IMessageAudioProps) => {
 				const sound = new Audio.Sound();
 				sound.setOnPlaybackStatusUpdate(updateTrackDuration);
 				await sound.loadAsync({ uri: `${url}?rc_uid=${user.id}&rc_token=${user.token}` });
+				if (!isReply) {
+					const index = await TrackPlayer.add(track);
+					// @ts-ignore
+					index >= 0 && addTrack({ trackIndex: index, trackId: track.id });
+				}
 			} catch {
 				// Do nothing
 			}
@@ -148,12 +153,13 @@ IMessageAudioProps) => {
 		setup();
 		return () => {
 			TrackPlayer.destroy();
+			clearTracks();
 			setCurrentTrackId(null);
 		};
 	}, []);
 
 	useEffect(() => {
-		if (currentTrackId && currentTrackId !== track.id) {
+		if (!currentTrackId || currentTrackId !== track.id) {
 			setCurrentPosition(0);
 			setPaused(true);
 		}
@@ -209,8 +215,9 @@ IMessageAudioProps) => {
 			} else if (currentTrackId === track.id) {
 				TrackPlayer.play();
 			} else {
-				TrackPlayer.reset();
+				const index = getTrackIndex(track.id);
-				await TrackPlayer.add(track);
+				index && TrackPlayer.skip(index);
+				if (currentPosition > 0) await TrackPlayer.seekTo(currentPosition);
 				TrackPlayer.play();
 				setCurrentTrackId(track.id);
 			}
@@ -236,15 +243,10 @@ IMessageAudioProps) => {
 		try {
 			if (currentTrackId === track.id) {
 				await TrackPlayer.seekTo(value);
-			} else {
+				if (paused) {
-				TrackPlayer.reset();
+					TrackPlayer.play();
-				await TrackPlayer.add(track);
+					setPaused(false);
-				await TrackPlayer.seekTo(value);
+				}
-				setCurrentTrackId(track.id);
-			}
-			if (paused) {
-				TrackPlayer.play();
-				setPaused(false);
 			}
 		} catch {
 			// Do nothing

app/containers/message/Components/Audio/services.ts

@@ -1,6 +1,6 @@
 import TrackPlayer, { Event, State, Capability } from 'react-native-track-player';
 
-import { clearCurrentTrack } from './tracksStorage';
+import { clearTracks } from './tracksStorage';
 
 let wasPausedByDuck = false;
 
@@ -16,7 +16,7 @@ export const playbackService = async () => {
 	});
 
 	TrackPlayer.addEventListener(Event.RemoteStop, () => {
-		clearCurrentTrack();
+		clearTracks();
 		TrackPlayer.destroy();
 	});
 

app/containers/message/Components/Audio/tracksStorage.ts

@@ -1,9 +1,35 @@
 import MMKVStorage, { create } from 'react-native-mmkv-storage';
 
-const TracksStorage = new MMKVStorage.Loader().withInstanceID('tracks').initialize();
+interface Track {
+	trackId: string;
+	trackIndex: number;
+}
 
+const TracksStorage = new MMKVStorage.Loader().withInstanceID('tracks').initialize();
 export const useTracks = create(TracksStorage);
 
-export const clearCurrentTrack = () => {
+export const initializeTracks = () => {
-	TracksStorage.removeItem('currentTrack');
+	const tracks = TracksStorage.getArray('tracks');
+	if (!tracks) TracksStorage.setArray('tracks', []);
+};
+
+export const addTrack = (track: Track) => {
+	initializeTracks();
+	const tracks: Track[] = TracksStorage.getArray('tracks') || [];
+	if (tracks.find((t: Track) => t.trackId === track.trackId)) {
+		return;
+	}
+	TracksStorage.setArray('tracks', [...tracks, track]);
+};
+
+export const getTrackIndex = (trackId: string) => {
+	const tracks: Track[] = TracksStorage.getArray('tracks') || [];
+	const index = tracks.findIndex((t: Track) => t.trackId === trackId);
+	if (index !== -1) {
+		return tracks[index].trackIndex;
+	}
+};
+
+export const clearTracks = () => {
+	TracksStorage.setArray('tracks', []);
 };

jest.setup.js

@@ -122,7 +122,5 @@ jest.mock('react-native-track-player', () => ({
 }));
 
 jest.mock('./app/containers/message/Components/Audio/tracksStorage.ts', () => ({
-	useTracks: () => ({
+	useTracks: () => ['', jest.fn()]
-		currentTrack: ''
-	})
 }));