* moved remote oggHandler code to remoteMwEmbed.js (no need for it to be in mv_embed.js)
* added class target for button text
* updated global mv_embed config vars
var _this = this;
//remove old instance:
- if($j('#upProgressDialog').length!=0){
+ if($j('#upProgressDialog').length !=0 ){
$j('#upProgressDialog').dialog( 'destroy' ).remove();
}
//re add it:
title:_this.getProgressTitle(),
bgiframe: true,
modal: true,
+ draggable:true,
width:400,
heigh:200,
beforeclose: function(event, ui) {
},
buttons: _this.cancel_button()
});
- $j('#upProgressDialog').html(
- //set initial content:
- '<div id="up-pbar-container" style="width:90%;height:15px;" >' +
+ $j('#upProgressDialog').html(
+ '<div id="up-pbar-container" style="width:90%;height:15px;" >' +
'<div id="up-progressbar" style="height:15px;"></div>' +
'<div id="up-status-container">'+
'<span id="up-pstatus">0% - </span> ' +
$j('#up-progressbar').progressbar({
value:0
});
-
},
cancel_button:function(){
var _this = this;
"fogg-passthrough_mode" : "Your selected file is already Ogg or not a video file",
"fogg-transcoding" : "Encoding video to Ogg",
"fogg-encoding-done" : "Encoding complete",
- "fogg-badtoken" : "Token is not valid"
+ "fogg-badtoken" : "Token is not valid",
+ "fogg-preview" : "Preview Video",
+ "fogg-hidepreview" : "Hide Preview"
});
var firefogg_install_links = {
'target_passthrough_mode':false,
//if firefogg should take over the form submit action
- 'firefogg_form_action':true
+ 'firefogg_form_action':true,
+
+ //if we should show a preview of encoding progress
+ 'show_preview':false,
}
//update the bindings:
this.doControlBindings();
},
+ //do firefogg specific additions:
+ dispProgressOverlay:function(){
+ this.pe_dispProgressOverlay();
+ this.doPreviewControl();
+ },
+ doPreviewControl:function(){
+ var _this = this;
+ //prepend preview collapable
+ $j('#upProgressDialog').append(
+ '<div style="clear:both;height:3em"/>'+
+ $j.btnHtml(gM('fogg-preview'), 'fogg_preview', 'triangle-1-e') +
+ '<div style="padding:10px;">' +
+ '<canvas style="margin:auto;" id="fogg_preview_canvas" />' +
+ '</div>'
+ );
+ //set initial state
+ if( _this.show_preview == true){
+ $j('#fogg_preview_canvas').show();
+ }else{
+ $j('#fogg_preview_canvas').hide();
+ }
+ //apply preview binding:
+ $j('#upProgressDialog .fogg_preview').btnBind().click( function(){
+ js_log("click .foog_preview" + $j(this).children('.ui-icon').attr('class') );
+ //check state:
+ if( $j(this).children('.ui-icon').hasClass('ui-icon-triangle-1-e') ){
+ _this.show_preview = true;
+ //update icon:
+ $j(this).children('.ui-icon')
+ .removeClass('ui-icon-triangle-1-e')
+ .addClass('ui-icon-triangle-1-s');
+ //update text
+ $j(this).children('.btnText').text( gM('fogg-hidepreview') );
+
+ //show preview window
+ $j('#fogg_preview_canvas').show('fast');
+ }else{
+ _this.show_preview = false;
+ //update icon:
+ $j(this).children('.ui-icon')
+ .removeClass('ui-icon-triangle-1-s')
+ .addClass('ui-icon-triangle-1-e');
+ //update text:
+ $j(this).children('.btnText').text( gM('fogg-preview') );
+
+ $j('#fogg_preview_canvas').hide('slow');
+ }
+ });
+ },
+ doRenderPreview:function(){
+ var _this = this;
+ //set up the hidden video to pull frames from:
+ if( $j('#fogg_preview_vid').length == 0 )
+ $j('body').append('<video id="fogg_preview_vid" style="display:none"></video>');
+ var v = $j('#fogg_preview_vid').get(0);
+
+
+ function seekToEnd(){
+ var v = $j('#fogg_preview_vid').get(0);
+ v.currentTime = v.duration-0.4;
+ }
+ function getFrame() {
+ var v = $j('#fogg_preview_vid').get(0);
+ var canvas = $j('#fogg_preview_canvas').get(0);
+ canvas.width = 160;
+ canvas.height = canvas.width * v.videoHeight/v.videoWidth;
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
+ }
+ var previewI=null;
+ function preview() {
+ //initialize the video if not setup already:
+ var v = $j('#fogg_preview_vid').get(0);
+ if( v.src != _this.fogg.previewUrl ){
+ js_log('init preview with url:' + _this.fogg.previewUrl);
+ v.src = _this.fogg.previewUrl;
+
+ //set the video to seek to the end of the video
+ v.removeEventListener("loadedmetadata", seekToEnd, true);
+ v.addEventListener("loadedmetadata", seekToEnd, true);
+
+ //render a frame once seek is complete:
+ v.removeEventListener("seeked", getFrame, true);
+ v.addEventListener("seeked", getFrame, true);
+
+ //refresh the video duration/meta:
+ clearInterval(previewI);
+ var previewI = setInterval(function(){
+ if (_this.fogg.status() != "encoding"){
+ clearInterval(previewI);
+ }
+ v.load();
+ }, 1000);
+ }
+ }
+ preview();
+ },
getEditForm:function(){
if( this.target_edit_from )
return this.pe_getEditForm();
js_log('doEncode: with: ' + JSON.stringify( _this.encoder_settings ) );
_this.fogg.encode( JSON.stringify( _this.encoder_settings ) );
-
//show transcode status:
$j('#up-status-state').html( gM('mwe-upload-transcoded-status') );
var encodingStatus = function() {
var status = _this.fogg.status();
+ if( _this.show_preview == true ){
+ _this.doRenderPreview();
+ }
+
//update progress bar
_this.updateProgress( _this.fogg.progress() );
return false;
}
}
+ if( _this.show_preview == true ){
+ if( _this.fogg.state == 'encoding' ){
+ _this.doRenderPreview();
+ }
+ }
+
//update progress bar
_this.updateProgress( _this.fogg.progress() );
* Configuration variables should be set by extending mwConfigOptions
* here is the default config:
*/
-var mwConfig = {
+var mwDefaultConfig = {
'skin_name': 'mvpcf',
'jui_skin': 'redmond',
'video_size':'400x300'
}
-if( !mwConfigOptions )
- var mwConfigOptions = {};
+if( !mwConfig )
+ var mwConfig = {};
// Install the default config values for anything not set in mwConfig
* this once for PHP & JavaScript)
*
* This is more verbose than the earlier version that compressed paths
- * but it's all good, gzipping helps compress repetetive path strings
+ * but it's all good, gzipping helps compress path strings
* grouped by directory.
*
* Right now the PHP AutoLoader only reads this mv_embed.js file.
"$j.fn.simpleUploadForm": "libAddMedia/simpleUploadForm.js",
"ctrlBuilder" : "skins/ctrlBuilder.js",
- "kskin" : "skins/kskin/kskin.js",
- "mvpcf" : "skins/mvpcf/mvpcf.js",
+ "kskinConfig" : "skins/kskin/kskin.js",
+ "mvpcfConfig" : "skins/mvpcf/mvpcf.js",
"$j.secureEvalJSON" : "jquery/plugins/jquery.secureEvalJSON.js",
"$j.cookie" : "jquery/plugins/jquery.cookie.js",
"mvTimedEffectsEdit": "libSequencer/mvTimedEffectsEdit.js",
"mvTextInterface" : "libTimedText/mvTextInterface.js"
-
});
// Dependency mapping for CSS files for self-contained included plugins:
_global['$j'] = jQuery.noConflict();
//setup our global settings using the (jQuery helper)
- $j.extend( mwConfig, mwConfigOptions);
+ mwConfig = $j.extend( mwDefaultConfig, mwConfig);
// Set up the skin path
_global['mv_jquery_skin_path'] = mv_embed_path + 'jquery/jquery.ui/themes/' +mwConfig['jui_skin'] + '/';
_global['mv_skin_img_path'] = mv_embed_path + 'skins/' + mwConfig['skin_name'] + '/images/';
_global['mv_default_thumb_url'] = mv_skin_img_path + 'vid_default_thumb.jpg';
+ //setup skin dependent dependencies
+ lcCssPath({'embedVideo' : 'skins/' + mwConfig['skin_name'] + '/playerSkin.css'});
+
// Make sure the skin/style sheets are always available:
loadExternalCss( mv_jquery_skin_path + 'jquery-ui-1.7.1.custom.css' );
loadExternalCss( mv_embed_path + 'skins/' + mwConfig['skin_name'] + '/styles.css' );
});
js_log( 'jQuery loaded into $j' );
- // Set up mvEmbed jQuery bindings:
+ // Set up mvEmbed jQuery bindings and config based dependencies
mv_jqueryBindings();
}
// Run the callback
js_log( 'embedVideoCheck:' );
// Make sure we have jQuery
_this.jQueryCheck( function() {
+ //set class videonojs to hidden
$j('.videonojs').html( gM('mwe-loading_txt') );
- //Set up the embed video player class request:
+ //Set up the embed video player class request: (include the skin js as well)
var depReq = [
[
'$j.ui',
'embedVideo',
'ctrlBuilder',
- '$j.cookie'
+ '$j.cookie'
],
[
'$j.ui.slider'
]
- ];
+ ];
+ //add skin if set:
+ if( mwConfig['skin_name'] )
+ depReq[0].push( mwConfig['skin_name'] + 'Config' );
+
// Add PNG fix if needed:
if( $j.browser.msie || $j.browser.version < 7 )
depReq[0].push( '$j.fn.pngFix' );
*/
function rewrite_by_id( vid_id, ready_callback ) {
js_log( 'f:rewrite_by_id: ' + vid_id );
- // Force a recheck of the DOM for playlist or video elements:
+ // Force a re-check of the DOM for playlist or video elements:
mvJsLoader.embedVideoCheck( function() {
mv_video_embed( ready_callback, vid_id );
});
}
-// Deprecated in favor of updates to OggHandler
-function rewrite_for_OggHandler( vidIdList ){
- for( var i = 0; i < vidIdList.length; i++ ) {
- var vidId = vidIdList[i];
- js_log( 'looking at vid: ' + i +' ' + vidId );
- // Grab the thumbnail and src of the video
- var pimg = $j( '#' + vidId + ' img' );
- var poster_attr = 'poster = "' + pimg.attr( 'src' ) + '" ';
- var pwidth = pimg.attr( 'width' );
- var pheight = pimg.attr( 'height' );
-
- var type_attr = '';
- // Check for audio
- if( pwidth == '22' && pheight == '22' ) {
- pwidth = '400';
- pheight = '300';
- type_attr = 'type="audio/ogg"';
- poster_attr = '';
- }
-
- // Parsed values:
- var src = '';
- var duration = '';
-
- var re = new RegExp( /videoUrl(":?\s*)*([^&]*)/ );
- src = re.exec( $j( '#'+vidId).html() )[2];
-
- var re = new RegExp( /length(":?\s*)*([^&]*)/ );
- duration = re.exec( $j( '#'+vidId).html() )[2];
-
- var re = new RegExp( /offset(":?\s*)*([^&]*)/ );
- offset = re.exec( $j( '#'+vidId).html() )[2];
- var offset_attr = offset ? 'startOffset="' + offset + '"' : '';
-
- if( src ) {
- // Replace the top div with the mv_embed based player:
- var vid_html = '<video id="vid_' + i +'" '+
- 'src="' + src + '" ' +
- poster_attr + ' ' +
- type_attr + ' ' +
- offset_attr + ' ' +
- 'duration="' + duration + '" ' +
- 'style="width:' + pwidth + 'px;height:' +
- pheight + 'px;"></video>';
- //js_log("Video HTML: " + vid_html);
- $j( '#'+vidId ).html( vid_html );
- }
-
- // Rewrite that video ID:
- rewrite_by_id( 'vid_' + i );
- }
-}
/*********** INITIALIZATION CODE *************
],
[
'$j.ui.progressbar',
- '$j.ui.dialog'
+ '$j.ui.dialog',
+ '$j.ui.draggable'
]
];
if( iObj.encoder_interface ) {
return '<a href="' + href + '" ' + target_attr + style_attr +
' class="ui-state-default ui-corner-all ui-icon_link ' +
className + '"><span class="ui-icon ui-icon-' + iconId + '" />' +
- msg + '</a>';
+ '<span class="btnText">'+ msg +'<span></a>';
}
// Shortcut to bind hover state
- $.fn.btnBind = function() {
+ $.fn.btnBind = function() {
$j( this ).hover(
- function() {
+ function() {
$j( this ).addClass( 'ui-state-hover' );
},
function() {