358 lines
13 KiB
JavaScript
358 lines
13 KiB
JavaScript
// Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS-IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
/**
|
|
* @fileoverview provides a reusable youtube UI component given a youtube data
|
|
* model.
|
|
*
|
|
* goog.ui.media.Youtube is actually a {@link goog.ui.ControlRenderer}, a
|
|
* stateless class - that could/should be used as a Singleton with the static
|
|
* method {@code goog.ui.media.Youtube.getInstance} -, that knows how to render
|
|
* youtube videos. It is designed to be used with a {@link goog.ui.Control},
|
|
* which will actually control the media renderer and provide the
|
|
* {@link goog.ui.Component} base. This design guarantees that all different
|
|
* types of medias will behave alike but will look different.
|
|
*
|
|
* goog.ui.media.Youtube expects {@code goog.ui.media.YoutubeModel} on
|
|
* {@code goog.ui.Control.getModel} as data models, and render a flash object
|
|
* that will play that URL.
|
|
*
|
|
* Example of usage:
|
|
*
|
|
* <pre>
|
|
* var video = goog.ui.media.YoutubeModel.newInstance(
|
|
* 'http://www.youtube.com/watch?v=ddl5f44spwQ');
|
|
* goog.ui.media.Youtube.newControl(video).render();
|
|
* </pre>
|
|
*
|
|
* youtube medias currently support the following states:
|
|
*
|
|
* <ul>
|
|
* <li> {@link goog.ui.Component.State.DISABLED}: shows 'flash not available'
|
|
* <li> {@link goog.ui.Component.State.HOVER}: mouse cursor is over the video
|
|
* <li> {@link !goog.ui.Component.State.SELECTED}: a static thumbnail is shown
|
|
* <li> {@link goog.ui.Component.State.SELECTED}: video is playing
|
|
* </ul>
|
|
*
|
|
* Which can be accessed by
|
|
* <pre>
|
|
* youtube.setEnabled(true);
|
|
* youtube.setHighlighted(true);
|
|
* youtube.setSelected(true);
|
|
* </pre>
|
|
*
|
|
* This package also provides a few static auxiliary methods, such as:
|
|
*
|
|
* <pre>
|
|
* var videoId = goog.ui.media.Youtube.parseUrl(
|
|
* 'http://www.youtube.com/watch?v=ddl5f44spwQ');
|
|
* </pre>
|
|
*
|
|
*
|
|
* @supported IE6, FF2+, Safari. Requires flash to actually work.
|
|
*
|
|
* TODO(user): test on other browsers
|
|
*/
|
|
|
|
|
|
goog.provide('goog.ui.media.Youtube');
|
|
goog.provide('goog.ui.media.YoutubeModel');
|
|
|
|
goog.require('goog.string');
|
|
goog.require('goog.ui.Component');
|
|
goog.require('goog.ui.media.FlashObject');
|
|
goog.require('goog.ui.media.Media');
|
|
goog.require('goog.ui.media.MediaModel');
|
|
goog.require('goog.ui.media.MediaRenderer');
|
|
|
|
|
|
|
|
/**
|
|
* Subclasses a goog.ui.media.MediaRenderer to provide a Youtube specific media
|
|
* renderer.
|
|
*
|
|
* This class knows how to parse youtube urls, and render the DOM structure
|
|
* of youtube video players and previews. This class is meant to be used as a
|
|
* singleton static stateless class, that takes {@code goog.ui.media.Media}
|
|
* instances and renders it. It expects {@code goog.ui.media.Media.getModel} to
|
|
* return a well formed, previously constructed, youtube video id, which is the
|
|
* data model this renderer will use to construct the DOM structure.
|
|
* {@see goog.ui.media.Youtube.newControl} for a example of constructing a
|
|
* control with this renderer.
|
|
*
|
|
* goog.ui.media.Youtube currently supports all {@link goog.ui.Component.State}.
|
|
* It will change its DOM structure between SELECTED and !SELECTED, and rely on
|
|
* CSS definitions on the others. On !SELECTED, the renderer will render a
|
|
* youtube static <img>, with a thumbnail of the video. On SELECTED, the
|
|
* renderer will append to the DOM a flash object, that contains the youtube
|
|
* video.
|
|
*
|
|
* This design is patterned after http://go/closure_control_subclassing
|
|
*
|
|
* It uses {@link goog.ui.media.FlashObject} to embed the flash object.
|
|
*
|
|
* @constructor
|
|
* @extends {goog.ui.media.MediaRenderer}
|
|
*/
|
|
goog.ui.media.Youtube = function() {
|
|
goog.ui.media.MediaRenderer.call(this);
|
|
};
|
|
goog.inherits(goog.ui.media.Youtube, goog.ui.media.MediaRenderer);
|
|
goog.addSingletonGetter(goog.ui.media.Youtube);
|
|
|
|
|
|
/**
|
|
* A static convenient method to construct a goog.ui.media.Media control out of
|
|
* a youtube model. It sets it as the data model goog.ui.media.Youtube renderer
|
|
* uses, sets the states supported by the renderer, and returns a Control that
|
|
* binds everything together. This is what you should be using for constructing
|
|
* Youtube videos, except if you need finer control over the configuration.
|
|
*
|
|
* @param {goog.ui.media.YoutubeModel} youtubeModel The youtube data model.
|
|
* @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper, used for
|
|
* document interaction.
|
|
* @return {goog.ui.media.Media} A Control binded to the youtube renderer.
|
|
*/
|
|
goog.ui.media.Youtube.newControl = function(youtubeModel, opt_domHelper) {
|
|
var control = new goog.ui.media.Media(
|
|
youtubeModel,
|
|
goog.ui.media.Youtube.getInstance(),
|
|
opt_domHelper);
|
|
control.setStateInternal(goog.ui.Component.State.ACTIVE);
|
|
return control;
|
|
};
|
|
|
|
|
|
/**
|
|
* Default CSS class to be applied to the root element of components rendered
|
|
* by this renderer.
|
|
* @type {string}
|
|
*/
|
|
goog.ui.media.Youtube.CSS_CLASS = goog.getCssName('goog-ui-media-youtube');
|
|
|
|
|
|
/**
|
|
* Changes the state of a {@code control}. Currently only changes the DOM
|
|
* structure when the youtube movie is SELECTED (by default fired by a MOUSEUP
|
|
* on the thumbnail), which means we have to embed the youtube flash video and
|
|
* play it.
|
|
*
|
|
* @param {goog.ui.Control} c The media control.
|
|
* @param {goog.ui.Component.State} state The state to be set or cleared.
|
|
* @param {boolean} enable Whether the state is enabled or disabled.
|
|
* @override
|
|
*/
|
|
goog.ui.media.Youtube.prototype.setState = function(c, state, enable) {
|
|
var control = /** @type {goog.ui.media.Media} */ (c);
|
|
goog.ui.media.Youtube.superClass_.setState.call(this, control, state, enable);
|
|
|
|
// control.createDom has to be called before any state is set.
|
|
// Use control.setStateInternal if you need to set states
|
|
if (!control.getElement()) {
|
|
throw Error(goog.ui.Component.Error.STATE_INVALID);
|
|
}
|
|
|
|
var domHelper = control.getDomHelper();
|
|
var dataModel =
|
|
/** @type {goog.ui.media.YoutubeModel} */ (control.getDataModel());
|
|
|
|
if (!!(state & goog.ui.Component.State.SELECTED) && enable) {
|
|
var flashEls = domHelper.getElementsByTagNameAndClass(
|
|
'div',
|
|
goog.ui.media.FlashObject.CSS_CLASS,
|
|
control.getElement());
|
|
if (flashEls.length > 0) {
|
|
return;
|
|
}
|
|
var youtubeFlash = new goog.ui.media.FlashObject(
|
|
dataModel.getPlayer().getUrl() || '',
|
|
domHelper);
|
|
control.addChild(youtubeFlash, true);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the CSS class to be applied to the root element of components
|
|
* rendered using this renderer.
|
|
*
|
|
* @return {string} Renderer-specific CSS class.
|
|
* @override
|
|
*/
|
|
goog.ui.media.Youtube.prototype.getCssClass = function() {
|
|
return goog.ui.media.Youtube.CSS_CLASS;
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
* The {@code goog.ui.media.Youtube} media data model. It stores a required
|
|
* {@code videoId} field, sets the youtube URL, and allows a few optional
|
|
* parameters.
|
|
*
|
|
* @param {string} videoId The youtube video id.
|
|
* @param {string=} opt_caption An optional caption of the youtube video.
|
|
* @param {string=} opt_description An optional description of the youtube
|
|
* video.
|
|
* @constructor
|
|
* @extends {goog.ui.media.MediaModel}
|
|
*/
|
|
goog.ui.media.YoutubeModel = function(videoId, opt_caption, opt_description) {
|
|
goog.ui.media.MediaModel.call(
|
|
this,
|
|
goog.ui.media.YoutubeModel.buildUrl(videoId),
|
|
opt_caption,
|
|
opt_description,
|
|
goog.ui.media.MediaModel.MimeType.FLASH);
|
|
|
|
/**
|
|
* The Youtube video id.
|
|
* @type {string}
|
|
* @private
|
|
*/
|
|
this.videoId_ = videoId;
|
|
|
|
this.setThumbnails([new goog.ui.media.MediaModel.Thumbnail(
|
|
goog.ui.media.YoutubeModel.getThumbnailUrl(videoId))]);
|
|
|
|
this.setPlayer(new goog.ui.media.MediaModel.Player(
|
|
this.getFlashUrl(videoId, true)));
|
|
};
|
|
goog.inherits(goog.ui.media.YoutubeModel, goog.ui.media.MediaModel);
|
|
|
|
|
|
/**
|
|
* A youtube regular expression matcher. It matches the VIDEOID of URLs like
|
|
* http://www.youtube.com/watch?v=VIDEOID. Based on:
|
|
* googledata/contentonebox/opencob/specs/common/YTPublicExtractorCard.xml
|
|
* @type {RegExp}
|
|
* @private
|
|
* @const
|
|
*/
|
|
// Be careful about the placement of the dashes in the character classes. Eg,
|
|
// use "[\\w=-]" instead of "[\\w-=]" if you mean to include the dash as a
|
|
// character and not create a character range like "[a-f]".
|
|
goog.ui.media.YoutubeModel.MATCHER_ = new RegExp(
|
|
// Lead in.
|
|
'http://(?:[a-zA-Z]{2,3}\\.)?' +
|
|
// Watch URL prefix. This should handle new URLs of the form:
|
|
// http://www.youtube.com/watch#!v=jqxENMKaeCU&feature=related
|
|
// where the parameters appear after "#!" instead of "?".
|
|
'(?:youtube\\.com/watch)' +
|
|
// Get the video id:
|
|
// The video ID is a parameter v=[videoid] either right after the "?"
|
|
// or after some other parameters.
|
|
'(?:\\?(?:[\\w=-]+&(?:amp;)?)*v=([\\w-]+)' +
|
|
'(?:&(?:amp;)?[\\w=-]+)*)?' +
|
|
// Get any extra arguments in the URL's hash part.
|
|
'(?:#[!]?(?:' +
|
|
// Video ID from the v=[videoid] parameter, optionally surrounded by other
|
|
// & separated parameters.
|
|
'(?:(?:[\\w=-]+&(?:amp;)?)*(?:v=([\\w-]+))' +
|
|
'(?:&(?:amp;)?[\\w=-]+)*)' +
|
|
'|' +
|
|
// Continue supporting "?" for the video ID
|
|
// and "#" for other hash parameters.
|
|
'(?:[\\w=&-]+)' +
|
|
'))?' +
|
|
// Should terminate with a non-word, non-dash (-) character.
|
|
'[^\\w-]?', 'i');
|
|
|
|
|
|
/**
|
|
* A auxiliary static method that parses a youtube URL, extracting the ID of the
|
|
* video, and builds a YoutubeModel.
|
|
*
|
|
* @param {string} youtubeUrl A youtube URL.
|
|
* @param {string=} opt_caption An optional caption of the youtube video.
|
|
* @param {string=} opt_description An optional description of the youtube
|
|
* video.
|
|
* @return {goog.ui.media.YoutubeModel} The data model that represents the
|
|
* youtube URL.
|
|
* @see goog.ui.media.YoutubeModel.getVideoId()
|
|
* @throws Error in case the parsing fails.
|
|
*/
|
|
goog.ui.media.YoutubeModel.newInstance = function(youtubeUrl,
|
|
opt_caption,
|
|
opt_description) {
|
|
var extract = goog.ui.media.YoutubeModel.MATCHER_.exec(youtubeUrl);
|
|
if (extract) {
|
|
var videoId = extract[1] || extract[2];
|
|
return new goog.ui.media.YoutubeModel(
|
|
videoId, opt_caption, opt_description);
|
|
}
|
|
|
|
throw Error('failed to parse video id from youtube url: ' + youtubeUrl);
|
|
};
|
|
|
|
|
|
/**
|
|
* The opposite of {@code goog.ui.media.Youtube.newInstance}: it takes a videoId
|
|
* and returns a youtube URL.
|
|
*
|
|
* @param {string} videoId The youtube video ID.
|
|
* @return {string} The youtube URL.
|
|
*/
|
|
goog.ui.media.YoutubeModel.buildUrl = function(videoId) {
|
|
return 'http://www.youtube.com/watch?v=' + goog.string.urlEncode(videoId);
|
|
};
|
|
|
|
|
|
/**
|
|
* A static auxiliary method that builds a static image URL with a preview of
|
|
* the youtube video.
|
|
*
|
|
* NOTE(user): patterned after Gmail's gadgets/youtube,
|
|
*
|
|
* TODO(user): how do I specify the width/height of the resulting image on the
|
|
* url ? is there an official API for http://ytimg.com ?
|
|
*
|
|
* @param {string} youtubeId The youtube video ID.
|
|
* @return {string} An URL that contains an image with a preview of the youtube
|
|
* movie.
|
|
*/
|
|
goog.ui.media.YoutubeModel.getThumbnailUrl = function(youtubeId) {
|
|
return 'http://i.ytimg.com/vi/' + youtubeId + '/default.jpg';
|
|
};
|
|
|
|
|
|
/**
|
|
* An auxiliary method that builds URL of the flash movie to be embedded,
|
|
* out of the youtube video id.
|
|
*
|
|
* @param {string} videoId The youtube video ID.
|
|
* @param {boolean=} opt_autoplay Whether the flash movie should start playing
|
|
* as soon as it is shown, or if it should show a 'play' button.
|
|
* @return {string} The flash URL to be embedded on the page.
|
|
*/
|
|
goog.ui.media.YoutubeModel.prototype.getFlashUrl = function(videoId,
|
|
opt_autoplay) {
|
|
var autoplay = opt_autoplay ? '&autoplay=1' : '';
|
|
// YouTube video ids are extracted from youtube URLs, which are user
|
|
// generated input. the video id is later used to embed a flash object,
|
|
// which is generated through HTML construction. We goog.string.urlEncode
|
|
// the video id to make sure the URL is safe to be embedded.
|
|
return 'http://www.youtube.com/v/' + goog.string.urlEncode(videoId) +
|
|
'&hl=en&fs=1' + autoplay;
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the Youtube video id.
|
|
* @return {string} The Youtube video id.
|
|
*/
|
|
goog.ui.media.YoutubeModel.prototype.getVideoId = function() {
|
|
return this.videoId_;
|
|
};
|