Merge pull request #100 from abritopach/develop

Develop

examples/ionic-test-capacitor-youtube-player/package.json

@@ -30,7 +30,7 @@
     "@capacitor/status-bar": "^1.0.6",
     "@ctrl/ngx-github-buttons": "^7.1.0",
     "@ionic/angular": "^6.0.0-rc.3",
-    "capacitor-youtube-player": "^1.0.8",
+    "capacitor-youtube-player": "^1.0.9",
     "rxjs": "^7.4.0",
     "tslib": "^2.3.1",
     "zone.js": "^0.11.4"

examples/ionic-test-capacitor-youtube-player/src/app/app-routing.module.ts

@@ -19,6 +19,10 @@ const routes: Routes = [
     path: 'styled-video-list',
     loadChildren: () => import('./pages/styled-video-list/styled-video-list.module').then( m => m.StyledVideoListPageModule)
   },
+  {
+    path: 'video-playlist',
+    loadChildren: () => import('./pages/video-playlist/video-playlist.module').then( m => m.VideoPlaylistPageModule)
+  },
 ];
 
 @NgModule({

examples/ionic-test-capacitor-youtube-player/src/app/app.component.ts

@@ -22,6 +22,11 @@ export class AppComponent {
       title: 'Styled Video List example',
       url: '/styled-video-list',
       icon: 'list-circle'
+    },
+    {
+      title: 'Video Playlist example',
+      url: '/video-playlist',
+      icon: 'play-circle'
     }
   ];
 

examples/ionic-test-capacitor-youtube-player/src/app/pages/home/home.module.ts

@@ -1,20 +1,15 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { FormsModule } from '@angular/forms';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+
 import { HomePage } from './home.page';
 
 import { HomePageRoutingModule } from './home-routing.module';
-import { NtkmeButtonModule } from '@ctrl/ngx-github-buttons';
-
 
 @NgModule({
   imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    HomePageRoutingModule,
-    NtkmeButtonModule
+    SharedModule,
+    HomePageRoutingModule
   ],
   declarations: [HomePage]
 })

examples/ionic-test-capacitor-youtube-player/src/app/pages/styled-video-list/styled-video-list.module.ts

@@ -1,22 +1,14 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 import { StyledVideoListPageRoutingModule } from './styled-video-list-routing.module';
 
 import { StyledVideoListPage } from './styled-video-list.page';
 
-import { NtkmeButtonModule } from '@ctrl/ngx-github-buttons';
-
 @NgModule({
   imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    StyledVideoListPageRoutingModule,
-    NtkmeButtonModule
+    SharedModule,
+    StyledVideoListPageRoutingModule
   ],
   declarations: [StyledVideoListPage]
 })

examples/ionic-test-capacitor-youtube-player/src/app/pages/video-list/video-list.module.ts

@@ -1,22 +1,14 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 import { VideoListPageRoutingModule } from './video-list-routing.module';
 
 import { VideoListPage } from './video-list.page';
 
-import { NtkmeButtonModule } from '@ctrl/ngx-github-buttons';
-
 @NgModule({
   imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    VideoListPageRoutingModule,
-    NtkmeButtonModule
+    SharedModule,
+    VideoListPageRoutingModule
   ],
   declarations: [VideoListPage]
 })

examples/ionic-test-capacitor-youtube-player/src/app/pages/video-playlist/video-playlist-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { VideoPlaylistPage } from './video-playlist.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: VideoPlaylistPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class VideoPlaylistPageRoutingModule {}

examples/ionic-test-capacitor-youtube-player/src/app/pages/video-playlist/video-playlist.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { VideoPlaylistPageRoutingModule } from './video-playlist-routing.module';
+
+import { VideoPlaylistPage } from './video-playlist.page';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    VideoPlaylistPageRoutingModule
+  ],
+  declarations: [VideoPlaylistPage]
+})
+export class VideoPlaylistPageModule {}

examples/ionic-test-capacitor-youtube-player/src/app/pages/video-playlist/video-playlist.page.html

@@ -0,0 +1,28 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons buttons-start slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>
+      Test Capacitor Youtube Player Plugin
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- The <iframe> (and video player) will replace this <div> tag. -->
+    <p>Playlist using cuePlaylist</p>
+    <div id="youtube-player-playlist1"></div>
+    <p>Playlist using loadPlaylist</p>
+    <div id="youtube-player-playlist2"></div>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar color="primary">
+      <ion-title class="footer-title">© {{ currentYear }} Adrián Brito Pacheco</ion-title>
+      <ion-buttons slot="end">
+        <ntkme-github-button user="abritopach" repo="capacitor-youtube-player" style="margin-right: 5px;"></ntkme-github-button>
+        <ntkme-github-button user="abritopach" type="follow"></ntkme-github-button>
+      </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

