| // 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 mp3 UI component given a mp3 URL. |
| * |
| * goog.ui.media.Mp3 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.Mp3.getInstance} -, that knows how to render Mp3s. 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.Mp3 expects mp3 urls on {@code goog.ui.Control.getModel} as |
| * data models, and render a flash object that will play that URL. |
| * |
| * Example of usage: |
| * |
| * <pre> |
| * goog.ui.media.Mp3.newControl('http://hostname/file.mp3').render(); |
| * </pre> |
| * |
| * Mp3 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 mp3 |
| * <li> {@link goog.ui.Component.State.SELECTED}: mp3 is playing |
| * </ul> |
| * |
| * Which can be accessed by |
| * |
| * <pre> |
| * mp3.setEnabled(true); |
| * mp3.setHighlighted(true); |
| * mp3.setSelected(true); |
| * </pre> |
| * |
| * |
| * @supported IE6, FF2+, Safari. Requires flash to actually work. |
| * |
| * TODO(user): test on other browsers |
| */ |
| |
| goog.provide('goog.ui.media.Mp3'); |
| |
| goog.require('goog.string'); |
| goog.require('goog.ui.media.FlashObject'); |
| goog.require('goog.ui.media.Media'); |
| goog.require('goog.ui.media.MediaRenderer'); |
| |
| |
| |
| /** |
| * Subclasses a goog.ui.media.MediaRenderer to provide a Mp3 specific media |
| * renderer. |
| * |
| * This class knows how to parse mp3 URLs, and render the DOM structure |
| * of mp3 flash players. 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 checked, mp3 URL {@see goog.ui.media.PicasaAlbum.parseUrl}, |
| * which is the data model this renderer will use to construct the DOM |
| * structure. {@see goog.ui.media.PicasaAlbum.newControl} for an example of |
| * constructing a control with this renderer. |
| * |
| * 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} |
| * @final |
| */ |
| goog.ui.media.Mp3 = function() { |
| goog.ui.media.MediaRenderer.call(this); |
| }; |
| goog.inherits(goog.ui.media.Mp3, goog.ui.media.MediaRenderer); |
| goog.addSingletonGetter(goog.ui.media.Mp3); |
| |
| |
| /** |
| * Flash player arguments. We expect that {@code flashUrl_} will contain a flash |
| * movie that takes an audioUrl parameter on its URL, containing the URL of the |
| * mp3 to be played. |
| * |
| * @type {string} |
| * @private |
| */ |
| goog.ui.media.Mp3.PLAYER_ARGUMENTS_ = 'audioUrl=%s'; |
| |
| |
| /** |
| * Default CSS class to be applied to the root element of components rendered |
| * by this renderer. |
| * |
| * @type {string} |
| */ |
| goog.ui.media.Mp3.CSS_CLASS = goog.getCssName('goog-ui-media-mp3'); |
| |
| |
| /** |
| * Flash player URL. Uses Google Reader's mp3 flash player by default. |
| * |
| * @type {string} |
| * @private |
| */ |
| goog.ui.media.Mp3.flashUrl_ = |
| 'http://www.google.com/reader/ui/3523697345-audio-player.swf'; |
| |
| |
| /** |
| * Regular expression to check if a given URL is a valid mp3 URL. |
| * |
| * Copied from http://go/markdownlite.js. |
| |
| * |
| * NOTE(user): although it would be easier to use goog.string.endsWith('.mp3'), |
| * in the future, we want to provide media inlining, which is basically getting |
| * a text and replacing all mp3 references with an mp3 player, so it makes sense |
| * to share the same regular expression to match everything. |
| * |
| * @type {RegExp} |
| */ |
| goog.ui.media.Mp3.MATCHER = |
| /(https?:\/\/[\w-%&\/.=:#\+~\(\)]+\.(mp3)+(\?[\w-%&\/.=:#\+~\(\)]+)?)/i; |
| |
| |
| /** |
| * A static convenient method to construct a goog.ui.media.Media control out of |
| * a mp3 URL. It checks the mp3 URL, sets it as the data model |
| * goog.ui.media.Mp3 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 Mp3 videos, except if you need more fine |
| * control over the configuration. |
| * |
| * @param {goog.ui.media.MediaModel} dataModel A media model that must contain |
| * an mp3 url on {@code dataModel.getUrl}. |
| * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper, used for |
| * document interaction. |
| * @return {!goog.ui.media.Media} A goog.ui.Control subclass with the mp3 |
| * renderer. |
| */ |
| goog.ui.media.Mp3.newControl = function(dataModel, opt_domHelper) { |
| var control = new goog.ui.media.Media( |
| dataModel, |
| goog.ui.media.Mp3.getInstance(), |
| opt_domHelper); |
| // mp3 ui doesn't have a non selected view: it shows the mp3 player by |
| // default. |
| control.setSelected(true); |
| return control; |
| }; |
| |
| |
| /** |
| * A static method that sets which flash URL this class should use. Use this if |
| * you want to host your own flash mp3 player. |
| * |
| * @param {string} flashUrl The URL of the flash mp3 player. |
| */ |
| goog.ui.media.Mp3.setFlashUrl = function(flashUrl) { |
| goog.ui.media.Mp3.flashUrl_ = flashUrl; |
| }; |
| |
| |
| /** |
| * A static method that builds a URL that will contain the flash player that |
| * will play the {@code mp3Url}. |
| * |
| * @param {string} mp3Url The URL of the mp3 music. |
| * @return {string} An URL of a flash player that will know how to play the |
| * given {@code mp3Url}. |
| */ |
| goog.ui.media.Mp3.buildFlashUrl = function(mp3Url) { |
| var flashUrl = goog.ui.media.Mp3.flashUrl_ + '?' + goog.string.subs( |
| goog.ui.media.Mp3.PLAYER_ARGUMENTS_, |
| goog.string.urlEncode(mp3Url)); |
| return flashUrl; |
| }; |
| |
| |
| /** |
| * Creates the initial DOM structure of a mp3 video, which is basically a |
| * the flash object pointing to a flash mp3 player. |
| * |
| * @param {goog.ui.Control} c The media control. |
| * @return {!Element} A DOM structure that represents the control. |
| * @override |
| */ |
| goog.ui.media.Mp3.prototype.createDom = function(c) { |
| var control = /** @type {goog.ui.media.Media} */ (c); |
| var div = goog.ui.media.Mp3.superClass_.createDom.call(this, control); |
| |
| var dataModel = |
| /** @type {goog.ui.media.MediaModel} */ (control.getDataModel()); |
| var flash = new goog.ui.media.FlashObject( |
| dataModel.getPlayer().getTrustedResourceUrl(), control.getDomHelper()); |
| flash.setFlashVar('playerMode', 'embedded'); |
| flash.render(div); |
| |
| return div; |
| }; |
| |
| |
| /** |
| * 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.Mp3.prototype.getCssClass = function() { |
| return goog.ui.media.Mp3.CSS_CLASS; |
| }; |