-
Notifications
You must be signed in to change notification settings - Fork 7
/
bootstrap.youtube.playlist.popup.min.js
6 lines (6 loc) · 9.28 KB
/
bootstrap.youtube.playlist.popup.min.js
1
2
3
4
5
6
/*!
* Bootstrap YouTube Playlist Popup Player Plugin
* http://lab.abhinayrathore.com/bootstrap-youtube-playlist-popup/
* https://github.com/abhinayrathore/Bootstrap-Youtube-Playlist-Popup-Player-Plugin
*/
(function(e,f,m){var q=null,h=null,d=null,j=null,p=null,c=null,n=null,g=null,b=null,k=4,u=null,i=false,a=[],o={},l=null;if(!f.YT){var v=m.createElement("script"),t=m.getElementsByTagName("script")[0];v.src="//www.youtube.com/iframe_api";t.parentNode.insertBefore(v,t);f.onYouTubeIframeAPIReady=function(){i=true}}else{i=true}var s={init:function(w){w=e.extend({},e.fn.YouTubePlaylistModal.defaults,w);if(!q){q=e('<div class="modal fade '+w.cssClass+'" id="YouTubePlaylistModal" role="dialog" aria-hidden="true">');q.html(b.createMarkup(w)).hide().appendTo("body");h=e("#YouTubePlaylistModalDialog");d=e("#YouTubePlaylistModalTitle");j=e("#YouTubePlaylistModalBody");q.modal({show:false}).on("show.bs.modal",function(){w.onOpen&&w.onOpen()}).on("hide.bs.modal",function(){b.onClose();w.onClose&&w.onClose()})}return this.each(function(){var y=e(this),x=y.data("YouTubePlaylist");if(!x){y.data("YouTubePlaylist",true);e(y).bind("click.YouTubePlaylistModal",function(){l=w;a=w.playList;if(!(a instanceof Array)||a.length<1){a=y.data("playlist").split(",")}w.title&&b.setTitle(w.title);a=e.grep(a,function(z){return(z)});b.resize(w.width);if(!i){b.setTitle(w.errors.no_api)}else{if(a&&a instanceof Array&&a.length){c.init(w)}else{if(!a||!(a instanceof Array)||!a.length){b.setTitle(w.errors.no_ids)}}}q.modal("show")})}})},destroy:function(){return this.each(function(){e(this).unbind(".YouTubePlaylistModal").removeData("YouTubePlaylist")})}};b={createMarkup:function(w){return['<div class="modal-dialog" id="YouTubePlaylistModalDialog">','<div class="modal-content" id="YouTubePlaylistModalContent">','<div class="modal-header">','<button type="button" class="close" data-dismiss="modal">×</button>','<h4 class="modal-title" id="YouTubePlaylistModalTitle"></h4>',"</div>",'<div class="modal-body" id="YouTubePlaylistModalBody" style="padding:0;"><div style="margin: ',k,'px;" id="YouTubePlaylistPlayer"></div></div>','<div class="modal-footer" style="text-align: center;">','<button type="button" class="btn btn-default btn-sm" data-dismiss="modal" aria-label="',w.translations.close,'" title="',w.translations.close,'"><span class="',w.icons.close,'"></span></button>','<button type="button" class="btn btn-default btn-sm mute-video" aria-label="',w.translations.mute,'" title="',w.translations.mute,'"><span class="',w.icons.mute,'"></span></button>','<button type="button" class="btn btn-default btn-sm first-video" aria-label="',w.translations.first,'" title="',w.translations.first,'"><span class="',w.icons.first,'"></span></button>','<button type="button" class="btn btn-default btn-sm prev-video" aria-label="',w.translations.prev,'" title="',w.translations.prev,'"><span class="',w.icons.prev,'"></span></button>','<button type="button" class="btn btn-default btn-sm play-video" aria-label="',w.translations.play,'" title="',w.translations.play,'"><span class="',w.icons.play,'"></span></button>','<button type="button" class="btn btn-default btn-sm pause-video hidden" aria-label="',w.translations.pause,'" title="',w.translations.pause,'"><span class="',w.icons.pause,'"></span></button>','<button type="button" class="btn btn-default btn-sm next-video" aria-label="',w.translations.next,'" title="',w.translations.next,'"><span class="',w.icons.next,'"></span></button>','<button type="button" class="btn btn-default btn-sm last-video" aria-label="',w.translations.last,'" title="',w.translations.last,'"><span class="',w.icons.last,'"></span></button>','<button type="button" class="btn btn-default btn-sm shuffle-video" aria-label="',w.translations.shuffle,'" title="',w.translations.shuffle,'"><span class="',w.icons.shuffle,'"></span></button>','<button type="button" class="btn btn-default btn-sm loop-video" aria-label="',w.translations.loop,'" title="',w.translations.loop,'"><span class="',w.icons.loop,'"></span></button>','<button type="button" class="btn btn-default btn-sm stop-video" aria-label="',w.translations.stop,'" title="',w.translations.stop,'"><span class="',w.icons.stop,'"></span></button>','<button type="button" class="btn btn-default btn-sm list-video" data-toggle="popover" data-placement="top" aria-label="',w.translations.list,'" title="',w.translations.list,'"><span class="',w.icons.list,'"></span></button>','<div class="list-popover-content hidden"></div>',"</div>","</div>","</div>"].join("")},setTitle:function(w){d.html(e.trim(w))},setTitleById:function(w){if(o[w]&&o[w].title){this.setTitle(o[w].title)}else{r(w,function(y,x){x&&x.entry&&x.entry.title&&x.entry.title.$t&&b.setTitle(x.entry.title.$t)})}},reset:function(){this.setTitle("")},resize:function(x){h.css({width:x+(k*2)+2})},onClose:function(){a=[];o={};g.destroy();e("#list-popover-content").empty();u&&u.destroy();n.unbind();b.reset()}};c={init:function(w){u=new YT.Player("YouTubePlaylistPlayer",{height:w.height,width:w.width,videoId:a[0],playerVars:{autohide:w.autohide,autoplay:w.autoplay,color:w.color,controls:w.controls,fs:w.fs,loop:w.loop,modestbranding:w.modestbranding,origin:f.location.hostname,showinfo:w.showinfo,theme:w.theme},events:{onReady:this.onPlayerReady,onStateChange:this.onPlayerStateChange}})},onPlayerReady:function(w){g.init();w.target.cuePlaylist({playlist:a});l.autoplay&&w.target.playVideo();n.init()},onPlayerStateChange:function(x){if(!l.title){var w=u.getPlaylistIndex();if(w>-1){b.setTitleById(a[w])}}}};n={init:function(){if(l.autoplay){q.find(".pause-video, .play-video").toggleClass("hidden")}q.on("click",".first-video",function(){u.playVideoAt(0)});q.on("click",".prev-video",function(){u.previousVideo()});q.on("click",".play-video",function(){u.playVideo();e(this).addClass("hidden");q.find(".pause-video").removeClass("hidden")});q.on("click",".pause-video",function(){u.pauseVideo();e(this).addClass("hidden");q.find(".play-video").removeClass("hidden")});q.on("click",".next-video",function(){u.nextVideo()});q.on("click",".last-video",function(){u.playVideoAt(a.length-1)});q.on("click",".shuffle-video",function(){u.setShuffle(!e(this).hasClass("active"));e(this).toggleClass("active")});q.on("click",".loop-video",function(){u.setLoop(!e(this).hasClass("active"));e(this).toggleClass("active")});q.on("click",".stop-video",function(){u.stopVideo()});q.on("click",".mute-video",function(){if(!e(this).hasClass("active")){u.mute()}else{u.unMute()}e(this).toggleClass("active")});q.on("click",".popover-video-link",function(){u.playVideoAt(e(this).data("index"));p.popover("hide");return false})},unbind:function(){q.off("click",'[class$="-video"]')}};g={init:function(){p=q.find(".list-video");p.popover({html:true,content:function(w){return['<div style="max-height: ',l.height,'px; overflow-y: auto;">',q.find(".list-popover-content").html(),"</div>"].join("")}}).popover("hide");this.setupPlaylistObject()},setupPlaylistObject:function(){var y=q.find(".list-popover-content"),A,x,z,w="";y.empty();for(x=0,len=a.length;x<len;x++){A=e.trim(a[x]);z=A;o[A]={};y.append(['<div class="media" style="overflow: hidden; text-overflow: ellipsis;">','<a class="pull-left popover-video-link" data-index="'+x+'" data-id="'+A+'" href="#">','<img class="media-object" src="//i.ytimg.com/vi/'+A+'/default.jpg" alt="'+z+'" height="50" />',"</a>",'<div class="media-body">','<a class="pull-left popover-video-link" data-index="'+x+'" data-id="'+A+'" href="#">','<h5 class="media-heading">'+z+"</h5>","</a>","</div>","</div>"].join(""));r(A,this.populatePopoverList)}},populatePopoverList:function(y,x){var w=q.find(".list-popover-content");if(x&&x.entry&&x.entry.title&&x.entry.title.$t){o[y]=o[y]||{};o[y]["title"]=x.entry.title.$t;o[y]["desc"]=x.entry.media$group.media$description.$t;o[y]["duration"]=x.entry.media$group.yt$duration.seconds;w.find('.popover-video-link[data-id="'+y+'"] > h5').html(o[y]["title"]);w.find('.popover-video-link[data-id="'+y+'"]').attr("title",o[y]["desc"])}},destroy:function(){p&&p.popover("destroy")}};function r(y,x){var w=["https://gdata.youtube.com/feeds/api/videos/",y,"?v=2&alt=json"].join("");e.ajax({url:w,dataType:"jsonp",cache:true,success:function(z){x.call(this,y,z)}})}e.fn.YouTubePlaylistModal=function(w){if(s[w]){return s[w].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof w==="object"||!w){return s.init.apply(this,arguments)}else{e.error("Method "+w+" does not exist on Bootstrap.YouTubePlaylistModal")}}};e.fn.YouTubePlaylistModal.defaults={playList:"",title:"",cssClass:"YouTubePlaylistModal",width:640,height:480,autohide:2,autoplay:1,color:"red",controls:1,fs:1,loop:0,modestbranding:1,showinfo:0,theme:"light",icons:{close:"glyphicon glyphicon-remove",first:"glyphicon glyphicon-fast-backward",prev:"glyphicon glyphicon-step-backward",play:"glyphicon glyphicon-play",pause:"glyphicon glyphicon-pause",next:"glyphicon glyphicon-step-forward",last:"glyphicon glyphicon-fast-forward",stop:"glyphicon glyphicon-stop",shuffle:"glyphicon glyphicon-random",loop:"glyphicon glyphicon-repeat",mute:"glyphicon glyphicon-volume-off",list:"glyphicon glyphicon-list"},translations:{close:"Close",first:"First",prev:"Previous",play:"Play",pause:"Pause",next:"Next",last:"Last",stop:"Stop",shuffle:"Shuffle",loop:"Loop",mute:"Mute",list:"Playlist"},errors:{no_api:"YouTube API not initialized!",no_ids:"No videos added to playlist!"},onOpen:null,onClose:null}})(jQuery,window,document);