How to load a list of AudioSource from GraphQL API in Flutter - flutter

Question

I have this code file that loads audio playlist files to the media player direct from the internet. So, I want to change instead of loading audio playlist files direct from the internet I want it to fetch from my GraphQL API using graphql_flutter 5.1.0 (https://pub.dev/packages/graphql_flutter) package from zino.company.
My question is how can I query the list of episodes to populate the _playlist AudioSource before the page loads completely?
I tried to use didChangeDependencies but the playlist was not populated after the page loaded. Also, the Tested hard code that I commented on the file works but still it is hard coded. When the playlist is loaded, the audio files are playable and all the buttons work. I have attached the media_player.dart file and snapshot of the app.
My GraphQL API request and response for the episodes is as follow;
graphql request
{
episodeByPodcast(podcast: 1){
id
title
synopsis
duration
filePath
host
guest
podcast {
id
podcastTitle
}
recorded
posted
}
}
graphql response
{
"data": {
"episodeByPodcast": [
{
"id": "1",
"title": "Episode 1",
"synopsis": "Hello World",
"duration": "18:59",
"filePath": "podcasts/episode_1.mp3",
"host": "John Doe",
"guest": "Jane Doe",
"podcast": {
"id": "1",
"podcastTitle": "Season 1"
},
"recorded": "2022-05-27",
"posted": "2022-05-27"
},
{
"id": "4",
"title": "Episode 2",
"synopsis": "Hello World",
"duration": "18:59",
"filePath": "podcasts/episode_2.mp3",
"host": "John Doe",
"guest": "Jane Doe",
"podcast": {
"id": "1",
"podcastTitle": "Season 1"
},
"recorded": "2022-05-27",
"posted": "2022-05-27"
},
{
"id": "5",
"title": "Episode 3",
"synopsis": "Hello World",
"duration": "41:02",
"filePath": "podcasts/episode_3",
"host": "John Doe",
"guest": "Jane Doe",
"podcast": {
"id": "1",
"podcastTitle": "Season 1"
},
"recorded": "2022-05-28",
"posted": "2022-05-28"
}
]
}
}
The media_player.dart file
import 'package:audio_service/audio_service.dart';
import 'package:audio_session/audio_session.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:just_audio/just_audio.dart';
import 'package:just_audio_background/just_audio_background.dart';
import 'package:provider/provider.dart';
import 'package:rxdart/rxdart.dart';
import 'package:app/screens/podcast/widgets/common.dart';
import 'widgets/control_buttons.dart';
// Tested hard code
// const pathPrefix = MediaEndpoint.url;
// final List<Map<String, dynamic>> episodes = [
// {
// "id": "1",
// "title": "Episode 1",
// "synopsis": "Hello World",
// "duration": "18:59",
// "filePath":
// "podcasts/episode_1.mp3",
// "host": "John Doe",
// "guest": "Jane Doe",
// "podcast": {"id": "1", "podcastTitle": "Season 1"},
// "recorded": "2022-05-27",
// "posted": "2022-05-27"
// },
// {
// "id": "4",
// "title": "Episode 2",
// "synopsis": "Hello World",
// "duration": "18:59",
// "filePath":
// "podcasts/episode_2.mp3",
// "host": "John Doe",
// "guest": "Jane Doe",
// "podcast": {"id": "1", "podcastTitle": "Season 1"},
// "recorded": "2022-05-27",
// "posted": "2022-05-27"
// },
// {
// "id": "5",
// "title": "Episode 3",
// "synopsis": "Hello World",
// "duration": "41:02",
// "filePath": "podcasts/episode_3.mp3",
// "host": "John Doe",
// "guest": "Jane Doe",
// "podcast": {"id": "1", "podcastTitle": "Season 1"},
// "recorded": "2022-05-28",
// "posted": "2022-05-28"
// }
// ];
// final ConcatenatingAudioSource _playlist = ConcatenatingAudioSource(
// children: [
// for (var episode in episodes)
// AudioSource.uri(
// Uri.parse('$pathPrefix${episode['filePath']}'),
// tag: MediaItem(
// id: episode['id'].toString(),
// album: episode['podcast']['podcastTitle'].toString(),
// title: episode['title'].toString(),
// artUri: Uri.parse(
// "https://mywebsite.com/uploads/2021/04/cover-art.png"),
// ),
// ),
// ],
// );
// - End of Tested hard code -
class MediaPlayer extends StatefulWidget {
static const routeName = '/media-player';
#override
_MediaPlayerState createState() => _MediaPlayerState();
}
class _MediaPlayerState extends State<MediaPlayer> {
var _isInit = true;
var _isLoading = false;
#override
void didChangeDependencies() {
if (_isInit) {
setState(() {
_isLoading = true;
});
setState(() {
_isLoading = false;
});
}
_isInit = false;
super.didChangeDependencies();
}
static int _nextMediaId = 0;
late AudioPlayer _player;
final _playlist = ConcatenatingAudioSource(
children: [
ClippingAudioSource(
start: const Duration(seconds: 60),
end: const Duration(seconds: 90),
child: AudioSource.uri(Uri.parse(
"https://mywebsite.com/podcasts/episode_1.mp3")),
tag: MediaItem(
id: '${_nextMediaId++}',
album: "Science Friday",
title: "A Salute To Head-Scratching Science (30 seconds)",
artUri: Uri.parse(
"https://mywebsite.com/uploads/2021/04/cover-art.png"),
),
),
AudioSource.uri(
Uri.parse("https://mywebsite.com/podcasts/episode_2.mp3"),
tag: MediaItem(
id: '${_nextMediaId++}',
album: "Science Friday",
title: "A Salute To Head-Scratching Science",
artUri: Uri.parse(
"https://mywebsite.com/uploads/2021/04/cover-art.png"),
),
),
AudioSource.uri(
Uri.parse(
"https://mywebsite.com/podcasts/episode_3.mp3"),
tag: MediaItem(
id: '${_nextMediaId++}',
album: "Science Friday",
title: "From Cat Rheology To Operatic Incompetence",
artUri: Uri.parse(
"https://mywebsite.com/uploads/2021/04/cover-art.png"),
),
),
AudioSource.uri(
Uri.parse(
"https://mywebsite.com/podcasts/episode_4.mp3"),
tag: MediaItem(
id: '${_nextMediaId++}',
album: "Public Domain",
title: "Nature Sounds",
artUri: Uri.parse(
"https://mywebsite.com/uploads/2021/04/cover-art.png"),
),
),
],
);
final int _addedCount = 0;
#override
void initState() {
super.initState();
_player = AudioPlayer();
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
statusBarColor: Colors.black,
));
_init();
}
Future<void> _init() async {
final session = await AudioSession.instance;
await session.configure(const AudioSessionConfiguration.speech());
// Listen to errors during playback.
_player.playbackEventStream.listen((event) {},
onError: (Object e, StackTrace stackTrace) {
print('A stream error occurred: $e');
});
try {
await _player.setAudioSource(_playlist);
} catch (e, stackTrace) {
// Catch load errors: 404, invalid url ...
print("Error loading playlist: $e");
print(stackTrace);
}
}
#override
void dispose() {
_player.dispose();
super.dispose();
}
Stream<PositionData> get _positionDataStream =>
Rx.combineLatest3<Duration, Duration, Duration?, PositionData>(
_player.positionStream,
_player.bufferedPositionStream,
_player.durationStream,
(position, bufferedPosition, duration) => PositionData(
position, bufferedPosition, duration ?? Duration.zero));
#override
Widget build(BuildContext context) {
final playerData = ModalRoute.of(context)!.settings.arguments as Map;
return _isLoading
? const CircularProgressIndicator()
: Scaffold(
appBar: AppBar(
title: Text(
playerData['title'],
),
),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: StreamBuilder<SequenceState?>(
stream: _player.sequenceStateStream,
builder: (context, snapshot) {
final state = snapshot.data;
if (state?.sequence.isEmpty ?? true) {
return const SizedBox();
}
final metadata = state!.currentSource!.tag as MediaItem;
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Image.network(
metadata.artUri.toString())),
),
),
Text(metadata.album!,
style: Theme.of(context).textTheme.headline6),
Text(metadata.title),
],
);
},
),
),
ControlButtons(_player),
StreamBuilder<PositionData>(
stream: _positionDataStream,
builder: (context, snapshot) {
final positionData = snapshot.data;
return SeekBar(
duration: positionData?.duration ?? Duration.zero,
position: positionData?.position ?? Duration.zero,
bufferedPosition:
positionData?.bufferedPosition ?? Duration.zero,
onChangeEnd: (newPosition) {
_player.seek(newPosition);
},
);
},
),
const SizedBox(height: 8.0),
Row(
children: [
StreamBuilder<LoopMode>(
stream: _player.loopModeStream,
builder: (context, snapshot) {
final loopMode = snapshot.data ?? LoopMode.off;
const icons = [
Icon(Icons.repeat, color: Colors.grey),
Icon(Icons.repeat, color: Colors.orange),
Icon(Icons.repeat_one, color: Colors.orange),
];
const cycleModes = [
LoopMode.off,
LoopMode.all,
LoopMode.one,
];
final index = cycleModes.indexOf(loopMode);
return IconButton(
icon: icons[index],
onPressed: () {
_player.setLoopMode(cycleModes[
(cycleModes.indexOf(loopMode) + 1) %
cycleModes.length]);
},
);
},
),
Expanded(
child: Text(
"Playlist",
style: Theme.of(context).textTheme.headline6,
textAlign: TextAlign.center,
),
),
StreamBuilder<bool>(
stream: _player.shuffleModeEnabledStream,
builder: (context, snapshot) {
final shuffleModeEnabled = snapshot.data ?? false;
return IconButton(
icon: shuffleModeEnabled
? const Icon(Icons.shuffle,
color: Colors.orange)
: const Icon(Icons.shuffle, color: Colors.grey),
onPressed: () async {
final enable = !shuffleModeEnabled;
if (enable) {
await _player.shuffle();
}
await _player.setShuffleModeEnabled(enable);
},
);
},
),
],
),
SizedBox(
height: 240.0,
child: StreamBuilder<SequenceState?>(
stream: _player.sequenceStateStream,
builder: (context, snapshot) {
final state = snapshot.data;
final sequence = state?.sequence ?? [];
return ReorderableListView(
onReorder: (int oldIndex, int newIndex) {
if (oldIndex < newIndex) newIndex--;
_playlist.move(oldIndex, newIndex);
},
children: [
for (var i = 0; i < sequence.length; i++)
Dismissible(
key: ValueKey(sequence[i]),
background: Container(
color: Colors.redAccent,
alignment: Alignment.centerRight,
child: const Padding(
padding: EdgeInsets.only(right: 8.0),
child:
Icon(Icons.delete, color: Colors.white),
),
),
onDismissed: (dismissDirection) {
_playlist.removeAt(i);
},
child: Material(
color: i == state!.currentIndex
? Colors.grey.shade300
: null,
child: ListTile(
title:
Text(sequence[i].tag.title as String),
onTap: () {
_player.seek(Duration.zero, index: i);
},
),
),
),
],
);
},
),
),
],
),
),
);
}
}
App screenshot
media player app screenshot