buffering icon for play buttons

app/components/HeaderBar.tsx

@@ -14,6 +14,7 @@ import { AlbumContextPressable, NowPlayingContextPressable } from './ContextMenu
 export type HeaderContextItem = Song | AlbumListItem
 
 const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) => {
+  const moreIcon = <IconMat name="more-vert" color="white" size={25} />
   let context: JSX.Element
   switch (contextItem?.itemType) {
     case 'song':
@@ -23,7 +24,7 @@ const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) =
           triggerWrapperStyle={styles.icons}
           song={contextItem}
           triggerOnLongPress={false}>
-          <IconMat name="more-vert" color="white" size={25} />
+          {moreIcon}
         </NowPlayingContextPressable>
       )
       break
@@ -34,7 +35,7 @@ const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) =
           triggerWrapperStyle={styles.icons}
           album={contextItem}
           triggerOnLongPress={false}>
-          <IconMat name="more-vert" color="white" size={25} />
+          {moreIcon}
         </AlbumContextPressable>
       )
       break

app/components/NowPlayingBar.tsx

@@ -6,8 +6,8 @@ import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
-import React from 'react'
+import React, { useCallback } from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native'
 import { State } from 'react-native-track-player'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 
@@ -41,29 +41,37 @@ const progressStyles = StyleSheet.create({
 })
 
 const Controls = React.memo(() => {
-  const playerState = useStore(selectTrackPlayer.playerState)
+  const state = useStore(selectTrackPlayer.playerState)
   const play = usePlay()
   const pause = usePause()
 
   let playPauseIcon: string
-  let playPauseAction: () => void
+  switch (state) {
-
-  switch (playerState) {
     case State.Playing:
       playPauseIcon = 'pause'
-      playPauseAction = pause
       break
     default:
       playPauseIcon = 'play'
-      playPauseAction = play
       break
   }
 
+  const action = useCallback(() => {
+    if (state === State.Playing) {
+      pause()
+    } else {
+      play()
+    }
+  }, [state, play, pause])
+
   return (
     <View style={styles.controls}>
-      <PressableOpacity onPress={playPauseAction} hitSlop={14}>
+      {state === State.Buffering ? (
+        <ActivityIndicator color="white" size="large" animating={true} />
+      ) : (
+        <PressableOpacity onPress={action} hitSlop={14}>
           <IconFA5 name={playPauseIcon} size={28} color="white" />
         </PressableOpacity>
+      )}
     </View>
   )
 })

app/screens/NowPlayingView.tsx

@@ -15,7 +15,7 @@ import formatDuration from '@app/util/formatDuration'
 import Slider from '@react-native-community/slider'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback, useEffect, useState } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { NativeStackScreenProps } from 'react-native-screens/native-stack'
 import { RepeatMode, State } from 'react-native-track-player'
 import IconFA from 'react-native-vector-icons/FontAwesome'
@@ -280,6 +280,11 @@ const PlayerControls = () => {
       playPauseIcon = 'pause-circle'
       playPauseAction = pause
       break
+    case State.Buffering:
+      disabled = false
+      playPauseIcon = 'circle'
+      playPauseAction = pause
+      break
     default:
       disabled = false
       playPauseIcon = 'play-circle'
@@ -303,6 +308,14 @@ const PlayerControls = () => {
           </PressableOpacity>
           <PressableOpacity onPress={playPauseAction} disabled={disabled} style={controlsStyles.play}>
             <IconFA name={playPauseIcon} size={82} color="white" />
+            {state === State.Buffering && (
+              <ActivityIndicator
+                style={controlsStyles.buffering}
+                color={colors.gradient.low}
+                size="large"
+                animating={true}
+              />
+            )}
           </PressableOpacity>
           <PressableOpacity onPress={next} disabled={disabled}>
             <IconFA5 name="step-forward" size={36} color="white" />
@@ -361,6 +374,9 @@ const controlsStyles = StyleSheet.create({
     top: 26,
     opacity: 0,
   },
+  buffering: {
+    position: 'absolute',
+  },
 })
 
 type RootStackParamList = {