forked from zendframework/zendframework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
video_browser.js
228 lines (206 loc) · 7.51 KB
/
video_browser.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
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 = '';
}
};