In the previous post for the Youtube series, I shared the way to fetch YouTube videos from YouTube API with SwiftUI. This app still lacks its functionality because it only has 15 Dragon ball videos. Generally, the reason for the pagination is to prevent unnecessary API calls which may cost you a lot. In this post, I want to share how to fetch more videos by pagination, which is calling another API by scrolling to the bottom.
I’ve already built the view with the search text field and the function that fetches videos in the previous postso please read if you haven't checked yet.
Let’s add logic for the pagination.
Whenever reaching at the last item of the list, I want to call another API call, fetching 15 more videos. The reason I put (youtubeVideoViewModel.youtubeSearchLists.count - 1) == index
is that I don’t want to call another API by scrolling back.
struct ContentView: View {
@ObservedObject var youtubeVideoViewModel = YoutubeVideoViewModel()
@State private var searchText = ""
var body: some View {
NavigationView {
VStack {
TextField("Search", text: $searchText) { isEditing in
} onCommit: {
youtubeVideoViewModel.fetchVideoWithSearch(searchText: searchText)
}
.padding()
.textFieldStyle(RoundedBorderTextFieldStyle())
List {
Group {
ForEach(0..<youtubeVideoViewModel.youtubeSearchLists.count, id: \.self) { index in
ForEach(0..<youtubeVideoViewModel.youtubeSearchLists[index].items.count, id: \.self) { secondIndex in
HStack {
URLImage(url: youtubeVideoViewModel.youtubeSearchLists[index].items[secondIndex].snippet.thumbnails.high?.url ?? "")
.aspectRatio(contentMode: .fit).background(Color.blue)
VStack {
Text(youtubeVideoViewModel.youtubeSearchLists[index].items[secondIndex].snippet.title)
.bold()
.padding(EdgeInsets(top: 5, leading: 5, bottom: 0, trailing: 5))
Text( youtubeVideoViewModel.youtubeSearchLists[index].items[secondIndex].snippet.description)
.padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
}
}.frame(width: .none, height: 150, alignment: .center)
.onAppear(perform: {
// Here's the logic for the pagination.
if secondIndex == youtubeVideoViewModel.perPage - 1 && ((youtubeVideoViewModel.youtubeSearchLists.count - 1) == index) {
let pageToken = youtubeVideoViewModel.youtubeSearchLists[index].nextPageToken
youtubeVideoViewModel.fetchVideoWithSearch(searchText: searchText, pageToken: pageToken)
}
})
}
}
}
}
}
.navigationTitle("Anime Videos")
}
}
}
Let’s see how it looks.
Full code is available at: github.com/akaakoz/youtubeListApp
In the next episode, I will explain how to play out the video as well as to control play, so stay tuned!