refactor: simplify audio state handling

Author: lawvs

apps/mobile/src/components/ui/video/PlayerAction.tsx

@@ -6,19 +6,25 @@ import { ThemedBlurView } from "@/src/components/common/ThemedBlurView"
 import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
 import { PauseCuteFiIcon } from "@/src/icons/pause_cute_fi"
 import { PlayCuteFiIcon } from "@/src/icons/play_cute_fi"
+import type { SimpleMediaState } from "@/src/lib/player"
 
 import { NativePressable } from "../pressable/NativePressable"
 
 interface PlayerActionProps {
-  state: "play" | "pause" | "loading"
+  /**
+   * This is the state of the media instead of the play button.
+   *
+   * When the media is paused, the play button should be shown.
+   */
+  mediaState: SimpleMediaState
   onPress: () => void
   className?: string
   iconSize?: number
   buttonClassName?: string
 }
 
 export function PlayerAction({
-  state,
+  mediaState,
   onPress,
   className = "",
   iconSize = 24,
@@ -39,9 +45,13 @@ export function PlayerAction({
           intensity={30}
           experimentalBlurMethod="none"
         />
-        {state === "play" && <PlayCuteFiIcon color="white" width={iconSize} height={iconSize} />}
-        {state === "pause" && <PauseCuteFiIcon color="white" width={iconSize} height={iconSize} />}
-        {state === "loading" && <PlatformActivityIndicator />}
+        {mediaState === "paused" && (
+          <PlayCuteFiIcon color="white" width={iconSize} height={iconSize} />
+        )}
+        {mediaState === "playing" && (
+          <PauseCuteFiIcon color="white" width={iconSize} height={iconSize} />
+        )}
+        {mediaState === "loading" && <PlatformActivityIndicator />}
       </View>
     </NativePressable>
   )

apps/mobile/src/components/ui/video/VideoPlayer.tsx

@@ -73,7 +73,7 @@ export function VideoPlayer({
       {status !== "readyToPlay" && <View className="absolute inset-0">{placeholder}</View>}
       <PlayerAction
         iconSize={32}
-        state={status === "readyToPlay" ? "play" : "loading"}
+        mediaState={status === "readyToPlay" ? "paused" : "loading"}
         onPress={handlePressPlay}
       />
     </View>

apps/mobile/src/lib/player.ts

@@ -1,50 +1,27 @@
-import type { AttachmentsModel } from "@follow/database/schemas/types"
 import { atom, useAtom } from "jotai"
 import { useCallback, useEffect } from "react"
-import TrackPlayer, {
-  State,
-  useActiveTrack,
-  useIsPlaying,
-  usePlaybackState,
-} from "react-native-track-player"
+import TrackPlayer, { useActiveTrack, useIsPlaying } from "react-native-track-player"
 
-const LOADING_SUFFIX = "_loading"
-
-export function usePlayingUrl() {
-  const activeTrack = useActiveTrack()
-  const playerState = usePlaybackState()
-  const isPlaying = !!activeTrack?.url && playerState.state === State.Playing
-  const isLoading = playerState.state === State.Buffering || playerState.state === State.Loading
-  return isPlaying ? activeTrack?.url : isLoading ? `${activeTrack?.url}${LOADING_SUFFIX}` : null
-}
-
-export function getAttachmentState(playingUrl?: string, attachment?: AttachmentsModel) {
-  if (!playingUrl || !attachment || !attachment.mime_type?.startsWith("audio/")) {
-    return null
-  }
-  const isPlaying = attachment.url === playingUrl
-  const isLoading = playingUrl === `${attachment.url}${LOADING_SUFFIX}`
-  return isPlaying ? "playing" : isLoading ? "loading" : null
-}
+export type SimpleMediaState = "playing" | "paused" | "loading"
 
 /**
  * Learn more https://rntp.dev/docs/guides/play-button
  */
-export function usePlayButtonState(audioUrl?: string): "play" | "pause" | "loading" {
+export function useAudioPlayState(audioUrl?: string): SimpleMediaState {
   const playState = useIsPlaying()
   const activeTrack = useActiveTrack()
   const playingUrl = activeTrack?.url
 
   const isCurrentTrack = !audioUrl || playingUrl === audioUrl
   if (!playingUrl || !isCurrentTrack) {
-    // If no track is playing or the current track is not the one we are checking, return 'play'
-    return "play"
+    // By default the audio should be in "paused" state
+    return "paused"
   }
 
   if (playState.bufferingDuringPlay === true) {
     return "loading"
   }
-  return playState.playing ? "pause" : "play"
+  return playState.playing ? "playing" : "paused"
 }
 
 class Player {

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

@@ -22,7 +22,7 @@ import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { PlayerAction } from "@/src/components/ui/video/PlayerAction"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { isIOS } from "@/src/lib/platform"
-import { player, usePlayButtonState } from "@/src/lib/player"
+import { player, useAudioPlayState } from "@/src/lib/player"
 import { toast } from "@/src/lib/toast"
 import { EntryDetailScreen } from "@/src/screens/(stack)/entries/[entryId]/EntryDetailScreen"
 
@@ -181,9 +181,7 @@ const ThumbnailImage = ({ entryId }: { entryId: string }) => {
   const blurhash = mediaModel?.blurhash
 
   const audio = entry?.attachments?.find((attachment) => attachment.mime_type?.startsWith("audio/"))
-  const audioState = usePlayButtonState(audio?.url)
-  const isPlaying = audioState === "pause"
-  const isLoading = audioState === "loading"
+  const audioState = useAudioPlayState(audio?.url)
 
   const video = mediaModel?.type === "video" ? mediaModel : null
   const videoViewRef = useRef<null | VideoView>(null)
@@ -205,7 +203,7 @@ const ThumbnailImage = ({ entryId }: { entryId: string }) => {
       return
     }
     if (!audio) return
-    if (isLoading || isPlaying) {
+    if (audioState !== "paused") {
       player.pause()
       return
     }
@@ -220,7 +218,7 @@ const ThumbnailImage = ({ entryId }: { entryId: string }) => {
       console.error("Error playing audio:", error)
       toast.error("Failed to play audio")
     }
-  }, [audio, entry?.title, feed?.title, image, isLoading, isPlaying, video, videoPlayer])
+  }, [audio, audioState, entry?.title, feed?.title, image, video, videoPlayer])
 
   const [imageError, setImageError] = useState(audio && !image)
   const handleImageError = useCallback(() => {
@@ -272,12 +270,7 @@ const ThumbnailImage = ({ entryId }: { entryId: string }) => {
       {/* Show feed icon if no image but audio is present */}
       {imageError && <FeedIcon feed={feed} size={96} />}
 
-      {(video || audio) && (
-        <PlayerAction
-          state={isPlaying ? "pause" : isLoading ? "loading" : "play"}
-          onPress={handlePressPlay}
-        />
-      )}
+      {(video || audio) && <PlayerAction mediaState={audioState} onPress={handlePressPlay} />}
     </View>
   )
 }