MTMusic/lib/view/music_view.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:just_audio/just_audio.dart';
import 'package:music_player_miao/common_widget/app_data.dart';
import 'package:music_player_miao/models/universal_bean.dart';
import '../../view_model/home_view_model.dart';
import '../api/api_music_likes.dart';
import '../api/api_collection.dart';
import '../common/download_manager.dart';
import '../common_widget/Song_widegt.dart';

class MusicView extends StatefulWidget {
  final List<Song> songList;
  final int initialSongIndex;

  const MusicView({
    super.key,
    required this.songList,
    required this.initialSongIndex
  });

  @override
  State<MusicView> createState() => _MusicViewState();
}

class _MusicViewState extends State<MusicView> {
  final homeVM = Get.put(HomeViewModel());
  bool _isDisposed = false;
  AppData appData = AppData();
  late int currentSongIndex;
  late AudioPlayer _audioPlayer;

  final downloadManager = Get.put(DownloadManager());

  // Stream values
  Duration _duration = Duration.zero;
  Duration _position = Duration.zero;

  // Current song info
  late String artistName;
  late String musicName;
  late bool likesnot;
  late bool collectionsnot;

  // Song lists
  List<int> id = [];
  List<String> song2 = [];
  List<String> artist = [];
  List<String> music = [];
  List<bool> likes = [];
  List<bool> collection = [];

  bool _isLoading = false;

  Future<void> _fetchSonglistData() async {
    setState(() {
      for (int i = 0; i < widget.songList.length; i++) {
        id.add(widget.songList[i].id);
        song2.add(widget.songList[i].musicurl);
        artist.add(widget.songList[i].artist);
        music.add(widget.songList[i].title);
        likes.add(widget.songList[i].likes);
        collection.add(widget.songList[i].collection);
      }
    });
  }

  Future<void> _updateCurrentSong() async {
    // 立即更新UI和歌曲信息
    setState(() {
      _isLoading = true;
      _position = Duration.zero;
      _duration = Duration.zero;
      artistName = artist[currentSongIndex];
      musicName = music[currentSongIndex];
      likesnot = likes[currentSongIndex];
      collectionsnot = collection[currentSongIndex];
    });

    try {
      // 在后台停止当前播放
      unawaited(_audioPlayer.stop());

      // Check for local file first
      final localSong = downloadManager.getLocalSong(currentSongIndex);
      final audioSource = localSong != null
          ? AudioSource.file(localSong.musicurl)
          : AudioSource.uri(Uri.parse(song2[currentSongIndex]));

      // Set the audio source and get duration
      final duration = await _audioPlayer.setAudioSource(
        audioSource,
        preload: true,
      );

      if (!_isDisposed) {
        setState(() {
          _duration = duration ?? Duration.zero;
          _isLoading = false;
        });
      }

      // 开始播放
      await _audioPlayer.play();
    } catch (e) {
      print('Error loading audio source: $e');
      if (!_isDisposed) {
        setState(() {
          _isLoading = false;
        });
      }
    }
  }

  void playerInit() {
    _audioPlayer = AudioPlayer();

    // Initialize with first song
    artistName = widget.songList[widget.initialSongIndex].artist;
    musicName = widget.songList[widget.initialSongIndex].title;
    likesnot = widget.songList[widget.initialSongIndex].likes;
    collectionsnot = widget.songList[widget.initialSongIndex].collection;

    // Listen to player events
    _audioPlayer.positionStream.listen((position) {
      if (!_isDisposed) {
        setState(() => _position = position);
      }
    });

    _audioPlayer.durationStream.listen((duration) {
      if (!_isDisposed) {
        setState(() => _duration = duration ?? Duration.zero);
      }
    });

    _audioPlayer.processingStateStream.listen((state) {
      if (state == ProcessingState.completed) {
        playNextSong();
      }
    });
  }

