From 45b24269b65520b0f0c740b41c1590348db6d53c Mon Sep 17 00:00:00 2001 From: Fernando Brito Date: Tue, 26 Aug 2014 15:33:14 -0300 Subject: [PATCH] File upload on VLibras workflow and "debug" mode --- app/assets/javascripts/v_libras/requests/new.js | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------- app/assets/javascripts/v_libras/requests/rapid.js | 1 - app/assets/javascripts/v_libras/requests/workflow.js | 8 ++++++++ app/views/v_libras/requests/_position_step.haml | 8 ++++---- app/views/v_libras/requests/_service_step.haml | 7 ++++--- app/views/v_libras/requests/_size_step.haml | 6 +++--- app/views/v_libras/requests/_video_step.haml | 5 +++-- app/views/v_libras/requests/new.haml | 13 +++++++++++++ config/initializers/assets.rb | 1 + vendor/assets/javascripts/jquery.contra.min.js | 7 +++++++ 10 files changed, 104 insertions(+), 21 deletions(-) create mode 100644 vendor/assets/javascripts/jquery.contra.min.js diff --git a/app/assets/javascripts/v_libras/requests/new.js b/app/assets/javascripts/v_libras/requests/new.js index 80b1df2..72077a3 100644 --- a/app/assets/javascripts/v_libras/requests/new.js +++ b/app/assets/javascripts/v_libras/requests/new.js @@ -1,4 +1,46 @@ -$(function () { +/* + * jquery-File-Upload + */ +$(function() { + var videoFile; + var subtitleFile; + + function uploadFiles() { + initializeFileUpload(); + + if (subtitleFile == null) { + files = [videoFile]; + params = ['video']; + } else { + files = [videoFile, subtitleFile]; + params = ['video', 'subtitle']; + } + + $('#vlibras-form').fileupload('send', + { files: files, + paramName: params }); + } + + function initializeFileUpload() { + $('#vlibras-form').fileupload({ + autoUpload: false, + singleFileUploads: false, + + always: function (e, data) { + location.href = data.jqXHR.responseJSON.redirect_to; + }, + }); + + $("#vlibras-form").bind("fileuploadprogress", function (e, data) { + var percentage = Math.round(data.loaded / data.total * 100); + var bitrate = Math.round(data.bitrate / 8 / 1024 * 100) / 100 + " KB/s"; + + $("#upload-bar").css("width", percentage + "%"); + $("#upload-label").text(percentage + "% (" + bitrate + ")"); + }); + } + + $("#vlibras-wizard").steps({ headerTag: "h2", bodyTag: "section", @@ -58,8 +100,13 @@ $(function () { $("#vlibras-wizard .content").hide(); $("#vlibras-wizard .steps").hide(); $("#menu").show(); - $("#vlibras-form").submit(); - $("#btn-next").text("Enviando... Aguarde, por favor."); + + // $("#btn-next").text("Enviando... Aguarde, por favor."); + $("#btn-next").hide(); + $(".progress").show(); + + uploadFiles(); + deactivateNextButton(); } @@ -106,7 +153,7 @@ $(function () { /* - * Service + * Button events */ $("#vlibras-wizard").on("click", "#btn-video-legenda", function() { console.debug("Serviço: video-legenda"); @@ -143,16 +190,22 @@ $(function () { /* * Validates video and subtitle extension and activate the next button */ - $("#vlibras-form #subtitle-upload").change(function() { + $("#vlibras-form #subtitle-upload").change(function(event) { var acceptedFileTypes = ["srt"]; - validateFileWizard($(this), acceptedFileTypes); + + if (validateFileWizard($(this), acceptedFileTypes)) { + subtitleFile = event.target.files[0]; + } }); - $("#vlibras-form #video-upload").change(function() { + $("#vlibras-form #video-upload").change(function(event) { $("#vlibras-form").addHidden('service', 'video'); var acceptedFileTypes = ["flv", "ts", "avi", "mp4", "mov", "webm", "wmv", "mkv"]; - validateFileWizard($(this), acceptedFileTypes); + + if (validateFileWizard($(this), acceptedFileTypes)) { + videoFile = event.target.files[0]; + }; }); function validateFileWizard(input, acceptedFileTypes) { diff --git a/app/assets/javascripts/v_libras/requests/rapid.js b/app/assets/javascripts/v_libras/requests/rapid.js index 9b9ca31..e621e6d 100644 --- a/app/assets/javascripts/v_libras/requests/rapid.js +++ b/app/assets/javascripts/v_libras/requests/rapid.js @@ -22,7 +22,6 @@ $(function() { $('#vlibras-rapid-form').fileupload({ autoUpload: false, singleFileUploads: false, - limitConcurrentUploads: 1, always: function(e, data) { location.href = data.jqXHR.responseJSON.redirect_to; diff --git a/app/assets/javascripts/v_libras/requests/workflow.js b/app/assets/javascripts/v_libras/requests/workflow.js index 86436cc..29fa79e 100644 --- a/app/assets/javascripts/v_libras/requests/workflow.js +++ b/app/assets/javascripts/v_libras/requests/workflow.js @@ -1,3 +1,11 @@ +function debugTime(time) { + if (window.location.href.indexOf("debug") > -1) { + return 0.3; + } else { + return time; + }; +} + var VLibrasLocalization = function() { var _id, _wrapper, _video_wrapper, _video, _options; diff --git a/app/views/v_libras/requests/_position_step.haml b/app/views/v_libras/requests/_position_step.haml index 34cc1a9..73efb5d 100644 --- a/app/views/v_libras/requests/_position_step.haml +++ b/app/views/v_libras/requests/_position_step.haml @@ -15,10 +15,10 @@ { id: 'b_loc_2', path: '/system/images/loc/p_2.png', clickable: false, start: 10, end: 10.5, x: 160, y: 340, delay: 300, value: null }, { id: 'b_loc_3', path: '/system/images/loc/p_3.png', clickable: false, start: 12, end: 12.5, x: 210, y: 40, delay: 300, value: null }, { id: 'b_loc_4', path: '/system/images/loc/p_4.png', clickable: false, start: 14, end: 14.5, x: 650, y: 80, delay: 300, value: null }, - { id: 'b_loc_5', path: '/system/images/loc/p_4.png', clickable: true, start: 19.1, end: 9999, x: 30, y: 30, delay: 300, value: "superior-esquerdo" }, - { id: 'b_loc_6', path: '/system/images/loc/p_3.png', clickable: true, start: 19.1, end: 9999, x: 800, y: 30, delay: 300, value: "superior-direito" }, - { id: 'b_loc_7', path: '/system/images/loc/p_1.png', clickable: true, start: 19.1, end: 9999, x: 800, y: 410, delay: 300, value: "inferior-direito" }, - { id: 'b_loc_8', path: '/system/images/loc/p_2.png', clickable: true, start: 19.1, end: 9999, x: 30, y: 410, delay: 300, value: "inferior-esquerdo" } + { id: 'b_loc_5', path: '/system/images/loc/p_4.png', clickable: true, start: debugTime(19.1), end: 9999, x: 30, y: 30, delay: 300, value: "superior-esquerdo" }, + { id: 'b_loc_6', path: '/system/images/loc/p_3.png', clickable: true, start: debugTime(19.1), end: 9999, x: 800, y: 30, delay: 300, value: "superior-direito" }, + { id: 'b_loc_7', path: '/system/images/loc/p_1.png', clickable: true, start: debugTime(19.1), end: 9999, x: 800, y: 410, delay: 300, value: "inferior-direito" }, + { id: 'b_loc_8', path: '/system/images/loc/p_2.png', clickable: true, start: debugTime(19.1), end: 9999, x: 30, y: 410, delay: 300, value: "inferior-esquerdo" } ] }; diff --git a/app/views/v_libras/requests/_service_step.haml b/app/views/v_libras/requests/_service_step.haml index 5f2566f..b852c20 100644 --- a/app/views/v_libras/requests/_service_step.haml +++ b/app/views/v_libras/requests/_service_step.haml @@ -9,7 +9,8 @@ = label_tag :video, t('videos.subtitle'), :class => "bold" .span5 - = file_field_tag 'subtitle', :id => 'subtitle-upload' + = file_field_tag 'subtitle', :id => 'subtitle-upload', + :accept => '.srt' - content_for :javascript_code do @@ -21,8 +22,8 @@ { id: 'btn-green-light2', path: '/system/images/video/green-button.png', clickable: false, start: 26, end: 999, x: 440, y: 510, delay: 300, value: null }, { id: 'b_aS_1', path: '/system/images/sub_audio/p_1.png', clickable: false, start: 20, end: 21, x: 700, y: 390, delay: 300, value: null }, { id: 'b_aS_2', path: '/system/images/sub_audio/p_2.png', clickable: false, start: 24.5, end: 25.5, x: 150, y: 410, delay: 300, value: null }, - { id: 'btn-video-legenda', path: '/system/images/sub_audio/p_1.png', clickable: true, start: 26, end: 9999, x: 790, y: 410, delay: 300 }, - { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: 26, end: 9999, x: 35, y: 410, delay: 300 } + { id: 'btn-video-legenda', path: '/system/images/sub_audio/p_1.png', clickable: true, start: debugTime(26), end: 9999, x: 790, y: 410, delay: 300 }, + { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: debugTime(26), end: 9999, x: 35, y: 410, delay: 300 } ] }; diff --git a/app/views/v_libras/requests/_size_step.haml b/app/views/v_libras/requests/_size_step.haml index 4ce275e..30b19f6 100644 --- a/app/views/v_libras/requests/_size_step.haml +++ b/app/views/v_libras/requests/_size_step.haml @@ -15,9 +15,9 @@ { id: 'b1_size_small', path: '/system/images/size/p_1.png', clickable: false, start: 6.8, end: 7.8, x: 688, y: 338, delay: 300, value: null }, { id: 'b1_size_med', path: '/system/images/size/p_2.png', clickable: false, start: 8.2, end: 9.2, x: 628, y: 292, delay: 300, value: null }, { id: 'b1_size_big', path: '/system/images/size/p_3.png', clickable: false, start: 9.7, end: 10.7, x: 560, y: 240, delay: 300, value: null}, - { id: 'b2_size_small', path: '/system/images/size/p_1.png', clickable: true, start: 11.3, end: 9999, x: 688, y: 338, delay: 300, value: "pequeno" }, - { id: 'b2_size_med', path: '/system/images/size/p_2.png', clickable: true, start: 11.3, end: 9999, x: 628, y: 292, delay: 300, value: "medio" }, - { id: 'b2_size_big', path: '/system/images/size/p_3.png', clickable: true, start: 11.3, end: 9999, x: 560, y: 240, delay: 300, value: "grande" } + { id: 'b2_size_small', path: '/system/images/size/p_1.png', clickable: true, start: debugTime(11.3), end: 9999, x: 688, y: 338, delay: 300, value: "pequeno" }, + { id: 'b2_size_med', path: '/system/images/size/p_2.png', clickable: true, start: debugTime(11.3), end: 9999, x: 628, y: 292, delay: 300, value: "medio" }, + { id: 'b2_size_big', path: '/system/images/size/p_3.png', clickable: true, start: debugTime(11.3), end: 9999, x: 560, y: 240, delay: 300, value: "grande" } ] }; diff --git a/app/views/v_libras/requests/_video_step.haml b/app/views/v_libras/requests/_video_step.haml index e7cac27..46c8db4 100644 --- a/app/views/v_libras/requests/_video_step.haml +++ b/app/views/v_libras/requests/_video_step.haml @@ -9,7 +9,8 @@ = label_tag :video, t('videos.url'), :class => "bold" .span5 - = file_field_tag 'video', :id => 'video-upload' + = file_field_tag 'video', :id => 'video-upload', + :accept => '.flv, .ts, .avi, .mp4, .mov, .webm, .wmv, .mkv' .hide = image_tag '/system/images/video/red-button.png' @@ -22,7 +23,7 @@ video: { width: 940, height: 530 }, buttons: [ { id: 'btn-red-light1', path: '/system/images/video/red-button.png', clickable: false, start: 0.1, end: 25, x: 440, y: 510, delay: 300, value: null }, { id: 'btn-green-light1', path: '/system/images/video/green-button.png', clickable: false, start: 25, end: 999, x: 440, y: 510, delay: 300, value: null }, - { id: 'btn-video-upload', path: '/system/images/video/p_1.png', clickable: true, start: 25, end: 9999, x: 415, y: 410, delay: 300 } + { id: 'btn-video-upload', path: '/system/images/video/p_1.png', clickable: true, start: debugTime(25), end: 9999, x: 415, y: 410, delay: 300 } ] }; diff --git a/app/views/v_libras/requests/new.haml b/app/views/v_libras/requests/new.haml index 6dacd99..70c6cff 100644 --- a/app/views/v_libras/requests/new.haml +++ b/app/views/v_libras/requests/new.haml @@ -1,7 +1,16 @@ +:javascript + $(function() { + $.contra( function() { + alert('Bem vindo ao modo debug! Os botões irão aparecer na tela antes do tempo normal.'); + window.location.href = window.location.href + "?debug"; + }, { code : [ 68, 69, 66, 85, 71 ] } ); + }); + = include_videojs_assets - content_for :js do = javascript_include_tag "jquery.steps.js" + = javascript_include_tag "jquery.contra.min.js" = javascript_include_tag "v_libras/requests/shared" = javascript_include_tag "v_libras/requests/new" = javascript_include_tag "v_libras/requests/workflow" @@ -35,6 +44,10 @@ #menu.center.hide = button_tag 'Próximo', :class => "btn btn-large btn-success", :id => 'btn-next', :disabled => true + .progress.progress-striped.active.hide{:style => 'position: relative;'} + #upload-bar.bar + #upload-label.center{:style => 'position: absolute; width: 100%; font-size: 12px;'} + .row-fluid #step-service diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 7e1075f..9a9a826 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -4,6 +4,7 @@ Rails.application.config.assets.precompile += %w( v_libras/requests/new.js ) Rails.application.config.assets.precompile += %w( v_libras/requests/workflow.js ) Rails.application.config.assets.precompile += %w( v_libras/videos/index.js ) Rails.application.config.assets.precompile += %w( jquery.steps.js ) +Rails.application.config.assets.precompile += %w( jquery.contra.min.js ) Rails.application.config.assets.precompile += %w( v_libras/requests.css ) Rails.application.config.assets.precompile += %w( jquery.steps.css ) \ No newline at end of file diff --git a/vendor/assets/javascripts/jquery.contra.min.js b/vendor/assets/javascripts/jquery.contra.min.js new file mode 100644 index 0000000..c047692 --- /dev/null +++ b/vendor/assets/javascripts/jquery.contra.min.js @@ -0,0 +1,7 @@ +/* jQuery Contra v1.0 + * http://jonraasch.com/blog/jquery-contra-plugin + * + * Copyright (c) 2009 Jon Raasch (http://jonraasch.com/) + * Licensed under the MIT License (see http://dev.jonraasch.com/contra/docs#licensing) + */ +(function(a){a.contra=function(e,d){function c(f){if(f==d.code[b]){b++;if(b>=d.code.length){e()}}else{b=0}}if(typeof e!="function"){return false}var b=0,d=d||{};d.scope=d.scope||a(document);d.code=d.code||[38,38,40,40,37,39,37,39,66,65,13];d.scope.keyup(function(f){c(f.which||f.keyCode)})};a.fn.contra=function(c,b){var b=b||{};b.scope=a(this);a.contra(c,b)}})(jQuery); \ No newline at end of file -- libgit2 0.21.2