examples/ionic-test-capacitor-youtube-player/src/app/pages/video-playlist/video-playlist.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { VideoPlaylistPage } from './video-playlist.page';
+
+describe('VideoPlaylistPage', () => {
+  let component: VideoPlaylistPage;
+  let fixture: ComponentFixture<VideoPlaylistPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VideoPlaylistPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(VideoPlaylistPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

examples/ionic-test-capacitor-youtube-player/src/app/pages/video-playlist/video-playlist.page.ts

@@ -0,0 +1,48 @@
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { Capacitor } from '@capacitor/core';
+import { YoutubePlayer } from 'capacitor-youtube-player';
+import { IPlayerOptions, IPlaylistOptions } from 'capacitor-youtube-player/dist/esm/web/models/models';
+
+@Component({
+  selector: 'app-video-playlist',
+  templateUrl: './video-playlist.page.html',
+  styleUrls: ['./video-playlist.page.scss'],
+})
+export class VideoPlaylistPage implements OnInit, AfterViewInit {
+
+  currentYear = new Date().getFullYear();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit() {
+    if (Capacitor.getPlatform() === 'web') {
+      this.initializeYoutubePlayerPluginWeb();
+    }
+  }
+
+  async initializeYoutubePlayerPluginWeb() {
+    console.log('HomePage::initializeYoutubePlayerPluginWeb() | method called');
+
+    const optionsPlayer1: IPlayerOptions = {playerId: 'youtube-player-playlist1', playerSize: {width: 640, height: 360}, videoId: 'atAeP-rR8Xs', fullscreen: false, debug: true};
+    const resultPlayer1 = await YoutubePlayer.initialize(optionsPlayer1);
+    console.log('playerReady', resultPlayer1);
+
+    const playlistOptions1: IPlaylistOptions = {listType: 'playlist', list: 'PLOMESIqyrpf-A8O-Hym9pvX1D4vDSDcDT'};
+    const resultCuePlaylist = await YoutubePlayer.cuePlaylist('youtube-player-playlist1', playlistOptions1);
+    console.log('cuePlaylist', resultCuePlaylist);
+
+
+    const optionsPlayer2: IPlayerOptions = {playerId: 'youtube-player-playlist2', playerSize: {width: 640, height: 360}, videoId: 'OB2zbmS7bW4', fullscreen: false, debug: true};
+    const resultPlayer2 = await YoutubePlayer.initialize(optionsPlayer2);
+    console.log('playerReady', resultPlayer2);
+
+    const playlistOptions2: IPlaylistOptions = {listType: 'playlist', list: 'PLOMESIqyrpf8yoq4MbK28VemFpoX9PB7k'};
+    const resultLoadPlaylist = await YoutubePlayer.loadPlaylist('youtube-player-playlist2', playlistOptions2);
+    console.log('loadPlaylist', resultLoadPlaylist);
+
+  }
+
+}

examples/ionic-test-capacitor-youtube-player/src/app/shared/shared.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { NtkmeButtonModule } from '@ctrl/ngx-github-buttons';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        IonicModule,
+        NtkmeButtonModule
+    ],
+    exports: [CommonModule, FormsModule, IonicModule, NtkmeButtonModule]
+})
+export class SharedModule { }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "capacitor-youtube-player",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Capacitor Youtube Player",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",

src/definitions.ts

@@ -1,4 +1,4 @@
-import type { IPlayerState, IPlayerOptions } from './web/models/models';
+import type { IPlayerState, IPlayerOptions, IPlaylistOptions } from './web/models/models';
 
 export interface YoutubePlayerPlugin {
   initialize(options: IPlayerOptions): Promise<{playerReady: boolean, player: string} | undefined>;
@@ -13,6 +13,14 @@ export interface YoutubePlayerPlugin {
   cueVideoById(playerId: string, options: {videoId: string, startSeconds?: number, endSeconds?: number, suggestedQuality?: string}): Promise<{result: { method: string, value: boolean, options: {videoId: string, startSeconds?: number, endSeconds?: number, suggestedQuality?: string} }}>;
   /***********/
 
+  // Methods for playing playlist.
+  /***********/
+  cuePlaylist(playerId: string, playlistOptions: IPlaylistOptions): Promise<{result: { method: string, value: boolean }}>;
+  loadPlaylist(playerId: string, playlistOptions: IPlaylistOptions): Promise<{result: { method: string, value: boolean }}>;
+  /***********/
+
+  /***********/
+
   // Methods changing the player volume.
   /***********/
   mute(playerId: string): Promise<{result: { method: string, value: boolean }}>;

src/web.ts

@@ -2,7 +2,7 @@ import { WebPlugin } from '@capacitor/core';
 
 import type { YoutubePlayerPlugin } from './definitions';
 import { Log } from './log';
-import type { IPlayerSize, IPlayerState, IPlayerOptions, RequiredKeys } from './web/models/models';
+import type { IPlayerSize, IPlayerState, IPlayerOptions, RequiredKeys, IPlaylistOptions } from './web/models/models';
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function YT() {
@@ -214,6 +214,27 @@ export class YoutubePlayerPluginWeb extends WebPlugin implements YoutubePlayerPl
     return Promise.resolve({result: { method: 'cueVideoById', value: true, options: options }});
   }
 
+
+  /*********/
+
+  // Methods for playing playlist.
+
+  /*********/
+
+  async cuePlaylist(playerId: string, playlistOptions: IPlaylistOptions)
+  : Promise<{result: { method: string, value: boolean }}> {
+    this.playerLogger.log(`player "${playerId}" -> cuePlaylist with options ${JSON.stringify(playlistOptions)}`);
+    this.players[playerId].cuePlaylist(playlistOptions);
+    return Promise.resolve({result: { method: 'cuePlaylist', value: true }});
+  }
+
+  async loadPlaylist(playerId: string, playlistOptions: IPlaylistOptions)
+  : Promise<{result: { method: string, value: boolean }}> {
+    this.playerLogger.log(`player "${playerId}" -> loadPlaylist with options ${playlistOptions}`);
+    this.players[playerId].loadPlaylist(playlistOptions);
+    return Promise.resolve({result: { method: 'loadPlaylist', value: true }});
+  }
+
   /*********/
 
   // Methods changing the player volume.

src/web/models/models.ts

@@ -47,6 +47,14 @@ export interface IPlayerState {
     }
 }
 
+export interface IPlaylistOptions {
+    listType: 'playlist' | 'search' | 'user_uploads';
+    list: string;
+    index?: number;
+    startSeconds?: number;
+    suggestedQuality?: string;
+}
+
 export interface IPlayerLog {
     log(primaryMessage: string, ...supportingData: any[]): void;
     debug(primaryMessage: string, ...supportingData: any[]): void;