GoingOffRoading/YouTube Javascript API

## YouTube Javascript API
<!doctype html>
<html>
  <head>
    <title>My Uploads</title>
    <link rel="stylesheet" href="my_uploads.css" />
    <style>
      .paging-button {
        visibility: hidden;
      }

      .video-content {
        width: 200px;
        height: 200px;
        background-position: center;
        background-repeat: no-repeat;
        float: left;
        position: relative;
        margin: 5px;
      }

      .video-title {
        width: 100%;
        text-align: center;
        background-color: rgba(0, 0, 0, .5);
        color: white;
        top: 50%;
        left: 50%;
        position: absolute;
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      .video-content:nth-child(3n+1) {
        clear: both;
      }

      .button-container {
        clear: both;
      }
      </style>
      <script>
        //This is the Authorization by Client ID http://d.pr/i/mEmY
        // The client id is obtained from the Google APIs Console at https://code.google.com/apis/console
        // If you run access this code from a server other than http://localhost, you need to register
        // your own client id.
        var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
        var OAUTH2_SCOPES = [
          'https://www.googleapis.com/auth/youtube'
        ];

        // This callback is invoked by the Google APIs JS client automatically when it is loaded.
        googleApiClientReady = function() {
          gapi.auth.init(function() {
            window.setTimeout(checkAuth, 1);
          });
        }

        // Attempt the immediate OAuth 2 client flow as soon as the page is loaded.
        // If the currently logged in Google Account has previously authorized OAUTH2_CLIENT_ID, then
        // it will succeed with no user intervention. Otherwise, it will fail and the user interface
        // to prompt for authorization needs to be displayed.
        function checkAuth() {
          gapi.auth.authorize({
            client_id: OAUTH2_CLIENT_ID,
            scope: OAUTH2_SCOPES,
            immediate: true
          }, handleAuthResult);
        }

        // Handles the result of a gapi.auth.authorize() call.
        function handleAuthResult(authResult) {
          if (authResult) {
            // Auth was successful; hide the things related to prompting for auth and show the things
            // that should be visible after auth succeeds.
            $('.pre-auth').hide();
            loadAPIClientInterfaces();
          } else {
            // Make the #login-link clickable, and attempt a non-immediate OAuth 2 client flow.
            // The current function will be called when that flow is complete.
            $('#login-link').click(function() {
              gapi.auth.authorize({
                client_id: OAUTH2_CLIENT_ID,
                scope: OAUTH2_SCOPES,
                immediate: false
                }, handleAuthResult);
            });
          }
        }

        // Loads the client interface for the YouTube Analytics and Data APIs.
        // This is required before using the Google APIs JS client; more info is available at
        // http://code.google.com/p/google-api-javascript-client/wiki/GettingStarted#Loading_the_Client
        function loadAPIClientInterfaces() {
          gapi.client.load('youtube', 'v3', function() {
            handleAPILoaded();
          });
        }


      //This is the uploads script
      // Some variables to remember state.
      var playlistId, nextPageToken, prevPageToken;

      // Once the api loads call a function to get the uploads playlist id.
      function handleAPILoaded() {
        requestUserUploadsPlaylistId();
      }

      //Retrieve the uploads playlist id.
      function requestUserUploadsPlaylistId() {
        // https://developers.google.com/youtube/v3/docs/channels/list
        var request = gapi.client.youtube.channels.list({
          // mine: '' indicates that we want to retrieve the channel for the authenticated user.
          mine: '',
          part: 'contentDetails'
        });
        request.execute(function(response) {
          playlistId = response.result.items[0].contentDetails.uploads;
          requestVideoPlaylist(playlistId);
        });
      }

      // Retrieve a playist of videos.
      function requestVideoPlaylist(playlistId, pageToken) {
        $('#video-container').html('');
        var requestOptions = {
          playlistId: playlistId,
          part: 'snippet',
          maxResults: 9
        };
        if (pageToken) {
          requestOptions.pageToken = pageToken;
        }
        var request = gapi.client.youtube.playlistItems.list(requestOptions);
        request.execute(function(response) {
          // Only show the page buttons if there's a next or previous page.
          nextPageToken = response.result.nextPageToken;
          var nextVis = nextPageToken ? 'visible' : 'hidden';
          $('#next-button').css('visibility', nextVis);
          prevPageToken = response.result.prevPageToken
          var prevVis = prevPageToken ? 'visible' : 'hidden';
          $('#prev-button').css('visibility', prevVis);

          var playlistItems = response.result.items;
          if (playlistItems) {
            // For each result lets show a thumbnail.
            jQuery.each(playlistItems, function(index, item) {
              createDisplayThumbnail(item.snippet);
            });
          } else {
            $('#video-container').html('Sorry you have no uploaded videos');
          }
        });
      }


      // Create a thumbnail for a video snippet.
      function createDisplayThumbnail(videoSnippet) {
        var titleEl = $('<h3>');
        titleEl.addClass('video-title');
        $(titleEl).html(videoSnippet.title);
        var thumbnailUrl = videoSnippet.thumbnails.medium.url;

        var div = $('<div>');
        div.addClass('video-content');
        div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
        div.append(titleEl);
        $('#video-container').append(div);
      }

      // Retrieve the next page of videos.
      function nextPage() {
        requestVideoPlaylist(playlistId, nextPageToken);
      }

      // Retrieve the previous page of videos.
      function previousPage() {
        requestVideoPlaylist(playlistId, prevPageToken);
      }
    </script>
  </head>
  <body>
    <div id="login-container" class="pre-auth">This application requires access to your YouTube account.
      Please <a href="#" id="login-link">authorize</a> to continue.
    </div>
    <div id="video-container">
    </div>
    <div class="button-container">
      <button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
      <button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>My Uploads</title>
	<link rel="stylesheet" href="my_uploads.css" />
	<style>
	.paging-button {
	visibility: hidden;
	}

	.video-content {
	width: 200px;
	height: 200px;
	background-position: center;
	background-repeat: no-repeat;
	float: left;
	position: relative;
	margin: 5px;
	}

	.video-title {
	width: 100%;
	text-align: center;
	background-color: rgba(0, 0, 0, .5);
	color: white;
	top: 50%;
	left: 50%;
	position: absolute;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	}

	.video-content:nth-child(3n+1) {
	clear: both;
	}

	.button-container {
	clear: both;
	}
	</style>
	<script>
	//This is the Authorization by Client ID http://d.pr/i/mEmY
	// The client id is obtained from the Google APIs Console at https://code.google.com/apis/console
	// If you run access this code from a server other than http://localhost, you need to register
	// your own client id.
	var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
	var OAUTH2_SCOPES = [
	'https://www.googleapis.com/auth/youtube'
	];

	// This callback is invoked by the Google APIs JS client automatically when it is loaded.
	googleApiClientReady = function() {
	gapi.auth.init(function() {
	window.setTimeout(checkAuth, 1);
	});
	}

	// Attempt the immediate OAuth 2 client flow as soon as the page is loaded.
	// If the currently logged in Google Account has previously authorized OAUTH2_CLIENT_ID, then
	// it will succeed with no user intervention. Otherwise, it will fail and the user interface
	// to prompt for authorization needs to be displayed.
	function checkAuth() {
	gapi.auth.authorize({
	client_id: OAUTH2_CLIENT_ID,
	scope: OAUTH2_SCOPES,
	immediate: true
	}, handleAuthResult);
	}

	// Handles the result of a gapi.auth.authorize() call.
	function handleAuthResult(authResult) {
	if (authResult) {
	// Auth was successful; hide the things related to prompting for auth and show the things
	// that should be visible after auth succeeds.
	$('.pre-auth').hide();
	loadAPIClientInterfaces();
	} else {
	// Make the #login-link clickable, and attempt a non-immediate OAuth 2 client flow.
	// The current function will be called when that flow is complete.
	$('#login-link').click(function() {
	gapi.auth.authorize({
	client_id: OAUTH2_CLIENT_ID,
	scope: OAUTH2_SCOPES,
	immediate: false
	}, handleAuthResult);
	});
	}
	}

	// Loads the client interface for the YouTube Analytics and Data APIs.
	// This is required before using the Google APIs JS client; more info is available at
	// http://code.google.com/p/google-api-javascript-client/wiki/GettingStarted#Loading_the_Client
	function loadAPIClientInterfaces() {
	gapi.client.load('youtube', 'v3', function() {
	handleAPILoaded();
	});
	}



	//This is the uploads script
	// Some variables to remember state.
	var playlistId, nextPageToken, prevPageToken;

	// Once the api loads call a function to get the uploads playlist id.
	function handleAPILoaded() {
	requestUserUploadsPlaylistId();
	}

	//Retrieve the uploads playlist id.
	function requestUserUploadsPlaylistId() {
	// https://developers.google.com/youtube/v3/docs/channels/list
	var request = gapi.client.youtube.channels.list({
	// mine: '' indicates that we want to retrieve the channel for the authenticated user.
	mine: '',
	part: 'contentDetails'
	});
	request.execute(function(response) {
	playlistId = response.result.items[0].contentDetails.uploads;
	requestVideoPlaylist(playlistId);
	});
	}

	// Retrieve a playist of videos.
	function requestVideoPlaylist(playlistId, pageToken) {
	$('#video-container').html('');
	var requestOptions = {
	playlistId: playlistId,
	part: 'snippet',
	maxResults: 9
	};
	if (pageToken) {
	requestOptions.pageToken = pageToken;
	}
	var request = gapi.client.youtube.playlistItems.list(requestOptions);
	request.execute(function(response) {
	// Only show the page buttons if there's a next or previous page.
	nextPageToken = response.result.nextPageToken;
	var nextVis = nextPageToken ? 'visible' : 'hidden';
	$('#next-button').css('visibility', nextVis);
	prevPageToken = response.result.prevPageToken
	var prevVis = prevPageToken ? 'visible' : 'hidden';
	$('#prev-button').css('visibility', prevVis);

	var playlistItems = response.result.items;
	if (playlistItems) {
	// For each result lets show a thumbnail.
	jQuery.each(playlistItems, function(index, item) {
	createDisplayThumbnail(item.snippet);
	});
	} else {
	$('#video-container').html('Sorry you have no uploaded videos');
	}
	});
	}


	// Create a thumbnail for a video snippet.
	function createDisplayThumbnail(videoSnippet) {
	var titleEl = $('<h3>');
	titleEl.addClass('video-title');
	$(titleEl).html(videoSnippet.title);
	var thumbnailUrl = videoSnippet.thumbnails.medium.url;

	var div = $('<div>');
	div.addClass('video-content');
	div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
	div.append(titleEl);
	$('#video-container').append(div);
	}

	// Retrieve the next page of videos.
	function nextPage() {
	requestVideoPlaylist(playlistId, nextPageToken);
	}

	// Retrieve the previous page of videos.
	function previousPage() {
	requestVideoPlaylist(playlistId, prevPageToken);
	}
	</script>
	</head>
	<body>
	<div id="login-container" class="pre-auth">This application requires access to your YouTube account.
	Please <a href="#" id="login-link">authorize</a> to continue.
	</div>
	<div id="video-container">
	</div>
	<div class="button-container">
	<button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
	<button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
	</body>
	</html>