Merge pull request #74 from abritopach/develop

Develop

android/.project

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <projectDescription>
-	<name>android</name>
+	<name>capacitor-youtube-player</name>
 	<comment>Project android created by Buildship.</comment>
 	<projects>
 	</projects>
@@ -22,7 +22,7 @@
 	</natures>
 	<filteredResources>
 		<filter>
-			<id>1637187928728</id>
+			<id>0</id>
 			<name></name>
 			<type>30</type>
 			<matcher>

examples/ionic-test-capacitor-youtube-player/android/.project

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>android</name>
+	<comment>Project android_ created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>0</id>
+			<name></name>
+			<type>30</type>
+			<matcher>
+				<id>org.eclipse.core.resources.regexFilterMatcher</id>
+				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>

examples/ionic-test-capacitor-youtube-player/android/.settings/org.eclipse.buildship.core.prefs

@@ -0,0 +1,13 @@
+arguments=
+auto.sync=false
+build.scans.enabled=false
+connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
+connection.project.dir=
+eclipse.preferences.version=1
+gradle.user.home=
+java.home=/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home
+jvm.arguments=
+offline.mode=false
+override.workspace.settings=true
+show.console.view=true
+show.executions.view=true

examples/ionic-test-capacitor-youtube-player/android/app/.classpath

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-11/"/>
+	<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
+	<classpathentry kind="output" path="bin/default"/>
+</classpath>

examples/ionic-test-capacitor-youtube-player/android/app/.project

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>app</name>
+	<comment>Project app created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

examples/ionic-test-capacitor-youtube-player/android/app/.settings/org.eclipse.buildship.core.prefs

@@ -0,0 +1,2 @@
+connection.project.dir=..
+eclipse.preferences.version=1

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.3",
+    "capacitor-youtube-player": "^1.0.4",
     "rxjs": "^7.4.0",
     "tslib": "^2.3.1",
     "zone.js": "^0.11.4"

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

@@ -3,6 +3,7 @@ import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { YoutubePlayer } from 'capacitor-youtube-player';
 
 import { Capacitor } from '@capacitor/core';
