ng5-yt-player/ng5-yt-player.js

* [Description](#Description) * [Usage](#usage) * [Events](#Events) * [Download](#download)

import { CUSTOM_ELEMENTS_SCHEMA, Component, EventEmitter, Injectable, Input, NO_ERRORS_SCHEMA, NgModule, NgZone, Output } from '@angular/core';

const $window = window;
const iFrameSrc = 'http://www.youtube.com/iframe_api';
class YoutubePlayerService {
    /**
     * @param {?} zone
     */
    constructor(zone) {
        this.zone = zone;
    }
    /**
     * @param {?} domElementId
     * @param {?} playerOptions
     * @param {?} readyEvent
     * @param {?} stateChangeEvent
     * @return {?}
     */
    createPlayer(domElementId, playerOptions, readyEvent, stateChangeEvent) {
        return setInterval(() => {
            if ((typeof $window.YT !== 'undefined') && $window.YT && $window.YT.Player) {
                const /** @type {?} */ player = new $window.YT.Player(domElementId, Object.assign({}, playerOptions, { events: {
                        onReady: (ev) => {
                            this.zone.run(() => readyEvent.emit(ev.target));
                        },
                        onStateChange: (ev) => {
                            /**
                             * player state is 1 (playing), 2 for Pause. Reference https://developers.google.com/youtube/iframe_api_reference
                             */
                            this.zone.run(() => stateChangeEvent.emit(ev.data));
                        }
                    } }));
            }
        }, 100);
    }
    /**
     * @return {?}
     */
    loadPlayerApi() {
        const /** @type {?} */ doc = $window.document;
        const /** @type {?} */ playerApi = doc.createElement('script');
        playerApi.type = 'text/javascript';
        playerApi.src = iFrameSrc;
        doc.body.appendChild(playerApi);
    }
}
YoutubePlayerService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
YoutubePlayerService.ctorParameters = () => [
    { type: NgZone, },
];

class YoutubePlayerComponent {
    /**
     * @param {?} playerService
     */
    constructor(playerService) {
        this.playerService = playerService;
        this.playerReadyEvent = new EventEmitter();
        this.playerStateChangeEvent = new EventEmitter();
        this.domId = 'player-' + this.guid();
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        const /** @type {?} */ playerOptions = {
            videoId: this.videoId || '',
            height: this.height || 300,
            width: this.width || 300,
            playerVars: Object.assign({}, this.playerParams, { enablejsapi: 1 })
        };
        this.playerService.loadPlayerApi();
        this.playerService.createPlayer(this.domId, playerOptions, this.playerReadyEvent, this.playerStateChangeEvent);
    }
    /**
     * @return {?}
     */
    guid() {
        /**
         * @return {?}
         */
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                .toString(16)
                .substring(1);
        }
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    }
}
YoutubePlayerComponent.decorators = [
    { type: Component, args: [{
                selector: 'ng5-youtube-player',
                template: `
    <div [id]="domId"></div>
  `,
                styles: [`

  `]
            },] },
];
/**
 * @nocollapse
 */
YoutubePlayerComponent.ctorParameters = () => [
    { type: YoutubePlayerService, },
];
YoutubePlayerComponent.propDecorators = {
    'videoId': [{ type: Input },],
    'height': [{ type: Input },],
    'width': [{ type: Input },],
    'playerParams': [{ type: Input },],
    'playerReadyEvent': [{ type: Output },],
    'playerStateChangeEvent': [{ type: Output },],
};

class YouTubePlayerModule {
}
YouTubePlayerModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    YoutubePlayerComponent
                ],
                schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
                providers: [YoutubePlayerService],
                exports: [
                    YoutubePlayerComponent
                ]
            },] },
];
/**
 * @nocollapse
 */
YouTubePlayerModule.ctorParameters = () => [];

/**
 * Generated bundle index. Do not edit.
 */

export { YouTubePlayerModule, YoutubePlayerService as ɵb, YoutubePlayerComponent as ɵa };
//# sourceMappingURL=ng5-yt-player.js.map