@hercilio/ngx-youtube-player
Version:
[](https://travis-ci.org/Hernior/ngx-youtube-player) [](https://badge.fury.io/js/ngx-youtube-player) [![npm d
224 lines (217 loc) • 9.24 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
import { ReplaySubject } from 'rxjs';
function win() {
return window;
}
function YouTubeRef() {
return win()["YT"];
}
function YouTubePlayerRef() {
return YouTubeRef().Player;
}
const defaultSizes = {
height: 270,
width: 367,
};
class YoutubePlayerService {
static { this.ytApiLoaded = false; }
constructor(zone) {
this.zone = zone;
this.api = new ReplaySubject(1);
this.createApi();
}
loadPlayerApi(options) {
const doc = win().document;
if (!YoutubePlayerService["ytApiLoaded"]) {
YoutubePlayerService.ytApiLoaded = true;
const playerApiScript = doc.createElement("script");
playerApiScript.type = "text/javascript";
playerApiScript.src = `${options.protocol}://www.youtube.com/iframe_api`;
doc.body.appendChild(playerApiScript);
}
}
setupPlayer(elementId, outputs, sizes, videoId = "", playerVars) {
const createPlayer = () => {
if (YouTubePlayerRef) {
this.createPlayer(elementId, outputs, sizes, videoId, playerVars);
}
};
this.api.subscribe(createPlayer);
}
play(player) {
player.playVideo();
}
pause(player) {
player.pauseVideo();
}
playVideo(media, player) {
const id = media.id.videoId ? media.id.videoId : media.id;
player.loadVideoById(id);
this.play(player);
}
isPlaying(player) {
// because YT is not loaded yet 1 is used - YT.PlayerState.PLAYING
const isPlayerReady = player && player.getPlayerState;
const playerState = isPlayerReady ? player.getPlayerState() : {};
const isPlayerPlaying = isPlayerReady
? playerState !== YouTubeRef().PlayerState.ENDED &&
playerState !== YouTubeRef().PlayerState.PAUSED
: false;
return isPlayerPlaying;
}
createPlayer(elementId, outputs, sizes, videoId = "", playerVars = {}) {
const playerSize = {
height: sizes.height || defaultSizes.height,
width: sizes.width || defaultSizes.width,
};
const ytPlayer = YouTubePlayerRef();
return new ytPlayer(elementId, {
...playerSize,
events: {
onReady: (ev) => {
this.zone.run(() => outputs.ready && outputs.ready.next(ev.target));
},
onStateChange: (ev) => {
this.zone.run(() => outputs.change && outputs.change.next(ev));
},
},
playerVars,
videoId,
});
}
toggleFullScreen(player, isFullScreen) {
let { height, width } = defaultSizes;
if (!isFullScreen) {
height = window.innerHeight;
width = window.innerWidth;
}
player.setSize(width, height);
}
// adpoted from uid
generateUniqueId() {
const len = 7;
return Math.random().toString(35).substr(2, len);
}
createApi() {
const onYouTubeIframeAPIReady = () => {
if (win()) {
win()["onYouTubeIframeAPIReadyCalled"] = true;
this.api.next();
}
};
win()["onYouTubeIframeAPIReady"] = onYouTubeIframeAPIReady;
/**
* If onYouTubeIframeAPIReady is called in other place, then just trigger next
* This is to prevent player not initializing issue when another player got initialized in other place
*/
if (win()["onYouTubeIframeAPIReadyCalled"]) {
this.api.next();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YoutubePlayerService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YoutubePlayerService, providedIn: "root" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YoutubePlayerService, decorators: [{
type: Injectable,
args: [{
providedIn: "root",
}]
}], ctorParameters: () => [{ type: i0.NgZone }] });
class YoutubePlayerComponent {
constructor(playerService, elementRef, renderer) {
this.playerService = playerService;
this.elementRef = elementRef;
this.renderer = renderer;
this.videoId = '';
this.height = defaultSizes.height;
this.width = defaultSizes.width;
/**
* @description sets the protocol by the navigator object
* if there is no window, it sets a default http protocol
* unless the protocol is set from outside
*/
this.protocol = this.getProtocol();
this.playerVars = {};
// player created and initialized - sends instance of the player
this.ready = new EventEmitter();
// state change: send the YT event with its state
this.change = new EventEmitter();
}
ngAfterContentInit() {
const htmlId = this.playerService.generateUniqueId();
const playerSize = { height: this.height, width: this.width };
const container = this.renderer.selectRootElement('#yt-player-ngx-component');
this.renderer.setAttribute(container, 'id', htmlId);
this.playerService.loadPlayerApi({
protocol: this.protocol
});
this.playerService.setupPlayer(htmlId, {
change: this.change,
ready: this.ready
}, playerSize, this.videoId, this.playerVars);
}
getProtocol() {
const hasWindow = window && window.location;
const protocol = hasWindow
? window.location.protocol.replace(':', '')
: 'http';
return protocol;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YoutubePlayerComponent, deps: [{ token: YoutubePlayerService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: YoutubePlayerComponent, selector: "youtube-player", inputs: { videoId: "videoId", height: "height", width: "width", protocol: "protocol", playerVars: "playerVars" }, outputs: { ready: "ready", change: "change" }, ngImport: i0, template: `
<div id="yt-player-ngx-component"></div>
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YoutubePlayerComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'youtube-player',
template: `
<div id="yt-player-ngx-component"></div>
`
}]
}], ctorParameters: () => [{ type: YoutubePlayerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { videoId: [{
type: Input
}], height: [{
type: Input
}], width: [{
type: Input
}], protocol: [{
type: Input
}], playerVars: [{
type: Input
}], ready: [{
type: Output
}], change: [{
type: Output
}] } });
class NgxYoutubePlayerModule {
static forRoot() {
return {
ngModule: NgxYoutubePlayerModule,
providers: [YoutubePlayerService]
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxYoutubePlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NgxYoutubePlayerModule, declarations: [YoutubePlayerComponent], exports: [YoutubePlayerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxYoutubePlayerModule, providers: [YoutubePlayerService] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxYoutubePlayerModule, decorators: [{
type: NgModule,
args: [{
declarations: [YoutubePlayerComponent],
imports: [],
providers: [YoutubePlayerService],
exports: [YoutubePlayerComponent]
}]
}] });
/*
* Public API Surface of ngx-youtube-player
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxYoutubePlayerModule, YouTubePlayerRef, YouTubeRef, YoutubePlayerComponent, YoutubePlayerService, defaultSizes, win };
//# sourceMappingURL=hercilio-ngx-youtube-player.mjs.map