  Widget _buildPlayButton() {
    return SizedBox(
      width: 52,
      height: 52,
      child: Center(
        child: _isLoading
            ? const CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation<Color>(Color(0xff429482)),
          strokeWidth: 3.0,
        )
            : IconButton(
          padding: EdgeInsets.zero, // 移除内边距
          constraints: const BoxConstraints(
            minWidth: 52,
            minHeight: 52,
            maxWidth: 52,
            maxHeight: 52,
          ),
          onPressed: playOrPause,
          icon: _audioPlayer.playing
              ? Image.asset(
            "assets/img/music_play.png",
            width: 52,
            height: 52,
          )
              : Image.asset(
            "assets/img/music_pause.png",
            width: 52,
            height: 52,
          ),
        ),
      ),
    );
  }

  void playOrPause() async {
    if (_audioPlayer.playing) {
      await _audioPlayer.pause();
    } else {
      await _audioPlayer.play();
    }
    setState(() {});
  }

  void playNextSong() {
    if (currentSongIndex < widget.songList.length - 1) {
      currentSongIndex++;
    } else {
      currentSongIndex = 0;
    }
    _updateCurrentSong();
  }

  void playPreviousSong() {
    if (currentSongIndex > 0) {
      currentSongIndex--;
    } else {
      currentSongIndex = widget.songList.length - 1;
    }
    _updateCurrentSong();
  }

  String formatDuration(Duration duration) {
    String twoDigits(int n) => n.toString().padLeft(2, "0");
    String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
    String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
    return "$twoDigitMinutes:$twoDigitSeconds";
  }

  Future<void> _initializeAsync() async {
    await _fetchSonglistData();
    await _updateCurrentSong();
  }

  @override
  void initState() {
    super.initState();
    currentSongIndex = widget.initialSongIndex;
    playerInit();
    _initializeAsync();
  }

  @override
  void dispose() {
    _isDisposed = true;
    _audioPlayer.dispose();
    super.dispose();
  }

  void _changeCurrentSong(int index) {
    if (!_isDisposed) {
      setState(() {
        currentSongIndex = index;
        _updateCurrentSong();
      });
    }
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/img/app_bg.png"),
          fit: BoxFit.cover,
        ),
      ),
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.transparent,
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(top: 45, left: 10, right: 10),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      onPressed: () {
                        Get.back();
                      },
                      icon: Image.asset(
                        "assets/img/back.png",
                        width: 25,
                        height: 25,
                        fit: BoxFit.contain,
                      ),
                    ),
                    Row(
                      children: [
                        IconButton(
                          onPressed: () {},
                          icon: Image.asset(
                            "assets/img/music_add.png",
                            width: 30,
                            height: 30,
                          ),
                        ),
                        IconButton(
                          onPressed: downloadManager.isDownloading(id[currentSongIndex]) ||
                              downloadManager.isCompleted(id[currentSongIndex])
                              ? null
                              : () async {
                            await downloadManager.startDownload(
                              song: widget.songList[currentSongIndex],
                              context: context,
                            );
                          },
                          icon: Obx(() {
                            if (downloadManager.isDownloading(id[currentSongIndex])) {
                              return Stack(
                                alignment: Alignment.center,
                                children: [
                                  SizedBox(
                                    width: 32,
                                    height: 32,
                                    child: CircularProgressIndicator(
                                      value: downloadManager.getProgress(id[currentSongIndex]),
                                      backgroundColor: Colors.grey[200],
                                      valueColor: const AlwaysStoppedAnimation<Color>(Color(0xff429482)),
                                      strokeWidth: 3.0,
                                    ),
                                  ),
                                  Text(
                                    '${(downloadManager.getProgress(id[currentSongIndex]) * 100).toInt()}',
                                    style: const TextStyle(fontSize: 12),
                                  ),
                                ],
                              );
                            }
                            return Image.asset(
                              downloadManager.isCompleted(id[currentSongIndex])
                                  ? "assets/img/music_download_completed.png"
                                  : "assets/img/music_download.png",
                              width: 30,
                              height: 30,
                            );
                          }),
                        ),
                      ],
                    )
                  ],
                ),
                const SizedBox(
                  height: 80,
                ),
                Center(
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: Image.asset(
                          "assets/img/music_Ellipse.png",
                          width: 320,
                          height: 320,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Positioned(
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(80),
                          child: Image.network(
                            widget.songList[currentSongIndex].artistPic,
                            width: 230,
                            height: 230,
                            fit: BoxFit.cover,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  height: 60,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          musicName,
                          style: const TextStyle(
                              fontSize: 20, fontWeight: FontWeight.bold),
                        ),
                        Text(
                          artistName,
                          style: const TextStyle(fontSize: 20),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        IconButton(
                          // TODO 该处存在 BUG，影响功能：点赞
                          // 原因：同收藏功能
                          onPressed: () async{
                            setState(() {
                              likesnot = !likesnot;
                              likes[currentSongIndex] = !likes[currentSongIndex];
                            });
                            await LikesApiMusic().likesMusic(musicId: id[currentSongIndex], Authorization: AppData().currentToken);
                          },
                          icon: Image.asset(
                            likesnot
                                ? "assets/img/music_good.png"
                                : "assets/img/music_good_un.png",
                            width: 29,
                            height: 29,
                          ),
                        ),
                        IconButton(
                          // TODO 该处存在 BUG，影响功能：收藏
                          // 原因：这个视图接收的数据从父组件传递过来
                          // 在这更新数据不会影响父组件的数据，所以在父组件中的数据不会改变
                          // 所以从父组件进入该组件，显示的点赞和收藏数据均是父组件初始化的时候从服务器获取的，而不是最新的
                          // 同理，点赞逻辑也存在这个 BUG
                          onPressed: () async{
                            setState(() {
                              collectionsnot = !collectionsnot;
                              collection[currentSongIndex] = !collection[currentSongIndex];
                            });
                            await CollectionApiMusic().addCollection(musicId: id[currentSongIndex], Authorization: AppData().currentToken);
                          },
                          icon: Image.asset(
                            collectionsnot
                                ? "assets/img/music_star.png"
                                : "assets/img/music_star_un.png",
                            width: 29,
                            height: 29,
                          ),
                        ),
                        IconButton(
                          onPressed: () {
                            Image.asset("assets/img/music_good.png");
                          },
                          icon: Image.asset(
                            "assets/img/music_commend_un.png",
                            width: 29,
                            height: 29,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
                const SizedBox(
                  height: 80,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "${formatDuration(_position)}",
                      style: const TextStyle(
                        color: Colors.black,
                      ),
                    ),
                    Expanded(
                      child: SliderTheme(
                        data: const SliderThemeData(
                          trackHeight: 3.0, // 调整轨道的高度
                          thumbShape: RoundSliderThumbShape(
                              enabledThumbRadius: 7.0), // 调整拇指的大小
                          overlayShape:
                          RoundSliderOverlayShape(overlayRadius: 12.0),
                        ),
                        child: Slider(
                          min: 0,
                          max: _duration.inSeconds.toDouble(),
                          value: _position.inSeconds.toDouble(),
                          onChanged: (value) async {
                            await _audioPlayer
                                .seek(Duration(seconds: value.toInt()));
                            setState(() {});
                          },
                          activeColor: const Color(0xff429482),
                          inactiveColor: const Color(0xffE3F0ED),
                        ),
                      ),
                    ),
                    Text(
                      "${formatDuration(_duration)}",
                      style: const TextStyle(
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 30,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      onPressed: () {},
                      icon: Image.asset(
                        "assets/img/music_random.png",
                        width: 35,
                        height: 35,
                      ),
                    ),
                    Row(
                      children: [
                        IconButton(
                          onPressed: playPreviousSong,
                          icon: Image.asset(
                            "assets/img/music_back.png",
                            width: 42,
                            height: 42,
                          ),
                        ),
                        const SizedBox(
                          width: 10,
                        ),
                        _buildPlayButton(), // 这里使用新的方法替换原来的IconButton
                        const SizedBox(
                          width: 10,
                        ),
                        IconButton(
                          onPressed: playNextSong,
                          icon: Image.asset(
                            "assets/img/music_next.png",
                            width: 42,
                            height: 42,
                          ),
                        ),
                      ],
                    ),
                    IconButton(
                      onPressed: _showPlaylist,
                      icon: Image.asset(
                        "assets/img/music_more.png",
                        width: 35,
                        height: 35,
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  void _showPlaylist() {
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(30))),
      builder: (BuildContext context) {
        return Container(
          padding: const EdgeInsets.only(top: 15),
          constraints: BoxConstraints(
              maxHeight: MediaQuery.of(context).size.height * 0.45),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Center(
                child: Text(
                  "播放列表",
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: music.length,
                  itemBuilder: (BuildContext context, int index) {
                    bool isCurrentlyPlaying = currentSongIndex == index;
                    return ListTile(
                      tileColor: isCurrentlyPlaying ? const Color(0xffE3F0ED) : null,
                      title: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(left: 20),
                            // Add left padding
                            child: Text(
                              music[index],
                              style: const TextStyle(fontSize: 18),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(right: 20),
                            // Add right padding
                            child: Image.asset(
                              "assets/img/songs_run.png",
                              width: 25,
                            ), // Add your desired icon here
                          ),
                        ],
                      ),
                      onTap: () {
                        _changeCurrentSong(index);
                        Navigator.pop(context);
                      },
                    );
                  },
                ),
              ),
              ElevatedButton(
                onPressed: () => Navigator.pop(context),
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xff429482),
                  padding: const EdgeInsets.symmetric(vertical: 14),
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.zero,
                  ),
                ),
                child: const Text(
                  "关闭",
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}