fillip1984 / locutus

React native audiobook player. Learning how to use drizzle for persistence, Zustand for state, NativeWind for UI, and react-native-track-player for playback. Uses AudioBookshelf as backend for meta-data and audiobooks

locutus

My mad dash to creating an Audiobook player built with react native. This is an expo project written in Typescript, using drizzle for persistence, zustand for state, and NativeWind for UI. I've built an audiobook player that uses AudioBookShelf as it's backend to fetch metadata and also the audiobooks themselves.

React-native-track-player is used for audio playback. I started with expo-av but switched to react-native-track-player to gain lock screen, carplay, now playing, and apple watch integration.

UI

Current state

Other than UI imperfections (marked with TODO: tags), playback works and progress is being tracked and resumed on audiobook files. Audiobooks play in the background and also appear (can be controlled) from lock screen, carplay, and applewatch.

TODO

• Enhance drizzle to simplify data queries (right now app doesn't pull in relationships)
• Resolve remaining UI issues, they're marked in some files
• Figure out security (face id)
• Switch over audio player: https://medium.com/@gionata.brunel/implementing-react-native-track-player-with-expo-including-lock-screen-part-1-ios-9552fea5178c
• Enhance UI for download experience
• Finish out pushing the mini-player to the bottom when switching between player and library
• Finish out flow from playlist to player (expo-router)
• Figure out tabs (expo-router)
• Figure out how to store files locally (expo-filesystem)
• Figure out how to import files from elsewhere (AudioBookShelf Apis to the rescue)
• Figure out how to distribute without app store (--local and internal/ad hoc distribution, apple developer subscription required)
• Figure out how to get it to play in the background (plist permission)
• Figure out how to integrate into Apple now playing experiences (react-native-track-player solved this)
• Figure out how to integrate into Apple lock screen (react-native-track-player solved this)
• Figure out how to integrate with Apple Carplay (react-native-track-player solved this)
• Figure out how to integrate with Apple watch (react-native-track-player solved this)