| Index: trunk/phase3/js2/mwEmbed/libAddMedia/mvFirefogg.js |
| — | — | @@ -15,7 +15,9 @@ |
| 16 | 16 | "fogg-passthrough_mode" : "Your selected file is already Ogg or not a video file", |
| 17 | 17 | "fogg-transcoding" : "Encoding video to Ogg", |
| 18 | 18 | "fogg-encoding-done" : "Encoding complete", |
| 19 | | - "fogg-badtoken" : "Token is not valid" |
| | 19 | + "fogg-badtoken" : "Token is not valid", |
| | 20 | + "fogg-preview" : "Preview Video", |
| | 21 | + "fogg-hidepreview" : "Hide Preview" |
| 20 | 22 | }); |
| 21 | 23 | |
| 22 | 24 | var firefogg_install_links = { |
| — | — | @@ -67,7 +69,10 @@ |
| 68 | 70 | 'target_passthrough_mode':false, |
| 69 | 71 | |
| 70 | 72 | //if firefogg should take over the form submit action |
| 71 | | - 'firefogg_form_action':true |
| | 73 | + 'firefogg_form_action':true, |
| | 74 | + |
| | 75 | + //if we should show a preview of encoding progress |
| | 76 | + 'show_preview':false, |
| 72 | 77 | } |
| 73 | 78 | |
| 74 | 79 | |
| — | — | @@ -306,6 +311,103 @@ |
| 307 | 312 | //update the bindings: |
| 308 | 313 | this.doControlBindings(); |
| 309 | 314 | }, |
| | 315 | + //do firefogg specific additions: |
| | 316 | + dispProgressOverlay:function(){ |
| | 317 | + this.pe_dispProgressOverlay(); |
| | 318 | + this.doPreviewControl(); |
| | 319 | + }, |
| | 320 | + doPreviewControl:function(){ |
| | 321 | + var _this = this; |
| | 322 | + //prepend preview collapable |
| | 323 | + $j('#upProgressDialog').append( |
| | 324 | + '<div style="clear:both;height:3em"/>'+ |
| | 325 | + $j.btnHtml(gM('fogg-preview'), 'fogg_preview', 'triangle-1-e') + |
| | 326 | + '<div style="padding:10px;">' + |
| | 327 | + '<canvas style="margin:auto;" id="fogg_preview_canvas" />' + |
| | 328 | + '</div>' |
| | 329 | + ); |
| | 330 | + //set initial state |
| | 331 | + if( _this.show_preview == true){ |
| | 332 | + $j('#fogg_preview_canvas').show(); |
| | 333 | + }else{ |
| | 334 | + $j('#fogg_preview_canvas').hide(); |
| | 335 | + } |
| | 336 | + //apply preview binding: |
| | 337 | + $j('#upProgressDialog .fogg_preview').btnBind().click( function(){ |
| | 338 | + js_log("click .foog_preview" + $j(this).children('.ui-icon').attr('class') ); |
| | 339 | + //check state: |
| | 340 | + if( $j(this).children('.ui-icon').hasClass('ui-icon-triangle-1-e') ){ |
| | 341 | + _this.show_preview = true; |
| | 342 | + //update icon: |
| | 343 | + $j(this).children('.ui-icon') |
| | 344 | + .removeClass('ui-icon-triangle-1-e') |
| | 345 | + .addClass('ui-icon-triangle-1-s'); |
| | 346 | + //update text |
| | 347 | + $j(this).children('.btnText').text( gM('fogg-hidepreview') ); |
| | 348 | + |
| | 349 | + //show preview window |
| | 350 | + $j('#fogg_preview_canvas').show('fast'); |
| | 351 | + }else{ |
| | 352 | + _this.show_preview = false; |
| | 353 | + //update icon: |
| | 354 | + $j(this).children('.ui-icon') |
| | 355 | + .removeClass('ui-icon-triangle-1-s') |
| | 356 | + .addClass('ui-icon-triangle-1-e'); |
| | 357 | + //update text: |
| | 358 | + $j(this).children('.btnText').text( gM('fogg-preview') ); |
| | 359 | + |
| | 360 | + $j('#fogg_preview_canvas').hide('slow'); |
| | 361 | + } |
| | 362 | + }); |
| | 363 | + }, |
| | 364 | + doRenderPreview:function(){ |
| | 365 | + var _this = this; |
| | 366 | + //set up the hidden video to pull frames from: |
| | 367 | + if( $j('#fogg_preview_vid').length == 0 ) |
| | 368 | + $j('body').append('<video id="fogg_preview_vid" style="display:none"></video>'); |
| | 369 | + var v = $j('#fogg_preview_vid').get(0); |
| | 370 | + |
| | 371 | + |
| | 372 | + function seekToEnd(){ |
| | 373 | + var v = $j('#fogg_preview_vid').get(0); |
| | 374 | + v.currentTime = v.duration-0.4; |
| | 375 | + } |
| | 376 | + function getFrame() { |
| | 377 | + var v = $j('#fogg_preview_vid').get(0); |
| | 378 | + var canvas = $j('#fogg_preview_canvas').get(0); |
| | 379 | + canvas.width = 160; |
| | 380 | + canvas.height = canvas.width * v.videoHeight/v.videoWidth; |
| | 381 | + var ctx = canvas.getContext("2d"); |
| | 382 | + ctx.drawImage(v, 0, 0, canvas.width, canvas.height); |
| | 383 | + } |
| | 384 | + var previewI=null; |
| | 385 | + function preview() { |
| | 386 | + //initialize the video if not setup already: |
| | 387 | + var v = $j('#fogg_preview_vid').get(0); |
| | 388 | + if( v.src != _this.fogg.previewUrl ){ |
| | 389 | + js_log('init preview with url:' + _this.fogg.previewUrl); |
| | 390 | + v.src = _this.fogg.previewUrl; |
| | 391 | + |
| | 392 | + //set the video to seek to the end of the video |
| | 393 | + v.removeEventListener("loadedmetadata", seekToEnd, true); |
| | 394 | + v.addEventListener("loadedmetadata", seekToEnd, true); |
| | 395 | + |
| | 396 | + //render a frame once seek is complete: |
| | 397 | + v.removeEventListener("seeked", getFrame, true); |
| | 398 | + v.addEventListener("seeked", getFrame, true); |
| | 399 | + |
| | 400 | + //refresh the video duration/meta: |
| | 401 | + clearInterval(previewI); |
| | 402 | + var previewI = setInterval(function(){ |
| | 403 | + if (_this.fogg.status() != "encoding"){ |
| | 404 | + clearInterval(previewI); |
| | 405 | + } |
| | 406 | + v.load(); |
| | 407 | + }, 1000); |
| | 408 | + } |
| | 409 | + } |
| | 410 | + preview(); |
| | 411 | + }, |
| 310 | 412 | getEditForm:function(){ |
| 311 | 413 | if( this.target_edit_from ) |
| 312 | 414 | return this.pe_getEditForm(); |
| — | — | @@ -530,7 +632,6 @@ |
| 531 | 633 | js_log('doEncode: with: ' + JSON.stringify( _this.encoder_settings ) ); |
| 532 | 634 | _this.fogg.encode( JSON.stringify( _this.encoder_settings ) ); |
| 533 | 635 | |
| 534 | | - |
| 535 | 636 | //show transcode status: |
| 536 | 637 | $j('#up-status-state').html( gM('mwe-upload-transcoded-status') ); |
| 537 | 638 | |
| — | — | @@ -538,6 +639,10 @@ |
| 539 | 640 | var encodingStatus = function() { |
| 540 | 641 | var status = _this.fogg.status(); |
| 541 | 642 | |
| | 643 | + if( _this.show_preview == true ){ |
| | 644 | + _this.doRenderPreview(); |
| | 645 | + } |
| | 646 | + |
| 542 | 647 | //update progress bar |
| 543 | 648 | _this.updateProgress( _this.fogg.progress() ); |
| 544 | 649 | |
| — | — | @@ -618,6 +723,12 @@ |
| 619 | 724 | return false; |
| 620 | 725 | } |
| 621 | 726 | } |
| | 727 | + if( _this.show_preview == true ){ |
| | 728 | + if( _this.fogg.state == 'encoding' ){ |
| | 729 | + _this.doRenderPreview(); |
| | 730 | + } |
| | 731 | + } |
| | 732 | + |
| 622 | 733 | //update progress bar |
| 623 | 734 | _this.updateProgress( _this.fogg.progress() ); |
| 624 | 735 | |
| Index: trunk/phase3/js2/mwEmbed/libAddMedia/mvBaseUploadInterface.js |
| — | — | @@ -666,7 +666,7 @@ |
| 667 | 667 | var _this = this; |
| 668 | 668 | |
| 669 | 669 | //remove old instance: |
| 670 | | - if($j('#upProgressDialog').length!=0){ |
| | 670 | + if($j('#upProgressDialog').length !=0 ){ |
| 671 | 671 | $j('#upProgressDialog').dialog( 'destroy' ).remove(); |
| 672 | 672 | } |
| 673 | 673 | //re add it: |
| — | — | @@ -676,6 +676,7 @@ |
| 677 | 677 | title:_this.getProgressTitle(), |
| 678 | 678 | bgiframe: true, |
| 679 | 679 | modal: true, |
| | 680 | + draggable:true, |
| 680 | 681 | width:400, |
| 681 | 682 | heigh:200, |
| 682 | 683 | beforeclose: function(event, ui) { |
| — | — | @@ -688,9 +689,8 @@ |
| 689 | 690 | }, |
| 690 | 691 | buttons: _this.cancel_button() |
| 691 | 692 | }); |
| 692 | | - $j('#upProgressDialog').html( |
| 693 | | - //set initial content: |
| 694 | | - '<div id="up-pbar-container" style="width:90%;height:15px;" >' + |
| | 693 | + $j('#upProgressDialog').html( |
| | 694 | + '<div id="up-pbar-container" style="width:90%;height:15px;" >' + |
| 695 | 695 | '<div id="up-progressbar" style="height:15px;"></div>' + |
| 696 | 696 | '<div id="up-status-container">'+ |
| 697 | 697 | '<span id="up-pstatus">0% - </span> ' + |
| — | — | @@ -705,7 +705,6 @@ |
| 706 | 706 | $j('#up-progressbar').progressbar({ |
| 707 | 707 | value:0 |
| 708 | 708 | }); |
| 709 | | - |
| 710 | 709 | }, |
| 711 | 710 | cancel_button:function(){ |
| 712 | 711 | var _this = this; |
| Index: trunk/phase3/js2/mwEmbed/mv_embed.js |
| — | — | @@ -26,14 +26,14 @@ |
| 27 | 27 | * Configuration variables should be set by extending mwConfigOptions |
| 28 | 28 | * here is the default config: |
| 29 | 29 | */ |
| 30 | | -var mwConfig = { |
| | 30 | +var mwDefaultConfig = { |
| 31 | 31 | 'skin_name': 'mvpcf', |
| 32 | 32 | 'jui_skin': 'redmond', |
| 33 | 33 | 'video_size':'400x300' |
| 34 | 34 | } |
| 35 | 35 | |
| 36 | | -if( !mwConfigOptions ) |
| 37 | | - var mwConfigOptions = {}; |
| | 36 | +if( !mwConfig ) |
| | 37 | + var mwConfig = {}; |
| 38 | 38 | |
| 39 | 39 | // Install the default config values for anything not set in mwConfig |
| 40 | 40 | |
| — | — | @@ -154,7 +154,7 @@ |
| 155 | 155 | * this once for PHP & JavaScript) |
| 156 | 156 | * |
| 157 | 157 | * This is more verbose than the earlier version that compressed paths |
| 158 | | - * but it's all good, gzipping helps compress repetetive path strings |
| | 158 | + * but it's all good, gzipping helps compress path strings |
| 159 | 159 | * grouped by directory. |
| 160 | 160 | * |
| 161 | 161 | * Right now the PHP AutoLoader only reads this mv_embed.js file. |
| — | — | @@ -175,8 +175,8 @@ |
| 176 | 176 | "$j.fn.simpleUploadForm": "libAddMedia/simpleUploadForm.js", |
| 177 | 177 | |
| 178 | 178 | "ctrlBuilder" : "skins/ctrlBuilder.js", |
| 179 | | - "kskin" : "skins/kskin/kskin.js", |
| 180 | | - "mvpcf" : "skins/mvpcf/mvpcf.js", |
| | 179 | + "kskinConfig" : "skins/kskin/kskin.js", |
| | 180 | + "mvpcfConfig" : "skins/mvpcf/mvpcf.js", |
| 181 | 181 | |
| 182 | 182 | "$j.secureEvalJSON" : "jquery/plugins/jquery.secureEvalJSON.js", |
| 183 | 183 | "$j.cookie" : "jquery/plugins/jquery.cookie.js", |
| — | — | @@ -237,7 +237,6 @@ |
| 238 | 238 | "mvTimedEffectsEdit": "libSequencer/mvTimedEffectsEdit.js", |
| 239 | 239 | |
| 240 | 240 | "mvTextInterface" : "libTimedText/mvTextInterface.js" |
| 241 | | - |
| 242 | 241 | }); |
| 243 | 242 | |
| 244 | 243 | // Dependency mapping for CSS files for self-contained included plugins: |
| — | — | @@ -559,13 +558,16 @@ |
| 560 | 559 | _global['$j'] = jQuery.noConflict(); |
| 561 | 560 | |
| 562 | 561 | //setup our global settings using the (jQuery helper) |
| 563 | | - $j.extend( mwConfig, mwConfigOptions); |
| | 562 | + mwConfig = $j.extend( mwDefaultConfig, mwConfig); |
| 564 | 563 | |
| 565 | 564 | // Set up the skin path |
| 566 | 565 | _global['mv_jquery_skin_path'] = mv_embed_path + 'jquery/jquery.ui/themes/' +mwConfig['jui_skin'] + '/'; |
| 567 | 566 | _global['mv_skin_img_path'] = mv_embed_path + 'skins/' + mwConfig['skin_name'] + '/images/'; |
| 568 | 567 | _global['mv_default_thumb_url'] = mv_skin_img_path + 'vid_default_thumb.jpg'; |
| 569 | 568 | |
| | 569 | + //setup skin dependent dependencies |
| | 570 | + lcCssPath({'embedVideo' : 'skins/' + mwConfig['skin_name'] + '/playerSkin.css'}); |
| | 571 | + |
| 570 | 572 | // Make sure the skin/style sheets are always available: |
| 571 | 573 | loadExternalCss( mv_jquery_skin_path + 'jquery-ui-1.7.1.custom.css' ); |
| 572 | 574 | loadExternalCss( mv_embed_path + 'skins/' + mwConfig['skin_name'] + '/styles.css' ); |
| — | — | @@ -577,7 +579,7 @@ |
| 578 | 580 | }); |
| 579 | 581 | |
| 580 | 582 | js_log( 'jQuery loaded into $j' ); |
| 581 | | - // Set up mvEmbed jQuery bindings: |
| | 583 | + // Set up mvEmbed jQuery bindings and config based dependencies |
| 582 | 584 | mv_jqueryBindings(); |
| 583 | 585 | } |
| 584 | 586 | // Run the callback |
| — | — | @@ -591,19 +593,24 @@ |
| 592 | 594 | js_log( 'embedVideoCheck:' ); |
| 593 | 595 | // Make sure we have jQuery |
| 594 | 596 | _this.jQueryCheck( function() { |
| | 597 | + //set class videonojs to hidden |
| 595 | 598 | $j('.videonojs').html( gM('mwe-loading_txt') ); |
| 596 | | - //Set up the embed video player class request: |
| | 599 | + //Set up the embed video player class request: (include the skin js as well) |
| 597 | 600 | var depReq = [ |
| 598 | 601 | [ |
| 599 | 602 | '$j.ui', |
| 600 | 603 | 'embedVideo', |
| 601 | 604 | 'ctrlBuilder', |
| 602 | | - '$j.cookie' |
| | 605 | + '$j.cookie' |
| 603 | 606 | ], |
| 604 | 607 | [ |
| 605 | 608 | '$j.ui.slider' |
| 606 | 609 | ] |
| 607 | | - ]; |
| | 610 | + ]; |
| | 611 | + //add skin if set: |
| | 612 | + if( mwConfig['skin_name'] ) |
| | 613 | + depReq[0].push( mwConfig['skin_name'] + 'Config' ); |
| | 614 | + |
| 608 | 615 | // Add PNG fix if needed: |
| 609 | 616 | if( $j.browser.msie || $j.browser.version < 7 ) |
| 610 | 617 | depReq[0].push( '$j.fn.pngFix' ); |
| — | — | @@ -708,65 +715,13 @@ |
| 709 | 716 | */ |
| 710 | 717 | function rewrite_by_id( vid_id, ready_callback ) { |
| 711 | 718 | js_log( 'f:rewrite_by_id: ' + vid_id ); |
| 712 | | - // Force a recheck of the DOM for playlist or video elements: |
| | 719 | + // Force a re-check of the DOM for playlist or video elements: |
| 713 | 720 | mvJsLoader.embedVideoCheck( function() { |
| 714 | 721 | mv_video_embed( ready_callback, vid_id ); |
| 715 | 722 | }); |
| 716 | 723 | } |
| 717 | | -// Deprecated in favor of updates to OggHandler |
| 718 | | -function rewrite_for_OggHandler( vidIdList ){ |
| 719 | | - for( var i = 0; i < vidIdList.length; i++ ) { |
| 720 | | - var vidId = vidIdList[i]; |
| 721 | | - js_log( 'looking at vid: ' + i +' ' + vidId ); |
| 722 | | - // Grab the thumbnail and src of the video |
| 723 | | - var pimg = $j( '#' + vidId + ' img' ); |
| 724 | | - var poster_attr = 'poster = "' + pimg.attr( 'src' ) + '" '; |
| 725 | | - var pwidth = pimg.attr( 'width' ); |
| 726 | | - var pheight = pimg.attr( 'height' ); |
| 727 | 724 | |
| 728 | | - var type_attr = ''; |
| 729 | | - // Check for audio |
| 730 | | - if( pwidth == '22' && pheight == '22' ) { |
| 731 | | - pwidth = '400'; |
| 732 | | - pheight = '300'; |
| 733 | | - type_attr = 'type="audio/ogg"'; |
| 734 | | - poster_attr = ''; |
| 735 | | - } |
| 736 | 725 | |
| 737 | | - // Parsed values: |
| 738 | | - var src = ''; |
| 739 | | - var duration = ''; |
| 740 | | - |
| 741 | | - var re = new RegExp( /videoUrl(":?\s*)*([^&]*)/ ); |
| 742 | | - src = re.exec( $j( '#'+vidId).html() )[2]; |
| 743 | | - |
| 744 | | - var re = new RegExp( /length(":?\s*)*([^&]*)/ ); |
| 745 | | - duration = re.exec( $j( '#'+vidId).html() )[2]; |
| 746 | | - |
| 747 | | - var re = new RegExp( /offset(":?\s*)*([^&]*)/ ); |
| 748 | | - offset = re.exec( $j( '#'+vidId).html() )[2]; |
| 749 | | - var offset_attr = offset ? 'startOffset="' + offset + '"' : ''; |
| 750 | | - |
| 751 | | - if( src ) { |
| 752 | | - // Replace the top div with the mv_embed based player: |
| 753 | | - var vid_html = '<video id="vid_' + i +'" '+ |
| 754 | | - 'src="' + src + '" ' + |
| 755 | | - poster_attr + ' ' + |
| 756 | | - type_attr + ' ' + |
| 757 | | - offset_attr + ' ' + |
| 758 | | - 'duration="' + duration + '" ' + |
| 759 | | - 'style="width:' + pwidth + 'px;height:' + |
| 760 | | - pheight + 'px;"></video>'; |
| 761 | | - //js_log("Video HTML: " + vid_html); |
| 762 | | - $j( '#'+vidId ).html( vid_html ); |
| 763 | | - } |
| 764 | | - |
| 765 | | - // Rewrite that video ID: |
| 766 | | - rewrite_by_id( 'vid_' + i ); |
| 767 | | - } |
| 768 | | -} |
| 769 | | - |
| 770 | | - |
| 771 | 726 | /*********** INITIALIZATION CODE ************* |
| 772 | 727 | * set DOM-ready callback to init_mv_embed |
| 773 | 728 | *********************************************/ |
| — | — | @@ -922,7 +877,8 @@ |
| 923 | 878 | ], |
| 924 | 879 | [ |
| 925 | 880 | '$j.ui.progressbar', |
| 926 | | - '$j.ui.dialog' |
| | 881 | + '$j.ui.dialog', |
| | 882 | + '$j.ui.draggable' |
| 927 | 883 | ] |
| 928 | 884 | ]; |
| 929 | 885 | if( iObj.encoder_interface ) { |
| — | — | @@ -1001,12 +957,12 @@ |
| 1002 | 958 | return '<a href="' + href + '" ' + target_attr + style_attr + |
| 1003 | 959 | ' class="ui-state-default ui-corner-all ui-icon_link ' + |
| 1004 | 960 | className + '"><span class="ui-icon ui-icon-' + iconId + '" />' + |
| 1005 | | - msg + '</a>'; |
| | 961 | + '<span class="btnText">'+ msg +'<span></a>'; |
| 1006 | 962 | } |
| 1007 | 963 | // Shortcut to bind hover state |
| 1008 | | - $.fn.btnBind = function() { |
| | 964 | + $.fn.btnBind = function() { |
| 1009 | 965 | $j( this ).hover( |
| 1010 | | - function() { |
| | 966 | + function() { |
| 1011 | 967 | $j( this ).addClass( 'ui-state-hover' ); |
| 1012 | 968 | }, |
| 1013 | 969 | function() { |