Lyrics implementation prototype

[akrv7591]

• Added retrieveAndInjectLyricsToTracks function to inject lyrics to tracks. Used in retrieveAlbumTracks, retrievePlaylistTracks and retrieveAllTracks.
• Added Lyrics button in Player modal
• Added Lyrics modal
• Added LyricsRenderer component
• Added Lyrics localization key(English only)
• Added HasLyrics and Lyrics field to AlbumTrack interface
• Added hasLyrics and lyrics field to return value of generateTrack
• Added lyrics.svg to /assets/icons/
• Added lyricsMillisecondsFormat to format lyrics timestamp

Added //TODO comments to for changes where I was not sure if implementation is acceptable
Accidentally pushed with iOS project.pbxproj changes sorry

Screenshot from build

[leinelissen]

Hey @akrv7591, thanks for the help, I've made quite some changes but I've just merged everything in. I'll try and release a beta on TestFlight as soon as I can.

[leinelissen]

I'm curious to get your input!

[akrv7591]

Sorry for late reply I have been busy. I am getting this error when pressing Lyrics btn.

[leinelissen]

Hey, that's interesting. The error you're seeing is probably caused by something else failing. Are there any other errors displayed in either this screen or the React Native console?

[akrv7591]

I am getting reanimated warning in first screen and 3rd screen is same

[akrv7591]

ERROR Error: Couldn't find the bottom tab bar height. Are you inside a screen in Bottom Tab Navigator?
Given below is error from console
`This error is located at:
in NowPlaying (created by Lyrics)
in BlurView
in Unknown (created by ColoredBlurView)
in ColoredBlurView (created by Lyrics)
in RCTView (created by View)
in View (created by GestureHandlerRootView)
in GestureHandlerRootView (created by Lyrics)
in Lyrics (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSModalScreen (created by Animated(Anonymous))
in Animated(Anonymous)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by Routes)
in Routes (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by ThemedNavigationContainer)
in ThemedNavigationContainer (created by App)
in ColorSchemeProvider (created by App)
in PersistGate (created by App)
in Provider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in Fintunes(RootComponent), js engine: hermes
ERROR Error: Couldn't find the bottom tab bar height. Are you inside a screen in Bottom Tab Navigator?

This error is located at:
in NowPlaying (created by Lyrics)
in BlurView
in Unknown (created by ColoredBlurView)
in ColoredBlurView (created by Lyrics)
in RCTView (created by View)
in View (created by GestureHandlerRootView)
in GestureHandlerRootView (created by Lyrics)
in Lyrics (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSModalScreen (created by Animated(Anonymous))
in Animated(Anonymous)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by Routes)
in Routes (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by ThemedNavigationContainer)
in ThemedNavigationContainer (created by App)
in ColorSchemeProvider (created by App)
in PersistGate (created by App)
in Provider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in Fintunes(RootComponent)`

[akrv7591]

And when I tried to install pod with pod install I got error and removed Podfile.lock and Pods folder then reinstalled. It worked fine. I am not sure if it is causing error

[leinelissen]

This might have something to do with it. Can you do the following and check if that works?

1. Ensure you're on the latest main commit
2. Remove the ios/Pods directory
3. Run pod install

If you get any errors there, please post them.

[akrv7591]

I think error is caused by useBottomTabBarHeight hook inside NowPlaying component because when you click lyrics preview container you are going to Lyrics screen and Lyrics screen is not in Tab Navigator

[leinelissen]

Yeah, you're completely right. I commented out that specific line during development and forgot about it later. I'm committing a more permanent fix for this to main right now. Thanks for catching this!

[akrv7591]

Great 👍