clappr-youtube-plugin.min.js

var DEFAULT_PLAYBACK_QUALITIES=[],YOUTUBE_VARIABLES={captions:!1,quality:"auto",languageCode:"en"},YoutubePlugin=Clappr.Playback.extend({name:"youtube_plugin",initialize:function(){this.settings={changeCount:0,seekEnabled:!0,left:["playpause","position","duration"],"default":["seekbar"],right:["fullscreen","volume","hd-indicator"]};Clappr.Mediator.on(Clappr.Events.PLAYER_RESIZE,this.updateSize,this);this.embedYoutubeApiScript();this.render()},setupYoutubePlayer:function(){var a=this;if(window.YT&&
window.YT.Player)this.embedYoutubePlayer();else this.once(Clappr.Events.PLAYBACK_READY,function(){a.embedYoutubePlayer()})},embedYoutubeApiScript:function(){window.YT=null;_this3=this;document.getElementById("www-widgetapi-script")&&document.getElementById("www-widgetapi-script").remove();var a=document.createElement("script");a.setAttribute("type","text/javascript");a.setAttribute("async","async");a.setAttribute("src","https://www.youtube.com/iframe_api");document.body.appendChild(a);window.onYouTubeIframeAPIReady=
function(){return _this3.ready()}},embedYoutubePlayer:function(){_this3=this;var a={controls:0,autoplay:1,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,html5:1,cc_load_policy:1};"object"===typeof this.options.YoutubeVars&&$.each(this.options.YoutubeVars,function(b,c){a[b]=c});$.each(a,function(a,c){YOUTUBE_VARIABLES[a]=c});YOUTUBE_VARIABLES.id="yt"+this.cid;this.options.youtubePlaylist&&(a.listType="playlist",a.list=this.options.youtubePlaylist);this.player=new YT.Player("yt"+
this.cid,{videoId:this.options.src,playerVars:a,width:"100%",height:"100%",events:{onReady:function(){return _this3.ready()},onStateChange:function(a){return _this3.stateChange(a)},onPlaybackQualityChange:function(a){return _this3.qualityChange(a)}}})},updateSize:function(){this.player&&this.player.setSize("100%","100%")},ready:function(){this._ready=!0;this.trigger(Clappr.Events.PLAYBACK_READY)},qualityChange:function(a){this.trigger(Clappr.Events.PLAYBACK_HIGHDEFINITIONUPDATE,this.isHighDefinitionInUse())},
stateChange:function(a){switch(a.data){case YT.PlayerState.PLAYING:this.enableMediaControl();a=this.getPlaybackType();this._playbackType!==a&&(this.settings.changeCount++,this._playbackType=a,this.trigger(Clappr.Events.PLAYBACK_SETTINGSUPDATE));this.trigger(Clappr.Events.PLAYBACK_BUFFERFULL);this.trigger(Clappr.Events.PLAYBACK_PLAY);YOUTUBE_VARIABLES.captions&&(this.player.setOption("captions","track",{languageCode:YOUTUBE_VARIABLES.languageCode}),this.$("#youtube-plugin-cc").css({"border-bottom":"4px double #fff"}));
console.log("###### Quality Set: "+YOUTUBE_VARIABLES.quality+" - player.getPlaybackQuality: "+this.player.getPlaybackQuality());YOUTUBE_VARIABLES.paused&&(this.enableMediaControl(),this.trigger(Clappr.Events.PLAYBACK_PAUSE),this.player.pauseVideo(),YOUTUBE_VARIABLES.paused=!1);break;case YT.PlayerState.PAUSED:this.enableMediaControl();this.trigger(Clappr.Events.PLAYBACK_PAUSE);break;case YT.PlayerState.BUFFERING:this.trigger(Clappr.Events.PLAYBACK_BUFFERING);break;case YT.PlayerState.ENDED:this.options.youtubeShowRelated?
this.disableMediaControl():this.trigger(Clappr.Events.PLAYBACK_ENDED)}},play:function(){var a=this;this.player?(this._progressTimer=this._progressTimer||setInterval(function(){return a.progress()},100),this._timeupdateTimer=this._timeupdateTimer||setInterval(function(){return a.timeupdate()},100),this.player.playVideo()):this._ready?(this.trigger(Clappr.Events.PLAYBACK_BUFFERING),this._progressTimer=this._progressTimer||setInterval(function(){return a.progress()},100),this._timeupdateTimer=this._timeupdateTimer||
setInterval(function(){return a.timeupdate()},100),this.setupYoutubePlayer()):(this.trigger(Clappr.Events.PLAYBACK_BUFFERING),this.listenToOnce(this,Clappr.Events.PLAYBACK_READY,this.play))},pause:function(){clearInterval(this._timeupdateTimer);this._timeupdateTimer=null;this.player&&this.player.pauseVideo()},seek:function(a){this.player&&this.player.seekTo(a)},seekPercentage:function(a){if(this.player){var b=this.player.getDuration();this.seekTo(a*b/100)}},volume:function(a){this.player&&this.player.setVolume&&
this.player.setVolume(a)},progress:function(){if(this.player&&this.player.getDuration){var a=this.player.getDuration()*this.player.getVideoLoadedFraction();this.trigger(Clappr.Events.PLAYBACK_PROGRESS,{start:0,current:a,total:this.player.getDuration()})}},timeupdate:function(){this.player&&this.player.getDuration&&this.trigger(Clappr.Events.PLAYBACK_TIMEUPDATE,{current:this.player.getCurrentTime(),total:this.player.getDuration()})},isPlaying:function(){return this.player&&this.player.getPlayerState()==
YT.PlayerState.PLAYING?!0:!1},isHighDefinitionInUse:function(){return this.player&&!!this.player.getPlaybackQuality().match(/^hd\d+/)},getDuration:function(){var a=0;this.player&&(a=this.player.getDuration());return a},getPlaybackType:function(){return Clappr.Playback.VOD},disableMediaControl:function(){this.$el.css({"pointer-events":"auto"});this.trigger(Clappr.Events.PLAYBACK_MEDIACONTROL_DISABLE)},enableMediaControl:function(){this.$el.css({"pointer-events":"none"});this.trigger(Clappr.Events.PLAYBACK_MEDIACONTROL_ENABLE)},
subtitleLoaded:function(a,b){this.trigger(Events.CONTAINER_LOADEDTEXTTRACK,a,b)},attributes:function(){return{"data-youtube-plugin":"","class":"clappr-youtube-plugin",id:this.cid}},ended:function(){return!1},isReady:function(){return this._ready},render:function(){this.$el.html('<div id="yt'+this.cid+'"></div>');var a=Clappr.Styler.getStyleFor([".clappr-youtube-plugin[data-youtube-plugin]{position:absolute;height:100%;width:100%;display:block;pointer-events:none"],{baseUrl:this.options.baseUrl});
this.$el.append(a);return this}});YoutubePlugin.canPlay=function(a){return!0};
var YoutubePluginControl=Clappr.UICorePlugin.extend({name:"youtube_plugin_control",bindEvents:function(){this.listenTo(this.core.mediaControl,Clappr.Events.MEDIACONTROL_CONTAINERCHANGED,this.reload);this.listenTo(this.core.mediaControl,Clappr.Events.MEDIACONTROL_RENDERED,this.render);this.listenTo(this.core.mediaControl,Clappr.Events.MEDIACONTROL_HIDE,this.hideContextMenu);this.listenTo(this.core.mediaControl,Clappr.Events.MEDIACONTROL_PLAYING,this.hideControlPaused);this.listenTo(this.core.mediaControl,
Clappr.Events.MEDIACONTROL_NOTPLAYING,this.showControlPaused);this.listenTo(this.core.mediaControl,YoutubePluginControl.MEDIACONTROL_YOUTUBECONTROL,this.updatePlaybackQuality)},unBindEvents:function(){this.stopListening(this.core.mediaControl,Clappr.Events.MEDIACONTROL_CONTAINERCHANGED);this.stopListening(this.core.mediaControl,Clappr.Events.MEDIACONTROL_RENDERED);this.stopListening(this.core.mediaControl,Clappr.Events.MEDIACONTROL_HIDE)},reload:function(){this.unBindEvents();this.bindEvents();$(document).on("click",
function(a){"youtubeQuality"!=a.target.id&&$(".youtube_plugin_control ul").hide()})},shouldRender:function(){if(!this.core.getCurrentContainer())return!1;if(window.YT&&window.YT.Player){DEFAULT_PLAYBACK_QUALITIES=[];this.ytplayer=YT.get(YOUTUBE_VARIABLES.id);for(var a=this.ytplayer.getAvailableQualityLevels(),b={highres:"highres",hd1080:"1080p",hd720:"720p",large:"480p",medium:"360p",small:"240p",tiny:"144p",auto:"Auto"},c=0;c<a.length;c++)DEFAULT_PLAYBACK_QUALITIES.push({value:a[c],label:b[a[c]]});
return!0}return!1},render:function(){this.selectedQuality||(this.selectedQuality=YOUTUBE_VARIABLES.quality="auto");if(this.shouldRender()){this.playbackQualities=DEFAULT_PLAYBACK_QUALITIES;var a=Clappr.template(this.template())({playbackQualities:this.playbackQualities,title:this.getTitle()});this.$el.html(a);a=Clappr.Styler.getStyleFor(this.templateCSS(),{baseUrl:this.core.options.baseUrl});this.$el.append(a);this.core.mediaControl.$(".media-control-right-panel").append(this.el);ytoptions=this.ytplayer.getOptions();
-1===ytoptions.indexOf("captions")&&-1===ytoptions.indexOf("cc")&&$("#youtube-plugin-cc").css("display","none");this.updateText()}return this},onQualitySelect:function(a){this.setSelectedQuality(a.target.dataset.youtubeControlSelect);this.toggleContextMenu();a.stopPropagation();return!1},onShowMenu:function(a){this.toggleContextMenu()},toggleContextMenu:function(){this.$(".youtube_plugin_control ul").toggle()},hideContextMenu:function(){this.$(".youtube_plugin_control ul").hide()},updatePlaybackQuality:function(a){this.setSelectedQuality(a)},
setSelectedQuality:function(a){this.selectedQuality=a;var b=this.ytplayer.getCurrentTime();YOUTUBE_VARIABLES.paused=2==this.ytplayer.getPlayerState()?!0:!1;this.ytplayer.stopVideo();this.ytplayer.setPlaybackQuality(a);this.ytplayer.seekTo(b,!1);this.updateText();YOUTUBE_VARIABLES.quality=a},setActiveListItem:function(a){this.$("li div").removeClass("active");this.$('div[data-youtube-control-select="'+a+'"]').addClass("active")},buttonElement:function(){return this.$("#youtubeQuality")},getTitle:function(){var a=
this,b=this.selectedQuality;this.playbackQualities.forEach(function(c){c.value==a.selectedQuality&&(b=c.label)});return b},updateText:function(){this.buttonElement().text(this.getTitle());this.setActiveListItem(this.selectedQuality)},template:function(){return tmpl="<button id='youtube-plugin-cc'>CC</button><button id='youtubeQuality' data-youtube-control-button>\n  <%= title %>\n</button>\n<ul>\n  <% for (var i = 0; i < playbackQualities.length; i++) { %>\n    <li><div data-youtube-control-select=\"<%= playbackQualities[i].value %>\"><%= playbackQualities[i].label %></div></li>\n  <% }; %>\n</ul>\n"},
templateCSS:function(){return css="#youtube-plugin-cc{padding: 0 1px;margin-right: 5px;}\n .youtube_plugin_control[data-youtube-control-select] {\n  float: right;\n  margin-top: 5px;\n  position: relative; }\n  .youtube_plugin_control[data-youtube-control-select] button {\n    background-color: transparent;\n    color: #fff;\n    font-family: Roboto,\"Open Sans\",Arial,sans-serif;\n    -webkit-font-smoothing: antialiased;\n    border: none;\n    font-size: 10px;\n    cursor: pointer; }\n    .youtube_plugin_control[data-youtube-control-select] button:hover {\n      color: #c9c9c9; }\n    .youtube_plugin_control[data-youtube-control-select] button.changing {\n      -webkit-animation: pulse 0.5s infinite alternate; }\n  .youtube_plugin_control[data-youtube-control-select] > ul {\n    display: none;\n    list-style-type: none;\n    position: absolute;\n    bottom: 25px;\n    border: 1px solid black;\n    border-radius: 4px;\n    background-color: rgba(0, 0, 0, 0.7); }\n  .youtube_plugin_control[data-youtube-control-select] li {\n    position: relative;\n    font-size: 10px; }\n    .youtube_plugin_control[data-youtube-control-select] li[data-title] {\n      padding: 5px; }\n    .youtube_plugin_control[data-youtube-control-select] li div {\n cursor:pointer; color: #aaa;\n      padding: 2px 10px 2px 15px;\n      display: block;\n      text-decoration: none; }\n      .youtube_plugin_control[data-youtube-control-select] li div.active {\n        background-color: black;\n        color: #fff; }\n        .youtube_plugin_control[data-youtube-control-select] li div.active:before {\n          content: '\\2713';\n          position: absolute;\n          top: 2px;\n          left: 4px; }\n      .youtube_plugin_control[data-youtube-control-select] li div:hover {\n        color: #fff;\n        text-decoration: none; }\n\n@-webkit-keyframes pulse {\n  0% {\n    color: #fff; }\n  50% {\n    color: #ff0101; }\n  100% {\n    color: #B80000; } }\n"},
attributes:function(){return{"class":this.name,"data-youtube-control-select":"",id:this.cid}},hideControlPaused:function(){this.core.mediaControl.keepVisible=!1},showControlPaused:function(){this.core.mediaControl.container.isReady&&(this.core.mediaControl.keepVisible=!0)},YTShowCaptions:function(){this.ytplayer.setOption("captions","track",{languageCode:YOUTUBE_VARIABLES.languageCode});this.$("#youtube-plugin-cc").css({"border-bottom":"4px double #fff"});YOUTUBE_VARIABLES.captions=!0},YTHideCaptions:function(){this.$("#youtube-plugin-cc").css({"border-bottom":"none"});
this.ytplayer.unloadModule("captions");YOUTUBE_VARIABLES.captions=!1},YTtoggleCaptions:function(){YOUTUBE_VARIABLES.captions?this.YTHideCaptions():this.YTShowCaptions()},events:function(){return{"click [data-youtube-control-select]":"onQualitySelect","click [data-youtube-control-button]":"onShowMenu","click #youtube-plugin-cc":"YTtoggleCaptions"}}});YoutubePluginControl.type="core";YoutubePluginControl.MEDIACONTROL_YOUTUBECONTROL="youtube_plugin_control";