1/*! 2 * 3 * Modern HTML5 Responsive Youtube Playlist Player 4 * For jQuery 1.9 and above 5 * 6 * @author Rik de Vos 7 * @link http://rikdevos.com/ 8 * @version 1.4.0 9 * 10 * This is not free software. Visit http://codecanyon.net/item/modern-html5-responsive-youtube-playlist-player/8619272?ref=RikdeVos to purchase a license 11 * 12 */ 13 14(function($){ 15 $.youtube_video = function(el, options){ 16 // To avoid scope issues, use 'base' instead of 'this' 17 // to reference this class from internal events and functions. 18 var base = this; 19 20 // Access to jQuery and DOM versions of element 21 // base.$el = $("<div />").appendTo($(el)); 22 base.$el = $(el); 23 base.el = el; 24 25 // Add a reverse reference to the DOM object 26 base.$el.data("youtube_video", base); 27 28 base.init = function(){ 29 base.options = $.extend({},$.youtube_video.defaultOptions, options); 30 base.options_copy = $.extend({},$.youtube_video.defaultOptions, options); 31 base.api_key = base.options.api_key; 32 base.$el.addClass('yesp'); 33 base.type = false; 34 35 if(base.options.playlist !== false) { 36 // this is a playlist 37 base.id = 'yt_player_'+base.options.playlist.replace(/[^a-z0-9]/ig,''); 38 base.type = 'playlist'; 39 }else if(base.options.channel !== false) { 40 // this is a channel 41 base.id = 'yt_player_'+base.options.channel.replace(/[^a-z0-9]/ig,''); 42 base.type = 'channel'; 43 }else if(base.options.user !== false) { 44 // this is a user 45 base.id = 'yt_player_'+base.options.user.replace(/[^a-z0-9]/ig,''); 46 base.type = 'user'; 47 }else if(base.options.videos !== false) { 48 // this is a video(s) 49 if(typeof(base.options.videos) == 'string') { 50 base.options.videos = [base.options.videos]; 51 } 52 base.id = 'yt_player_'+base.options.videos[0].replace(/[^a-z0-9]/ig,''); 53 base.type = 'videos'; 54 }else { 55 base.display_error('No playlist/channel/user/videos entered. Set at least 1.', true); 56 return; 57 } 58 59 if(typeof base.$el.attr('id') !== typeof undefined && base.$el.attr('id') !== false) { 60 // we already have an id attr on the $el, so use it 61 base.id = base.$el.attr('id'); 62 }else { 63 // use the generated id 64 base.$el.attr('id', base.id); 65 } 66 67 if(base.options.max_results > 50) { 68 base.options.max_results = 50; 69 } 70 71 72 // Globals 73 base.$controls = []; 74 base.$title = null; 75 base.$container = base.$el.find('.yesp-container'); 76 base.youtube = null; 77 base.playlist_items = []; 78 base.playlist_count = 0; 79 base.info = { 80 'width': 0, 81 'height': 0, 82 'duration': 0, 83 'current_time': 0, 84 'previous_time': 0, 85 'volume': base.options.volume, 86 'time_drag': false, 87 'volume_drag': false, 88 'ie': base.detect_ie(), 89 'ie_previous_time': 0, 90 'touch': base.detect_touch(), 91 'youtube_loaded': false, 92 'ios': ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false ), 93 'mobile': ( navigator.userAgent.match(/(Android|webOS|iPad|iPhone|iPod|BlackBerry|Windows Phone)/g) ? true : false ), 94 'state': false, 95 'index': 0, 96 'hover': true, 97 'fullscreen': false, 98 'idle_time': 0, 99 'idle_controls_hidden': false, 100 'playlist_shown': true, 101 'horizontal_playlist_shown': true, 102 'playlist_width': 200, 103 'playlist_animating': false, 104 'first_play': false, 105 'current_video_url': '', 106 'next_page_token': false, 107 'playlist_i': 0, 108 'alternative_api_ready_check': false, 109 }; 110 111 if(base.info.ios) { 112 base.$el.addClass('yesp-ios'); 113 base.options.volume_control = false; 114 base.options_copy.volume_control = false; 115 } 116 117 if(base.info.mobile) { 118 base.options.show_controls_on_load = true; 119 base.options.show_controls_on_pause = true; 120 base.options.show_controls_on_play = true; 121 122 base.$el.addClass('yesp-mobile'); 123 } 124 125 if(base.info.ie) { 126 // base.options.fullscreen_control = false; 127 base.$el.addClass('yesp-ie'); 128 } 129 130 if(!base.$el[0].requestFullScreen && !base.$el[0].mozRequestFullScreen && !base.$el[0].webkitRequestFullScreen) { 131 base.options.fullscreen_control = false; 132 } 133 134 135 base.create_player_element(); 136 137 // base.playlist_items = null; 138 // base.playlist_count = 0; 139 140 base.init_playlist(); 141 142 base.create_controls(); 143 base.create_title(); 144 base.create_overlays(); 145 base.show_controls(); 146 base.bind_controls(); 147 148 $(window).on('resize', base.resize); 149 base.resize(); 150 151 base.init_time_slider(); 152 base.init_volume_slider(); 153 154 base.set_style(); 155 156 if(base.options.width !== false) { 157 base.$el.css('width', base.options.width); 158 base.resize(); 159 } 160 161 if(!base.options.show_controls_on_load) { 162 base.hide_controls(); 163 } 164 165 if(base.options.playlist_type === 'horizontal') { 166 base.hide_playlist(true); 167 //base.options.show_playlist = false;
168 169 if(!base.options.show_playlist) { 170 base.hide_horizontal_playlist(); 171 }else { 172 base.show_horizontal_playlist(); 173 } 174 175 // base.info.horizontal_playlist_shown = true; 176 }else { 177 // it's vertical 178 base.hide_horizontal_playlist(); 179 if(!base.options.show_playlist) { 180 base.hide_playlist(true); 181 } 182 // base.info.horizontal_playlist_shown = false; 183 } 184 185 document.addEventListener("fullscreenchange", function () { 186 if(!document.fullscreen) { 187 base.exit_fullscreen(); 188 } 189 }, false); 190 191 document.addEventListener("mozfullscreenchange", function () { 192 if(!document.mozFullScreen) { 193 base.exit_fullscreen(); 194 } 195 }, false); 196 197 document.addEventListener("webkitfullscreenchange", function () { 198 if(!document.webkitIsFullScreen) { 199 base.exit_fullscreen(); 200 } 201 }, false); 202 203 document.addEventListener("msfullscreenchange", function () { 204 if(!document.msFullscreenElement) { 205 base.exit_fullscreen(); 206 } 207 }, false); 208 209 setInterval(function() { 210 if(base.info.mobile) { 211 return; 212 } 213 base.info.idle_time += 500; 214 if(base.info.fullscreen && base.info.idle_time > 2000) { 215 base.info.idle_controls_hidden = true; 216 base.hide_controls(true); 217 } 218 }, 500); 219 220 base.$el.mousemove(function (e) { 221 base.info.idle_time = 0; 222 if(base.info.idle_controls_hidden && base.info.fullscreen) { 223 base.info.idle_controls_hidden = false; 224 base.show_controls(); 225 } 226 }); 227 228 base.$el.keypress(function (e) { 229 base.info.idle_time = 0; 230 if(base.info.idle_controls_hidden && base.info.fullscreen) { 231 base.info.idle_controls_hidden = false; 232 base.show_controls(); 233 } 234 }); 235 236 if(base.info.touch) { 237 base.$el.addClass('yesp-touch'); 238 } 239 240 setTimeout(function() { 241 base.info.alternative_api_ready_check = true; 242 }, 1000); 243 244 }; 245 246 base.display_error = function(message, remove_player) { 247 var $error = base.$el.find('.yesp-error').html('<i class="yesp-icon yesp-icon-warning"></i>'+message).slideDown(); 248 if($error.length === 0) { 249 alert(message); 250 } 251 if(remove_player === true) { 252 base.$el.find('.yesp-video').remove(); 253 base.$el.find('.yesp-container, .yesp-hp').css('background-image', 'none'); 254 } 255 }; 256 257 base.remove_next_page = function() { 258 base.info.next_page_token = false; 259 base.$el.find('.yesp-next-page').remove(); 260 base.$el.find('.yesp-hp-next-page').remove(); 261 base.$el.find('.yesp-hp-videos').css('width', (base.playlist_count)*160); 262 }; 263 264 base.get_playlist_next = function() { 265 if(base.info.next_page_token === false) { 266 base.remove_next_page(); 267 return; 268 } 269 base.$el.find('.yesp-next-page').html('<i class="yesp-icon yesp-icon-spinner yesp-icon-spin"></i>'); 270 base.get_playlist(base.info.next_page_token, base.options.playlist); 271 }; 272 273 base.get_playlist = function(pageToken, playlist) { 274 if(typeof(pageToken) === typeof(undefined) || pageToken === false) { 275 pageToken = false; 276 through_pagination = false; 277 }else { 278 through_pagination = true; 279 } 280 281 var url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,status&maxResults='+base.options.max_results+'&playlistId='+playlist+'&key='+base.options.api_key; 282 283 if(through_pagination === true) { 284 url += '&pageToken='+pageToken; 285 } 286 287 var r = $.getJSON(url, function(yt) { 288 if(typeof(yt.items) !== 'undefined') { 289 if(yt.items.length === 0) { 290 base.display_error('This playlist is empty.', true); 291 } 292 var filtered_items = base.create_playlist(through_pagination, yt.items, yt.items.length); 293 294 base.playlist_items = base.playlist_items.concat(filtered_items.items); 295 base.playlist_count += filtered_items.count; 296 297 if(base.options.pagination === true) { 298 if(typeof(yt.nextPageToken) === typeof(undefined)) { 299 base.remove_next_page(); 300 }else { 301 base.info.next_page_token = yt.nextPageToken; 302 base.$el.find('.yesp-next-page').html('<i class="yesp-icon yesp-icon-plus"></i>'+base.options.load_more_text).show(); 303 } 304 //base.set_playlist_width(base.info.playlist_width); 305 }else { 306 base.info.next_page_token = false;
307 } 308 309 if(base.playlist_count < 2 && !through_pagination && base.info.next_page_token === false) { 310 base.hide_playlist(true); 311 base.options.show_playlist = false; 312 313 base.options.playlist_toggle_control = false; 314 base.$controls['playlist_toggle'].hide(); 315 316 base.options.fwd_bck_control = false; 317 base.options_copy.fwd_bck_control = false; 318 base.$controls['forward'].hide(); 319 base.$controls['backward'].hide(); 320 321 base.resize(); 322 if(base.playlist_count === 0) { 323 base.display_error('This playlist is empty.', true); 324 } 325 } 326 327 }else { 328 base.display_error('An error occured while retrieving the playlist.', true); 329 } 330 }); 331 332 r.fail(function(data) { 333 var error = 'An error occured while retrieving the playlist.'; 334 if(typeof(data.responseText) !== typeof(undefined)) { 335 var message = $.parseJSON(data.responseText); 336 if(message.error.code == '404') { 337 error = 'The playlist was not found.'; 338 }else if(message.error.code == '403') { 339 error = message.error.message; 340 }else if(message.error.code == '400') { 341 error = 'The API key you have entered is invalid.'; 342 }else { 343 344 error = 'An error occured while retrieving the playlist.<br /><em>'+message.error.message+'</em>'; 345 } 346 } 347 base.display_error(error, true); 348 base.hide_playlist(true); 349 }); 350 }; 351 352 base.get_channel = function(type, source) { 353 var url = ''; 354 if(type === 'user') { 355 url = 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&maxResults='+base.options.max_results+'&forUsername='+encodeURIComponent(source)+'&key='+base.api_key; 356 }else { 357 url = 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&maxResults='+base.options.max_results+'&id='+source+'&key='+base.api_key; 358 } 359 360 $.getJSON(url, function(yt) { 361 if(typeof(yt.items) !== undefined && yt.items.length == 1) { 362 var upload_playlist = yt.items[0].contentDetails.relatedPlaylists.uploads; 363 base.options.playlist = upload_playlist; 364 base.get_playlist(false, base.options.playlist); 365 }else { 366 base.display_error('An error occured while retrieving the channel/user.', true); 367 } 368 }); 369 }; 370 371 base.get_videos = function(videos) { 372 var vid_list = '', 373 l = videos.length; 374 375 for(var i = 0; i < l; i++) { 376 if(i !== l-1) { 377 vid_list += videos[i]+','; 378 }else { 379 vid_list += videos[i]; 380 } 381 } 382 var url = 'https://www.googleapis.com/youtube/v3/videos?part=snippet,status&maxResults='+base.options.max_results+'&id='+vid_list+'&key='+base.api_key; 383 384 385 $.getJSON(url, function(yt) { 386 if(typeof(yt.items) !== 'undefined') { 387 // we have results 388 // set the video id 389 for(var i = 0; i < yt.items.length; i++) { 390 yt.items[i].snippet.resourceId = { videoId: yt.items[i].id }; 391 } 392 var filtered_items = base.create_playlist(false, yt.items, yt.items.length); 393 394 base.playlist_items = base.playlist_items.concat(filtered_items.items); 395 base.playlist_count += filtered_items.count; 396 397 if(base.playlist_count < 2) { 398 base.hide_playlist(true); 399 base.options.show_playlist = false; 400 401 base.options.playlist_toggle_control = false; 402 base.$controls['playlist_toggle'].hide(); 403 404 base.options.fwd_bck_control = false; 405 base.options_copy.fwd_bck_control = false; 406 base.$controls['forward'].hide(); 407 base.$controls['backward'].hide(); 408 409 base.resize(); 410 if(base.playlist_count === 0) { 411 base.display_error('This playlist is empty, or the video\'s were not found.', true); 412 } 413 414 } 415 416 417 }else { 418 base.display_error('An error occured while retrieving the video(s).', true); 419 } 420 }); 421 return; 422 }; 423 424 base.init_playlist = function() { 425 426 if(base.type === 'playlist') { 427 base.get_playlist(false, base.options.playlist); 428 return; 429 } 430 431 if(base.type == 'channel') { 432 base.get_channel('channel', base.options.channel); 433 return; 434 } 435 436 if(base.type == 'user') { 437 base.get_channel('user', base.options.user); 438 return; 439 } 440 441 if(base.type == 'videos') { 442 base.get_videos(base.options.videos); 443 return; 444 } 445 446 }; 447
448 base.create_playlist = function(through_pagination, items, count) { 449 if(!through_pagination) { 450 base.create_youtube_element(); 451 } 452 453 for(var i = 0; i < count; i++) { 454 455 // Remove 'private' video 456 if(items[i].status.privacyStatus == 'private') { 457 items.splice(i, 1); 458 count--; 459 continue; 460 } 461 462 // Remove 'deleted' video 463 if(typeof(items[i].snippet.thumbnails) == typeof(undefined)) { 464 items.splice(i, 1); 465 count--; 466 continue; 467 } 468 } 469 base.options.on_done_loading(items); 470 471 472 for(base.info.playlist_i; base.info.playlist_i < base.playlist_count+count; base.info.playlist_i++) { 473 var video = items[base.info.playlist_i-base.playlist_count], 474 img_src = ''; 475 476 // Order: 16/9 medium, 4/3 medium, 4/3 high, 4/3 default 477 if(typeof(video.snippet.thumbnails.medium) !== 'undefined' && video.snippet.thumbnails.medium.width/video.snippet.thumbnails.medium.height == 16/9) { 478 img_src = video.snippet.thumbnails.medium.url; 479 }else if(typeof(video.snippet.thumbnails.medium) !== 'undefined') { 480 img_src = video.snippet.thumbnails.medium.url; 481 }else if(typeof(video.snippet.thumbnails.high) !== 'undefined') { 482 img_src = video.snippet.thumbnails.high.url; 483 }else if(typeof(video.snippet.thumbnails.default) !== 'undefined') { 484 img_src = video.snippet.thumbnails.default.url; 485 } 486 487 var title = video.snippet.title; 488 489 if (video.snippet.title.length > 85) { 490 video.snippet.title = video.snippet.title.substr(0,85)+'...'; 491 } 492 493 if (video.snippet.channelTitle.length > 20) { 494 video.snippet.channelTitle = video.snippet.channelTitle.substr(0,20)+'...'; 495 } 496 497 // Vertical video 498 var $video = $('<div class="yesp-playlist-video" data-playing="0" data-index="'+base.info.playlist_i+'"><img src="'+img_src+'" width="200" /><div class="yesp-playlist-overlay"><div class="yesp-playlist-title">'+video.snippet.title+'</div><div class="yesp-playlist-channel">'+video.snippet.channelTitle+'</div></div><div class="yesp-playlist-current"><i class="yesp-icon yesp-icon-play"></i><span>'+base.options.now_playing_text+'</span></div></div>'); 499 500 $video.click(function(e) { 501 e.preventDefault(); 502 if(!base.options.show_controls_on_play) { 503 base.hide_controls(); 504 } 505 506 base.play_video(parseFloat($(this).attr('data-index'))); 507 }); 508 if(base.options.show_channel_in_playlist == false) { 509 $video.find('.yesp-playlist-channel').remove(); 510 } 511 $video.insertBefore(base.$el.find('.yesp-playlist .yesp-next-page')); 512 base.$el.find('.yesp-playlist, .yesp-hp').css('background-image', 'none'); 513 514 // Horizontal video 515 var video_title = video.snippet.title; 516 517 if(video_title.length > 45) { 518 video_title = video.snippet.title.substring(0, 45) + '...'; 519 } 520 521 var $video_hp = $('<div class="yesp-hp-video" data-playing="0" data-index="'+base.info.playlist_i+'"><img src="'+img_src+'" width="200" /><div class="yesp-hp-overlay"><div class="yesp-hp-title">'+video_title+'</div><div class="yesp-hp-channel">'+video.snippet.channelTitle+'</div></div><div class="yesp-hp-current"><i class="yesp-icon yesp-icon-play"></i><span>'+base.options.now_playing_text+'</span></div></div>'); 522 523 $video_hp.click(function(e) { 524 e.preventDefault(); 525 if(!base.options.show_controls_on_play) { 526 base.hide_controls(); 527 } 528 529 base.play_video(parseFloat($(this).attr('data-index'))); 530 }); 531 if(base.options.show_channel_in_playlist == false) { 532 $video_hp.find('.yesp-hp-channel').remove(); 533 } 534 $video_hp.insertBefore(base.$el.find('.yesp-hp .yesp-hp-next-page')); 535 536 } 537 538 base.$el.find('.yesp-hp-videos').css('width', (base.info.playlist_i)*160+50); 539 540 if(through_pagination === false) { 541 base.$el.find('.yesp-playlist').perfectScrollbar({ 542 'suppressScrollX': true 543 }); 544 545 base.$el.find('.yesp-hp').perfectScrollbar({ 546 'suppressScrollY': true, 547 'useBothWheelAxes': true 548 }); 549 base.resize(false, true); 550 } 551 552 if(through_pagination === true) { 553 setTimeout(function() { 554 base.update_scroll_position(false, Math.floor(base.info.playlist_width/16*9)*(base.playlist_count-count)); 555 }, 10); 556 557 // base.update_scroll_position 558 } 559 return { 560 'items': items, 561 'count': count, 562 }; 563 // base.set_playlist_width(100);
564 // base.create_youtube_element(); 565 }; 566 567 base.check_youtube_api_ready = function() { 568 if(!base.info.alternative_api_ready_check) { 569 if(!$('body').hasClass('yesp-youtube-iframe-ready')) { 570 return false; 571 } 572 }else { 573 // YT not an object 574 if(typeof(YT) !== typeof({})) { 575 return false; 576 } 577 578 // YT not loaded 579 if(YT.loaded == 0) { 580 return false; 581 } 582 } 583 584 // It's loaded! 585 return true; 586 }; 587 588 base.create_youtube_element = function() { 589 // If youtube isn't ready, try again in 10ms 590 if(!base.check_youtube_api_ready()) { 591 setTimeout(base.create_youtube_element, 10); 592 return; 593 } 594 595 if(base.info.youtube_loaded) { 596 return; 597 } 598 base.info.youtube_loaded = true; 599 600 var vars = { 601 'controls': 0, 602 'showinfo': 0, 603 'fullscreen': 0, 604 'iv_load_policy': base.options.show_annotations ? 1 : 3, 605 'fs': 0, 606 // height: 390, 607 // width: 640, 608 // 'vq': 'hd720', // will force hd video 609 'wmode': 'opaque' 610 }; 611 612 if(base.options.force_hd) { 613 vars.vq = 'hd720'; 614 } 615 616 if(base.options.hide_youtube_logo) { 617 vars.modestbranding = 1; 618 } 619 620 for(var i in base.options.player_vars) { 621 vars[i] = base.options.player_vars[i]; 622 } 623 624 // Force HTTPS, otherwise it will randomly return errors 625 window.YTConfig = { 626 'host': 'https://www.youtube.com' 627 }; 628 629 base.youtube = new YT.Player(base.id+'_yt', { 630 // fullscreen: 0, 631 // iv_load_policy: 3, 632 // fs: 0, 633 // videoId: base.playlist_items[0].snippet.resourceId.videoId, 634 playerVars: vars, 635 events: { 636 'onReady': base.youtube_ready, 637 'onStateChange': base.youtube_state_change 638 } 639 }); 640 641 642 643 }; 644 645 base.youtube_ready = function() { 646 setInterval(base.youtube_player_updates, 500); 647 // Load first video 648 if(base.playlist_count == 0) { 649 return; 650 } 651 base.play_video(base.options.first_video, !base.options.autoplay, true); 652 if(base.options.volume !== false) { 653 base.update_volume(0, base.options.volume); 654 } 655 656 base.$el.find('.yesp-container').hover(function() { 657 base.info.hover = true; 658 base.show_controls(); 659 }, function() { 660 base.info.hover = false; 661 var s = base.youtube.getPlayerState(); 662 if(base.options.show_controls_on_pause && (s == -1 || s == 0 || s == 2 || s == 5)) { 663 // do not hide 664 }else if(base.options.show_controls_on_play) { 665 // do not hide 666 }else { 667 base.hide_controls(); 668 } 669 base.hide_share(); 670 }); 671 } 672 673 base.youtube_player_updates = function() { 674 base.info.current_time = base.youtube.getCurrentTime(); 675 676 if(!base.youtube.getCurrentTime()) { 677 base.info.current_time = 0; 678 } 679 680 base.info.duration = base.youtube.getDuration(); 681 682 if(!base.info.duration) { 683 return; 684 } 685 686 if(base.info.current_time == base.info.previous_time) { 687 return; 688 } 689 690 base.info.previous_time = base.info.current_time; 691 692 if(base.options.time_indicator == 'full') { 693 base.$controls['time'].html(base.format_time(base.info.current_time)+' / '+base.format_time(base.info.duration)); 694 }else { 695 base.$controls['time'].html(base.format_time(base.info.current_time)); 696 } 697 698 var s = Math.round(base.info.current_time); 699 if(s == 0) { 700 base.$controls['youtube'].attr('href', base.$controls['youtube'].attr('data-href')); 701 }else { 702 base.$controls['youtube'].attr('href', base.$controls['youtube'].attr('data-href')+'#t='+s); 703 } 704 705 base.info.current_video_url = base.$controls['youtube'].attr('data-href'); 706 707 var perc = 100 * base.info.current_time / base.info.duration; 708 base.$controls['time_bar_time'].css('width',perc+'%'); 709 base.$controls['time_bar_buffer'].css('width', base.youtube.getVideoLoadedFraction()*100+'%'); 710 711 base.options.on_time_update(base.info.current_time); 712 713 }; 714 715 base.youtube_state_change = function(e) { 716 var state = e.data; 717 if(state == 0) { 718 // ended 719 if(base.options.continuous) { 720 // load next video 721 base.forward(); 722 }else { 723 base.play_video(base.info.index, true); 724 base.$controls['play'].removeClass('yesp-icon-play').removeClass('yesp-icon-pause').addClass('yesp-icon-undo'); 725 base.show_controls(); 726 } 727 }else if(state == 1 || state == 3) { 728 // playing or buffering 729 base.$controls['play'].removeClass('yesp-icon-play').addClass('yesp-icon-pause').removeClass('yesp-icon-undo'); 730 }else if(state == 2) { 731 // paused 732 base.$controls['play'].addClass('yesp-icon-play').removeClass('yesp-icon-pause').removeClass('yesp-icon-undo'); 733 } 734 735 if(!base.info.first_play && state !== -1 && state !== 5) { 736 base.info.first_play = true; 737 } 738 739 base.youtube_player_updates(); 740 base.options.on_state_change(state); 741 }; 742 743 base.create_player_element = function() { 744 base.$el.css('width', '100%').addClass('yesp').html('<div class="yesp-container"><div class="yesp-autoposter"><div class="yesp-autoposter-icon"><div></div></div></div><div class="yesp-video-container"><div class="yesp-video" id="'+base.id+'_yt"></div><div class="yesp-error"></div></div></div><div class="yesp-playlist"><div class="yesp-next-page"><i class="yesp-icon yesp-icon-plus"></i>Load More</div></div><div class="yesp-hp"><div class="yesp-hp-videos"><div class="yesp-hp-next-page"><i class="yesp-icon yesp-icon-plus"></i></div></div></div>'); 745 746 base.$el.find('.yesp-video-container').click(function(e) { 747 base.play_pause(); 748 }); 749 750 if(base.options.playlist_type == "horizontal") { 751 base.$el.find('.yesp-playlist').remove(); 752 } 753 754 base.$el.find('.yesp-next-page, .yesp-hp-next-page').click(function(e) { 755 base.get_playlist_next(); 756 }); 757 758 base.$el.find('.yesp-autoposter').click(function(e) { 759 e.preventDefault(); 760 base.play(); 761 //base.$el.find('.yesp-autoposter').hide(); 762 }); 763 764 }; 765 766 base.create_controls = function() { 767 var $controls = $('<div class="yesp-controls"></div>'); 768 769 $controls.html('<div class="yesp-controls-wrapper"><a href="#" class="yesp-play yesp-icon yesp-icon-play"></a><div class="yesp-time">00:00 / 00:00</div><div class="yesp-bar"><div class="yesp-bar-buffer"></div><div class="yesp-bar-time"></div></div><div class="yesp-volume"><a href="#" class="yesp-volume-icon yesp-icon yesp-icon-volume-up" title="Toggle Mute"></a><div class="yesp-volume-bar"><div class="yesp-volume-amount"></div></div></div><a href="#" class="yesp-share yesp-icon yesp-icon-share-square-o" title="Share"></a><a href="#" target="_blank" class="yesp-youtube yesp-icon yesp-icon-youtube-play" title="Open in YouTube"></a><a href="#" class="yesp-backward yesp-icon yesp-icon-backward" title="Previous Video"></a><a href="#" class="yesp-forward yesp-icon yesp-icon-forward" title="Forward Video"></a><a href="#" class="yesp-playlist-toggle yesp-icon yesp-icon-align-justify yesp-icon-rotate-180" title="Toggle Playlist"></a><a href="#" class="yesp-fullscreen yesp-icon yesp-icon-expand" title="Toggle Fullscreen"></a></div>'); 770 771 base.$controls['play'] = $controls.find('.yesp-play'); 772 base.$controls['time'] = $controls.find('.yesp-time'); 773 base.$controls['time_bar'] = $controls.find('.yesp-bar'); 774 base.$controls['time_bar_buffer'] = $controls.find('.yesp-bar-buffer'); 775 base.$controls['time_bar_time'] = $controls.find('.yesp-bar-time'); 776 base.$controls['volume'] = $controls.find('.yesp-volume');
777 base.$controls['volume_icon'] = $controls.find('.yesp-volume-icon'); 778 base.$controls['volume_bar'] = $controls.find('.yesp-volume-bar'); 779 base.$controls['volume_amount'] = $controls.find('.yesp-volume-amount'); 780 base.$controls['share'] = $controls.find('.yesp-share'); 781 base.$controls['youtube'] = $controls.find('.yesp-youtube'); 782 base.$controls['forward'] = $controls.find('.yesp-forward'); 783 base.$controls['backward'] = $controls.find('.yesp-backward'); 784 base.$controls['playlist_toggle'] = $controls.find('.yesp-playlist-toggle'); 785 base.$controls['fullscreen'] = $controls.find('.yesp-fullscreen'); 786 787 if(!base.options.play_control) { 788 base.$controls['play'].hide(); 789 } 790 791 if(!base.options.time_indicator) { 792 base.$controls['time'].hide(); 793 }else if(base.options.time_indicator == 'full') { 794 base.$controls['time'].addClass('yesp-full-time'); 795 } 796 797 if(!base.options.volume_control) { 798 base.$controls['volume'].hide(); 799 } 800 801 if(!base.options.share_control) { 802 base.$controls['share'].hide(); 803 } 804 805 if(!base.options.youtube_link_control) { 806 base.$controls['youtube'].hide(); 807 } 808 809 if(!base.options.fwd_bck_control) { 810 base.$controls['backward'].hide(); 811 base.$controls['forward'].hide(); 812 } 813 814 if(!base.options.fullscreen_control) { 815 base.$controls['fullscreen'].hide(); 816 } 817 818 if(!base.options.playlist_toggle_control) { 819 base.$controls['playlist_toggle'].hide(); 820 } 821 822 $controls.appendTo(this.$el.find('.yesp-container')); 823 }; 824 825 base.create_title = function() { 826 base.$title = $('<div class="yesp-title"></div>'); 827 base.$title.html('<div class="yesp-title-wrapper"></div>'); 828 829 base.$title.appendTo(base.$el.find('.yesp-container')); 830 }; 831 832 base.update_title = function(title, channel, channel_link) { 833 if(base.options.show_channel_in_title) { 834 base.$title.find('div.yesp-title-wrapper').html('<a href="'+channel_link+'" target="_blank" class="yesp-subtitle">'+channel+'</a>'+title); 835 }else { 836 base.$title.find('div.yesp-title-wrapper').html(title); 837 } 838 839 840 }; 841 842 base.create_overlays = function() { 843 844 base.$social = $('<div class="yesp-social" data-show="0"><a href="#" class="yesp-social-button yesp-social-google yesp-icon yesp-icon-google-plus"></a><a href="#" class="yesp-social-button yesp-social-twitter yesp-icon yesp-icon-twitter"></a><a href="#" class="yesp-social-button yesp-social-facebook yesp-icon yesp-icon-facebook"></a></div>') 845 .appendTo(base.$el.find('.yesp-container')); 846 847 base.$social.find('.yesp-social-facebook').click(function(e) { 848 e.preventDefault(); 849 base.share_facebook(); 850 }); 851 base.$social.find('.yesp-social-twitter').click(function(e) { 852 e.preventDefault(); 853 base.share_twitter(); 854 }); 855 base.$social.find('.yesp-social-google').click(function(e) { 856 e.preventDefault(); 857 base.share_google(); 858 }); 859 860 }; 861 862 base.share_link = function() { 863 864 }, 865 866 base.share_facebook = function() { 867 window.open('https://www.facebook.com/sharer/sharer.php?u='+base.share_url(), 'Share on Facebook', "height=300,width=600"); 868 }, 869 870 base.share_twitter = function() { 871 window.open('https://twitter.com/home?status='+base.share_url(), 'Share on Twitter', "height=300,width=600"); 872 }, 873 874 base.share_google = function() { 875 window.open('https://plus.google.com/share?url='+base.share_url(), 'Share on Google+', "height=300,width=600"); 876 }, 877 878 base.bind_controls = function() { 879 880 base.$controls['play'].click(function(e) { 881 e.preventDefault(); 882 base.play_pause(); 883 }); 884 885 base.$controls['volume_icon'].click(function(e) { 886 e.preventDefault(); 887 if(base.youtube.isMuted()) { 888 // unmute 889 if(base.info.volume == 0) { 890 base.info.volume = base.options.volume; 891 } 892 893 base.update_volume(0, base.info.volume); 894 }else { 895 // mute 896 var previous_vol = base.youtube.getVolume()/100; 897 base.update_volume(0, 0); 898 base.info.volume = previous_vol; 899 } 900 }); 901 902 base.$controls['share'].click(function(e) { 903 e.preventDefault(); 904 base.toggle_share(); 905 }); 906 907 base.$controls['youtube'].click(function(e) { 908 base.pause(); 909 }); 910 911 base.$controls['backward'].click(function(e) { 912 e.preventDefault(); 913 base.backward(); 914 }); 915 916 base.$controls['forward'].click(function(e) { 917 e.preventDefault(); 918 base.forward(); 919 }); 920 921 base.$controls['fullscreen'].click(function(e) { 922 e.preventDefault(); 923 if(base.info.fullscreen) { 924 // exit fullscreen 925 base.exit_fullscreen(true); 926 }else { 927 // enter fullscreen 928 base.enter_fullscreen(); 929 } 930 931 }); 932 933 base.$controls['playlist_toggle'].click(function(e) { 934 e.preventDefault(); 935 base.toggle_playlist(); 936 }); 937 938 }; 939 940 base.show_controls = function() { 941 942 base.$title.stop().animate({ 943 'opacity': 1 944 }, 250); 945 946 base.$el.find('.yesp-controls').stop().animate({ 947 'bottom': 0, 948 'opacity': 1, 949 }, 250); 950 }; 951 952 base.hide_controls = function(opacity) { 953 // opacity = true; 954 if(typeof(opacity) !== 'undefined' && opacity == true) { 955 base.$el.find('.yesp-controls').stop().animate({ 956 'bottom': 0, 957 'opacity': 0, 958 }, 250); 959 }else { 960 base.$el.find('.yesp-controls').stop().animate({ 961 'bottom': -50 962 }, 250); 963 } 964 965 966 967 // Never hide the title for ios 968 if(base.info.ios) { 969 return; 970 } 971 972 base.$title.stop().animate({ 973 'opacity': 0 974 }, 250); 975 }; 976 977 978 979 base.play_pause = function() { 980 var state = base.youtube.getPlayerState(); 981 if(state == 2) { 982 // paused 983 base.play(); 984 }else if(state == 0) { 985 // stopped 986 base.youtube.seekTo(0); 987 base.play(); 988 }else if(state == 5) { 989 // cueued 990 // base.youtube.seekTo(0); 991 base.play(); 992 }else { 993 // playing or buffering 994 base.pause(); 995 } 996 }; 997 998 base.play = function() { 999 base.youtube.playVideo(); 1000 base.$el.find('.yesp-autoposter').hide(); 1001 base.$controls['play'].removeClass('yesp-icon-play').addClass('yesp-icon-pause').removeClass('yesp-icon-undo'); 1002 // base.options.on_play(); 1003 }; 1004 1005 base.pause = function() { 1006 base.youtube.pauseVideo(); 1007 base.$controls['play'].addClass('yesp-icon-play').removeClass('yesp-icon-pause').removeClass('yesp-icon-undo'); 1008 // base.options.on_pause(); 1009 }; 1010 1011 base.stop = function() { 1012 base.pause(); 1013 base.youtube.stopVideo(); 1014 }; 1015 1016 base.forward = function() { 1017 base.info.index++; 1018 if(base.info.index >= base.playlist_count) { 1019 base.info.index = 0; 1020 } 1021 base.play_video(base.info.index); 1022 }; 1023 1024 base.backward = function() { 1025 base.info.index--; 1026 if(base.info.index < 0) { 1027 base.info.index = base.playlist_count-1; 1028 } 1029 base.play_video(base.info.index); 1030 }; 1031 1032 base.play_video = function(index, cue, fast_scroll) { 1033 var video = base.playlist_items[index]; 1034 if(video == undefined) { 1035 return; 1036 } 1037 if(typeof(fast_scroll) === typeof(undefined)) { 1038 fast_scroll = false;
1039 } 1040 if(base.info.mobile && !base.info.first_play) { 1041 cue = true; 1042 } 1043 var title = "", //video.snippet.title, 1044 channel = video.snippet.channelTitle, 1045 channel_link = 'https://www.youtube.com/channel/'+video.snippet.channelId, 1046 video_id = video.snippet.resourceId.videoId, 1047 video_link = 'https://www.youtube.com/watch?v='+video_id; 1048 1049 base.update_title(title, channel, channel_link); 1050 if(typeof(cue) == 'undefined' || cue == false) { 1051 base.youtube.loadVideoById(video_id); 1052 }else { 1053 base.youtube.cueVideoById(video_id); 1054 } 1055 1056 base.$controls['youtube'].attr('href', video_link).attr('data-href', video_link); 1057 base.info.current_video_url = video_link; 1058 1059 base.$el.find('.yesp-playlist-video').attr('data-playing', '0'); 1060 base.$el.find('.yesp-playlist-video[data-index='+index+']').attr('data-playing', '1'); 1061 1062 base.$el.find('.yesp-hp-video').attr('data-playing', '0'); 1063 base.$el.find('.yesp-hp-video[data-index='+index+']').attr('data-playing', '1'); 1064 1065 if(base.options.time_indicator == 'full') { 1066 base.$controls['time'].html('00:00 / 00:00'); 1067 }else { 1068 base.$controls['time'].html('00:00'); 1069 } 1070 1071 base.$controls['time_bar_time'].css('width', 0); 1072 base.$controls['time_bar_buffer'].css('width', 0); 1073 1074 base.info.index = index; 1075 1076 base.update_scroll_position(fast_scroll); 1077 1078 if(cue === true && !base.info.mobile) { 1079 // show hi-res image 1080 var img_src = false; 1081 if(typeof(video.snippet.thumbnails.maxres) !== 'undefined') { 1082 img_src = video.snippet.thumbnails.maxres.url; 1083 }else if(typeof(video.snippet.thumbnails.high) !== 'undefined') { 1084 img_src = video.snippet.thumbnails.high.url; 1085 }else if(typeof(video.snippet.thumbnails.medium) !== 'undefined') { 1086 img_src = video.snippet.thumbnails.medium.url; 1087 }else if(typeof(video.snippet.thumbnails.standard) !== 'undefined') { 1088 img_src = video.snippet.thumbnails.standard.url; 1089 }else if(typeof(video.snippet.thumbnails.default) !== 'undefined') { 1090 img_src = video.snippet.thumbnails.default.url; 1091 } 1092 if(img_src !== false) { 1093 base.$el.find('.yesp-autoposter').css('background-image', 'url("'+img_src+'")').show(); 1094 } 1095 1096 }else { 1097 base.$el.find('.yesp-autoposter').hide(); 1098 } 1099 1100 base.options.on_load(video.snippet); 1101 1102 }; 1103 1104 base.update_scroll_position = function(fast, force_scroll) { 1105 if(base.options.playlist_type === 'horizontal') { 1106 var scroll_to = 160*base.info.index; 1107 if(typeof(force_scroll) !== typeof(undefined)) { 1108 scroll_to = force_scroll; 1109 } 1110 1111 if(fast == true) { 1112 base.$el.find('.yesp-hp').scrollLeft(scroll_to); 1113 base.$el.find('.yesp-hp').perfectScrollbar('update'); 1114 }else { 1115 base.$el.find('.yesp-hp').stop().animate({ 1116 scrollLeft: scroll_to 1117 }, 500, function() { 1118 base.$el.find('.yesp-hp').perfectScrollbar('update'); 1119 }); 1120 } 1121 return; 1122 } 1123 var scroll_to = Math.floor(base.info.playlist_width/16*9)*base.info.index; 1124 if(typeof(force_scroll) !== typeof(undefined)) { 1125 scroll_to = force_scroll; 1126 } 1127 if(scroll_to < 0) { scroll_to = 0; } 1128 1129 var playlist_height = base.$el.find('.yesp-playlist').innerHeight(), 1130 item_heights = Math.floor(base.info.playlist_width/16*9)*base.playlist_count; 1131 1132 var max_scroll = item_heights-playlist_height; 1133 if(base.info.next_page_token) { 1134 max_scroll += 50; 1135 } 1136 if(scroll_to > max_scroll) { 1137 scroll_to = max_scroll; 1138 } 1139 1140 if(fast == true) { 1141 base.$el.find('.yesp-playlist').scrollTop(scroll_to); 1142 base.$el.find('.yesp-playlist').perfectScrollbar('update'); 1143 }else { 1144 base.$el.find('.yesp-playlist').stop().animate({ 1145 scrollTop: scroll_to 1146 }, 500, function() { 1147 base.$el.find('.yesp-playlist').perfectScrollbar('update'); 1148 }); 1149 } 1150 } 1151 1152 // base.play_video_index = function(index) { 1153 // // var video = base.playlist_items[index]; 1154 // base.play_video(index); 1155 // }; 1156 1157 base.toggle_fullscreen = function() { 1158 if(base.info.fullscreen) { 1159 base.exit_fullscreen(true); 1160 }else { 1161 base.enter_fullscreen() 1162 } 1163 }; 1164 1165 base.enter_fullscreen = function() { 1166 1167 if(base.info.mobile) { 1168 1169 } 1170 1171 var requestFullScreen = base.$el.find('.yesp-container')[0].webkitRequestFullScreen || base.$el.find('.yesp-container')[0].requestFullScreen || base.$el.find('.yesp-container')[0].mozRequestFullScreen; 1172 if(!requestFullScreen) { 1173 return; 1174 } 1175 1176 var w = $(window).width(), 1177 h = $(window).height(); 1178 1179 base.info.fullscreen = true; 1180 1181 base.$el.find('.yesp-container, .yesp-container iframe').css({ 1182 'width': '100%', 1183 'height': '100%' 1184 }); 1185 base.youtube.setSize(w, h); 1186 requestFullScreen.bind(base.$el.find('.yesp-container')[0])(); 1187 }; 1188 1189 base.exit_fullscreen = function(exit) { 1190 if(typeof(exit) !== 'undefined' && exit) { 1191 if (document.exitFullscreen) { 1192 document.exitFullscreen(); 1193 } 1194 else if (document.mozCancelFullScreen) { 1195 document.mozCancelFullScreen(); 1196 } 1197 else if (document.webkitCancelFullScreen) { 1198 document.webkitCancelFullScreen(); 1199 } 1200 else if (document.msExitFullscreen) { 1201 document.msExitFullscreen(); 1202 } 1203 } 1204 base.info.fullscreen = false;
1205 base.resize(); 1206 // base.show_controls(); 1207 }; 1208 1209 base.toggle_playlist = function() { 1210 if(base.options.playlist_type === 'horizontal') { 1211 if(base.info.horizontal_playlist_shown) { 1212 base.hide_horizontal_playlist(); 1213 }else { 1214 base.show_horizontal_playlist(); 1215 } 1216 }else { 1217 if(base.info.playlist_shown) { 1218 base.hide_playlist(false); 1219 }else { 1220 base.show_playlist(false); 1221 } 1222 if(base.options.show_playlist !== 'auto') { 1223 base.resize(); 1224 } 1225 } 1226 1227 }; 1228 1229 base.show_playlist = function(fast, resize) { 1230 if(base.options.playlist_type == 'horizontal') { 1231 return; 1232 } 1233 if(typeof(resize) == typeof(undefined)) { 1234 resize = true; 1235 } 1236 fast = true; 1237 if(base.info.playlist_animating) { 1238 return; 1239 } 1240 base.info.playlist_animating = true; 1241 var $p = base.$el.find('.yesp-playlist'), 1242 w = 0; 1243 1244 base.$el.find('.yesp-icon-list').removeClass('yesp-icon-list').addClass('yesp-icon-align-justify'); 1245 1246 if(fast) { 1247 $p.css('width', base.info.playlist_width); 1248 base.info.playlist_shown = true; 1249 base.info.playlist_animating = false; 1250 if(resize) { 1251 base.resize(true); 1252 } 1253 return; 1254 } 1255 }; 1256 1257 base.hide_playlist = function(fast, resize) { 1258 if(typeof(resize) == typeof(undefined)) { 1259 resize = true; 1260 } 1261 fast = true; 1262 if(base.info.playlist_animating) { 1263 return; 1264 } 1265 base.info.playlist_animating = true; 1266 1267 var $p = base.$el.find('.yesp-playlist'); 1268 1269 if(base.options.playlist_type == 'vertical') { 1270 base.$el.find('.yesp-icon-align-justify').removeClass('yesp-icon-align-justify').addClass('yesp-icon-list'); 1271 } 1272 1273 1274 if(fast) { 1275 1276 $p.css('width', 0); 1277 base.info.playlist_shown = false; 1278 base.info.playlist_animating = false; 1279 if(resize) { 1280 base.resize(true); 1281 } 1282 return; 1283 } 1284 }; 1285 1286 base.show_horizontal_playlist = function() { 1287 base.info.horizontal_playlist_shown = true; 1288 base.$el.find('.yesp-hp').show(); 1289 base.$el.find('.yesp-icon-list').removeClass('yesp-icon-list').addClass('yesp-icon-align-justify'); 1290 }; 1291 1292 base.hide_horizontal_playlist = function() { 1293 base.info.horizontal_playlist_shown = false; 1294 base.$el.find('.yesp-hp').hide(); 1295 base.$el.find('.yesp-icon-align-justify').removeClass('yesp-icon-align-justify').addClass('yesp-icon-list'); 1296 }; 1297 1298 base.set_playlist_width = function(width) { 1299 if(base.info.playlist_shown) { 1300 base.info.playlist_width = width; 1301 } 1302 1303 var height = Math.floor(width/16*9); 1304 1305 base.$el 1306 .find('.yesp-playlist').css({ 1307 'width': width 1308 }) 1309 .find('.yesp-playlist-video').css({ 1310 'width': width, 1311 'height': height 1312 }); 1313 1314 base.$el.find('.yesp-playlist .yesp-playlist-current').css('width', width-20); 1315 1316 1317 if(width <= 100) { 1318 1319 base.$el.find('.yesp-playlist').addClass('yesp-playlist-simple'); 1320 base.$el.find('.yesp-playlist .yesp-playlist-current').css('width', 10); 1321 }else { 1322 base.$el.find('.yesp-playlist').removeClass('yesp-playlist-simple'); 1323 } 1324 1325 } 1326 1327 base.resize = function(avoid_playlist, force_update) { 1328 1329 // when undefined or object (from window.resize) 1330 if(typeof(avoid_playlist) == typeof(undefined) || typeof(avoid_playlist) == typeof({})) { 1331 avoid_playlist = false; 1332 } 1333 1334 var width = base.$el.innerWidth(); 1335 1336 if(base.options.show_playlist == 'auto' && avoid_playlist == false) { 1337 1338 if(width < 660 && (force_update == true || base.info.playlist_width == 200)) { 1339 base.set_playlist_width(100); 1340 base.update_scroll_position(true); 1341 } 1342 if(width < 500 && (force_update == true || base.info.playlist_shown == true)) { 1343 base.hide_playlist(false, false); 1344 base.update_scroll_position(true); 1345 } 1346 1347 if(width >= 500 && (force_update == true || base.info.playlist_shown == false)) { 1348 base.show_playlist(false, false); 1349 base.update_scroll_position(true); 1350 } 1351 if(width >= 660 && (force_update == true || base.info.playlist_width == 100)) { 1352 base.set_playlist_width(200); 1353 base.update_scroll_position(true); 1354 } 1355 }else if(avoid_playlist == false) { 1356 force_update = true; 1357 if(width < 660 && (force_update == true || base.info.playlist_width == 200)) { 1358 base.set_playlist_width(100); 1359 base.update_scroll_position(true); 1360 } 1361 1362 if(width >= 660 && (force_update == true || base.info.playlist_width == 100)) { 1363 base.set_playlist_width(200); 1364 base.update_scroll_position(true); 1365 } 1366 1367 if(base.info.playlist_shown == false) { 1368 base.hide_playlist(true, false); 1369 } 1370 1371 } 1372 1373 var controls_width = width - (base.info.playlist_shown ? base.info.playlist_width : 0), 1374 height = controls_width/16*9; 1375 1376 if(base.info.fullscreen) { 1377 width = $(window).width(); 1378 controls_width = width; 1379 height = $(window).height(); 1380 } 1381 1382 // if(!base.info.fullscreen) { 1383 base.$el.find('.yesp-container, .yesp-playlist, .yesp-video').css('height', height); 1384 base.$el.find('.yesp-container, .yesp-video').css('width', controls_width); 1385 1386 base.$el.find('.yesp-playlist').perfectScrollbar('update'); 1387 //base.$el.find('.yesp-playlist').css('width', base.info.playlist_width); 1388 // } 1389 1390 base.info.width = controls_width; 1391 base.info.height = height; 1392
1393 //var height = base.$el.innerHeight(); 1394 1395 var bar_width = controls_width - 20; // Minus the padding 1396 1397 // Remove options if the width is too small 1398 if(controls_width < 600) { 1399 if(base.options.time_indicator == 'full') { 1400 base.options.time_indicator = true; 1401 base.$controls['time'].html(base.format_time(base.info.current_time)); 1402 base.$controls['time'].removeClass('yesp-full-time'); 1403 } 1404 } 1405 if(controls_width < 530) { 1406 base.options.fwd_bck_control = false; 1407 base.options.youtube_link_control = false; 1408 base.$controls['forward'].hide(); 1409 base.$controls['backward'].hide(); 1410 base.$controls['youtube'].hide(); 1411 } 1412 if(controls_width < 400) { 1413 base.options.volume_control = false; 1414 base.$controls['volume'].hide(); 1415 1416 } 1417 if(controls_width < 300) { 1418 base.options.time_indicator = false; 1419 base.$controls['time'].hide(); 1420 1421 base.options.share_control = false; 1422 base.$controls['share'].hide(); 1423 } 1424 1425 // Add options from when width was too small 1426 if(controls_width >= 300 && (base.options_copy.time_indicator == true || base.options_copy.time_indicator == 'full')) { 1427 base.options.time_indicator = true; 1428 base.$controls['time'].show(); 1429 } 1430 if(controls_width >= 300 && base.options_copy.share_control == true) { 1431 base.options.share_control = true; 1432 base.$controls['share'].show(); 1433 } 1434 if(controls_width >= 400 && base.options_copy.volume_control == true) { 1435 base.options.volume_control = true; 1436 base.$controls['volume'].show(); 1437 } 1438 if(controls_width >= 530 && base.options_copy.fwd_bck_control == true) { 1439 base.options.fwd_bck_control = true; 1440 base.$controls['forward'].show(); 1441 base.$controls['backward'].show(); 1442 } 1443 if(controls_width >= 530 && base.options_copy.youtube_link_control == true) { 1444 base.options.youtube_link_control = true; 1445 base.$controls['youtube'].show(); 1446 } 1447 if(controls_width >= 600 && base.options_copy.time_indicator == 'full') { 1448 base.options.time_indicator = 'full'; 1449 base.$controls['time'].html(base.format_time(base.info.current_time)+' / '+base.format_time(base.info.duration)); 1450 base.$controls['time'].addClass('yesp-full-time'); 1451 } 1452 1453 1454 if(base.options.play_control) { 1455 bar_width -= 30; 1456 } 1457 1458 if(base.options.time_indicator) { 1459 bar_width -= 58; 1460 } 1461 1462 if(base.options.time_indicator == 'full') { 1463 bar_width -= 40; 1464 } 1465 1466 if(base.options.volume_control) { 1467 bar_width -= 110; 1468 } 1469 1470 if(base.options.share_control) { 1471 bar_width -= 30; 1472 } 1473 1474 if(base.options.youtube_link_control) { 1475 bar_width -= 30; 1476 } 1477 1478 if(base.options.fwd_bck_control) { 1479 bar_width -= 60; 1480 } 1481 1482 if(base.options.fullscreen_control) { 1483 bar_width -= 30; 1484 } 1485 1486 if(base.options.playlist_toggle_control) { 1487 bar_width -= 30; 1488 } 1489 1490 bar_width -= 18; // Minus the bar's margin; 1491 1492 base.$controls['time_bar'].css('width', bar_width); 1493 1494 1495 1496 }; 1497 1498 base.init_time_slider = function() { 1499 base.$controls['time_bar'].on('mousedown', function(e) { 1500 base.info.time_drag = true; 1501 base.update_time_slider(e.pageX); 1502 }); 1503 $(document).on('mouseup', function(e) { 1504 if(base.info.time_drag) { 1505 base.info.time_drag = false; 1506 base.update_time_slider(e.pageX); 1507 } 1508 }); 1509 $(document).on('mousemove', function(e) { 1510 if(base.info.time_drag) { 1511 base.update_time_slider(e.pageX); 1512 } 1513 }); 1514 }; 1515 1516 base.update_time_slider = function(x) { 1517 1518 if(base.info.duration == 0) { 1519 return; 1520 } 1521 1522 var maxduration = base.info.duration; 1523 var position = x - base.$controls['time_bar'].offset().left; 1524 var percentage = 100 * position / base.$controls['time_bar'].width(); 1525 1526 if(percentage > 100) { 1527 percentage = 100; 1528 } 1529 if(percentage < 0) { 1530 percentage = 0; 1531 } 1532 base.$controls['time_bar_time'].css('width',percentage+'%'); 1533 base.youtube.seekTo(maxduration * percentage / 100); 1534 1535 base.options.on_seek(maxduration * percentage / 100); 1536 1537 }; 1538 1539 base.init_volume_slider = function() { 1540 base.$controls['volume_bar'].on('mousedown', function(e) { 1541 base.info.volume_drag = true; 1542 base.$controls['volume_icon'].removeClass('yesp-icon-volume-off').addClass('yesp-icon-volume-up'); 1543 base.update_volume(e.pageX); 1544 }); 1545 $(document).on('mouseup', function(e) { 1546 if(base.info.volume_drag) { 1547 base.info.volume_drag = false;
1548 base.update_volume(e.pageX); 1549 } 1550 }); 1551 $(document).on('mousemove', function(e) { 1552 if(base.info.volume_drag) { 1553 base.update_volume(e.pageX); 1554 } 1555 }); 1556 }; 1557 1558 base.update_volume = function(x, vol) { 1559 1560 var percentage; 1561 1562 if(vol) { 1563 percentage = vol * 100; 1564 } 1565 else { 1566 var position = x - base.$controls['volume_bar'].offset().left; 1567 percentage = 100 * position / base.$controls['volume_bar'].width(); 1568 } 1569 1570 if(percentage > 100) { 1571 percentage = 100; 1572 } 1573 if(percentage < 0) { 1574 percentage = 0; 1575 } 1576 1577 base.$controls['volume_amount'].css('width',percentage+'%'); 1578 1579 base.youtube.setVolume(percentage); 1580 1581 if(percentage == 0) { 1582 base.youtube.mute(); 1583 }else if(base.youtube.isMuted()) { 1584 base.youtube.unMute(); 1585 } 1586 1587 if(percentage == 0) { 1588 base.$controls['volume_icon'].addClass('yesp-icon-volume-off').removeClass('yesp-icon-volume-up'); 1589 }else { 1590 base.$controls['volume_icon'].removeClass('yesp-icon-volume-off').addClass('yesp-icon-volume-up'); 1591 } 1592 1593 base.options.on_volume(percentage/100); 1594 1595 }; 1596 1597 base.toggle_share = function() { 1598 if(base.$social.attr('show') == '1') { 1599 base.hide_share(); 1600 }else { 1601 base.show_share(); 1602 } 1603 }; 1604 1605 base.show_share = function() { 1606 base 1607 .$social.attr('show', '1') 1608 .stop() 1609 .animate({ 1610 right: 10 1611 }, 200); 1612 }; 1613 1614 base.hide_share = function() { 1615 base 1616 .$social.attr('show', '0') 1617 .stop() 1618 .animate({ 1619 right: -140 1620 }, 200); 1621 }; 1622 1623 base.set_style = function() { 1624 var $s = $('<style />'); 1625 1626 var default_colors = { 1627 controls_bg: 'rgba(0,0,0,.75)', 1628 buttons: 'rgba(255,255,255,.5)', 1629 buttons_hover: 'rgba(255,255,255,1)', 1630 buttons_active: 'rgba(255,255,255,1)', 1631 time_text: '#FFFFFF', 1632 bar_bg: 'rgba(255,255,255,.5)', 1633 buffer: 'rgba(255,255,255,.25)', 1634 fill: '#FFFFFF', 1635 video_title: '#FFFFFF', 1636 video_channel: '#DFF76D', 1637 playlist_overlay: 'rgba(0,0,0,.5)', 1638 playlist_title: '#FFFFFF', 1639 playlist_channel: '#DFF76D', 1640 scrollbar: '#FFFFFF', 1641 scrollbar_bg: 'rgba(255,255,255,.25)', 1642 load_more_bg: '#000000', 1643 load_more_text: '#FFFFFF', 1644 }; 1645 1646 for(key in base.options.colors) { 1647 default_colors[key] = base.options.colors[key]; 1648 } 1649 1650 $s.html('#'+base.id+'.yesp .yesp-controls{background:'+default_colors.controls_bg+'!important}#'+base.id+'.yesp .yesp-controls a{color:'+default_colors.buttons+'!important}#'+base.id+'.yesp .yesp-controls a:hover{color:'+default_colors.buttons_hover+'!important}#'+base.id+'.yesp .yesp-controls a:active{color:'+default_colors.buttons_active+'!important}#'+base.id+'.yesp .yesp-time{color:'+default_colors.time_text+'!important}#'+base.id+'.yesp .yesp-bar,#'+base.id+'.yesp .yesp-volume .yesp-volume-bar{background:'+default_colors.bar_bg+'!important}#'+base.id+'.yesp .yesp-bar .yesp-bar-buffer{background:'+default_colors.buffer+'!important}#'+base.id+'.yesp .yesp-bar .yesp-bar-time,#'+base.id+'.yesp .yesp-volume .yesp-volume-bar .yesp-volume-amount{background:'+default_colors.fill+'!important}#'+base.id+'.yesp .yesp-title-wrapper{color:'+default_colors.video_title+'!important}#'+base.id+'.yesp .yesp-title a.yesp-subtitle{border-color:'+default_colors.video_title+'!important}#'+base.id+'.yesp .yesp-title-wrapper a{color:'+default_colors.video_channel+'!important}#'+base.id+'.yesp .yesp-playlist-overlay,#'+base.id+'.yesp .yesp-hp-overlay,#'+base.id+'.yesp .yesp-playlist-current,#'+base.id+'.yesp .yesp-hp-current{background: '+default_colors.playlist_overlay+' !important;}#'+base.id+'.yesp .yesp-playlist-overlay .yesp-playlist-title,#'+base.id+'.yesp .yesp-hp-overlay .yesp-hp-title,#'+base.id+'.yesp .yesp-playlist-current,#'+base.id+'.yesp .yesp-hp-current{color: '+default_colors.playlist_title+' !important;}#'+base.id+'.yesp .yesp-playlist-overlay .yesp-playlist-channel,#'+base.id+'.yesp .yesp-hp-overlay .yesp-hp-channel {color: '+default_colors.playlist_channel+' !important;}#'+base.id+'.yesp .ps-scrollbar-y-rail, #'+base.id+'.yesp .ps-scrollbar-x-rail {background: '+default_colors.scrollbar_bg+' !important;}#'+base.id+'.yesp .ps-scrollbar-y,#'+base.id+'.yesp .ps-scrollbar-x {background: '+default_colors.scrollbar+' !important;}#'+base.id+'.yesp .yesp-next-page,#'+base.id+'.yesp .yesp-hp-next-page {background:'+default_colors.load_more_bg+' !important;color:'+default_colors.load_more_text+' !important;}'); 1651 $s.appendTo('body'); 1652 }; 1653 1654 base.format_time = function(seconds) { 1655 var m = Math.floor(seconds / 60) < 10 ? "0" + Math.floor(seconds / 60) : Math.floor(seconds / 60), 1656 s = Math.floor(seconds - (m * 60)) < 10 ? "0" + Math.floor(seconds - (m * 60)) : Math.floor(seconds - (m * 60)); 1657 return m + ":" + s; 1658 }; 1659 1660 base.cut_text = function(n) { 1661 return function textCutter(i, text) { 1662 var short = text.substr(0, n); 1663 if (/^\S/.test(text.substr(n))) { 1664 return short.replace(/\s+\S*$/, ""); 1665 } 1666 return short; 1667 }; 1668 }; 1669 1670 base.share_url = function() { 1671 return base.info.current_video_url; 1672 }; 1673 1674 base.detect_ie = function() { 1675 var ua = window.navigator.userAgent; 1676 var msie = ua.indexOf('MSIE '); 1677 var trident = ua.indexOf('Trident/'); 1678 1679 if (msie > 0) { 1680 return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); 1681 } 1682 1683 if (trident > 0) { 1684 var rv = ua.indexOf('rv:'); 1685 return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); 1686 } 1687 1688 // other browser 1689 return false;
1690 }; 1691 1692 base.detect_touch = function() { 1693 return !!('ontouchstart' in window) || !!('onmsgesturechange' in window); 1694 }; 1695 1696 // Run initializer 1697 base.init(); 1698 }; 1699 1700 $.youtube_video.defaultOptions = { 1701 1702 // Options 1703 playlist: false, 1704 channel: false, 1705 user: false, 1706 videos: false, 1707 api_key: 'AIzaSyDmk3oxVjtu06AwRv6oADPvcYO9tvswzm8', 1708 max_results: 50, 1709 pagination: true, // NEW IN 1.1 1710 continuous: true, 1711 first_video: 0, 1712 show_playlist: 'auto', 1713 playlist_type: 'vertical', 1714 show_channel_in_playlist: true, 1715 show_channel_in_title: true, 1716 width: false, 1717 show_annotations: false, 1718 now_playing_text: 'Now Playing', 1719 load_more_text: 'Load More', // NEW IN 1.1 1720 force_hd: false, // NEW IN 1.1 1721 hide_youtube_logo: false, // NEW IN 1.1 1722 autoplay: false, 1723 play_control: true, 1724 time_indicator: 'full', 1725 volume_control: true, 1726 share_control: true, 1727 fwd_bck_control: true, 1728 youtube_link_control: true, 1729 fullscreen_control: true, 1730 playlist_toggle_control: true, 1731 volume: false, 1732 show_controls_on_load: true, 1733 show_controls_on_pause: true, 1734 show_controls_on_play: false, 1735 player_vars: {}, 1736 colors: {}, 1737 1738 // Callbacks 1739 on_load: function(snippet) {}, 1740 on_done_loading: function(videos) {}, 1741 on_state_change: function(state) {}, 1742 on_seek: function(seconds) {}, 1743 on_volume: function(volume) {}, 1744 on_time_update: function(seconds) {}, 1745 1746 }; 1747 1748 1749 $.fn.youtube_video = function(options){ 1750 return this.each(function(){ 1751 (new $.youtube_video(this, options)); 1752 }); 1753 }; 1754 1755 // Methods 1756 1757 $.fn.youtube_video_play = function(){ 1758 return this.each(function(){ 1759 (new $.youtube_video_play(this)); 1760 }); 1761 }; 1762 1763 $.youtube_video_play = function(el){ 1764 var $el = $(el), 1765 base = $el.data("youtube_video"); 1766 base.play(); 1767 }; 1768 1769 $.fn.youtube_video_pause = function(){ 1770 return this.each(function(){ 1771 (new $.youtube_video_pause(this)); 1772 }); 1773 }; 1774 1775 $.youtube_video_pause = function(el){ 1776 var $el = $(el), 1777 base = $el.data("youtube_video"); 1778 base.pause(); 1779 }; 1780 1781 $.fn.youtube_video_stop = function(){ 1782 return this.each(function(){ 1783 (new $.youtube_video_stop(this)); 1784 }); 1785 }; 1786 1787 $.youtube_video_stop = function(el){ 1788 var $el = $(el), 1789 base = $el.data("youtube_video"); 1790 base.stop(); 1791 }; 1792 1793 $.fn.youtube_video_seek = function(t){ 1794 return this.each(function(){ 1795 (new $.youtube_video_seek(this, t)); 1796 }); 1797 }; 1798 1799 $.youtube_video_seek = function(el, seconds){ 1800 var $el = $(el), 1801 base = $el.data("youtube_video"); 1802 1803 var maxduration = base.info.duration, 1804 percentage = seconds / maxduration * 100; 1805 base.$controls['time_bar_time'].css('width',percentage+'%'); 1806 base.youtube.seekTo(maxduration * percentage / 100); 1807 base.options.on_seek(seconds); 1808 }; 1809 1810 $.fn.youtube_video_load = function(index){ 1811 return this.each(function(){ 1812 (new $.youtube_video_load(this, index)); 1813 }); 1814 }; 1815 1816 $.youtube_video_load = function(el, index){ 1817 var $el = $(el), 1818 base = $el.data("youtube_video"); 1819 1820 base.play_video(index); 1821 }; 1822 1823 1824 $.fn.youtube_video_volume = function(volume){ 1825 return this.each(function(){ 1826 (new $.youtube_video_volume(this, volume)); 1827 }); 1828 }; 1829 1830 $.youtube_video_volume = function(el, volume){ 1831 var $el = $(el), 1832 base = $el.data("youtube_video"); 1833 1834 base.update_volume(0, volume); 1835 }; 1836 1837 $.fn.youtube_show_controls = function(){ 1838 return this.each(function(){ 1839 (new $.youtube_show_controls(this)); 1840 }); 1841 }; 1842 1843 $.youtube_show_controls = function(el){ 1844 var $el = $(el), 1845 base = $el.data("youtube_video"); 1846 1847 base.show_controls(); 1848 }; 1849 1850 1851})(jQuery); 1852 1853function onYouTubeIframeAPIReady() { 1854 jQuery("body").addClass('yesp-youtube-iframe-ready'); 1855} 1856 1857var tag = document.createElement('script'); 1858tag.src = "https://www.youtube.com/iframe_api"; 1859var firstScriptTag = document.getElementsByTagName('script')[0]; 1860firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 1861 1862 1863
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.