ng-youtube-embed-iframe
Version:
AngularJS directive for youtube-iframe-player-api
207 lines (166 loc) • 6.85 kB
JavaScript
/*!
* @module ng-youtube-embed-iframe
* @description AngularJS directive for youtube-iframe-player-api
* @version v1.2.15
* @link https://github.com/sibiraj-s/ng-youtube-embed-iframe#readme
* @licence MIT License, https://opensource.org/licenses/MIT
*/
;
(function () {
'use strict';
var $youtube, $youtubePlayerConfig, $ytFactory, $ytPlayer;
$youtubePlayerConfig = {
width: '100%',
height: '100%',
playerVars: {}
};
$youtube = function $youtube($window, ytFactory, ytPlayer, youtubePlayerConfig) {
return {
restrict: 'E',
template: '<div id={{ngYoutubeId}}></div>',
scope: {
height: '@?',
width: '@?',
videoId: '@?',
playerOptions: '=?'
},
link: function link(scope, element, attrs) {
/*
* load the Youtube IFrame Player API code asynchronously
* load page only once
*/
var createPlayer, firstScriptTag, iframeApiScriptExists, onApiChange, onPlaybackRateChange, onPlayerError, onPlayerPlaybackQualityChange, onPlayerReady, onPlayerStateChange, playerHeight, playerVars, playerVideoId, playerWidth, tag;
if (!attrs.id) {
throw new Error("Provide id for element: ".concat(element[0].outerHTML));
}
iframeApiScriptExists = !!$window.document.getElementById('ng_yt_iframe_api');
if ((typeof $window.YT === 'undefined' || typeof $window.YT.Player === 'undefined') && !iframeApiScriptExists) {
tag = $window.document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
tag.id = 'ng_yt_iframe_api';
firstScriptTag = $window.document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
/*
* check for parameters assigned to the element
* if assigned use the parameters
* else if use parameters are defined in options
* else use default parameters
*/
scope.ngYoutubeId = attrs.id;
scope.playerOptions = scope.playerOptions ? scope.playerOptions : {};
playerVideoId = scope.videoId || scope.playerOptions.videoId;
playerHeight = scope.height || scope.playerOptions.height || youtubePlayerConfig.height;
playerWidth = scope.width || scope.playerOptions.width || youtubePlayerConfig.width;
playerVars = scope.playerOptions.playerVars || youtubePlayerConfig.playerVars;
if (!playerVideoId) {
throw new Error("Video id is required. Received `".concat(playerVideoId, "`"));
}
ytFactory.onReady(function () {
ytPlayer[attrs.id] = createPlayer();
}); // create iframe and append video url to it
createPlayer = function createPlayer() {
return new YT.Player(attrs.id, {
videoId: playerVideoId,
height: playerHeight,
width: playerWidth,
playerVars: playerVars,
events: {
onReady: onPlayerReady,
onPlaybackQualityChange: onPlayerPlaybackQualityChange,
onStateChange: onPlayerStateChange,
onError: onPlayerError,
onPlaybackRateChange: onPlaybackRateChange,
onApiChange: onApiChange
}
});
}; // events emit by youtube iframe api
onPlayerReady = function onPlayerReady(event) {
scope.$emit('ngYoutubePlayer:onPlayerReady', event, attrs.id);
};
onPlayerPlaybackQualityChange = function onPlayerPlaybackQualityChange(event) {
scope.$emit('ngYoutubePlayer:onPlayerPlaybackQualityChange', event, attrs.id);
};
onPlayerStateChange = function onPlayerStateChange(event) {
scope.$emit('ngYoutubePlayer:onPlayerStateChange', event, attrs.id);
switch (event.data) {
case YT.PlayerState.PLAYING:
scope.$emit('ngYoutubePlayer:PLAYING', event);
break;
case YT.PlayerState.ENDED:
scope.$emit('ngYoutubePlayer:ENDED', event);
break;
case YT.PlayerState.UNSTARTED:
scope.$emit('ngYoutubePlayer:UNSTARTED', event);
break;
case YT.PlayerState.PAUSED:
scope.$emit('ngYoutubePlayer:PAUSED', event);
break;
case YT.PlayerState.BUFFERING:
scope.$emit('ngYoutubePlayer:BUFFERING', event);
break;
case YT.PlayerState.CUED:
scope.$emit('ngYoutubePlayer:CUED', event);
}
};
onPlayerError = function onPlayerError(event) {
scope.$emit('ngYoutubePlayer:onPlayerError', event, attrs.id);
};
onPlaybackRateChange = function onPlaybackRateChange(event) {
scope.$emit('ngYoutubePlayer:onPlaybackRateChange', event, attrs.id);
};
onApiChange = function onApiChange() {
scope.$emit('ngYoutubePlayer:onApiChange', event, attrs.id);
}; // watch for changes in videoId
scope.$watch('videoId', function (newValue, oldValue) {
if (newValue === oldValue) {
return;
}
ytPlayer[attrs.id].cueVideoById(scope.videoId);
}); // watch for changes in plyerOptions videoId
scope.$watch('playerOptions.videoId', function (newValue, oldValue) {
if (!scope.videoId) {
// considering videoId as priority
if (newValue === oldValue) {
return;
}
ytPlayer[attrs.id].cueVideoById(scope.playerOptions.videoId);
}
}); // destroy elements when destroy is triggered
scope.$on('$destroy', function () {
var YT, i;
YT = void 0;
for (i in ytPlayer) {
if (i && ytPlayer[i].a) {
ytPlayer[i].destroy();
}
}
});
}
};
}; // player service invokes when the player is ready
$ytFactory = function $ytFactory($q, $window) {
var apiReady, deferred;
deferred = $q.defer();
apiReady = deferred.promise;
$window.onYouTubeIframeAPIReady = function () {
deferred.resolve();
};
return {
onReady: function onReady(cb) {
apiReady.then(cb);
}
};
}; // player constant
$ytPlayer = {};
/*
* dependency injection
*/
$youtube.$inject = ['$window', 'ytFactory', 'ytPlayer', 'youtubePlayerConfig'];
$ytFactory.$inject = ['$q', '$window'];
/*
* define angular application
*/
angular.module('ngYoutube', []).directive('youtube', $youtube).factory('ytFactory', $ytFactory).constant('youtubePlayerConfig', $youtubePlayerConfig).constant('ytPlayer', $ytPlayer);
}).call(void 0);
//# sourceMappingURL=ng-youtube.js.map