# HG changeset patch # User veltr # Date 1348031509 -32400 # Node ID e1baacb52075525c9c552f5418afeb08b251f9e3 # Parent 7c1d08cf6956ef3490389c354a430f1bf79b52a3# Parent 9a278b9e3b05258b6d899b62411ee2de24426d4b Merge players-as-widgets branch back into default diff -r 7c1d08cf6956 -r e1baacb52075 doc/eventslist.txt --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/doc/eventslist.txt Wed Sep 19 14:11:49 2012 +0900 @@ -0,0 +1,79 @@ +Event Name Published by Subscribed by + +========================================== ============================== ============================== + +Annotation.boundsChanged Annotation Slice + +Annotation.getBounds Segments Annotation + +Annotation.hide Annotation + +Annotation.maximize CreateAnnotation Annotation + = Tweet + +Annotation.minimize CreateAnnotation Annotation + = Tweet + +Annotation.show Annotation + +AnnotationsList.refresh CreateAnnotation AnnotationsList + = Tagger + +Arrow.release Segments Arrow + +Arrow.takeover Segments Arrow + +Arrow.updatePosition Annotation Arrow + = Segments + = Slider + +CreateAnnotation.toggle Controller CreateAnnotation + +createAnnotationWidget.addedAnnotation X AnnotationsList + +Mediafragment.setHashToAnnotation Polemic Mediafragment + = Renkan = + = Segments = + +Mediafragment.setHashToTime Slider X + +Player.MouseOver Controller Slider + +Player.MouseOut Controller Slider + +search Controller AnnotationsList + = = Polemic + = = Segments + = = Tagcloud + +search.closed Controller AnnotationsList + = = Polemic + = = Segments + = = Tagcloud + +search.cleared Controller AnnotationsList + = Renkan Polemic + = = Segments + = = Tagcloud + +search.matchFound AnnotationsList Controller + = Polemic = + = Segments = + +search.noMatchFound AnnotationsList Controller + = Polemic = + = Segments = + +search.open Controller + +search.triggeredSearch Annotation Controller + = Renkan = + = Tagcloud = + +Slice.boundsChanged Slice CreateAnnotation + +Slice.hide CreateAnnotation Slice + +Slice.show CreateAnnotation Slice + +Tweet.show Polemic \ No newline at end of file diff -r 7c1d08cf6956 -r e1baacb52075 doc/integration.en.md --- a/doc/integration.en.md Fri Sep 14 10:38:04 2012 +0900 +++ b/doc/integration.en.md Wed Sep 19 14:11:49 2012 +0900 @@ -51,7 +51,7 @@ IriSP.libFiles.locations.jQueryUI = "libs/jquery-ui-1.8.16.custom.min.js"; IriSP.libFiles.locations.jwPlayerSWF = "libs/jwplayer/player.swf"; -## Configuration of metadata source ## +## Configuration of a metadata source ## A metadata source is defined by its url and file type (which defines the *serializer* to use). @@ -66,42 +66,21 @@ ## Configuration of the video player ## -The video player is configured through an object having the following properties: - -- **metadata**: Metadata source. -- **type**: Video player type : - - **"jwplayer"**: Uses flash-based jwPlayer, compatible with many video and audio formats, including MP3 audio, MP4 video and RTMP streams. - - **"html5"**: Uses the Popcorn.js library to play HTML5 videos. Supported formats : OGG and WebM on Firefox and Chrome, H.264 on Internet Explorer, Safari and Chrome. - - **"youtube"**: Uses Popcorn's Youtube plugin. - - **"dailymotion"** - - **"auto"**: Replaced by *Youtube* or *Dailymotion* for a video hosted on one of these platform, or *jwPlayer* in other cases. -- **width** and **height** of the video player. -- **video**: Video URL. Optional: If present, it overrides the video URL defined in the metadata source. -- Player-specific options, such as **provider** or **streamer** for JwPlayer - -Example: - - var playerConfig = { - metadata: metadataSource, - type: "jwplayer", - height: 350, - width: 620, - provider: "rtmp" - }; +In this version, the video player is now a widget. This section is therefore obsolete ## User Interface Configuration ## -L’interface se configure par un objet GUI, contenant les propriétés suivantes: +The interface is configured with the following properties: -- **container**: l’ID de l’élément HTML dans lequel le player sera instancié. -- **width** et **height**: largeur et hauteur de l’interface (*height* est optionnel). -- **default\_options**: des options de configuration communes à tous les widgets, par exemple, comme ci-dessous, une source de métadonnées communes. -- **css**: l’URL du fichier CSS de base (LdtPlayer-core.css) -- **widgets**: la liste des widgets, sous la forme [ { type: *Type du widget*, option_1: *Valeur de l’option 1* } ]. Pour les options des widgets, se référer au document *Architecture générale* +- **container**: ID of the DOM element in which the metadataplayer will be instantiated. +- **width** et **height**: width and height of the interface (*height* is optional). +- **default\_options**: Configuration options that will be passed to all widgets. In the example below, all widgets will connect to the same metadata source. +- **css**: The URL of the base CSS stylesheet (LdtPlayer-core.css) +- **widgets**: A list of widgets, in the following format: [ { type: *Widget type*, option_1: *Option 1 value* } ]. For widget options, please refer to the *general architecture* document Exemple: - var guiConfig = { + var config = { container : "Metadataplayer", default_options: { metadata: metadataSource @@ -109,6 +88,9 @@ css : "metadataplayer/css/LdtPlayer-core.css", widgets: [ { + type: "AutoPlayer" + }, + { type: "Slider" },{ type: "Controller", @@ -123,14 +105,10 @@ ] }; -## Instanciation du player ## +## Player instanciation ## -Le player s’instancie en créant un objet de type **IriSP.Metadataplayer**. +The metadataplayer is instantiated by creating an object of class **IriSP.Metadataplayer**. Exemple: - var config = { - player: playerConfig, - gui: guiConfig - }; - var monPlayer = new IriSP.Metadataplayer(config); + var myPlayer = new IriSP.Metadataplayer(config); diff -r 7c1d08cf6956 -r e1baacb52075 doc/integration.fr.md --- a/doc/integration.fr.md Fri Sep 14 10:38:04 2012 +0900 +++ b/doc/integration.fr.md Wed Sep 19 14:11:49 2012 +0900 @@ -63,32 +63,11 @@ ## Configuration de la fenêtre vidéo ## -Les options de configuration de la fenêtre vidéo sont: - -- **metadata**: La source de métadonnées utilisée, notamment pour obtenir l’URL de la vidéo. -- **type**: Le type de player vidéo utilisé. Les players disponibles sont : - - **"jwplayer"**: Utilise le player flash jwPlayer, compatible avec de nombreux formats vidéo et audio et les flux RTMP. - - **"html5"**: Utilise la bibliothèque Popcorn et les vidéos HTML5. Formats supportés: OGG et WebM sur Firefox et Chrome, H.264 sur Internet Explorer et Safari. - - **"youtube"**: Utilise le plugin Youtube de Popcorn pour afficher les vidéos Youtube. - - **"dailymotion"** - - **"auto"**: Remplacé par *Youtube* ou *Dailymotion* pour une vidéo sur l’un de ces sites et par JwPlayer sinon. -- **width** et **height**: largeur et hauteur de la fenêtre vidéo. -- **video**: URL de la vidéo. Si ce paramètre est présent, il écrase l’URL chargée dans les métadonnées -- Paramètres spécifiques à chaque player, qui seront transférés tels quels, par exemple **provider** pour JwPlayer - -Exemple: - - var playerConfig = { - metadata: metadataSource, - type: "jwplayer", - height: 350, - width: 620, - provider: "rtmp" - }; +Dans cette version, la fenêtre vidéo est désormais un widget. Cette section est donc obsolète. ## Configuration de l’interface utilisateur ## -L’interface se configure par un objet GUI, contenant les propriétés suivantes: +L’interface se configure par un objet contenant les propriétés suivantes: - **container**: l’ID de l’élément HTML dans lequel le player sera instancié. - **width** et **height**: largeur et hauteur de l’interface (*height* est optionnel). @@ -98,7 +77,7 @@ Exemple: - var guiConfig = { + var config = { container : "Metadataplayer", default_options: { metadata: metadataSource @@ -106,6 +85,9 @@ css : "metadataplayer/css/LdtPlayer-core.css", widgets: [ { + type: "AutoPlayer" + }, + { type: "Slider" },{ type: "Controller", @@ -122,12 +104,8 @@ ## Instanciation du player ## -Le player s’instancie en créant un objet de type **IriSP.Metadataplayer**. +Le player s’instancie en créant un objet de classe **IriSP.Metadataplayer**. Exemple: - var config = { - player: playerConfig, - gui: guiConfig - }; var monPlayer = new IriSP.Metadataplayer(config); diff -r 7c1d08cf6956 -r e1baacb52075 doc/widget-api.fr.md --- a/doc/widget-api.fr.md Fri Sep 14 10:38:04 2012 +0900 +++ b/doc/widget-api.fr.md Wed Sep 19 14:11:49 2012 +0900 @@ -68,15 +68,15 @@ ### Propriétés accessibles par le widget ### -#### Popcorn #### +#### Media #### -Les fonctions de gestion de la lecture vidéo sont accessibles par la propriété **popcorn** du Metadataplayer. +Les fonctions de gestion de la lecture vidéo sont accessibles via les objets **media**. Par exemple: - this.player.popcorn.trigger("Evenement"); => déclenche un événement Popcorn de type "Evenement" - this.player.popcorn.play(); => met le player en lecture - this.player.popcorn.currentTime() => obtient le timecode courant, en secondes + this.media.trigger("Evenement"); => déclenche un événement Popcorn de type "Evenement" + this.media.play(); => met le player en lecture + this.media.currentTime() => obtient le timecode courant, en secondes #### Source de métadonnées #### @@ -119,13 +119,20 @@ this.$.click(this.functionWrapper("onClick")); => Appellera this.onClick() lors d’un click sur le widget -#### bindPopcorn #### +#### onMediaEvent #### -Attache un événement *Popcorn* à une fonction, sur le même mode que *functionWrapper* +Attache un événement *Media* ("play", "timeupdate", ...) à une fonction désignée +- par son nom, quand celle-ci est une méthode du widget, ce qui permet de l’associer directement au widget, sur le même mode que *functionWrapper* +- comme fonction anonyme Par exemple: - this.bindPopcorn("timeupdate","onTimeupdate"); => Appellera this.onTimeupdate() lorsque l’événement Popcorn "timeupdate" est déclenché. + this.onMediaEvent("timeupdate","onTimeupdate"); => Appellera this.onTimeupdate() lorsque l’événement media "timeupdate" est déclenché. + this.onMediaEvent("play", function() { console.log("play") }); => Affichera "play" dans la console JavaScript + +#### onMdpEvent #### + +Attache un événement Metadataplayer global ("Annotation.show", "search.found", ...) à une fonction. Utilisé de manière similaire à onMediaEvent. #### Autres fonctions #### diff -r 7c1d08cf6956 -r e1baacb52075 sbin/build/client.xml --- a/sbin/build/client.xml Fri Sep 14 10:38:04 2012 +0900 +++ b/sbin/build/client.xml Wed Sep 19 14:11:49 2012 +0900 @@ -23,10 +23,6 @@ - - - - diff -r 7c1d08cf6956 -r e1baacb52075 src/js/defaults.js --- a/src/js/defaults.js Fri Sep 14 10:38:04 2012 +0900 +++ b/src/js/defaults.js Wed Sep 19 14:11:49 2012 +0900 @@ -42,6 +42,18 @@ IriSP.widgetsDir = 'widgets'; IriSP.widgetsRequirements = { + PopcornPlayer: { + noCss: true, + requires: [ "popcorn" ] + }, + JwpPlayer: { + noCss: true, + requires: [ "jwplayer" ] + }, + DailymotionPlayer: { + noCss: true, + requires: [ "swfObject" ] + }, Sparkline: { noCss: true, requires: [ "raphael" ] @@ -57,7 +69,7 @@ noCss: true, requires: [ "tracemanager" ] }, - SlideShare: { + Slideshare: { requires: [ "swfObject" ] }, Social: { diff -r 7c1d08cf6956 -r e1baacb52075 src/js/init.js --- a/src/js/init.js Fri Sep 14 10:38:04 2012 +0900 +++ b/src/js/init.js Wed Sep 19 14:11:49 2012 +0900 @@ -1,4 +1,4 @@ -/* init.js - initialization and configuration of Popcorn and the widgets +/* init.js - initialization and configuration of the widgets */ if (typeof window.IriSP === "undefined") { @@ -10,43 +10,34 @@ IriSP.Metadataplayer = function(config) { IriSP.log("IriSP.Metadataplayer constructor"); for (var key in IriSP.guiDefaults) { - if (IriSP.guiDefaults.hasOwnProperty(key) && !config.gui.hasOwnProperty(key)) { - config.gui[key] = IriSP.guiDefaults[key] + if (IriSP.guiDefaults.hasOwnProperty(key) && !config.hasOwnProperty(key)) { + config[key] = IriSP.guiDefaults[key] } } - var _container = document.getElementById(config.gui.container); + var _container = document.getElementById(config.container); _container.innerHTML = '

