capacitor-youtube-player - npm Package Compare versions

Comparing version 1.0.0-alpha.1-3 to 1.0.0-alpha.1-30

dist/esm/definitions.d.ts

@@ -1,2 +0,2 @@
-import { IPlayerVars } from './web/models/models';
+import { IPlayerVars, IPlayerState } from './web/models/models';
 declare global  {
@@ -21,3 +21,3 @@ interface PluginRegistry {
     }>;
-    destroy(): Promise<{
+    destroy(playerId: string): Promise<{
         result: {
@@ -29,3 +29,3 @@ method: string;
     /***********/
-    stopVideo(): Promise<{
+    stopVideo(playerId: string): Promise<{
         result: {
@@ -36,3 +36,3 @@ method: string;
     }>;
-    playVideo(): Promise<{
+    playVideo(playerId: string): Promise<{
         result: {
@@ -43,3 +43,3 @@ method: string;
     }>;
-    pauseVideo(): Promise<{
+    pauseVideo(playerId: string): Promise<{
         result: {
@@ -50,3 +50,3 @@ method: string;
     }>;
-    seekTo(): Promise<{
+    seekTo(playerId: string, seconds: number, allowSeekAhead: boolean): Promise<{
         result: {
@@ -59,3 +59,3 @@ method: string;
     }>;
-    loadVideoById(options: {
+    loadVideoById(playerId: string, options: {
         videoId: string;
@@ -72,3 +72,3 @@ startSeconds?: number;
     }>;
-    cueVideoById(options: {
+    cueVideoById(playerId: string, options: {
         videoId: string;
@@ -85,2 +85,77 @@ startSeconds?: number;
     }>;
+    /***********/
+    /***********/
+    mute(playerId: string): Promise<{
+        result: {
+            method: string;
+            value: boolean;
+        };
+    }>;
+    unMute(playerId: string): Promise<{
+        result: {
+            method: string;
+            value: boolean;
+        };
+    }>;
+    isMuted(playerId: string): Promise<{
+        result: {
+            method: string;
+            value: boolean;
+        };
+    }>;
+    setVolume(playerId: string, volume: Number): Promise<{
+        result: {
+            method: string;
+            value: number;
+        };
+    }>;
+    getVolume(playerId: string): Promise<{
+        result: {
+            method: string;
+            value: number;
+        };
+    }>;
+    /***********/
+    /***********/
+    setSize(playerId: string, width: Number, height: Number): Promise<{
+        result: {
+            method: string;
+            value: {
+                width: number;
+                height: number;
+            };
+        };
+    }>;
+    /***********/
+    /***********/
+    getVideoLoadedFraction(playerId: string): Promise<{
+        result: {
+            method: string;
+            value: number;
+        };
+    }>;
+    getPlayerState(playerId: string): Promise<{
+        result: {
+            method: string;
+            value: number;
+        };
+    }>;
+    getAllPlayersEventsState(): Promise<{
+        result: {
+            method: string;
+            value: Map<string, IPlayerState>;
+        };
+    }>;
+    getCurrentTime(playerId: string): Promise<{
+        result: {
+            method: string;
+            value: number;
+        };
+    }>;
+    toggleFullScreen(playerId: string, isFullScreen: boolean | null | undefined): Promise<{
+        result: {
+            method: string;
+            value: boolean | null | undefined;
+        };
+    }>;
 }

dist/esm/web.d.ts

 import { WebPlugin } from '@capacitor/core';
-import { IPlayerSize, IPlayerVars } from './web/models/models';
+import { IPlayerSize, IPlayerVars, IPlayerState } from './web/models/models';
+import { Log } from './log';
 export declare function YT(): any;
@@ -8,5 +9,7 @@ export declare function Player(): any;
     players: any;
+    playersEventsState: Map<string, IPlayerState>;
     player: any;
     playerApiLoaded: Boolean;
     private readonly defaultSizes;
+    playerLogger: Log;
     constructor();
@@ -159,2 +162,8 @@ loadPlayerApi(): Promise<{}>;
     }>;
+    getAllPlayersEventsState(): Promise<{
+        result: {
+            method: string;
+            value: Map<string, IPlayerState>;
+        };
+    }>;
     getCurrentTime(playerId: string): Promise<{
@@ -161,0 +170,0 @@ result: {

dist/esm/web.js

@@ -10,2 +10,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import { WebPlugin } from '@capacitor/core';
+import { Log } from './log';
 export function YT() {
@@ -27,2 +28,3 @@ return window['YT'];
         this.players = [];
+        this.playersEventsState = new Map();
         this.playerApiLoaded = false;
@@ -33,5 +35,7 @@ this.defaultSizes = {
         };
+        this.playerLogger = new Log();
     }
     loadPlayerApi() {
         return __awaiter(this, void 0, void 0, function* () {
+            this.playerLogger.info("hello player", { hello: "player" });
             console.log('[Youtube Player Plugin Web]: loadPlayerApi');
@@ -76,5 +80,5 @@ return yield new Promise(resolve => {
             console.log('[Youtube Player Plugin Web]: createPlayer');
-            console.log('options', options);
+            // console.log('options', options);
             const playerSize = this.checkSize(options);
-            console.log('playerSize', playerSize);
+            // console.log('playerSize', playerSize);
             return yield new Promise(resolve => {
@@ -86,34 +90,44 @@ console.log(YT());
                         'onReady': () => {
-                            console.log('[Youtube Player Plugin Web]: onPlayerReady');
+                            console.log(`[Youtube Player Plugin Web]: player "${options.playerId}" -> onPlayerReady`);
+                            const state = { events: { onReady: { text: 'onReady', value: true } } };
+                            this.playersEventsState.set(options.playerId, state);
                             return resolve({ playerReady: true, player: this.players[options.playerId] });
                         },
                         'onStateChange': (event) => {
-                            console.log('[Youtube Player Plugin Web]: onPlayerStateChange', event.data);
+                            console.log(`[Youtube Player Plugin Web]: player "${options.playerId}" -> onPlayerStateChange`);
                             switch (event.data) {
                                 case PlayerState().PLAYING:
-                                    console.log('[Youtube Player Plugin Web]: playing');
+                                    console.log(`[Youtube Player Plugin Web]: player "${options.playerId}" -> playing`);
+                                    this.playersEventsState.get(options.playerId).events.onStateChange = { text: 'playing', value: PlayerState().PLAYING };
                                     break;
                                 case PlayerState().PAUSED:
-                                    console.log('[Youtube Player Plugin Web]: paused');
+                                    console.log(`[Youtube Player Plugin Web]: player "${options.playerId}" -> paused`);
+                                    this.playersEventsState.get(options.playerId).events.onStateChange = { text: 'paused', value: PlayerState().PAUSED };
                                     break;
                                 case PlayerState().ENDED:
-                                    console.log('[Youtube Player Plugin Web]: ended');
+                                    console.log(`[Youtube Player Plugin Web]: player "${options.playerId}" -> ended`);
+                                    this.playersEventsState.get(options.playerId).events.onStateChange = { text: 'ended', value: PlayerState().ENDED };
                                     break;
                                 case PlayerState().BUFFERING:
-                                    console.log('[Youtube Player Plugin Web]: buffering');
+                                    console.log(`[Youtube Player Plugin Web]: player "${options.playerId}" -> buffering`);
+                                    this.playersEventsState.get(options.playerId).events.onStateChange = { text: 'buffering', value: PlayerState().BUFFERING };
                                     break;
                                 case PlayerState().CUED:
-                                    console.log('[Youtube Player Plugin Web]: cued');
+                                    console.log(`[Youtube Player Plugin Web]: player "${options.playerId}" -> cued`);
+                                    this.playersEventsState.get(options.playerId).events.onStateChange = { text: 'cued', value: PlayerState().CUED };
                                     break;
                             }
                         },
-                        'onPlaybackQualityChange': () => {
-                            console.log('[Youtube Player Plugin Web]: onPlayerPlaybackQualityChange');
+                        'onPlaybackQualityChange': (event) => {
+                            console.log(`[Youtube Player Plugin Web]: player "${options.playerId}" -> onPlayerPlaybackQualityChange quality ${event.data}`);
+                            this.playersEventsState.get(options.playerId).events.onPlaybackQualityChange = { text: 'onPlaybackQualityChange', value: event.data };
                         },
-                        'onError': () => {
-                            console.log('[Youtube Player Plugin Web]: onPlayerError');
+                        'onError': (error) => {
+                            console.log(`[Youtube Player Plugin Web]: player "${options.playerId}" -> onPlayerError ${error}`);
+                            this.playersEventsState.get(options.playerId).events.onError = { text: 'onError', value: error };
                         }
                     } }));
-                console.log('players', this.players);
-                console.log('player', this.players[options.playerId]);
+                // console.log('players', this.players);
+                // console.log('player', this.players[options.playerId]);
+                console.log('playersEventsState', this.playersEventsState);
             });
@@ -138,3 +152,3 @@ });
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('[Youtube Player Plugin Web]: destroy');
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> destroy`);
             this.players[playerId].destroy();
@@ -151,3 +165,3 @@ return Promise.resolve({ result: { method: 'destroy', value: true } });
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('[Youtube Player Plugin Web]: stopVideo');
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" ->  stopVideo`);
             this.players[playerId].stopVideo();
@@ -160,3 +174,3 @@ return Promise.resolve({ result: { method: 'stopVideo', value: true } });
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('[Youtube Player Plugin Web]: playVideo');
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> playVideo`);
             this.players[playerId].playVideo();
@@ -170,3 +184,3 @@ return Promise.resolve({ result: { method: 'playVideo', value: true } });
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('[Youtube Player Plugin Web]: pauseVideo');
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> pauseVideo`);
             this.players[playerId].pauseVideo();
@@ -180,3 +194,3 @@ return Promise.resolve({ result: { method: 'pauseVideo', value: true } });
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('[Youtube Player Plugin Web]: seekTo');
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> seekTo ${seconds} seconds`);
             this.players[playerId].seekTo(seconds, allowSeekAhead);
@@ -189,2 +203,3 @@ return Promise.resolve({ result: { method: 'seekTo', value: true, seconds: seconds, allowSeekAhead: allowSeekAhead } });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> loadVideoById with options ${options}`);
             this.players[playerId].loadVideoById(options);
@@ -197,2 +212,3 @@ return Promise.resolve({ result: { method: 'loadVideoById', value: true, options: options } });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> cueVideoById with options ${options}`);
             this.players[playerId].cueVideoById(options);
@@ -208,2 +224,3 @@ return Promise.resolve({ result: { method: 'cueVideoById', value: true, options: options } });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> mute`);
             this.players[playerId].mute();
@@ -216,2 +233,3 @@ return Promise.resolve({ result: { method: 'mute', value: true } });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> unMute`);
             this.players[playerId].unMute();
@@ -224,2 +242,3 @@ return Promise.resolve({ result: { method: 'unMute', value: true } });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> isMuted`);
             return Promise.resolve({ result: { method: 'isMuted', value: this.players[playerId].isMuted() } });
@@ -231,2 +250,3 @@ });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> setVolume ${volume}`);
             this.players[playerId].setVolume(volume);
@@ -239,2 +259,3 @@ return Promise.resolve({ result: { method: 'setVolume', value: volume } });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> getVolume`);
             return Promise.resolve({ result: { method: 'getVolume', value: this.players[playerId].getVolume() } });
@@ -249,2 +270,3 @@ });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> setSize width: ${width} height: ${height}`);
             this.players[playerId].setSize(width, height);
@@ -261,2 +283,3 @@ return Promise.resolve({ result: { method: 'setSize', value: { width: width, height: height } } });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> getVideoLoadedFraction`);
             return Promise.resolve({ result: { method: 'getVideoLoadedFraction', value: this.players[playerId].getVideoLoadedFraction() } });
@@ -274,8 +297,16 @@ });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> getPlayerState`);
             return Promise.resolve({ result: { method: 'getPlayerState', value: this.players[playerId].getPlayerState() } });
         });
     }
+    getAllPlayersEventsState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: getAllPlayersEventsState`);
+            return Promise.resolve({ result: { method: 'getAllPlayersEventsState', value: this.playersEventsState } });
+        });
+    }
     // Returns the elapsed time in seconds since the video started playing.
     getCurrentTime(playerId) {
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> getCurrentTime`);
             return Promise.resolve({ result: { method: 'getCurrentTime', value: this.players[playerId].getCurrentTime() } });
@@ -286,2 +317,3 @@ });
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`[Youtube Player Plugin Web]: player "${playerId}" -> toggleFullScreen`);
             let { height, width } = this.defaultSizes;
@@ -288,0 +320,0 @@ if (!isFullScreen) {

dist/esm/web/models/models.d.ts

@@ -27,1 +27,16 @@ export interface IPlayerSize {
 }
+export interface IPlayerState {
+    events: {
+        onReady?: Object;
+        onStateChange?: Object;
+        onPlaybackQualityChange?: Object;
+        onError?: Object;
+    };
+}
+export interface IPlayerLog {
+    log(primaryMessage: string, ...supportingData: any[]): void;
+    debug(primaryMessage: string, ...supportingData: any[]): void;
+    warn(primaryMessage: string, ...supportingData: any[]): void;
+    error(primaryMessage: string, ...supportingData: any[]): void;
+    info(primaryMessage: string, ...supportingData: any[]): void;
+}

ios/Plugin/Pods/Capacitor/README.md

@@ -1,4 +0,4 @@
-*Capacitor is being actively developed and is not currently ready for public use. See our [Timeline](#timeline) for our upcoming plans and tentatively timeline*
+[![Build Status][circle-badge]][circle-badge-url]
 
-# ⚡️ Capacitor: Cross-platform apps with JavaScript and the Web ⚡️
+# ⚡️ Cross-platform apps with JavaScript and the Web ⚡️
 
@@ -10,14 +10,2 @@ Capacitor is a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom Native plugins that your app might need.  Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores, _and_ the mobile web.
 Capacitor also comes with a Plugin API for building native plugins. On iOS, first-class Swift support is available, and much of the iOS Capacitor runtime is written in Swift. Plugins may also be written in Objective-C. On Android, support for writing plugins with Java and Kotlin is supported.
-
-Capacitor is still a work in progress and is not quite ready for use. Stay tuned for a public release in early 2018.
-
-## Timeline
-
-_Disclaimer: These dates are tentative. "It'll be ready when it's ready!"_
-
-*Short term milestones*
-
- - November 2017 - Project Start
- - January/Feb 2018 - Private alpha testing
- - Feb 2018 - Public alpha
  
@@ -28,2 +16,4 @@ ## Roadmap
 
+[2019](https://blog.ionicframework.com/capacitor-in-2019-native-progressive-web-apps-for-all/)
+
 2018
@@ -47,1 +37,4 @@
 Please read the [Contributing](.github/CONTRIBUTING.md) guide for more information.
+
+[circle-badge]: https://circleci.com/gh/ionic-team/capacitor.svg?style=shield
+[circle-badge-url]: https://circleci.com/gh/ionic-team/capacitor

ios/Plugin/Pods/CapacitorCordova/README.md

@@ -1,4 +0,4 @@
-*Capacitor is being actively developed and is not currently ready for public use. See our [Timeline](#timeline) for our upcoming plans and tentatively timeline*
+[![Build Status][circle-badge]][circle-badge-url]
 
-# ⚡️ Capacitor: Cross-platform apps with JavaScript and the Web ⚡️
+# ⚡️ Cross-platform apps with JavaScript and the Web ⚡️
 
@@ -10,14 +10,2 @@ Capacitor is a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom Native plugins that your app might need.  Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores, _and_ the mobile web.
 Capacitor also comes with a Plugin API for building native plugins. On iOS, first-class Swift support is available, and much of the iOS Capacitor runtime is written in Swift. Plugins may also be written in Objective-C. On Android, support for writing plugins with Java and Kotlin is supported.
-
-Capacitor is still a work in progress and is not quite ready for use. Stay tuned for a public release in early 2018.
-
-## Timeline
-
-_Disclaimer: These dates are tentative. "It'll be ready when it's ready!"_
-
-*Short term milestones*
-
- - November 2017 - Project Start
- - January/Feb 2018 - Private alpha testing
- - Feb 2018 - Public alpha
  
@@ -28,2 +16,4 @@ ## Roadmap
 
+[2019](https://blog.ionicframework.com/capacitor-in-2019-native-progressive-web-apps-for-all/)
+
 2018
@@ -47,1 +37,4 @@
 Please read the [Contributing](.github/CONTRIBUTING.md) guide for more information.
+
+[circle-badge]: https://circleci.com/gh/ionic-team/capacitor.svg?style=shield
+[circle-badge-url]: https://circleci.com/gh/ionic-team/capacitor

package.json

 {
   "name": "capacitor-youtube-player",
-  "version": "1.0.0-alpha.1-3",
+  "version": "1.0.0-alpha.1-30",
   "description": "Youtube Player",
@@ -5,0 +5,0 @@ "main": "dist/esm/index.js",

README.md

@@ -0,3 +1,7 @@
+![Built With Capacitor](https://img.shields.io/badge/-Built%20With%20Capacitor-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+
 # CapacitorYoutubePlayer
 
+[![Ask me anything](https://img.shields.io/badge/ask%20me-anything-1abc9c.svg)](https://github.com/abritopach) [![Version](https://img.shields.io/npm/v/capacitor-youtube-player.svg)](https://www.npmjs.com/package/capacitor-youtube-player) [![Downloads](https://img.shields.io/npm/dt/capacitor-youtube-player.svg)](https://www.npmjs.com/package/capacitor-youtube-player)
+
 Capacitor Youtube Player is a custom Native Capacitor plugin to show Youtube Player on Web, IOS and  Android platforms.
@@ -7,81 +11,205 @@
 
+<a href="https://www.buymeacoffee.com/h6WVj4HcD" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee"></a>
+
+# Capacitor
+
+Capacitor is a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom Native plugins that your app might need. Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores, and the mobile web.
+
+Capacitor is being designed by the Ionic Framework team as an eventual alternative to Cordova, though backwards compatibility with Cordova plugins is a priority and is actively being worked on. Capacitor can be used without Ionic Framework, but soon it'll become a core part of the Ionic developer experience.
+
+Capacitor also comes with a Plugin API for building native plugins. On iOS, first-class Swift support is available, and much of the iOS Capacitor runtime is written in Swift. Plugins may also be written in Objective-C. On Android, support for writing plugins with Java and Kotlin is supported.
+
+## Plugin preview
+
+![App](readme_resources/app.gif "App")
+
 ## Methods available
 
-    -> WEB
+## WEB
 
+Functionality | Methods | Description | Expects | Returns
+----------------|----------------|-------------|--------|--------
+Load player API & Create Player & Destroy Player | `initialize(options: {playerId: string, playerSize: IPlayerSize, playerVars?: IPlayerVars, videoId: string})` | Promise - Load player API & create player.  | JSON Object  | data
+Load player API & Create Player & Destroy Player | ` destroy(playerId: string)` | Promise - Destroy player  | string | data
+Playback controls and player settings | `stopVideo(playerId: string)` | Promise - Stops and cancels loading of the current video. This function should be reserved for rare situations when you know that the user will not be watching additional video in the player. If your intent is to pause the video, you should just call the pauseVideo function. If you want to change the video that the player is playing, you can call one of the queueing functions without calling stopVideo first. | string | data
+Playback controls and player settings | `playVideo(playerId: string)` | Promise - Plays the currently cued/loaded video. The final player state after this function executes will be playing (1). | string | data
+Playback controls and player settings | `pauseVideo(playerId: string)` | Promise - Pauses the currently playing video. The final player state after this function executes will be paused (2) unless the player is in the ended (0) state when the function is called, in which case the player state will not change. | string | data
+Playback controls and player settings | `seekTo(playerId: string, seconds: number, allowSeekAhead: boolean)` | Promise - Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (playing, video cued, etc.), the player will play the video.  | string, number, boolean | data
+Playback controls and player settings | `loadVideoById(playerId: string, options: {videoId: string, startSeconds?: number, endSeconds?: number, suggestedQuality?: string})` | Promise - Loads and plays the specified video.  | string, JSON Object | data
+Playback controls and player settings | `cueVideoById(playerId: string, options: {videoId: string, startSeconds?: number, endSeconds?: number, suggestedQuality?: string})` | Promise - Loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until playVideo() or seekTo() is called. | string, JSON Object | data
+Changing the player volume | `mute(playerId: string)` | Promise - Mutes the player. | string | data
+Changing the player volume | `unMute(playerId: string)` | Promise - Unmutes the player. | string | data
+Changing the player volume | `isMuted(playerId: string)` | Promise - Returns true if the player is muted, false if not. | string | data
+Changing the player volume | `setVolume(playerId: string, volume: Number)` | Promise - Sets the volume. Accepts an integer between 0 and 100. | string, number | data
+Changing the player volume | `getVolume(playerId: string)` | Promise - Returns the player's current volume, an integer between 0 and 100. Note that getVolume() will return the volume even if the player is muted. | string | data
+Setting the player size | `setSize(playerId: string, width:Number, height:Number)` | Promise - Sets the size in pixels of the <iframe> that contains the player. | string, number, number | data
+Playback status | `getVideoLoadedFraction(playerId: string)` | Promise - Returns a number between 0 and 1 that specifies the percentage of the video that the player shows as buffered. This method returns a more reliable number than the now-deprecated getVideoBytesLoaded and getVideoBytesTotal methods.  | string | data
+Playback status | `getPlayerState(playerId: string)` | Promise - Returns the state of the player. Possible values are: -1 unstarted / 0 ended / 1 playing / 2 paused / 3 buffering / 5 video cued | string | data
+Playback status | `getAllPlayersEventsState()` | Promise - Returns the state of events of all players. |  | Map<string, IPlayerState>
+Playback status | `getCurrentTime(playerId: string)` | Promise - Returns the elapsed time in seconds since the video started playing. | string | data
 
-    // Load player API & Create Player.
+## ANDROID
 
-    initialize(options: {playerId: string, playerSize: IPlayerSize, playerVars?: IPlayerVars, videoId: string})
-    destroy(playerId: string)
+Functionality | Methods | Description | Expects | Returns
+----------------|----------------|-------------|--------|--------
+Load player API & Create Player | `initialize(options: {width: number, height: number, videoId: string}): Promise<{playerReady: boolean}>;` | Promise - Load player API & create player.  | JSON Object  | data
 
-    *** Methods playback controls and player settings. ***
 
-    // Stops and cancels loading of the current video. This function should be reserved for rare situations when you know that the user will not // be watching additional video in the player. If your intent is to pause the video, you should just call the pauseVideo function. If you want // to change the video that the player is playing, you can call one of the queueing functions without calling stopVideo first.
-    stopVideo(playerId: string)
+## IOS
 
-    // Plays the currently cued/loaded video. The final player state after this function executes will be playing (1).
-    playVideo(playerId: string)
+Functionality | Methods | Description | Expects | Returns
+----------------|----------------|-------------|--------|--------
+Load player API & Create Player | `initialize(options: {width: number, height: number, videoId: string}): Promise<{playerReady: boolean}>;` | Promise - Load player API & create player.  | JSON Object  | data
 
-    // Pauses the currently playing video. The final player state after this function executes will be paused (2) unless the player is in the //ended (0) state when the function is called, in which case the player state will not change.
-    pauseVideo(playerId: string)
 
-    // Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is //called from another state (playing, video cued, etc.), the player will play the video.
-    seekTo(playerId: string, seconds: number, allowSeekAhead: boolean)
+## Install Plugin
 
-    // Loads and plays the specified video.
-    loadVideoById(playerId: string, options: {videoId: string, startSeconds?: number, endSeconds?: number, suggestedQuality?: string})
+``` bash
+    npm install --save capacitor-youtube-player@latest
+```
 
-    // Loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until playVideo() or // seekTo() is called.
-    cueVideoById(playerId: string, options: {videoId: string, startSeconds?: number, endSeconds?: number, suggestedQuality?: string})
+## Using this plugin
 
-    *** Methods changing the player volume. ***
+### IMPORTANT NOTE iOS:
 
-    // Mutes the player.
-    mute(playerId: string)
+Currently there is a small error when you testing the plugin in iOS. The following line of code needs to be modified in xcode:
 
-    // Unmutes the player.
-    unMute(playerId: string)
+YouTubePlayer.swift:339:102: 'UIWebViewNavigationType' has been renamed to 'UIWebView.NavigationType'
 
-    // Returns true if the player is muted, false if not.
-    isMuted(playerId: string)
+### IMPORTANT NOTE ANDROID
 
-    // Sets the volume. Accepts an integer between 0 and 100.
-    setVolume(playerId: string, volume: Number)
+You have to register Youtube Player plugin's class in your Acitivity so Capacitor is aware of it.
 
-    // Returns the player's current volume, an integer between 0 and 100. Note that getVolume() will return the volume even if the player is muted.
-    getVolume(playerId: string)
+```bash
+package com.example.app;
 
-    ***  Methods setting the player size.  ***
+import android.os.Bundle;
 
-    // Sets the size in pixels of the <iframe> that contains the player.
-    setSize(playerId: string, width:Number, height:Number)
+import com.abpjap.plugin.youtubeplayer.YoutubePlayer;
+import com.getcapacitor.BridgeActivity;
+import com.getcapacitor.Plugin;
 
-    *** Methods playback status. ***
+import java.util.ArrayList;
 
-    // Returns a number between 0 and 1 that specifies the percentage of the video that the player shows as buffered.
-    // This method returns a more reliable number than the now-deprecated getVideoBytesLoaded and getVideoBytesTotal methods.
-    getVideoLoadedFraction(playerId: string)
+public class MainActivity extends BridgeActivity {
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
 
-    // Returns the state of the player. Possible values are: -1 unstarted / 0 ended / 1 playing / 2 paused / 3 buffering / 5 video cued
-    getPlayerState(playerId: string) 
+    // Initializes the Bridge
+    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
+      // Additional plugins you've installed go here
+      // Ex: add(TotallyAwesomePlugin.class);
+      add(YoutubePlayer.class); <= ADD THIS LINE
+    }});
+  }
+}
+```
 
-    // Returns the elapsed time in seconds since the video started playing.
-    getCurrentTime(playerId: string)
+In the official [Capacitor documentation](https://capacitor.ionicframework.com/docs/plugins/android#export-to-capacitor) appears how to register the plugin.
 
-    --> ANDROID
 
-    initialize(options: {width: number, height: number, videoId: string}): Promise<{playerReady: boolean}>;
+### Ionic / Angular project
 
+1) Install the plugin.
 
-    --> IOS
+```bash
+npm install --save capacitor-youtube-player@latest
+```
 
-    initialize(options: {width: number, height: number, videoId: string}): Promise<{playerReady: boolean}>;
-    
+2) Import plugin in your page.
 
-## Install Plugin
+```bash
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 
-``` bash
-    npm install --save capacitor-youtube-player@latest
+import { YoutubePlayerWeb } from 'capacitor-youtube-player'; // Web version
+
+import { Plugins, Capacitor } from '@capacitor/core'; // Native version
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage implements OnInit, AfterViewInit {
+
+  currentYear = new Date().getFullYear();
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit() {
+    if (Capacitor.platform === 'web') {
+      this.initializeYoutubePlayerPluginWeb();
+    } else { // Native
+      this.initializeYoutubePlayerPluginNative();
+    }
+  }
+
+  async initializeYoutubePlayerPluginWeb() {
+    const options = {playerId: 'youtube-player', playerSize: {width: 640, height: 360}, videoId: 'tDW2C6rcH6M'};
+    const result = await YoutubePlayerWeb.initialize(options);
+    console.log('playerReady', result);
+  }
+
+  async destroyYoutubePlayerPluginWeb() {
+    const result = await YoutubePlayerWeb.destroy('youtube-player');
+    console.log('destroyYoutubePlayer', result);
+  }
+
+  async initializeYoutubePlayerPluginNative() {
+
+    const { YoutubePlayer } = Plugins;
+
+    const options = {width: 640, height: 360, videoId: 'tDW2C6rcH6M'};
+    const playerReady = await YoutubePlayer.initialize(options);
+  }
+
+}
 ```
 
+3) Build your app.
+
+You must build your Ionic / Angular project at least once before adding any native platforms.
+
+```bash
+    ionic build // Ionic
+    ng build // Angular
+```
+
+4) Add Platforms.
+
+```bash
+    npx cap add ios
+    npx cap add android
+```
+
+5) Open IDE to build, run, and deploy.
+
+```bash
+    npx cap open ios
+    npx cap open android
+```
+
+### Example Ionic project
+
+- Plugin in Ionic project: https://github.com/abritopach/ionic-test-capacitor-youtube-player
+
+#### WEB
+
+![Plugin](readme_resources/plugin_ionic_web.gif "Plugin")
+
+#### iOS
+
+![Plugin](readme_resources/plugin_ionic_ios.gif "Plugin")
+
+#### Android
+
+![Plugin](readme_resources/plugin_ionic_android.gif "Plugin")
+
+### Angular project
+
+- Plugin in Angular project: https://github.com/abritopach/angular-ionic-ngxs-movies

New alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1447175

25.53%

Number of package files

318

34.75%

Lines of code

980

21.29%

Number of lines in readme file

215

147.13%

No dependency changes