« back to all changes in this revision
Viewing changes to src/Media/MovieManagerUI.js
- browse files at revision 402.1.698
- compare with another revision
- download diff
- download tarball
- view history from revision 402.1.698
- Committer: Keith Hughitt
- Date: 2011-06-24 15:14:24 UTC
- mfrom: (584 hv-trunk)
- mto: This revision was merged to the branch mainline in revision 589.
- Revision ID: keith.hughitt@nasa.gov-20110624151424-myz1m50fq5g3krcw
Merging in trunk changes.
- files renamed:
- api/resources/css/youtube.css => resources/css/youtube.css
- files modified:
- api/index.php
added
removed
src/Media/MovieManagerUI.js
143
143
$("#" + self._type + "-" + movie.id).qtip("destroy");
144
144
self._buildPreviewTooltip(movie);
145
145
});
146
147
// Upload form submission
148
$("#youtube-video-info").submit(function () {
149
self.submitVideoUploadForm();
150
return false;
151
});
146
152
},
147
153
148
154
/**
213
219
" px</td></tr>" +
214
220
"</table>";
215
221
216
217
222
return html;
218
223
},
219
224
221
226
* @description Opens a pop-up with the movie player in it.
222
227
*/
223
228
_createMoviePlayerDialog: function (movie) {
224
var dimensions, movieTitle, uploadURL, tags, html,
225
dialog, self = this;
226
227
// Suggested YouTube tags
228
tags = [];
229
230
// Tags
231
$.each(movie.layers.split("],["), function (i, layerStr) {
232
var parts = layerStr.replace(']', "").replace('[', "")
233
.split(",").slice(0, 4);
234
235
// Add observatories, instruments, detectors and
236
// measurements to tag list
237
$.each(parts, function (i, item) {
238
if ($.inArray(item, tags) === -1) {
239
tags.push(item);
240
}
241
});
242
});
243
244
// Suggested movie title
245
movieTitle = movie.name + " (" + movie.startDate + " - " +
246
movie.endDate + " UTC)";
247
248
uploadURL = "api/index.php?action=uploadMovieToYouTube&id=" + movie.id;
249
uploadURL += "&title=" + movieTitle;
250
uploadURL += "&tags=" + tags.join(", ");
229
var dimensions, title, uploadURL, html, dialog, self = this;
251
230
252
231
// Make sure dialog fits nicely inside the browser window
253
232
dimensions = this.getVideoPlayerDimensions(movie.width, movie.height);
254
233
255
234
// Movie player HTML
256
235
html = self.getVideoPlayerHTML(movie.id, dimensions.width,
257
dimensions.height, uploadURL, movie.url);
236
dimensions.height, movie.url);
258
237
259
238
// Movie player dialog
260
239
dialog = $(
262
241
"class='movie-player-dialog'></div>"
263
242
).append(html);
264
243
244
// Movie dialog title
245
title = movie.name + " (" + movie.startDate + " - " +
246
movie.endDate + " UTC)";
247
265
248
// Have to append the video player here, otherwise adding it to the div
266
249
// beforehand results in the browser attempting to download it.
267
250
dialog.dialog({
268
title : "Movie Player: " + movieTitle,
251
title : "Movie Player: " + title,
269
252
width : dimensions.width + 34,
270
253
height : dimensions.height + 104,
271
254
resizable : $.support.h264 || $.support.vp8,
281
264
282
265
// Initialize YouTube upload button
283
266
$('#youtube-upload-' + movie.id).click(function () {
284
var loadingIndicator, auth = false;
285
286
loadingIndicator = $("#loading").show();
287
288
// Synchronous request (otherwise Google will not allow opening of
289
// request in a new tab)
290
$.ajax({
291
async: false,
292
url : "api/index.php?action=checkYouTubeAuth",
293
type: "GET",
294
success: function (response) {
295
auth = response;
296
}
297
});
298
299
loadingIndicator.hide();
300
301
// If user is already authenticated we can simply display the
302
// upload form in a dialog
303
if (auth) {
304
self.showYouTubeUploadDialog(uploadURL, movie.id);
305
return false;
306
}
267
self.showYouTubeUploadDialog(movie);
268
return false;
307
269
});
308
270
},
309
271
310
272
/**
311
273
* Opens YouTube uploader either in a separate tab or in a dialog
312
274
*/
313
showYouTubeUploadDialog: function (url, id) {
275
showYouTubeUploadDialog: function (movie) {
276
var title, tags, description;
277
278
// Suggested movie title
279
title = movie.name + " (" + movie.startDate + " - " +
280
movie.endDate + " UTC)";
281
282
// Suggested YouTube tags
283
tags = [];
284
285
$.each(movie.layers.split("],["), function (i, layerStr) {
286
var parts = layerStr.replace(']', "").replace('[', "")
287
.split(",").slice(0, 4);
288
289
// Add observatories, instruments, detectors and measurements
290
$.each(parts, function (i, item) {
291
if ($.inArray(item, tags) === -1) {
292
tags.push(item);
293
}
294
});
295
});
296
297
// Suggested Description
298
description = "This movie was produced by Helioviewer.org. " +
299
"A high quality version of this movie can be " +
300
"downloaded from " + helioviewer.serverSettings.rootURL +
301
"/?action=downloadMovie&id=" + movie.id + "&format=mp4&hq=true";
302
303
// Update form defaults
304
$("#youtube-title").val(title);
305
$("#youtube-tags").val(tags);
306
$("#youtube-desc").val(description);
307
$("#youtube-movie-id").val(movie.id);
308
314
309
// Hide movie dialogs (Flash player blocks upload form)
315
310
$(".movie-player-dialog").dialog("close");
316
317
var iframe = "<div class='youtube-upload-dialog'>" +
318
"<iframe src='" + url + "&dialogMode=true' " +
319
"scrolling='no' width='100%' height='100%' " +
320
"style='border: none' /></div>";
321
311
322
$(iframe).dialog({
312
// Open upload dialog
313
$("#upload-dialog").dialog({
323
314
"title" : "Upload video to YouTube",
324
"width" : 640,
325
"height": 480
315
"width" : 550,
316
"height": 440
317
});
318
},
319
320
/**
321
*
322
*/
323
submitVideoUploadForm: function (event) {
324
var params, successMsg, errorConsole, loadingIndicator, url, auth = false;
325
326
// Validate and submit form
327
try {
328
this._validateVideoUploadForm();
329
} catch (ex) {
330
errorConsole = $("#upload-error-console");
331
errorConsole.html("<b>Error:</b> " + ex).fadeIn(function () {
332
window.setTimeout(function () {
333
errorConsole.fadeOut();
334
}, 15000);
335
});
336
return false;
337
}
338
339
loadingIndicator = $("#loading").show();
340
341
// Check authorization using a synchronous request (otherwise Google
342
// will not allow opening of request in a new tab)
343
$.ajax({
344
async: false,
345
url : "api/index.php?action=checkYouTubeAuth",
346
type: "GET",
347
success: function (response) {
348
auth = response;
349
}
350
});
351
352
loadingIndicator.hide();
353
354
// Base URL
355
url = "api/index.php?" + $("#youtube-video-info").serialize();
356
357
// If the user has already authorized Helioviewer, upload the movie
358
if (auth) {
359
$.getJSON(url + "&action=uploadMovieToYouTube");
360
} else {
361
// Otherwise open an authorization page in a new tab/window
362
window.open(url + "&action=getYouTubeAuth", "_blank");
363
}
364
365
// Close the dialog
366
$("#upload-dialog").dialog("close");
367
return false;
368
},
369
370
/**
371
* Validates title, description and keyword fields for YouTube upload.
372
*
373
* @see http://code.google.com/apis/youtube/2.0/reference.html#Media_RSS_elements_reference
374
*/
375
_validateVideoUploadForm: function () {
376
var keywords = $("#youtube-tags").val(),
377
keywordMinLength = 2,
378
keywordMaxLength = 30;
379
380
// Make sure the title field is not empty
381
if ($("#youtube-title").val().length === 0) {
382
throw "Please specify a title for the movie.";
383
return;
384
}
385
386
// User must specify at least one keyword
387
if (keywords.length === 0) {
388
throw "You must specifiy at least one tag for your video.";
389
return;
390
}
391
392
// Make sure each keywords are between 2 and 30 characters each
393
$.each(keywords.split(","), function(i, keyword) {
394
var len = $.trim(keyword).length;
395
396
if (len > keywordMaxLength) {
397
throw "YouTube tags must not be longer than " + keywordMaxLength + " characters each.";
398
} else if (len < keywordMinLength) {
399
throw "YouTube tags must be at least " + keywordMinLength + " characters each.";
400
}
401
return;
402
});
403
404
// < and > are not allowed in title, description or keywords
405
$.each($("#youtube-video-info input[type='text'], #youtube-video-info textarea"), function (i, input) {
406
if ($(input).val().match(/[<>]/)) {
407
throw "< and > characters are not allowed";
408
}
409
return;
326
410
});
327
411
},
328
412
344
428
* Decides how to display video and returns HTML corresponding to that
345
429
* method
346
430
*/
347
getVideoPlayerHTML: function (id, width, height, uploadURL, url) {
431
getVideoPlayerHTML: function (id, width, height, url) {
348
432
var downloadURL, downloadLink, youtubeBtn;
349
433
350
434
downloadURL = "api/index.php?action=downloadMovie&id=" + id +
355
439
"src='resources/images/icons/001_52.png' " +
356
440
"alt='Download high-quality video' />Download</a>";
357
441
358
youtubeBtn = "<a id='youtube-upload-" + id + "' href='" + uploadURL +
359
"' target='_blank'><img class='youtube-icon' " +
442
youtubeBtn = "<a id='youtube-upload-" + id + "' href='#' " +
443
"target='_blank'><img class='youtube-icon' " +
360
444
"src='resources/images/Social.me/24 by 24 pixels/youtube.png' " +
361
445
"alt='Upload video to YouTube' />Upload</a>";
362
446
Loggerhead is a web-based interface for Breezy
Version: 2.0.1