Loading... Chargement...

'; this.sourceManager = new IriSP.Model.Directory(); this.config = config; - this.callbackQueue = []; - this.isLoaded = false; + this.__events = {}; this.loadLibs(); } IriSP.Metadataplayer.prototype.toString = function() { - return 'Metadataplayer in #' + this.config.gui.container; -} - -IriSP.Metadataplayer.prototype.deferCallback = function(_callback) { - var _this = this; - IriSP._.defer(function() { - _callback.call(_this); - }); + return 'Metadataplayer in #' + this.config.container; } -IriSP.Metadataplayer.prototype.handleCallbacks = function() { - this.isLoaded = true; - while (this.callbackQueue.length) { - this.deferCallback(this.callbackQueue.splice(0,1)[0]); +IriSP.Metadataplayer.prototype.on = function(_event, _callback) { + if (typeof this.__events[_event] === "undefined") { + this.__events[_event] = []; } + this.__events[_event].push(_callback); } -IriSP.Metadataplayer.prototype.onLoad = function(_callback) { - if (this.isLoaded) { - this.deferCallback(_callback); - } else { - this.callbackQueue.push(_callback); - } +IriSP.Metadataplayer.prototype.trigger = function(_event, _data) { + var _element = this; + IriSP._(this.__events[_event]).each(function(_callback) { + _callback.call(_element, _data); + }); } IriSP.Metadataplayer.prototype.loadLibs = function() { @@ -54,8 +45,7 @@ var $L = $LAB .script(IriSP.getLib("underscore")) .script(IriSP.getLib("Mustache")) - .script(IriSP.getLib("jQuery")) - .script(IriSP.getLib("swfObject")); + .script(IriSP.getLib("jQuery")); if (typeof JSON == "undefined") { $L.script(IriSP.getLib("json")); @@ -64,17 +54,9 @@ $L.wait() .script(IriSP.getLib("jQueryUI")); - if (this.config.player.type === "jwplayer" || this.config.player.type === "auto") { - $L.script(IriSP.getLib("jwplayer")); - } - - if (this.config.player.type !== "jwplayer" && this.config.player.type !== "allocine" && this.config.player.type !== "dailymotion") { - $L.script(IriSP.getLib("popcorn")); - } - /* widget specific requirements */ - for(var _i = 0; _i < this.config.gui.widgets.length; _i++) { - var _t = this.config.gui.widgets[_i].type; + for(var _i = 0; _i < this.config.widgets.length; _i++) { + var _t = this.config.widgets[_i].type; if (typeof IriSP.widgetsRequirements[_t] !== "undefined" && typeof IriSP.widgetsRequirements[_t].requires !== "undefined" ) { for (var _j = 0; _j < IriSP.widgetsRequirements[_t].requires.length; _j++) { $L.script(IriSP.getLib(IriSP.widgetsRequirements[_t].requires[_j])); @@ -98,22 +80,25 @@ IriSP._ = window._; } IriSP.loadCss(IriSP.getLib("cssjQueryUI")); - IriSP.loadCss(this.config.gui.css); + IriSP.loadCss(this.config.css); - this.videoData = this.loadMetadata(this.config.player.metadata); - this.$ = IriSP.jQuery('#' + this.config.gui.container); + this.$ = IriSP.jQuery('#' + this.config.container); this.$.css({ - "width": this.config.gui.width, + "width": this.config.width, "clear": "both" }); - if (typeof this.config.gui.height !== "undefined") { - this.$.css("height", this.config.gui.height); + if (typeof this.config.height !== "undefined") { + this.$.css("height", this.config.height); } + this.widgets = []; var _this = this; - this.videoData.onLoad(function() { - _this.onVideoDataLoaded(); - }); + for(var i = 0; i < this.config.widgets.length; i++) { + this.loadWidget(this.config.widgets[i], function(_widget) { + _this.widgets.push(_widget) + }); + }; + this.$.find('.Ldt-Loader').detach(); } IriSP.Metadataplayer.prototype.loadMetadata = function(_metadataInfo) { @@ -130,197 +115,6 @@ } } -IriSP.Metadataplayer.prototype.onVideoDataLoaded = function() { - - /* Setting default media from metadata */ - - if (typeof this.videoData !== "undefined") { - - var _media; - - if (typeof this.videoData.mainMedia !== "undefined") { - _media = this.videoData.getElement(this.videoData.mainMedia); - } - - if (this.config.player.type === "mashup" || this.config.player.type === "mashup-html") { - if (typeof _media === "undefined" || _media.elementType !== "mashup") { - var _mashups = this.videoData.getMashups(); - if (_mashups.length) { - _media = _mashups[0]; - } - } - } else { - if (typeof _media === "undefined" || _media.elementType !== "media") { - var _medias = this.videoData.getMedias(); - if (_medias.length) { - _media = _medias[0]; - } - } - } - - this.videoData.currentMedia = _media; - - /* Getting video URL from metadata if it's not in the player config options */ - - if (typeof _media !== "undefined" && typeof _media.video !== "undefined" && typeof this.config.player.video === "undefined") { - this.config.player.video = _media.video; - if (typeof this.config.player.streamer == "undefined" && typeof _media.streamer !== "undefined") { - this.config.player.streamer = _media.streamer; - } - } - - } - - if (typeof this.config.player.video === "string" && this.config.player.url_transform === "function") { - this.config.player.video = this.config.player.url_transform(this.config.player.video); - } - - var _pop, - _divs = this.layoutDivs("video",this.config.player.height || undefined), - containerDiv = _divs[0], - spacerDiv = _divs[1], - _this = this, - _types = { - "html5" : /\.(ogg|ogv|webm)$/, - "youtube" : /^(https?:\/\/)?(www\.)?youtube\.com/, - "vimeo" : /^(https?:\/\/)?(www\.)?vimeo\.com/, - "dailymotion" : /^(https?:\/\/)?(www\.)?dailymotion\.com/ - }; - - if (this.config.player.type === "auto") { - this.config.player.type = "jwplayer"; - IriSP._(_types).each(function(_v, _k) { - if (_v.test(_this.config.player.video)) { - _this.config.player.type = _k - } - }); - } - - switch(this.config.player.type) { - case "html5": - var _tmpId = Popcorn.guid("video"), - _videoEl = IriSP.jQuery('