fix: show loading indicator when pressing song in music

2026-03-06 09:46:17 +00:00 · 2026-01-03 16:24:06 +01:00
parent baa96d222f
commit 6487c8b5a1
4 changed files with 109 additions and 37 deletions
--- a/app/(auth)/now-playing.tsx
+++ b/app/(auth)/now-playing.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
+  ActivityIndicator,
  Dimensions,
  FlatList,
  Platform,
@@ -39,6 +40,7 @@ export default function NowPlayingScreen() {
    queue,
    queueIndex,
    isPlaying,
+    isLoading,
    progress,
    duration,
    repeatMode,
@@ -205,6 +207,7 @@ export default function NowPlayingScreen() {
          progressText={progressText}
          durationText={durationText}
          isPlaying={isPlaying}
+          isLoading={isLoading}
          repeatMode={repeatMode}
          shuffleEnabled={shuffleEnabled}
          canGoNext={canGoNext}
@@ -242,6 +245,7 @@ interface PlayerViewProps {
  progressText: string;
  durationText: string;
  isPlaying: boolean;
+  isLoading: boolean;
  repeatMode: RepeatMode;
  shuffleEnabled: boolean;
  canGoNext: boolean;
@@ -266,6 +270,7 @@ const PlayerView: React.FC<PlayerViewProps> = ({
  progressText,
  durationText,
  isPlaying,
+  isLoading,
  repeatMode,
  shuffleEnabled,
  canGoNext,
@@ -355,30 +360,35 @@ const PlayerView: React.FC<PlayerViewProps> = ({
      <View className='flex flex-row items-center justify-center mb-4'>
        <TouchableOpacity
          onPress={onPrevious}
-          disabled={!canGoPrevious}
+          disabled={!canGoPrevious || isLoading}
          className='p-4'
-          style={{ opacity: canGoPrevious ? 1 : 0.3 }}
+          style={{ opacity: canGoPrevious && !isLoading ? 1 : 0.3 }}
        >
          <Ionicons name='play-skip-back' size={32} color='white' />
        </TouchableOpacity>

        <TouchableOpacity
          onPress={onTogglePlayPause}
+          disabled={isLoading}
          className='mx-8 bg-white rounded-full p-4'
        >
-          <Ionicons
-            name={isPlaying ? "pause" : "play"}
-            size={36}
-            color='#121212'
-            style={isPlaying ? {} : { marginLeft: 4 }}
-          />
+          {isLoading ? (
+            <ActivityIndicator size={36} color='#121212' />
+          ) : (
+            <Ionicons
+              name={isPlaying ? "pause" : "play"}
+              size={36}
+              color='#121212'
+              style={isPlaying ? {} : { marginLeft: 4 }}
+            />
+          )}
        </TouchableOpacity>

        <TouchableOpacity
          onPress={onNext}
-          disabled={!canGoNext}
+          disabled={!canGoNext || isLoading}
          className='p-4'
-          style={{ opacity: canGoNext ? 1 : 0.3 }}
+          style={{ opacity: canGoNext && !isLoading ? 1 : 0.3 }}
        >
          <Ionicons name='play-skip-forward' size={32} color='white' />
        </TouchableOpacity>
--- a/components/music/MiniPlayerBar.tsx
+++ b/components/music/MiniPlayerBar.tsx
@@ -4,7 +4,13 @@ import { Image } from "expo-image";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
-import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { apiAtom } from "@/providers/JellyfinProvider";
@@ -18,8 +24,15 @@ export const MiniPlayerBar: React.FC = () => {
  const [api] = useAtom(apiAtom);
  const insets = useSafeAreaInsets();
  const router = useRouter();
-  const { currentTrack, isPlaying, progress, duration, togglePlayPause, next } =
-    useMusicPlayer();
+  const {
+    currentTrack,
+    isPlaying,
+    isLoading,
+    progress,
+    duration,
+    togglePlayPause,
+    next,
+  } = useMusicPlayer();

  const imageUrl = useMemo(() => {
    if (!api || !currentTrack) return null;
@@ -87,24 +100,30 @@ export const MiniPlayerBar: React.FC = () => {

      {/* Controls */}
      <View style={styles.controls}>
-        <TouchableOpacity
-          onPress={handlePlayPause}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-          style={styles.controlButton}
-        >
-          <Ionicons
-            name={isPlaying ? "pause" : "play"}
-            size={26}
-            color='white'
-          />
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={handleNext}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-          style={styles.controlButton}
-        >
-          <Ionicons name='play-forward' size={22} color='white' />
-        </TouchableOpacity>
+        {isLoading ? (
+          <ActivityIndicator size='small' color='white' style={styles.loader} />
+        ) : (
+          <>
+            <TouchableOpacity
+              onPress={handlePlayPause}
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+              style={styles.controlButton}
+            >
+              <Ionicons
+                name={isPlaying ? "pause" : "play"}
+                size={26}
+                color='white'
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleNext}
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+              style={styles.controlButton}
+            >
+              <Ionicons name='play-forward' size={22} color='white' />
+            </TouchableOpacity>
+          </>
+        )}
      </View>

      {/* Progress bar at bottom */}
@@ -219,6 +238,9 @@ const styles = StyleSheet.create({
  controlButton: {
    padding: 8,
  },
+  loader: {
+    marginHorizontal: 16,
+  },
  progressContainer: {
    position: "absolute",
    bottom: 0,
--- a/components/music/MusicTrackItem.tsx
+++ b/components/music/MusicTrackItem.tsx
@@ -4,7 +4,7 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
@@ -26,8 +26,14 @@ export const MusicTrackItem: React.FC<Props> = ({
 }) => {
  const [api] = useAtom(apiAtom);
  const { showActionSheetWithOptions } = useActionSheet();
-  const { playTrack, playNext, addToQueue, currentTrack, isPlaying } =
-    useMusicPlayer();
+  const {
+    playTrack,
+    playNext,
+    addToQueue,
+    currentTrack,
+    isPlaying,
+    loadingTrackId,
+  } = useMusicPlayer();

  const imageUrl = useMemo(() => {
    const albumId = track.AlbumId || track.ParentId;
@@ -38,6 +44,7 @@ export const MusicTrackItem: React.FC<Props> = ({
  }, [api, track]);

  const isCurrentTrack = currentTrack?.Id === track.Id;
+  const isTrackLoading = loadingTrackId === track.Id;

  const duration = useMemo(() => {
    if (!track.RunTimeTicks) return "";
@@ -109,6 +116,22 @@ export const MusicTrackItem: React.FC<Props> = ({
              <Ionicons name='musical-note' size={20} color='#737373' />
            </View>
          )}
+          {isTrackLoading && (
+            <View
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: "rgba(0, 0, 0, 0.6)",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <ActivityIndicator size='small' color='white' />
+            </View>
+          )}
        </View>
      )}

--- a/providers/MusicPlayerProvider.tsx
+++ b/providers/MusicPlayerProvider.tsx
@@ -40,6 +40,7 @@ interface MusicPlayerState {
  queueIndex: number;
  isPlaying: boolean;
  isLoading: boolean;
+  loadingTrackId: string | null; // Track ID being loaded
  progress: number;
  duration: number;
  streamUrl: string | null;
@@ -273,6 +274,7 @@ export const MusicPlayerProvider: React.FC<MusicPlayerProviderProps> = ({
    queueIndex: 0,
    isPlaying: false,
    isLoading: false,
+    loadingTrackId: null,
    progress: 0,
    duration: 0,
    streamUrl: null,
@@ -459,7 +461,12 @@ export const MusicPlayerProvider: React.FC<MusicPlayerProviderProps> = ({
    async (queue: BaseItemDto[], startIndex: number) => {
      if (!api || !user?.Id || queue.length === 0) return;

-      setState((prev) => ({ ...prev, isLoading: true }));
+      const trackToLoad = queue[startIndex];
+      setState((prev) => ({
+        ...prev,
+        isLoading: true,
+        loadingTrackId: trackToLoad?.Id ?? null,
+      }));

      try {
        // Get stream URLs for all tracks
@@ -480,7 +487,11 @@ export const MusicPlayerProvider: React.FC<MusicPlayerProviderProps> = ({
        }

        if (tracks.length === 0) {
-          setState((prev) => ({ ...prev, isLoading: false }));
+          setState((prev) => ({
+            ...prev,
+            isLoading: false,
+            loadingTrackId: null,
+          }));
          return;
        }

@@ -498,6 +509,7 @@ export const MusicPlayerProvider: React.FC<MusicPlayerProviderProps> = ({
          queueIndex: startIndex,
          currentTrack,
          isLoading: false,
+          loadingTrackId: null,
          isPlaying: true,
          streamUrl: tracks[startIndex]?.url || null,
          duration: currentTrack?.RunTimeTicks
@@ -507,7 +519,11 @@ export const MusicPlayerProvider: React.FC<MusicPlayerProviderProps> = ({

        reportPlaybackStart(currentTrack, state.playSessionId);
      } catch (_error) {
-        setState((prev) => ({ ...prev, isLoading: false }));
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loadingTrackId: null,
+        }));
      }
    },
    [api, user?.Id, reportPlaybackStart, state.playSessionId],
@@ -784,6 +800,7 @@ export const MusicPlayerProvider: React.FC<MusicPlayerProviderProps> = ({
      queueIndex: 0,
      isPlaying: false,
      isLoading: false,
+      loadingTrackId: null,
      progress: 0,
      duration: 0,
      streamUrl: null,