From dadab2da4e9c3292e30077de2da66af670d99875 Mon Sep 17 00:00:00 2001 From: Michael Dale Date: Thu, 1 Oct 2009 17:05:05 +0000 Subject: [PATCH] * added "preview" for firefogg (lets you get a preview of videos as they are encoded) * 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 --- .../libAddMedia/mvBaseUploadInterface.js | 9 +- js2/mwEmbed/libAddMedia/mvFirefogg.js | 117 +++++++++++++++++- js2/mwEmbed/mv_embed.js | 94 ++++---------- 3 files changed, 143 insertions(+), 77 deletions(-) diff --git a/js2/mwEmbed/libAddMedia/mvBaseUploadInterface.js b/js2/mwEmbed/libAddMedia/mvBaseUploadInterface.js index a800bd2b4b..89fb94daf4 100644 --- a/js2/mwEmbed/libAddMedia/mvBaseUploadInterface.js +++ b/js2/mwEmbed/libAddMedia/mvBaseUploadInterface.js @@ -666,7 +666,7 @@ mvBaseUploadInterface.prototype = { var _this = this; //remove old instance: - if($j('#upProgressDialog').length!=0){ + if($j('#upProgressDialog').length !=0 ){ $j('#upProgressDialog').dialog( 'destroy' ).remove(); } //re add it: @@ -676,6 +676,7 @@ mvBaseUploadInterface.prototype = { title:_this.getProgressTitle(), bgiframe: true, modal: true, + draggable:true, width:400, heigh:200, beforeclose: function(event, ui) { @@ -688,9 +689,8 @@ mvBaseUploadInterface.prototype = { }, buttons: _this.cancel_button() }); - $j('#upProgressDialog').html( - //set initial content: - '
' + + $j('#upProgressDialog').html( + '
' + '
' + '
'+ '0% - ' + @@ -705,7 +705,6 @@ mvBaseUploadInterface.prototype = { $j('#up-progressbar').progressbar({ value:0 }); - }, cancel_button:function(){ var _this = this; diff --git a/js2/mwEmbed/libAddMedia/mvFirefogg.js b/js2/mwEmbed/libAddMedia/mvFirefogg.js index 1add3c586a..abbd24d1ff 100644 --- a/js2/mwEmbed/libAddMedia/mvFirefogg.js +++ b/js2/mwEmbed/libAddMedia/mvFirefogg.js @@ -15,7 +15,9 @@ loadGM({ "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 = { @@ -67,7 +69,10 @@ var default_firefogg_options = { '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, } @@ -306,6 +311,103 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface //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( + '
'+ + $j.btnHtml(gM('fogg-preview'), 'fogg_preview', 'triangle-1-e') + + '
' + + '' + + '
' + ); + //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(''); + 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(); @@ -530,7 +632,6 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface 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') ); @@ -538,6 +639,10 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface var encodingStatus = function() { var status = _this.fogg.status(); + if( _this.show_preview == true ){ + _this.doRenderPreview(); + } + //update progress bar _this.updateProgress( _this.fogg.progress() ); @@ -618,6 +723,12 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface return false; } } + if( _this.show_preview == true ){ + if( _this.fogg.state == 'encoding' ){ + _this.doRenderPreview(); + } + } + //update progress bar _this.updateProgress( _this.fogg.progress() ); diff --git a/js2/mwEmbed/mv_embed.js b/js2/mwEmbed/mv_embed.js index 9863d68957..7b564645b0 100644 --- a/js2/mwEmbed/mv_embed.js +++ b/js2/mwEmbed/mv_embed.js @@ -26,14 +26,14 @@ var MV_EMBED_VERSION = '1.0r19'; * 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 @@ -154,7 +154,7 @@ function lcCssPath( cssSet ) { * 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. @@ -175,8 +175,8 @@ lcPaths({ "$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", @@ -237,7 +237,6 @@ lcPaths({ "mvTimedEffectsEdit": "libSequencer/mvTimedEffectsEdit.js", "mvTextInterface" : "libTimedText/mvTextInterface.js" - }); // Dependency mapping for CSS files for self-contained included plugins: @@ -559,13 +558,16 @@ var mvJsLoader = { _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' ); @@ -577,7 +579,7 @@ var mvJsLoader = { }); 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 @@ -591,19 +593,24 @@ var mvJsLoader = { 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' ); @@ -708,63 +715,11 @@ var mwAddOnloadHook = js2AddOnloadHook; */ 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 = ''; - //js_log("Video HTML: " + vid_html); - $j( '#'+vidId ).html( vid_html ); - } - - // Rewrite that video ID: - rewrite_by_id( 'vid_' + i ); - } -} /*********** INITIALIZATION CODE ************* @@ -922,7 +877,8 @@ function mv_jqueryBindings() { ], [ '$j.ui.progressbar', - '$j.ui.dialog' + '$j.ui.dialog', + '$j.ui.draggable' ] ]; if( iObj.encoder_interface ) { @@ -1001,12 +957,12 @@ function mv_jqueryBindings() { return '' + - msg + ''; + ''+ msg +''; } // Shortcut to bind hover state - $.fn.btnBind = function() { + $.fn.btnBind = function() { $j( this ).hover( - function() { + function() { $j( this ).addClass( 'ui-state-hover' ); }, function() { -- 2.20.1