diff options
Diffstat (limited to 'zend/demos/Zend/Gdata/YouTubeVideoBrowser')
4 files changed, 737 insertions, 0 deletions
diff --git a/zend/demos/Zend/Gdata/YouTubeVideoBrowser/index.php b/zend/demos/Zend/Gdata/YouTubeVideoBrowser/index.php new file mode 100755 index 0000000..607b905 --- /dev/null +++ b/zend/demos/Zend/Gdata/YouTubeVideoBrowser/index.php @@ -0,0 +1,278 @@ +<?php +/** + * Zend Framework + * + * LICENSE + * + * This source file is subject to the new BSD license that is bundled + * with this package in the file LICENSE.txt. + * It is also available through the world-wide-web at this URL: + * http://framework.zend.com/license/new-bsd + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@zend.com so we can send you a copy immediately. + * + * @category Zend + * @package Zend_Gdata + * @subpackage Demos + * @copyright Copyright (c) 2005-2012 Zend Technologies USA Inc. (http://www.zend.com) + * @license http://framework.zend.com/license/new-bsd New BSD License + */ + +/** + * PHP sample code for the YouTube data API. Utilizes the Zend Framework + * Zend_Gdata component to communicate with the YouTube data API. + * + * Requires the Zend Framework Zend_Gdata component and PHP >= 5.2.11 + * + * This sample is run from within a web browser. These files are required: + * index.php - the main logic, which interfaces with the YouTube API + * interface.html - the HTML to represent the web UI + * web_browser.css - the CSS to define the interface style + * web_browser.js - the JavaScript used to provide the video list AJAX interface + * + * NOTE: If using in production, some additional precautions with regards + * to filtering the input data should be used. This code is designed only + * for demonstration purposes. + */ + +/** + * @see Zend_Loader + */ +require_once 'Zend/Loader.php'; + +/** + * @see Zend_Gdata_YouTube + */ +Zend_Loader::loadClass('Zend_Gdata_YouTube'); + +/** + * Finds the URL for the flash representation of the specified video + * + * @param Zend_Gdata_YouTube_VideoEntry $entry The video entry + * @return string|null The URL or null, if the URL is not found + */ +function findFlashUrl($entry) +{ + foreach ($entry->mediaGroup->content as $content) { + if ($content->type === 'application/x-shockwave-flash') { + return $content->url; + } + } + return null; +} + +/** + * Returns a feed of top rated videos for the specified user + * + * @param string $user The username + * @return Zend_Gdata_YouTube_VideoFeed The feed of top rated videos + */ +function getTopRatedVideosByUser($user) +{ + $userVideosUrl = 'https://gdata.youtube.com/feeds/users/' . + $user . '/uploads'; + $yt = new Zend_Gdata_YouTube(); + $ytQuery = $yt->newVideoQuery($userVideosUrl); + // order by the rating of the videos + $ytQuery->setOrderBy('rating'); + // retrieve a maximum of 5 videos + $ytQuery->setMaxResults(5); + // retrieve only embeddable videos + $ytQuery->setFormat(5); + return $yt->getVideoFeed($ytQuery); +} + +/** + * Returns a feed of videos related to the specified video + * + * @param string $videoId The video + * @return Zend_Gdata_YouTube_VideoFeed The feed of related videos + */ +function getRelatedVideos($videoId) +{ + $yt = new Zend_Gdata_YouTube(); + $ytQuery = $yt->newVideoQuery(); + // show videos related to the specified video + $ytQuery->setFeedType('related', $videoId); + // order videos by rating + $ytQuery->setOrderBy('rating'); + // retrieve a maximum of 5 videos + $ytQuery->setMaxResults(5); + // retrieve only embeddable videos + $ytQuery->setFormat(5); + return $yt->getVideoFeed($ytQuery); +} + +/** + * Echo img tags for the first thumbnail representing each video in the + * specified video feed. Upon clicking the thumbnails, the video should + * be presented. + * + * @param Zend_Gdata_YouTube_VideoFeed $feed The video feed + * @return void + */ +function echoThumbnails($feed) +{ + foreach ($feed as $entry) { + $videoId = $entry->getVideoId(); + echo '<img src="' . $entry->mediaGroup->thumbnail[0]->url . '" '; + echo 'width="80" height="72" onclick="ytvbp.presentVideo(\'' . $videoId . '\')">'; + } +} + +/** + * Echo the video embed code, related videos and videos owned by the same user + * as the specified videoId. + * + * @param string $videoId The video + * @return void + */ +function echoVideoPlayer($videoId) +{ + $yt = new Zend_Gdata_YouTube(); + + $entry = $yt->getVideoEntry($videoId); + $videoTitle = $entry->mediaGroup->title; + $videoUrl = findFlashUrl($entry); + $relatedVideoFeed = getRelatedVideos($entry->getVideoId()); + $topRatedFeed = getTopRatedVideosByUser($entry->author[0]->name); + + print <<<END + <b>$videoTitle</b><br /> + <object width="425" height="350"> + <param name="movie" value="${videoUrl}&autoplay=1"></param> + <param name="wmode" value="transparent"></param> + <embed src="${videoUrl}&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" + width=425" height="350"></embed> + </object> +END; + echo '<br />'; + echoVideoMetadata($entry); + echo '<br /><b>Related:</b><br />'; + echoThumbnails($relatedVideoFeed); + echo '<br /><b>Top rated videos by user:</b><br />'; + echoThumbnails($topRatedFeed); +} + +/** + * Echo video metadata + * + * @param Zend_Gdata_YouTube_VideoEntry $entry The video entry + * @return void + */ +function echoVideoMetadata($entry) +{ + $title = $entry->mediaGroup->title; + $description = $entry->mediaGroup->description; + $authorUsername = $entry->author[0]->name; + $authorUrl = 'http://www.youtube.com/profile?user=' . $authorUsername; + $tags = $entry->mediaGroup->keywords; + $duration = $entry->mediaGroup->duration->seconds; + $watchPage = $entry->mediaGroup->player[0]->url; + $viewCount = $entry->statistics->viewCount; + $rating = $entry->rating->average; + $numRaters = $entry->rating->numRaters; + $flashUrl = findFlashUrl($entry); + print <<<END + <b>Title:</b> ${title}<br /> + <b>Description:</b> ${description}<br /> + <b>Author:</b> <a href="${authorUrl}">${authorUsername}</a><br /> + <b>Tags:</b> ${tags}<br /> + <b>Duration:</b> ${duration} seconds<br /> + <b>View count:</b> ${viewCount}<br /> + <b>Rating:</b> ${rating} (${numRaters} ratings)<br /> + <b>Flash:</b> <a href="${flashUrl}">${flashUrl}</a><br /> + <b>Watch page:</b> <a href="${watchPage}">${watchPage}</a> <br /> +END; +} + +/** + * Echo the list of videos in the specified feed. + * + * @param Zend_Gdata_YouTube_VideoFeed $feed The video feed + * @return void + */ +function echoVideoList($feed) +{ + echo '<table class="videoList">'; + echo '<tbody width="100%">'; + foreach ($feed as $entry) { + $videoId = $entry->getVideoId(); + $thumbnailUrl = $entry->mediaGroup->thumbnail[0]->url; + $videoTitle = $entry->mediaGroup->title; + $videoDescription = $entry->mediaGroup->description; + print <<<END + <tr onclick="ytvbp.presentVideo('${videoId}')"> + <td width="130"><img src="${thumbnailUrl}" /></td> + <td width="100%"> + <a href="#">${videoTitle}</a> + <p class="videoDescription">${videoDescription}</p> + </td> + </tr> +END; + } + echo '</table>'; +} + +/* + * The main controller logic of the YouTube video browser demonstration app. + */ +$queryType = isset($_POST['queryType']) ? $_POST['queryType'] : null; + +if ($queryType === null) { + /* display the entire interface */ + include 'interface.html'; +} else if ($queryType == 'show_video') { + /* display an individual video */ + if (array_key_exists('videoId', $_POST)) { + $videoId = $_POST['videoId']; + echoVideoPlayer($videoId); + } else if (array_key_exists('videoId', $_GET)) { + $videoId = $_GET['videoId']; + echoVideoPlayer($videoId); + } else { + echo 'No videoId found.'; + exit; + } +} else { + /* display a list of videos */ + $searchTerm = $_POST['searchTerm']; + $startIndex = $_POST['startIndex']; + $maxResults = $_POST['maxResults']; + + $yt = new Zend_Gdata_YouTube(); + $query = $yt->newVideoQuery(); + $query->setQuery($searchTerm); + $query->setStartIndex($startIndex); + $query->setMaxResults($maxResults); + + /* check for one of the standard feeds, or list from 'all' videos */ + switch ($queryType) { + case 'most_viewed': + $query->setFeedType('most viewed'); + $query->setTime('this_week'); + $feed = $yt->getVideoFeed($query); + break; + case 'most_recent': + $query->setFeedType('most recent'); + $feed = $yt->getVideoFeed($query); + break; + case 'recently_featured': + $query->setFeedType('recently featured'); + $feed = $yt->getVideoFeed($query); + break; + case 'top_rated': + $query->setFeedType('top rated'); + $query->setTime('this_week'); + $feed = $yt->getVideoFeed($query); + break; + case 'all': + $feed = $yt->getVideoFeed($query); + break; + default: + echo 'ERROR - unknown queryType - "' . $queryType . '"'; + break; + } + echoVideoList($feed); +} diff --git a/zend/demos/Zend/Gdata/YouTubeVideoBrowser/interface.html b/zend/demos/Zend/Gdata/YouTubeVideoBrowser/interface.html new file mode 100644 index 0000000..cfb7576 --- /dev/null +++ b/zend/demos/Zend/Gdata/YouTubeVideoBrowser/interface.html @@ -0,0 +1,79 @@ +<!--- +/** + * Zend Framework + * + * LICENSE + * + * This source file is subject to the new BSD license that is bundled + * with this package in the file LICENSE.txt. + * It is also available through the world-wide-web at this URL: + * http://framework.zend.com/license/new-bsd + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@zend.com so we can send you a copy immediately. + * + * @category Zend + * @package Zend_Gdata + * @subpackage Demos + * @copyright Copyright (c) 2005-2011 Zend Technologies USA Inc. (http://www.zend.com) + * @license http://framework.zend.com/license/new-bsd New BSD License + */ +--> +<html> +<head> + <title>YouTube data API Video Browser in PHP</title> + <link href="video_browser.css" type="text/css" rel="stylesheet"/> + <script src="video_browser.js" type="text/javascript"></script> +</head> +<body> +<div id="main"> + <div id="titleBar"> + <div id="titleText"><h1>YouTube data API Video Browser in PHP</h1></div> + <div id="searchBox" style="display: none;"> + <form id="searchForm" onsubmit="ytvbp.listVideos(this.queryType.value, this.searchTerm.value, 1); return false;"> + <select name="queryType" onchange="ytvbp.queryTypeChanged(this.value, this.form.searchTerm);"> + <option value="all" selected="true">All Videos</option> + <option value="top_rated">Top Rated Videos</option> + <option value="most_viewed">Most Viewed Videos</option> + <option value="recently_featured">Recently Featured Videos</option> + + </select> + <input name="searchTerm" type="text" value="puppy"> + <input type="submit" value="Search"> + </form> + </div> + <br /> + </div> + <br clear="all" /> + <div id="mainSearchBox"> + <h2>Search YouTube:</h2> + <form id="mainSearchForm" onsubmit="ytvbp.listVideos(this.queryType.value, this.searchTerm.value, 1); document.forms.searchForm.searchTerm.value=this.searchTerm.value; ytvbp.hideMainSearch(); document.forms.searchForm.queryType.selectedIndex=this.queryType.selectedIndex; return false;"> + <select name="queryType" onchange="ytvbp.queryTypeChanged(this.value, this.form.searchTerm);"> + <option value="all" selected="true">All Videos</option> + <option value="top_rated">Top Rated Videos</option> + <option value="most_viewed">Most Viewed Videos</option> + <option value="recently_featured">Recently Featured Videos</option> + + </select> + <input name="searchTerm" type="text" value="puppy"> + <input type="submit" value="Search"> + </form> + </div> + <br clear="all" /> + <div id="searchResults"> + <div id="searchResultsListColumn"> + <div id="searchResultsVideoList"></div> + <div id="searchResultsNavigation"> + <form id="navigationForm"> + <input type="button" id="previousPageButton" onclick="ytvbp.listVideos(ytvbp.previousQueryType, ytvbp.previousSearchTerm, ytvbp.previousPage);" value="Back" style="display: none;"></input> + <input type="button" id="nextPageButton" onclick="ytvbp.listVideos(ytvbp.previousQueryType, ytvbp.previousSearchTerm, ytvbp.nextPage);" value="Next" style="display: none;"></input> + </form> + </div> + </div> + <div id="searchResultsVideoColumn"> + <div id="videoPlayer"></div> + </div> + </div> +</div> +</body> +</html> diff --git a/zend/demos/Zend/Gdata/YouTubeVideoBrowser/video_browser.css b/zend/demos/Zend/Gdata/YouTubeVideoBrowser/video_browser.css new file mode 100644 index 0000000..1984ed9 --- /dev/null +++ b/zend/demos/Zend/Gdata/YouTubeVideoBrowser/video_browser.css @@ -0,0 +1,152 @@ +body { + background-color: white; + color: black; + font-family: Arial, sans-serif; + font-size: small; + margin: 8px; + margin-top: 3px; +} + +img { + border: 0; +} + +table { + border-collapse: collapse; +} + +th, td { + padding: 0; + vertical-align: top; + text-align: left; +} + +a:link { + color: #0000cc; +} + +a:active { + color: #cc0000; +} + +a:visited { + color: #551a8b; +} + +h1 { + font-size: x-large; + margin-top: 0px; + margin-bottom: 5px; +} + +h2 { + font-size: large; +} + +h3 { + font-size: medium; +} + +h4 { + font-size: small; +} + +form { + display: inline; + margin: 0; + padding: 0; +} + +li { + margin-bottom: 0.25em; +} + +pre, code { + color: #007000; + font-family: "bogus font here", monospace; + font-size: 100%; +} + +pre { + border: 1px solid silver; + background-color: #f5f5f5; + padding: 0.5em; + overflow: auto; + margin: 2em; +} + +pre ins { + color: #cc0000; + font-weight: bold; + text-decoration: none; +} + +/* "Selected" links */ + +a.selected, .selected a, .selected { + color: black; + font-weight: bold; + text-decoration: none; +} + +a.selected:visited, .selected a:visited { + color: black; +} + +p.videoDescription { + font-size: small; + margin: 0; + padding: 0; +} + +.videoList td { + padding-bottom: 5px; + padding-right: 5px; +} + +#titleBar { + border: 1px solid silver; + background-color: #e5ecf9; + font-size: large; + font-weight: bold; + margin: 0; + padding: 0; + padding-top: 5px; + padding-bottom: 10px; + padding-left: 10px; + padding-right: 10px; + margin-top: 5px; + margin-bottom: 15px; +} + +#titleText { + float: left; +} + +#searchBox { + float: right; +} + +#mainSearchBox { + background-color: #e5ecf9; + border: 1px solid silver; + width: 250; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 10px; + padding-right: 10px; +} + +#searchResults { + width: 100%; +} + +#searchResultsListColumn { + float: left; + width: 47%; +} + +#searchResultsVideoColumn { + float: right; + width: 47%; +} diff --git a/zend/demos/Zend/Gdata/YouTubeVideoBrowser/video_browser.js b/zend/demos/Zend/Gdata/YouTubeVideoBrowser/video_browser.js new file mode 100644 index 0000000..3e91bcc --- /dev/null +++ b/zend/demos/Zend/Gdata/YouTubeVideoBrowser/video_browser.js @@ -0,0 +1,228 @@ +/** + * Zend Framework + * + * LICENSE + * + * This source file is subject to the new BSD license that is bundled + * with this package in the file LICENSE.txt. + * It is also available through the world-wide-web at this URL: + * http://framework.zend.com/license/new-bsd + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@zend.com so we can send you a copy immediately. + * + * @category Zend + * @package Zend_Gdata + * @subpackage Demos + * @copyright Copyright (c) 2005-2011 Zend Technologies USA Inc. (http://www.zend.com) + * @license http://framework.zend.com/license/new-bsd New BSD License + */ + +/** + * @fileoverview Provides functions for browsing and searching YouTube + * data API feeds using a PHP backend powered by the Zend_Gdata component + * of the Zend Framework. + */ + +/** + * provides namespacing for the YouTube Video Browser PHP version (ytvbp) + */ +var ytvbp = {}; + +/** + * maximum number of results to return for list of videos + * @type Number + */ +ytvbp.MAX_RESULTS_LIST = 5; + +/** + * navigation button id used to page to the previous page of + * results in the list of videos + * @type String + */ +ytvbp.PREVIOUS_PAGE_BUTTON = 'previousPageButton'; + +/** + * navigation button id used to page to the next page of + * results in the list of videos + * @type String + */ +ytvbp.NEXT_PAGE_BUTTON = 'nextPageButton'; + +/** + * container div id used to hold list of videos + * @type String + */ +ytvbp.VIDEO_LIST_CONTAINER_DIV = 'searchResultsVideoList'; + +/** + * container div id used to hold the video player + * @type String + */ +ytvbp.VIDEO_PLAYER_DIV = 'videoPlayer'; + +/** + * container div id used to hold the search box which displays when the page + * first loads + * @type String + */ +ytvbp.MAIN_SEARCH_CONTAINER_DIV = 'mainSearchBox'; + +/** + * container div id used to hold the search box displayed at the top of + * the browser after one search has already been performed + * @type String + */ +ytvbp.TOP_SEARCH_CONTAINER_DIV = 'searchBox'; + +/** + * the page number to use for the next page navigation button + * @type Number + */ +ytvbp.nextPage = 2; + +/** + * the page number to use for the previous page navigation button + * @type Number + */ +ytvbp.previousPage = 0; + +/** + * the last search term used to query - allows for the navigation + * buttons to know what string query to perform when clicked + * @type String + */ +ytvbp.previousSearchTerm = ''; + +/** + * the last query type used for querying - allows for the navigation + * buttons to know what type of query to perform when clicked + * @type String + */ +ytvbp.previousQueryType = 'all'; + +/** + * Retrieves a list of videos matching the provided criteria. The list of + * videos can be restricted to a particular standard feed or search criteria. + * @param {String} queryType The type of query to be done - either 'all' + * for querying all videos, or the name of a standard feed. + * @param {String} searchTerm The search term(s) to use for querying as the + * 'vq' query parameter value + * @param {Number} page The 1-based page of results to return. + */ +ytvbp.listVideos = function(queryType, searchTerm, page) { + ytvbp.previousSearchTerm = searchTerm; + ytvbp.previousQueryType = queryType; + var maxResults = ytvbp.MAX_RESULTS_LIST; + var startIndex = (((page - 1) * ytvbp.MAX_RESULTS_LIST) + 1); + ytvbp.presentFeed(queryType, maxResults, startIndex, searchTerm); + ytvbp.updateNavigation(page); +}; + +/** + * Sends an AJAX request to the server to retrieve a list of videos or + * the video player/metadata. Sends the request to the specified filePath + * on the same host, passing the specified params, and filling the specified + * resultDivName with the resutls upon success. + * @param {String} filePath The path to which the request should be sent + * @param {String} params The URL encoded POST params + * @param {String} resultDivName The name of the DIV used to hold the results + */ +ytvbp.sendRequest = function(filePath, params, resultDivName) { + if (window.XMLHttpRequest) { + var xmlhr = new XMLHttpRequest(); + } else { + var xmlhr = new ActiveXObject('MSXML2.XMLHTTP.3.0'); + } + + xmlhr.open('POST', filePath, true); + xmlhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + + xmlhr.onreadystatechange = function() { + var resultDiv = document.getElementById(resultDivName); + if (xmlhr.readyState == 1) { + resultDiv.innerHTML = '<b>Loading...</b>'; + } else if (xmlhr.readyState == 4 && xmlhr.status == 200) { + if (xmlhr.responseText) { + resultDiv.innerHTML = xmlhr.responseText; + } + } else if (xmlhr.readyState == 4) { + alert('Invalid response received - Status: ' + xmlhr.status); + } + } + xmlhr.send(params); +} + +/** + * Uses ytvbp.sendRequest to display a YT video player and metadata for the + * specified video ID. + * @param {String} videoId The ID of the YouTube video to show + */ +ytvbp.presentVideo = function(videoId) { + var params = 'queryType=show_video&videoId=' + videoId; + var filePath = 'index.php'; + ytvbp.sendRequest(filePath, params, ytvbp.VIDEO_PLAYER_DIV); +} + +/** + * Uses ytvbp.sendRequest to display a list of of YT videos. + * @param {String} queryType The name of a standard video feed or 'all' + * @param {Number} maxResults The maximum number of videos to list + * @param {Number} startIndex The first video to include in the list + * @param {String} searchTerm The search terms to pass to the specified feed + */ +ytvbp.presentFeed = function(queryType, maxResults, startIndex, searchTerm){ + var params = 'queryType=' + queryType + + '&maxResults=' + maxResults + + '&startIndex=' + startIndex + + '&searchTerm=' + searchTerm; + var filePath = 'index.php'; + ytvbp.sendRequest(filePath, params, ytvbp.VIDEO_LIST_CONTAINER_DIV); +} + +/** + * Updates the variables used by the navigation buttons and the 'enabled' + * status of the buttons based upon the current page number passed in. + * @param {Number} page The current page number + */ +ytvbp.updateNavigation = function(page) { + ytvbp.nextPage = page + 1; + ytvbp.previousPage = page - 1; + document.getElementById(ytvbp.NEXT_PAGE_BUTTON).style.display = 'inline'; + document.getElementById(ytvbp.PREVIOUS_PAGE_BUTTON).style.display = 'inline'; + if (ytvbp.previousPage < 1) { + document.getElementById(ytvbp.PREVIOUS_PAGE_BUTTON).disabled = true; + } else { + document.getElementById(ytvbp.PREVIOUS_PAGE_BUTTON).disabled = false; + } + document.getElementById(ytvbp.NEXT_PAGE_BUTTON).disabled = false; +}; + +/** + * Hides the main (large) search form and enables one that's in the + * title bar of the application. The main search form is only used + * for the first load. Subsequent searches should use the version in + * the title bar. + */ +ytvbp.hideMainSearch = function() { + document.getElementById(ytvbp.MAIN_SEARCH_CONTAINER_DIV).style.display = + 'none'; + document.getElementById(ytvbp.TOP_SEARCH_CONTAINER_DIV).style.display = + 'inline'; +}; + +/** + * Method called when the query type has been changed. Clears out the + * value of the search term input box by default if one of the standard + * feeds is selected. This is to improve usability, as many of the standard + * feeds may not include results for even fairly popular search terms. + * @param {String} queryType The type of query being done - either 'all' + * for querying all videos, or the name of one of the standard feeds. + * @param {Node} searchTermInputElement The HTML input element for the input + * element. + */ +ytvbp.queryTypeChanged = function(queryType, searchTermInputElement) { + if (queryType != 'all') { + searchTermInputElement.value = ''; + } +}; |