Version 1.0.0 ok

mugan86 · mugan86 · commit 330811652720 · 2019-03-24T18:21:05.000+01:00
diff --git a/projects/mugan86-youtube-api/README.md b/projects/mugan86-youtube-api/README.md
@@ -28,6 +28,7 @@ import { Mugan86YoutubeApiModule } from 'mugan86-youtube-api';
     ...
     Mugan86YoutubeApiModule.forRoot({
       apiKey: 'API KEY Value
+      showLog: <Si queremos ver el log del Api Key introducido> (no es obligatorio)
     })
   ],
   providers: [],
@@ -56,4 +57,7 @@ Por ejemplo, los videos subidos por **mugan86**, que hace uso de este ID de este
 Por ejemplo, los videos subidos por mugan86, que hace uso de este ID de playlist: **'UUTh7-deUJBNv2tHRiMGcXxg'**
 ```
 <mugan86-yt-api-playlist-items [playlistId]="'UUTh7-deUJBNv2tHRiMGcXxg'"></mugan86-yt-api-playlist-items>
-```
+```
+
+### Librería desarrollada por
+* Anartz Mugika ([mugan86](https://github.com/mugan86))
diff --git a/projects/mugan86-youtube-api/package.json b/projects/mugan86-youtube-api/package.json
@@ -1,9 +1,26 @@
 {
   "name": "mugan86-youtube-api",
   "version": "0.0.1",
+  "description": "Libreria para usar con la API de Youtube",
   "peerDependencies": {
     "@angular/common": "^7.2.0",
     "@angular/core": "^7.2.0",
     "@ng-bootstrap/ng-bootstrap": "^4.1.0"
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/npm-js-ts-angular-modules-course/proyecto-3-libreria-angular.git"
+  },
+  "keywords": [
+    "youtube api",
+    "angular youtube api",
+    "widget",
+    "playlist"
+  ],
+  "author": "Anartz Mugika Ledo <mugan86@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/npm-js-ts-angular-modules-course/proyecto-3-libreria-angular/issues"
+  },
+  "homepage": "https://github.com/npm-js-ts-angular-modules-course/proyecto-3-libreria-angular#readme"
 }
diff --git a/projects/mugan86-youtube-api/src/lib/assets/styles/styles.css b/projects/mugan86-youtube-api/src/lib/assets/styles/styles.css
@@ -22,6 +22,10 @@ h1 {
     height: 100%;
 }
 
+.modal-body p {
+    margin-top: 15px;
+}
+
 /** CHANNEL **/
 
 .channel {
@@ -58,4 +62,12 @@ h1 {
 .card {
     padding: 5px;
     margin-bottom: 10px;
+}
+
+.morevideos {
+    position: relative;
+    left: 41%;
+    width: 300px;
+    padding: 10px;
+    margin: 15px 0px 60px 0px;
 }
diff --git a/projects/mugan86-youtube-api/src/lib/components/modal-video/modal-video.component.html b/projects/mugan86-youtube-api/src/lib/components/modal-video/modal-video.component.html
@@ -1,9 +1,10 @@
 <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">Nuestro video Youtube</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modalService.dismiss('Cross click')">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <div class="modal-body">
-      <mugan86-yt-api-video-player></mugan86-yt-api-video-player>
-  </div>
+  <h4 class="modal-title" id="modal-basic-title">{{ video.title }}</h4>
+  <button type="button" class="close" aria-label="Close" (click)="modalService.dismiss('Cross click')">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <mugan86-yt-api-video-player [id]="video.id"></mugan86-yt-api-video-player>
+  <p>{{ video.description | shortDescription:250}}</p>
+</div>
diff --git a/projects/mugan86-youtube-api/src/lib/components/modal-video/modal-video.component.ts b/projects/mugan86-youtube-api/src/lib/components/modal-video/modal-video.component.ts
@@ -1,3 +1,4 @@
+import { Video } from './../../interfaces/video';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Component, Input } from '@angular/core';
 
@@ -8,9 +9,7 @@ import { Component, Input } from '@angular/core';
 })
 export class ModalVideoComponent {
 
-  @Input() title: string;
-  @Input() body: string;
-  @Input() videoId: string;
+  @Input() video: Video;
   constructor(public modalService: NgbActiveModal) { }
 
 }
diff --git a/projects/mugan86-youtube-api/src/lib/components/playlist-items/playlist-items.component.html b/projects/mugan86-youtube-api/src/lib/components/playlist-items/playlist-items.component.html
@@ -4,10 +4,11 @@
           <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">{{ video?.snippet.description | shortDescription:100 }}</p>
             <p class="card-text"><small class="text-muted">{{ video?.snippet.publishedAt | dateHour}}</small></p>
+            <button type="button" (click)="showVideo(video)" class="btn btn-info">Ver video</button>
           </div>
         </div>
     </ng-template>
 </div>
-<button (click)="loadMore()">Cargar más videos</button>
+<button class="btn btn-outline-info morevideos" (click)="loadMore()">Cargar más videos</button>
diff --git a/projects/mugan86-youtube-api/src/lib/components/playlist-items/playlist-items.component.ts b/projects/mugan86-youtube-api/src/lib/components/playlist-items/playlist-items.component.ts
@@ -1,6 +1,8 @@
+import { Video } from './../../interfaces/video';
+import { Item } from './../../interfaces/api/playlis-items.interface';
+import { ModalService } from './../../services/modal.service';
 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',
@@ -11,7 +13,7 @@ export class PlaylistItemsComponent implements OnInit {
   @Input() playlistId: string;
   videos: Item[];
   noMoreVideos = false;
-  constructor(private api: ApiService) { }
+  constructor(private api: ApiService, private modal: ModalService) { }
 
   ngOnInit() {
     if (this.playlistId === undefined || this.playlistId === null || this.playlistId === '') {
@@ -39,4 +41,13 @@ export class PlaylistItemsComponent implements OnInit {
     this.loadData(true);
   }
 
+  showVideo(video: Item) {
+    const videoItem: Video = {
+      id: video.snippet.resourceId.videoId,
+      title: video.snippet.title,
+      description: video.snippet.description
+    };
+    this.modal.show(videoItem);
+  }
+
 }
diff --git a/projects/mugan86-youtube-api/src/lib/components/video-player/video-player.component.html b/projects/mugan86-youtube-api/src/lib/components/video-player/video-player.component.html
@@ -1,3 +1,3 @@
 <div class="videoWrapper">
-  <iframe width="560" height="349" [src]="'qMKo4Az0LwY' | youtube" frameborder="0" allowfullscreen></iframe>
+  <iframe width="560" height="349" [src]="id | youtube" frameborder="0" allowfullscreen></iframe>
 </div>
diff --git a/projects/mugan86-youtube-api/src/lib/components/video-player/video-player.component.ts b/projects/mugan86-youtube-api/src/lib/components/video-player/video-player.component.ts
@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'mugan86-yt-api-video-player',
   templateUrl: './video-player.component.html',
   styles: []
 })
-export class VideoPlayerComponent implements OnInit {
+export class VideoPlayerComponent {
 
-  constructor() { }
-
-  ngOnInit() {
-  }
+  @Input() id: string;
 
 }
diff --git a/projects/mugan86-youtube-api/src/lib/interfaces/video.ts b/projects/mugan86-youtube-api/src/lib/interfaces/video.ts
@@ -0,0 +1,5 @@
+export interface Video {
+    id: string;
+    title: string;
+    description: string;
+}
diff --git a/projects/mugan86-youtube-api/src/lib/mugan86-youtube-api.module.ts b/projects/mugan86-youtube-api/src/lib/mugan86-youtube-api.module.ts
@@ -14,6 +14,7 @@ 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';
+import { ShortDescriptionPipe } from './pipes/short-description.pipe';
 
 const COMPONENTS = [
   Mugan86YoutubeApiComponent,
@@ -23,7 +24,7 @@ const COMPONENTS = [
   PlaylistItemsComponent,
   UserLastPlaylistComponent
 ];
-const PIPES = [YoutubePipe, DomSecurePipe, DateHourPipe];
+const PIPES = [YoutubePipe, DomSecurePipe, DateHourPipe, ShortDescriptionPipe];
 
 @NgModule({
   declarations: [...COMPONENTS, ...PIPES],
diff --git a/projects/mugan86-youtube-api/src/lib/pipes/date-hour.pipe.ts b/projects/mugan86-youtube-api/src/lib/pipes/date-hour.pipe.ts
@@ -7,13 +7,17 @@ export class DateHourPipe implements PipeTransform {
 
   transform(data: string): string {
     const date = new Date(data);
-    const dayOfMonth = date.getDate();
-    const month = date.getMonth() + 1 ;
+    const dayOfMonth = this.formatNumbers(date.getDate());
+    const month = this.formatNumbers(date.getMonth() + 1 );
     const year = date.getFullYear();
 
-    const hour = date.getHours();
-    const mins = date.getMinutes();
+    const hour = this.formatNumbers(date.getHours());
+    const mins = this.formatNumbers(date.getMinutes());
     return `${dayOfMonth}-${month}-${year} ${hour}:${mins}`;
   }
 
+  private formatNumbers(n: number): string {
+    return (n < 10 ) ? '0'.concat(n.toString()) : n.toString();
+  }
+
 }
diff --git a/projects/mugan86-youtube-api/src/lib/pipes/short-description.pipe.ts b/projects/mugan86-youtube-api/src/lib/pipes/short-description.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'shortDescription'
+})
+export class ShortDescriptionPipe implements PipeTransform {
+
+  transform(value: string, charLimit: number = 150): any {
+    return (value.length > charLimit) ? value.substring(0, charLimit).concat('...') : value;
+  }
+
+}
diff --git a/projects/mugan86-youtube-api/src/lib/services/modal.service.ts b/projects/mugan86-youtube-api/src/lib/services/modal.service.ts
@@ -1,3 +1,4 @@
+import { Video } from './../interfaces/video';
 import { ModalVideoComponent } from './../components/modal-video/modal-video.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Injectable } from '@angular/core';
@@ -9,10 +10,8 @@ export class ModalService {
 
   constructor(private modal: NgbModal) { }
 
-  show(videoId: string) {
+  show(video: Video) {
     const modalRef = this.modal.open(ModalVideoComponent);
-    modalRef.componentInstance.title = 'Mi video';
-    modalRef.componentInstance.body = 'Mi video';
-    modalRef.componentInstance.videoId = 'Mi video';
+    modalRef.componentInstance.video = video;
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,6 +1,5 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <mugan86-yt-api-channel [channelId]="'UCTh7-deUJBNv2tHRiMGcXxg'"></mugan86-yt-api-channel>
-<button (click)="show()">Mostrar</button>
 <mugan86-yt-api-playlist-items></mugan86-yt-api-playlist-items>
 <!--<div style="text-align:center">
   <h1>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -10,9 +10,6 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'libreriasAngular';
 
-  constructor(private modal: ModalService, private api: ApiService) {}
+  constructor(private api: ApiService) {}
 
-  show() {
-    this.modal.show('');
-  }
 }
