Error log #2

gistfile1.md

A link to the page where it is deployed

After attempting to control using Session, the YouTube embedded player stops being responsive.

Here is the setting up of the YouTube API temporarily placed in the HTML file:

mixtape.html

<script>
// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

// Called automatically when YouTube API interface is loaded
function onYouTubeApiLoad() {
    gapi.client.setApiKey('AIzaSyD1VcsNnysOY6_Za-8kE-BK6Zh8jQwvo4w');
}
</script>
  <script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
  <script src= "https://www.youtube.com/iframe_api"></script>
  <script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
	console.log("playerAPIready");
    player = new YT.Player('ytplayer', {
      height: '400',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
      }
    });
 
 //console.log("loaded");
  $("#player").hide();
  }

function onPlayerReady(){
//console.log("ready");
}

function onPlayerStateChange(){
//console.log("changed");

}

function generatePlaylist(list){
	console.log("list: ", list)
	player.loadPlaylist(list);
}
  </script>

And the printing out occurs here:

<template name="player">
	<div id="player">
		<div id="ytplayer"></div>
		<div id="nav">
		    <br>
		    {{#each nav_playlist}}
				  {{> unremovable_track}}	
		    {{/each}}
		</div>
	</div>
</template>

An in mixtape.js

  Template.player.nav_playlist = function(){
	return Session.get("current_list");
  }

And here are the Session variables being given their values. These contain exactly what they should.

/*Update List on generate button*/
Template.list.updateList = function(){
	var ret = [];
        $( "#playlist .list_element" ).each(function() {
	if($(this).is(':visible')){
		ret.push(   Links.findOne({_id:$(this).attr('id')})   );
         }
	});

	var urls = [];
	for (var i = 0; i < ret.length; i++){
		urls[i] = ret[i].videoId;
	}

	Session.set("current_list",ret);
	Session.set("current_urls",urls);
}

And finally this is where the toggling happens.

  Template.header.events({
	'click #generate_button': function (evt, template){
		//bad code below:
	
	Template.list.updateList();

	if (Template.list.my_playlist().fetch().length == 0){

		alert('Your tape is empty!');
	}
	else{
		generatePlaylist(  Session.get("current_urls")  );
		$("#playlist").css('display','none');
		$("#player").fadeIn(1000);

		$(".absolute_center").hide();

		/*Things to hide*/
		$(".absolute_center2").fadeIn();

		$("#query").hide();
		$("#share").fadeOut(1000);
		$("#playlist_container").fadeOut(1000);

		$('body').animate({backgroundColor: 'rgb(53,53,53)'}, 'slow');
		$('#title').animate({color: '#fff'}, 'slow');
	}
	},

	'click #close_player': function (evt, template){		
		player.stopVideo();
		$(".absolute_center2").hide();
		$("#player").hide();
		$("#playlist").css('display','block');

		/*Things that must reappear*/
		$("#query").show();
		$("#share").fadeIn(1000);
		$(".absolute_center").fadeIn(1000);
		$("#playlist_container").fadeIn(1000);

		$('body').animate({backgroundColor: '#fff'}, 'slow');
		$('#title').animate({color: '#000'}, 'slow');

	}
	
  });

Here is the GitHub page if you would like to look at the source and dig deeper