Changes

Author: mugan86

projects/mugan86-youtube-api/src/lib/assets/styles/styles.css

@@ -41,3 +41,21 @@ h1 {
     padding: 10px;
     border-radius: 8px;
 }
+
+/** VIDEOS **/
+
+.videos {
+    max-width: 85%;
+    margin: 0 auto;
+}
+
+
+.col-md-4 {
+    max-width: 32%;
+    margin-right: 1.33%;
+}
+
+.card {
+    padding: 5px;
+    margin-bottom: 10px;
+}

projects/mugan86-youtube-api/src/lib/components/channel/channel.component.html

@@ -1,4 +1,4 @@
-<div class="row channel">
+<div class="row channel" *ngIf="channel">
   <div class="col-md-2">
     <img [src]="channel?.thumbnails.high.url" class="img-circle" />
   </div>

projects/mugan86-youtube-api/src/lib/components/playlist-items/playlist-items.component.html

@@ -1,3 +1,13 @@
-<p>
-  playlist-items works!
-</p>
+<div class="row videos" *ngIf="videos">
+    <ng-template ngFor [ngForOf]="videos" let-video let-i="index">
+      <div class="card col-md-4">
+          <img [src]="video.snippet.thumbnails.high.url" class="card-img-top" alt="...">
+          <div class="card-body">
+            <h5 class="card-title">{{ video?.snippet.title }}</h5>
+            <p class="card-text">{{ video?.snippet.description }}</p>
+            <p class="card-text"><small class="text-muted">{{ video?.snippet.publishedAt | dateHour}}</small></p>
+          </div>
+        </div>
+    </ng-template>
+</div>
+<button (click)="loadMore()">Cargar más videos</button>

projects/mugan86-youtube-api/src/lib/components/playlist-items/playlist-items.component.ts

@@ -1,15 +1,42 @@
-import { Component, OnInit } from '@angular/core';
+import { ApiService } from './../../services/api.service';
+import { Component, OnInit, Input } from '@angular/core';
+import { Item } from '../../interfaces/api/playlis-items.interface';
 
 @Component({
   selector: 'mugan86-yt-api-playlist-items',
   templateUrl: './playlist-items.component.html',
   styles: []
 })
 export class PlaylistItemsComponent implements OnInit {
-
-  constructor() { }
+  @Input() playlistId: string;
+  videos: Item[];
+  noMoreVideos = false;
+  constructor(private api: ApiService) { }
 
   ngOnInit() {
+    if (this.playlistId === undefined || this.playlistId === null || this.playlistId === '') {
+      this.playlistId = 'UUTh7-deUJBNv2tHRiMGcXxg';
+    }
+    this.loadData();
+  }
+
+  loadData(loadMore: boolean = false) {
+
+    if ( this.api.pageToken === 'OK') {
+      this.noMoreVideos = true;
+      console.log('No hay más videos en este playlist');
+    }
+    // Cargar los datos
+    this.api.getItemsByPlaylist(this.playlistId, loadMore).subscribe(
+      (items: Item[]) => {
+        this.videos = items;
+        console.log(this.videos);
+      }
+    );
+  }
+
+  loadMore() {
+    this.loadData(true);
   }
 
 }

projects/mugan86-youtube-api/src/lib/mugan86-youtube-api.module.ts

@@ -13,6 +13,7 @@ import { throwError } from 'rxjs';
 import { DateHourPipe } from './pipes/date-hour.pipe';
 import { PlaylistItemsComponent } from './components/playlist-items/playlist-items.component';
 import { UserLastPlaylistComponent } from './components/user-last-playlist/user-last-playlist.component';
+import { CommonModule } from '@angular/common';
 
 const COMPONENTS = [
   Mugan86YoutubeApiComponent,
@@ -28,7 +29,8 @@ const PIPES = [YoutubePipe, DomSecurePipe, DateHourPipe];
   declarations: [...COMPONENTS, ...PIPES],
   imports: [
     NgbModule,
-    HttpClientModule
+    HttpClientModule,
+    CommonModule
   ],
   exports: [...COMPONENTS, ...PIPES],
   entryComponents: [

projects/mugan86-youtube-api/src/lib/services/api.service.ts

@@ -58,7 +58,7 @@ export class ApiService {
     return this.http.get(this.getUrl(`playlistItems?${this.info}&playlistId=${ playlistId }${pageToken}`)).pipe(
       map(
         ( res: PlaylistItems ) => {
-          this.pageToken = res.nextPageToken;
+          this.pageToken = (res.nextPageToken) ? res.nextPageToken : 'OK';
           this.playlistVideos = this.takeVideos(res.items);
           return this.playlistVideos;
         }

src/app/app.component.html

@@ -1,8 +1,8 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<mugan86-yt-api></mugan86-yt-api>
 <mugan86-yt-api-channel [channelId]="'UCTh7-deUJBNv2tHRiMGcXxg'"></mugan86-yt-api-channel>
 <button (click)="show()">Mostrar</button>
-<div style="text-align:center">
+<mugan86-yt-api-playlist-items></mugan86-yt-api-playlist-items>
+<!--<div style="text-align:center">
   <h1>
     Welcome to {{ title }}!
   </h1>
@@ -19,5 +19,5 @@ <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Document
   <li>
     <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
   </li>
-</ul>
+</ul>-->