diff --git a/support/client/lib/vwf.js b/support/client/lib/vwf.js index 36e3e758a..29e4bfca1 100644 --- a/support/client/lib/vwf.js +++ b/support/client/lib/vwf.js @@ -405,6 +405,7 @@ { library: "vwf/view/cesium", active: false }, { library: "vwf/view/kineticjs", active: false }, { library: "vwf/view/mil-sym", active: false }, + { library: "vwf/view/jPlayer", linkedLibraries: ["vwf/model/jPlayer.2.7.1/jquery.jplayer.min"], active: false }, { library: "vwf/view/audio", active: false }, { library: "vwf/kernel/utility", active: true }, { library: "vwf/utility", active: true }, @@ -460,6 +461,7 @@ { library: "vwf/view/touch", active: false }, { library: "vwf/view/kineticjs", active: false }, { library: "vwf/view/mil-sym", active: false }, + { library: "vwf/view/jPlayer", active: false }, { library: "vwf/view/audio", active: false }, { library: "vwf/view/webrtc", active: false} ] diff --git a/support/client/lib/vwf/model/jPlayer.js b/support/client/lib/vwf/model/jPlayer.js old mode 100644 new mode 100755 index 6debc886e..95eeb8ed5 --- a/support/client/lib/vwf/model/jPlayer.js +++ b/support/client/lib/vwf/model/jPlayer.js @@ -1,4 +1,4 @@ -/// vwf/model/jPlayer.js is a sound driver +/// vwf/model/jPlayer.js is a sound/video driver /// /// @module vwf/model/jPlayer /// @requires vwf/model @@ -12,9 +12,15 @@ define( [ var modelDriver; var jPlayerInstanceCreated = false; + // NXM: For some reason, using the format below breaks video! + // var audioManagerProtoId = "http-vwf-example-com-jplayer-audioManager-vwf"; + // var videoManagerProtoId = "http-vwf-example-com-jplayer-videoManager-vwf"; + var audioManagerProtoId = "http://vwf.example.com/jplayer/audioManager.vwf"; var videoManagerProtoId = "http://vwf.example.com/jplayer/videoManager.vwf"; + var jplayerContainerId = "jp_container_1"; + return model.load( module, { // == Module Definition ==================================================================== @@ -22,6 +28,15 @@ define( [ // -- initialize --------------------------------------------------------------------------- initialize: function( options ) { + + var containerDiv = document.createElement( 'div' ); + containerDiv.id = jplayerContainerId; + containerDiv.className = "jp-video jp-video-360p"; + var playerDiv = document.createElement( 'div' ); + playerDiv.id = "jquery_jplayer_1"; + playerDiv.className = "jp-jplayer"; + containerDiv.appendChild( playerDiv ); + $( "body" ).append(containerDiv); modelDriver = this; @@ -67,7 +82,13 @@ define( [ } } return found; - } + }, + "videoEndedCallback" : function() { + var mediaManagerID = modelDriver.kernel.find( undefined, "/mediaManager" )[ 0 ]; + var videoManagerID = modelDriver.kernel.find( mediaManagerID, "videoManager" ) [ 0 ]; + console.log("Video ended callback in driver fired!"); + modelDriver.kernel.fireEvent(videoManagerID, "videoEnded"); + }, }; // turns on logger debugger console messages @@ -120,7 +141,7 @@ define( [ return; } - var protos = getPrototypes( this.kernel, childExtendsID ); + var protos = this.kernel.prototypes( childID ); var isAudioManager = this.state.isAudioManager( protos ); var isVideoManager = this.state.isVideoManager( protos ); @@ -199,10 +220,17 @@ define( [ setUrl( node, propertyValue ); value = node.url; break; + + case "preload": + setPreload( node, propertyValue ); + value = node.preload; + break; + case "loop": setLoop( node, propertyValue ); value = node.loop; break; + case "playerDivId": if ( propertyValue === node.playerDivId ) { break; @@ -215,12 +243,17 @@ define( [ if ( $existingElement.length ) { node.jPlayerElement = $existingElement; } else { - node.jPlayerElement = $( "
", { - id: node.playerDivId - } ); - $( "body" ).append( node.jPlayerElement ); + //Change the existing element to match the new name + var playerDiv = document.createElement( 'div' ); + playerDiv.id = node.playerDivId; + if( node.containerDivId ){ + $( "#" + node.containerDivId ).append( playerDiv ); + } else { + $("#jp_container_1").append( playerDiv ); + } + node.jPlayerElement = $( "#" + node.playerDivId ); } - var fileTypes = ( node.managerType === "audio" ) ? "mp3,wav" : "m4v"; + var fileTypes = ( node.managerType === "audio" ) ? "mp3,wav" : "m4v,webmv"; node.jPlayerElement.jPlayer( { ready: function() { if ( node.url !== undefined ) { @@ -229,12 +262,20 @@ define( [ if ( node.loop !== undefined ) { setLoop( node, node.loop ); } + if ( node.preload !== undefined ) { + setPreload( node, node.preload ); + } if ( node.containerDivId !== undefined ) { setControlDivId( node, node.containerDivId ); } }, - supplied: fileTypes + supplied: fileTypes, } ); + + if ( node.playerDivId ) { + $( "#" + node.playerDivId ).bind( $.jPlayer.event.ended, this.state.videoEndedCallback ); + } + value = node.playerDivId; break; case "containerDivId": @@ -245,6 +286,14 @@ define( [ setPosterImageUrl( node, propertyValue ); value = node.posterImageUrl; break; + case "playerSize": + setPlayerSize( node, propertyValue ); + value = node.playerSize; + break; + case "containerSize": + setContainerSize( node, propertyValue ); + value = node.containerSize; + break; default: break; } @@ -301,7 +350,6 @@ define( [ return node && node[ propertyName ]; }, - // TODO: deletingMethod // -- callingMethod -------------------------------------------------------------------------- @@ -323,7 +371,11 @@ define( [ switch( methodName ) { case "play": - node.jPlayerElement.jPlayer( "play" ); + if( node.url ) { + node.jPlayerElement.jPlayer( "play" ); + } else { + this.logger.errorx( "No URL given!" ); + } break; case "pause": @@ -334,6 +386,9 @@ define( [ node.jPlayerElement.jPlayer( "stop" ); break; + case "clearMedia": + node.jPlayerElement.jPlayer( "clearMedia" ); + break; } } @@ -342,18 +397,6 @@ define( [ } ); - function getPrototypes( kernel, extendsID ) { - var prototypes = []; - var id = extendsID; - - while ( id !== undefined ) { - prototypes.push( id ); - id = kernel.prototype( id ); - } - - return prototypes; - } - function setWithPrototypeProperties( proto ) { if ( proto.url !== null ) { vwf.setProperty( node.ID, "url", proto.url ); @@ -372,7 +415,34 @@ define( [ } } - function setUrl( node, url ) { + function setVideoURL( mediaObj, url ) { + if ( url.search( "data:video/mp4" ) === 0 || url.search( ".mp4$" ) > -1 ) { + mediaObj.m4v = url; + } else if( url.search( ".webm$" ) > -1 ){ + mediaObj.webmv = url; + } else { + modelDriver.logger.errorx( "setUrl", + "Unsupported video type for '", url, "'" ); + } + } + + function setUrl( node, inputUrl ) { + + var usingMultiUrls; + var url; + if( inputUrl && ( inputUrl.constructor === Array ) ){ + usingMultiUrls = true; + url = inputUrl[ 0 ]; + } else { + usingMultiUrls = false; + url = inputUrl; + } + + if( node.url && url && ( node.url === url ) ){ + console.log("Setting redudant URL! Quitting!"); + return; + } + node.url = url; // If there is no jPlayerElement, there is nothing to do yet so we return. @@ -386,31 +456,28 @@ define( [ if ( url ) { // Construct the media object based on the type of file being passed in - var mediaObject; + var mediaObject = {}; + switch ( node.managerType ) { case "audio": + //TODO: Support multiple URLs for audio. if ( url.search( "data:audio/mp3" ) === 0 ) { - mediaObject = { - mp3: url - }; + medaObject.mp3 = url; } else if ( url.search( "data:audio/wav" ) === 0 ) { - mediaObject = { - wav: url - }; + mediaObject.wav = url; } else { modelDriver.logger.errorx( "setUrl", "Unsupported sound type for '", url, "'" ); } break; case "video": - if ( url.search( "data:video/mp4" ) === 0 ) { - mediaObject = { - m4v: url, - poster: node.posterImageUrl - }; + mediaObject.poster = node.posterImageUrl; + if( usingMultiUrls ) { + for( var i = 0; i < inputUrl.length; i++ ) { + setVideoURL( mediaObject, inputUrl[ i ] ); + } } else { - modelDriver.logger.errorx( "setUrl", - "Unsupported video type for '", url, "'" ); + setVideoURL( mediaObject, url ); } break; default: @@ -423,6 +490,7 @@ define( [ // Otherwise, clear the current media if ( mediaObject ) { node.jPlayerElement.jPlayer( "setMedia", mediaObject ); + node.jPlayerElement.jPlayer( "load" ); } else { node.jPlayerElement.jPlayer( "clearMedia" ); } @@ -431,6 +499,14 @@ define( [ } } + function setPreload( node, preload ) { + node.preload = preload; + if ( node.jPlayerElement ) { + node.jPlayerElement.jPlayer( "option", { preload: preload } ); + console.log("Setting preload to: " + preload); + } + } + function setLoop( node, loop ) { node.loop = loop; if ( node.jPlayerElement ) { @@ -440,9 +516,6 @@ define( [ function setControlDivId( node, containerDivId ) { node.containerDivId = containerDivId; - if ( node.jPlayerElement ) { - node.jPlayerElement.jPlayer( "option", { cssSelectorAncestor: "#" + containerDivId } ); - } } function setPosterImageUrl( node, posterImageUrl ) { @@ -454,4 +527,14 @@ define( [ } ); } } + + function setPlayerSize( node, playerSize ){ + node.playerSize = playerSize; + node.jPlayerElement.jPlayer( "option", "size", {width: playerSize[0], height: playerSize[1]}); + } + + function setContainerSize( node, containerSize ){ + node.containerSize = containerSize; + } + } ); diff --git a/support/client/lib/vwf/view/jPlayer.js b/support/client/lib/vwf/view/jPlayer.js new file mode 100755 index 000000000..389b3f590 --- /dev/null +++ b/support/client/lib/vwf/view/jPlayer.js @@ -0,0 +1,67 @@ +/// vwf/view/jPlayer.js is a sound/video driver +/// +/// @module vwf/model/jPlayer +/// @requires vwf/model + +define( [ + "module", + "vwf/view", + "jquery" + ], function( module, view, $ ) { + return view.load( module, { + createdProperty: function (nodeID, propertyName, propertyValue) { + this.satProperty(nodeID, propertyName, propertyValue); + }, + + initializedProperty: function ( nodeID, propertyName, propertyValue ) { + this.satProperty(nodeID, propertyName, propertyValue); + }, + + calledMethod: function( nodeID, methodName, methodParameters, methodValue ) { + var node = this.state.nodes[nodeID]; + + if( node ){ + var containerSelector = "#" + node.containerDivId; + var playerSelector = "#" + node.playerDivId; + + switch ( methodName ){ + //We cannot safely call .show() or .hide() on the jPlayer div + //See http://jplayer.org/latest/developer-guide/#jPlayer-disable-by-css + case "show": + var contX = node.containerSize[0]; + var contY = node.containerSize[1]; + var playerX = node.playerSize[0]; + var playerY = node.playerSize[1]; + + $( containerSelector ).css('width', contX); + $( containerSelector ).css('height', contY); + $( playerSelector ).css('width', playerX); + $( playerSelector ).css('height', playerY); + break; + + case "hide": + $( containerSelector ).css('width', 0); + $( containerSelector ).css('height', 0); + $( playerSelector ).css('width', 0); + $( playerSelector ).css('height', 0); + break; + } + } + }, + + satProperty: function ( nodeID, propertyName, propertyValue ) { + var node = this.state.nodes[nodeID]; + if( node && propertyValue ){ + switch( propertyName ){ + case "containerDivSize": + node.containerDivSize = propertyValue; + break; + case "playerDivSize": + node.playerDivSize = propertyValue; + break; + } + } + } + }); + } +); diff --git a/support/proxy/vwf.example.com/jplayer/videoManager.vwf.yaml b/support/proxy/vwf.example.com/jplayer/videoManager.vwf.yaml old mode 100644 new mode 100755 index dd8c6dd7c..bf0930b36 --- a/support/proxy/vwf.example.com/jplayer/videoManager.vwf.yaml +++ b/support/proxy/vwf.example.com/jplayer/videoManager.vwf.yaml @@ -2,12 +2,20 @@ extends: http://vwf.example.com/node.vwf properties: url: + altUrls: posterImageUrl: loop: false - containerDivId: "videoContainer" + containerDivId: "jp_container_1" playerDivId: "videoScreen" + containerSize: [ 1024, 768 ] + playerSize: [ 1024, 768 ] + preload: "auto" methods: - play: + play: pause: - stop: - \ No newline at end of file + stop: + show: + hide: + clearMedia: +events: + videoEnded: