You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

capacitor-youtube-player

Package Overview
Dependencies
Maintainers
2
Versions
175
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

capacitor-youtube-player - npm Package Compare versions

Comparing version

1.0.0-alpha.1-47
to
1.0.0-alpha.1-48

android/.idea/caches/gradle_models.ser
dist/esm/log.d.ts
dist/esm/log.js
dist/esm/log.js.map

91

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;
};
}>;
}

11

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';
export declare function YT(): any;

@@ -8,5 +8,7 @@ export declare function Player(): any;

players: any;
playersEventsState: Map<string, IPlayerState>;
player: any;
playerApiLoaded: Boolean;
private readonly defaultSizes;
playerLogger: any;
constructor();

@@ -34,2 +36,3 @@ loadPlayerApi(): Promise<{}>;

videoId: string;
debug?: boolean;
}): Promise<{}>;

@@ -160,2 +163,8 @@ destroy(playerId: string): Promise<{

}>;
getAllPlayersEventsState(): Promise<{
result: {
method: string;
value: Map<string, IPlayerState>;
};
}>;
getCurrentTime(playerId: string): Promise<{

@@ -162,0 +171,0 @@ result: {

87

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;

@@ -36,6 +38,6 @@ this.defaultSizes = {

return __awaiter(this, void 0, void 0, function* () {
console.log('[Youtube Player Plugin Web]: loadPlayerApi');
this.playerLogger.log("loadPlayerApi");
return yield new Promise(resolve => {
window.onYouTubeIframeAPIReady = () => {
console.log('[Youtube Player Plugin Web]: onYouTubeIframeAPIReady');
this.playerLogger.log("onYouTubeIframeAPIReady");
this.playerApiLoaded = true;

@@ -75,8 +77,8 @@ resolve(true);

return __awaiter(this, void 0, void 0, function* () {
console.log('[Youtube Player Plugin Web]: createPlayer');
console.log('options', options);
this.playerLogger.log("createPlayer");
// console.log('options', options);
const playerSize = this.checkSize(options);
console.log('playerSize', playerSize);
// console.log('playerSize', playerSize);
return yield new Promise(resolve => {
console.log(YT());
// console.log(YT());
const player = Player();

@@ -86,34 +88,44 @@ this.players[options.playerId] = new player(options.playerId, Object.assign({}, options.playerVars, playerSize, { videoId: options.videoId, events: {

'onReady': () => {
console.log('[Youtube Player Plugin Web]: onPlayerReady');
this.playerLogger.log(`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);
this.playerLogger.log(`player "${options.playerId}" -> onPlayerStateChange`);
switch (event.data) {
case PlayerState().PLAYING:
console.log('[Youtube Player Plugin Web]: playing');
this.playerLogger.log(`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');
this.playerLogger.log(`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');
this.playerLogger.log(`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');
this.playerLogger.log(`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');
this.playerLogger.log(`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) => {
this.playerLogger.log(`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) => {
this.playerLogger.error(`player "${options.playerId}" -> onPlayerError`, { error: 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);
});

@@ -124,10 +136,11 @@ });

return __awaiter(this, void 0, void 0, function* () {
console.log('[Youtube Player Plugin Web]: initialize');
this.playerLogger = new Log(options.debug);
this.playerLogger.log("initialize");
if (!this.playerApiLoaded) {
const result = yield this.loadPlayerApi();
console.log('[Youtube Player Plugin Web]: loadPlayerApi result', result);
this.playerLogger.log("loadPlayerApi result", { result: result });
}
if (Player && this.playerApiLoaded) {
const playerReady = yield this.createPlayer(options);
console.log('[Youtube Player Plugin Web]: initialize completed', playerReady);
this.playerLogger.log("loadPlayerApi initialize completed", { playerReady: playerReady });
return Promise.resolve(playerReady);

@@ -139,3 +152,3 @@ }

return __awaiter(this, void 0, void 0, function* () {
console.log('[Youtube Player Plugin Web]: destroy');
this.playerLogger.log(`player "${playerId}" -> destroy`);
this.players[playerId].destroy();

@@ -152,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');
this.playerLogger.log(`player "${playerId}" -> stopVideo`);
this.players[playerId].stopVideo();

@@ -161,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');
this.playerLogger.log(`player "${playerId}" -> playVideo`);
this.players[playerId].playVideo();

@@ -171,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');
this.playerLogger.log(`player "${playerId}" -> pauseVideo`);
this.players[playerId].pauseVideo();

@@ -181,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');
this.playerLogger.log(`player "${playerId}" -> seekTo ${seconds} seconds`);
this.players[playerId].seekTo(seconds, allowSeekAhead);

@@ -190,2 +203,3 @@ return Promise.resolve({ result: { method: 'seekTo', value: true, seconds: seconds, allowSeekAhead: allowSeekAhead } });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> loadVideoById with options ${options}`);
this.players[playerId].loadVideoById(options);

@@ -198,2 +212,3 @@ return Promise.resolve({ result: { method: 'loadVideoById', value: true, options: options } });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> cueVideoById with options ${options}`);
this.players[playerId].cueVideoById(options);

@@ -209,2 +224,3 @@ return Promise.resolve({ result: { method: 'cueVideoById', value: true, options: options } });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> mute`);
this.players[playerId].mute();

@@ -217,2 +233,3 @@ return Promise.resolve({ result: { method: 'mute', value: true } });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> unMute`);
this.players[playerId].unMute();

@@ -225,2 +242,3 @@ return Promise.resolve({ result: { method: 'unMute', value: true } });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> isMuted`);
return Promise.resolve({ result: { method: 'isMuted', value: this.players[playerId].isMuted() } });

@@ -232,2 +250,3 @@ });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> setVolume ${volume}`);
this.players[playerId].setVolume(volume);

@@ -240,2 +259,3 @@ return Promise.resolve({ result: { method: 'setVolume', value: volume } });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> getVolume`);
return Promise.resolve({ result: { method: 'getVolume', value: this.players[playerId].getVolume() } });

@@ -250,2 +270,3 @@ });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> setSize width: ${width} height: ${height}`);
this.players[playerId].setSize(width, height);

@@ -262,2 +283,3 @@ return Promise.resolve({ result: { method: 'setSize', value: { width: width, height: height } } });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> getVideoLoadedFraction`);
return Promise.resolve({ result: { method: 'getVideoLoadedFraction', value: this.players[playerId].getVideoLoadedFraction() } });

@@ -275,8 +297,16 @@ });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> getPlayerState`);
return Promise.resolve({ result: { method: 'getPlayerState', value: this.players[playerId].getPlayerState() } });
});
}
getAllPlayersEventsState() {
return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log("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* () {
this.playerLogger.log(`player "${playerId}" -> getCurrentTime`);
return Promise.resolve({ result: { method: 'getCurrentTime', value: this.players[playerId].getCurrentTime() } });

@@ -287,2 +317,3 @@ });

return __awaiter(this, void 0, void 0, function* () {
this.playerLogger.log(`player "${playerId}" -> toggleFullScreen`);
let { height, width } = this.defaultSizes;

@@ -299,3 +330,3 @@ if (!isFullScreen) {

return __awaiter(this, void 0, void 0, function* () {
console.log('ECHO', options);
// console.log('ECHO', options);
return Promise.resolve(options);

@@ -302,0 +333,0 @@ });

15

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;
}

2

package.json
{
"name": "capacitor-youtube-player",
"version": "1.0.0-alpha.1-47",
"version": "1.0.0-alpha.1-48",
"description": "Youtube Player",

@@ -5,0 +5,0 @@ "main": "dist/esm/index.js",

64

README.md
![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)
[![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) [![License](https://img.shields.io/github/license/abritopach/capacitor-youtube-player.svg)](https://github.com/abritopach/capacitor-youtube-player/blob/master/LICENSE)

@@ -25,2 +27,13 @@ Capacitor Youtube Player is a custom Native Capacitor plugin to show Youtube Player on Web, IOS and Android platforms.

## Plugin log mode
When initializing a youtube player you can enable debug mode to display the logs in the console.
``` bash
async initializeYoutubePlayerPluginWeb() {
const options = {playerId: 'youtube-player', playerSize: {width: 640, height: 360}, videoId: 'tDW2C6rcH6M', debug: true};
const result = await YoutubePlayerWeb.initialize(options);
}
```
## Methods available

@@ -32,5 +45,5 @@

----------------|----------------|-------------|--------|--------
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 | `initialize(options: {playerId: string, playerSize: IPlayerSize, playerVars?: IPlayerVars, videoId: string, debug?: boolean})` | 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` | 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 | `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

@@ -49,2 +62,3 @@ 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 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

@@ -74,3 +88,3 @@

IMPORTANT NOTE iOS:
### IMPORTANT NOTE iOS:

@@ -81,3 +95,35 @@ Currently there is a small error when you testing the plugin in iOS. The following line of code needs to be modified in xcode:

### IMPORTANT NOTE ANDROID
You have to register Youtube Player plugin's class in your Acitivity so Capacitor is aware of it.
```bash
package com.example.app;
import android.os.Bundle;
import com.abpjap.plugin.youtubeplayer.YoutubePlayer;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 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
}});
}
}
```
In the official [Capacitor documentation](https://capacitor.ionicframework.com/docs/plugins/android#export-to-capacitor) appears how to register the plugin.
### Ionic / Angular project

@@ -168,2 +214,4 @@

## Examples
### Example Ionic project

@@ -188,1 +236,9 @@

- Plugin in Angular project: https://github.com/abritopach/angular-ionic-ngxs-movies
### Vue project
- Check [examples/vue-test-capacitor-youtube-player](https://github.com/abritopach/capacitor-youtube-player/tree/master/examples/vue-test-capacitor-youtube-player) folder.
### React project
- Check [examples/react-test-capacitor-youtube-player](https://github.com/abritopach/capacitor-youtube-player/tree/master/examples/vue-test-capacitor-youtube-player) folder.
android/.idea/caches/build_file_checksums.ser

Sorry, the diff of this file is not supported yet

android/.idea/codeStyles/Project.xml

Sorry, the diff of this file is not supported yet

android/.idea/gradle.xml

Sorry, the diff of this file is not supported yet

android/.idea/misc.xml

Sorry, the diff of this file is not supported yet

android/.idea/modules.xml

Sorry, the diff of this file is not supported yet

android/build.gradle

Sorry, the diff of this file is not supported yet

dist/esm/web.js.map

Sorry, the diff of this file is not supported yet