Использование бесконечной прокрутки Ionic и API YouTube v3 - PullRequest
Новая
       10

Использование бесконечной прокрутки Ionic и API YouTube v3

0 голосов
/ 10 февраля 2019

Я полу-успешно использую ionic * бесконечную прокрутку и YouTube API для достижения нумерации страниц.

Я могу загрузить первые 10 видео, затем, когда я доберусь до конца своего списка, я могу сделать еще один успешный запрос на загрузку следующих 10 видео (всего 20 видео на экране).После этого кажется, что я не обновляю nextPageToken должным образом, поэтому ничего не происходит, и я просто застрял с вращающейся иконкой «загрузки данных».

Вот мой файл .ts, который обрабатывает прокрутку& показывает список видео: 

...

public videos: Array<any>;
public count = 10;
public pageToken: string;

...

ngOnInit() {
    this.getPlaylistVideos();
}

// get the initial list of 10 videos 
// pass null for pageToken first time
async getPlaylistVideos() {
    console.log('getting initial video list');

    const loading = await this.loadingCtrl.create();
    loading.present();

    this.youtubeService.getPlaylistVideos(environment.youtube.playlistId, this.count, null)
        .then(data => {
            loading.dismiss();

            if (data) {
                if (data.items) {
                    this.videos = data.items; // data.items is array of videos
                }
                if (data.nextPageToken) {
                    this.pageToken = data.nextPageToken;  // save the pageToken variable for next request
                }
            } else {
                this.alertCtrl.create({
                    header: 'Error',
                    subHeader: 'There was an error',
                    message: 'Something internet related happened & we couldn\'t load the playlist.',
                    buttons: [{ text: 'Ok', role: 'cancel' }]
                }).then(alert => {
                    alert.present();
                });
            }
        });
}

Когда я прокручиваю страницу вниз, вот что я делаю, чтобы получить больше видео.Этот метод будет работать один раз , но затем, кажется, просто игнорируется. 

loadMoreVideos(event) {
    console.log('--> loadMoreVideos called');

    if (this.pageToken) {
        // pass the pageToken to the service
  this.youtubeService.getPlaylistVideos(environment.youtube.playlistId, this.count, this.pageToken).then(data => {
            if (data) {
                this.pageToken = data.nextPageToken; // update the pageToken
                data.items.forEach(video => {
                    this.videos.push(video);  // add the incoming videos to the list
                });
            } else {
                this.alertCtrl.create({
                    header: 'Error',
                    subHeader: 'There was an error',
                    message: 'Something internet related happened & we couldn\'t load the playlist.',
                    buttons: [{ text: 'Ok', role: 'cancel' }]
                }).then(alert => {
                    alert.present();
                });
            }
        });
    }
}

Как только метод loadMoreVideos загрузит следующие 10 видео (у меня будет 20 на экране в этомточка) он выполняется nolonger, и я не уверен почему.

Вот как выглядит мой сервис на YouTube. 

getPlaylistVideos(playlistId: string, count: number, pageToken: string): Promise<any> {
    try {
        if (pageToken) {
            console.log('incoming pageToken: ', pageToken);
            return new Promise(resolve => {
                this.http.get(`${ environment.youtube.baseUrl }playlistItems?key=${ environment.youtube.apiKey }&playlistId=${ playlistId }&part=snippet,id&maxResults=${ count }&pageToken=${ pageToken }&order=date`)
                    .subscribe(data => {
                        resolve(data);
                    }, error => {
                        console.error(error);
                    });
            });
        } else {
            console.log('no page token');
            return new Promise(resolve => {
                this.http.get(`${ environment.youtube.baseUrl }playlistItems?key=${ environment.youtube.apiKey }&playlistId=${ playlistId }&part=snippet,id&maxResults=${ count }&order=date`)
                    .subscribe(data => {
                        resolve(data);
                    }, error => {
                        console.error(error);
                    });
            });
        }
    } catch (error) {
        console.error('Error: something really bad happened trying to get the videos.');
        console.error(error);
    }
}

Я чувствую, что я очень близок, но мне нужно немноготолчок, чтобы преодолеть горб.Спасибо за любые предложения!

1 Ответ

0 голосов
/ 11 февраля 2019

Похоже, вы очень близки - вы получаете новый pageToken.Как это выглядит, вы пропускаете event.target.complete(); в конце вашего forEach.

Вот как это должно выглядеть: 

/**
 * Load more videos when scrolling.
 *
 * @param event
 */
loadMoreVideos(event) {
    if (this.pageToken) {
        this.myYoutubeService.getPlaylistVideos(environment.youtube.playlistId, this.count, this.pageToken).then(data => {
            if (data) {
                this.pageToken = data.nextPageToken;
                data.items.forEach(video => {
                    this.videos.push(video);
                });
                event.target.complete();
            } else {
                this.alertCtrl.create({
                    header: 'Error',
                    subHeader: 'There was an error',
                    message: 'Something internet related happened & we couldn\'t load the playlist.',
                    buttons: [{ text: 'Ok', role: 'cancel' }]
                }).then(alert => {
                    alert.present();
                });
            }
        });
    }
}
...