+import { IPlayerOptions } from '../../../../../dist/esm/web/models/models';
 
 @Component({
   selector: 'app-home',
@@ -31,7 +32,7 @@ export class HomePage implements OnInit, AfterViewInit {
 
   async initializeYoutubePlayerPluginWeb() {
     console.log('HomePage::initializeYoutubePlayerPluginWeb() | method called');
-    const options = {playerId: 'youtube-player', playerSize: {width: 640, height: 360}, videoId: 'tDW2C6rcH6M', debug: true};
+    const options: IPlayerOptions = {playerId: 'youtube-player', playerSize: {width: 640, height: 360}, videoId: 'tDW2C6rcH6M', fullscreen: true, debug: true};
     const result = await YoutubePlayer.initialize(options);
     console.log('playerReady', result);
 
@@ -43,7 +44,7 @@ export class HomePage implements OnInit, AfterViewInit {
       console.log('state is', event);
     });
 
-    const options1 = {playerId: 'youtube-player1', playerSize: {width: 640, height: 360}, videoId: 'M1F81V-NhP0'};
+    const options1: IPlayerOptions = {playerId: 'youtube-player1', playerSize: {width: 640, height: 360}, videoId: 'M1F81V-NhP0'};
     const result1 = await YoutubePlayer.initialize(options1);
     console.log('playerReady', result1);
   }
@@ -62,7 +63,7 @@ export class HomePage implements OnInit, AfterViewInit {
 
   async initializeYoutubePlayerPluginNative() {
 
-    const options = {playerSize: {width: 640, height: 360}, videoId: 'tDW2C6rcH6M'};
+    const options: IPlayerOptions = {playerSize: {width: 640, height: 360}, videoId: 'tDW2C6rcH6M', fullscreen: true};
     const playerReady = await YoutubePlayer.initialize(options);
   }
 

package.json

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

src/definitions.ts

@@ -1,8 +1,7 @@
-import type { IPlayerVars, IPlayerState, IPlayerSize } from './web/models/models';
+import type { IPlayerState, IPlayerOptions } from './web/models/models';
 
 export interface YoutubePlayerPlugin {
-  initialize(options: {playerId?: string, playerSize: IPlayerSize, videoId: string, playerVars?: IPlayerVars,
-    debug?: boolean}): Promise<{playerReady: boolean, player: string} | undefined>;
+  initialize(options: IPlayerOptions): Promise<{playerReady: boolean, player: string} | undefined>;
   destroy(playerId: string): Promise<{result: { method: string, value: boolean }}>;
   // Methods playback controls and player settings..
   /***********/

src/web.ts

@@ -2,7 +2,7 @@ import { WebPlugin } from '@capacitor/core';
 
 import type { YoutubePlayerPlugin } from './definitions';
 import { Log } from './log';
-import type { IPlayerSize, IPlayerVars, IPlayerState } from './web/models/models';
+import type { IPlayerSize, IPlayerState, IPlayerOptions, RequiredKeys } from './web/models/models';
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function YT() {
@@ -57,7 +57,7 @@ export class YoutubePlayerPluginWeb extends WebPlugin implements YoutubePlayerPl
     });
   }
 
-  checkSize(options: {playerId: string, playerSize: IPlayerSize, playerVars?: IPlayerVars, videoId: string}): IPlayerSize {
+  checkSize(options: IPlayerOptions): IPlayerSize {
     const playerSize = {
       height: options.playerSize.height || this.defaultSizes.height,
       width: options.playerSize.width || this.defaultSizes.width
@@ -70,7 +70,7 @@ export class YoutubePlayerPluginWeb extends WebPlugin implements YoutubePlayerPl
 
   // This function creates an <iframe> (and YouTube player)
   // after the API code downloads.
-  async createPlayer(options: {playerId: string, playerSize: IPlayerSize, playerVars?: IPlayerVars, videoId: string}): Promise<{playerReady: boolean, player: string}> {
+  async createPlayer(options: RequiredKeys<IPlayerOptions, 'playerId'>): Promise<{playerReady: boolean, player: string}> {
     this.playerLogger.log("createPlayer");
     const playerSize = this.checkSize(options);
 
@@ -81,6 +81,7 @@ export class YoutubePlayerPluginWeb extends WebPlugin implements YoutubePlayerPl
       this.players[options.playerId] = new player(options.playerId, {
         ...options.playerVars,
         ...playerSize,
+        fullscreen: options.fullscreen,
         videoId: options.videoId,
         events: {
           // The API will call this function when the video player is ready.
@@ -96,6 +97,13 @@ export class YoutubePlayerPluginWeb extends WebPlugin implements YoutubePlayerPl
               case PlayerState().PLAYING:
                   this.playerLogger.log(`player "${options.playerId}" -> playing`);
                   this.playersEventsState.get(options.playerId)!.events.onStateChange = {text: 'playing', value: PlayerState().PLAYING};
+                  if (options.fullscreen) {
+                    const iframe = document.getElementById(options.playerId);
+                    const requestFullScreen = iframe?.requestFullscreen
+                    if (requestFullScreen) {
+                      requestFullScreen.bind(iframe)();
+                    }
+                  }
                   break;
               case PlayerState().PAUSED:
                   this.playerLogger.log(`player "${options.playerId}" -> paused`);
@@ -128,7 +136,7 @@ export class YoutubePlayerPluginWeb extends WebPlugin implements YoutubePlayerPl
     });
   }
 
-  async initialize(options: {playerId: string, playerSize: IPlayerSize, videoId: string, playerVars?: IPlayerVars, debug?: boolean}): Promise<{playerReady: boolean, player: string} | undefined> {
+  async initialize(options: RequiredKeys<IPlayerOptions, 'playerId'>): Promise<{playerReady: boolean, player: string} | undefined> {
     this.playerLogger = new Log(options.debug);
     this.playerLogger.log("initialize");
     if (!this.playerApiLoaded) {

src/web/models/models.ts

@@ -1,3 +1,14 @@
+export type RequiredKeys<T, K extends keyof T> = Exclude<T, K> & { [key in K]-?: Required<T[key]> }
+
+export interface IPlayerOptions {
+    playerId?: string;
+    playerSize: IPlayerSize;
+    videoId: string;
+    fullscreen?: boolean;
+    playerVars?: IPlayerVars;
+    debug?: boolean;
+}
+
 export interface IPlayerSize {
     height: number;
     width: number;