Commit 45b24269b65520b0f0c740b41c1590348db6d53c

Authored by Fernando Brito
1 parent 47d8570c
Exists in master and in 1 other branch v2

File upload on VLibras workflow and "debug" mode

app/assets/javascripts/v_libras/requests/new.js
1 -$(function () { 1 +/*
  2 + * jquery-File-Upload
  3 + */
  4 +$(function() {
  5 + var videoFile;
  6 + var subtitleFile;
  7 +
  8 + function uploadFiles() {
  9 + initializeFileUpload();
  10 +
  11 + if (subtitleFile == null) {
  12 + files = [videoFile];
  13 + params = ['video'];
  14 + } else {
  15 + files = [videoFile, subtitleFile];
  16 + params = ['video', 'subtitle'];
  17 + }
  18 +
  19 + $('#vlibras-form').fileupload('send',
  20 + { files: files,
  21 + paramName: params });
  22 + }
  23 +
  24 + function initializeFileUpload() {
  25 + $('#vlibras-form').fileupload({
  26 + autoUpload: false,
  27 + singleFileUploads: false,
  28 +
  29 + always: function (e, data) {
  30 + location.href = data.jqXHR.responseJSON.redirect_to;
  31 + },
  32 + });
  33 +
  34 + $("#vlibras-form").bind("fileuploadprogress", function (e, data) {
  35 + var percentage = Math.round(data.loaded / data.total * 100);
  36 + var bitrate = Math.round(data.bitrate / 8 / 1024 * 100) / 100 + " KB/s";
  37 +
  38 + $("#upload-bar").css("width", percentage + "%");
  39 + $("#upload-label").text(percentage + "% (" + bitrate + ")");
  40 + });
  41 + }
  42 +
  43 +
2 $("#vlibras-wizard").steps({ 44 $("#vlibras-wizard").steps({
3 headerTag: "h2", 45 headerTag: "h2",
4 bodyTag: "section", 46 bodyTag: "section",
@@ -58,8 +100,13 @@ $(function () { @@ -58,8 +100,13 @@ $(function () {
58 $("#vlibras-wizard .content").hide(); 100 $("#vlibras-wizard .content").hide();
59 $("#vlibras-wizard .steps").hide(); 101 $("#vlibras-wizard .steps").hide();
60 $("#menu").show(); 102 $("#menu").show();
61 - $("#vlibras-form").submit();  
62 - $("#btn-next").text("Enviando... Aguarde, por favor."); 103 +
  104 + // $("#btn-next").text("Enviando... Aguarde, por favor.");
  105 + $("#btn-next").hide();
  106 + $(".progress").show();
  107 +
  108 + uploadFiles();
  109 +
63 deactivateNextButton(); 110 deactivateNextButton();
64 } 111 }
65 112
@@ -106,7 +153,7 @@ $(function () { @@ -106,7 +153,7 @@ $(function () {
106 153
107 154
108 /* 155 /*
109 - * Service 156 + * Button events
110 */ 157 */
111 $("#vlibras-wizard").on("click", "#btn-video-legenda", function() { 158 $("#vlibras-wizard").on("click", "#btn-video-legenda", function() {
112 console.debug("Serviço: video-legenda"); 159 console.debug("Serviço: video-legenda");
@@ -143,16 +190,22 @@ $(function () { @@ -143,16 +190,22 @@ $(function () {
143 /* 190 /*
144 * Validates video and subtitle extension and activate the next button 191 * Validates video and subtitle extension and activate the next button
145 */ 192 */
146 - $("#vlibras-form #subtitle-upload").change(function() { 193 + $("#vlibras-form #subtitle-upload").change(function(event) {
147 var acceptedFileTypes = ["srt"]; 194 var acceptedFileTypes = ["srt"];
148 - validateFileWizard($(this), acceptedFileTypes); 195 +
  196 + if (validateFileWizard($(this), acceptedFileTypes)) {
  197 + subtitleFile = event.target.files[0];
  198 + }
149 }); 199 });
150 200
151 - $("#vlibras-form #video-upload").change(function() { 201 + $("#vlibras-form #video-upload").change(function(event) {
152 $("#vlibras-form").addHidden('service', 'video'); 202 $("#vlibras-form").addHidden('service', 'video');
153 203
154 var acceptedFileTypes = ["flv", "ts", "avi", "mp4", "mov", "webm", "wmv", "mkv"]; 204 var acceptedFileTypes = ["flv", "ts", "avi", "mp4", "mov", "webm", "wmv", "mkv"];
155 - validateFileWizard($(this), acceptedFileTypes); 205 +
  206 + if (validateFileWizard($(this), acceptedFileTypes)) {
  207 + videoFile = event.target.files[0];
  208 + };
156 }); 209 });
157 210
158 function validateFileWizard(input, acceptedFileTypes) { 211 function validateFileWizard(input, acceptedFileTypes) {
app/assets/javascripts/v_libras/requests/rapid.js
@@ -22,7 +22,6 @@ $(function() { @@ -22,7 +22,6 @@ $(function() {
22 $('#vlibras-rapid-form').fileupload({ 22 $('#vlibras-rapid-form').fileupload({
23 autoUpload: false, 23 autoUpload: false,
24 singleFileUploads: false, 24 singleFileUploads: false,
25 - limitConcurrentUploads: 1,  
26 25
27 always: function(e, data) { 26 always: function(e, data) {
28 location.href = data.jqXHR.responseJSON.redirect_to; 27 location.href = data.jqXHR.responseJSON.redirect_to;
app/assets/javascripts/v_libras/requests/workflow.js
  1 +function debugTime(time) {
  2 + if (window.location.href.indexOf("debug") > -1) {
  3 + return 0.3;
  4 + } else {
  5 + return time;
  6 + };
  7 +}
  8 +
1 var VLibrasLocalization = function() { 9 var VLibrasLocalization = function() {
2 var _id, _wrapper, _video_wrapper, _video, _options; 10 var _id, _wrapper, _video_wrapper, _video, _options;
3 11
app/views/v_libras/requests/_position_step.haml
@@ -15,10 +15,10 @@ @@ -15,10 +15,10 @@
15 { 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 }, 15 { 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 },
16 { 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 }, 16 { 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 },
17 { 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 }, 17 { 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 },
18 - { 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" },  
19 - { 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" },  
20 - { 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" },  
21 - { 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" } 18 + { 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" },
  19 + { 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" },
  20 + { 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" },
  21 + { 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" }
22 ] 22 ]
23 }; 23 };
24 24
app/views/v_libras/requests/_service_step.haml
@@ -9,7 +9,8 @@ @@ -9,7 +9,8 @@
9 = label_tag :video, t('videos.subtitle'), :class => "bold" 9 = label_tag :video, t('videos.subtitle'), :class => "bold"
10 10
11 .span5 11 .span5
12 - = file_field_tag 'subtitle', :id => 'subtitle-upload' 12 + = file_field_tag 'subtitle', :id => 'subtitle-upload',
  13 + :accept => '.srt'
13 14
14 15
15 - content_for :javascript_code do 16 - content_for :javascript_code do
@@ -21,8 +22,8 @@ @@ -21,8 +22,8 @@
21 { 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 }, 22 { 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 },
22 { 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 }, 23 { 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 },
23 { 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 }, 24 { 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 },
24 - { id: 'btn-video-legenda', path: '/system/images/sub_audio/p_1.png', clickable: true, start: 26, end: 9999, x: 790, y: 410, delay: 300 },  
25 - { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: 26, end: 9999, x: 35, y: 410, delay: 300 } 25 + { 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 },
  26 + { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: debugTime(26), end: 9999, x: 35, y: 410, delay: 300 }
26 ] 27 ]
27 }; 28 };
28 29
app/views/v_libras/requests/_size_step.haml
@@ -15,9 +15,9 @@ @@ -15,9 +15,9 @@
15 { 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 }, 15 { 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 },
16 { 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 }, 16 { 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 },
17 { 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}, 17 { 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},
18 - { 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" },  
19 - { 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" },  
20 - { 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" } 18 + { 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" },
  19 + { 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" },
  20 + { 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" }
21 ] 21 ]
22 }; 22 };
23 23
app/views/v_libras/requests/_video_step.haml
@@ -9,7 +9,8 @@ @@ -9,7 +9,8 @@
9 = label_tag :video, t('videos.url'), :class => "bold" 9 = label_tag :video, t('videos.url'), :class => "bold"
10 10
11 .span5 11 .span5
12 - = file_field_tag 'video', :id => 'video-upload' 12 + = file_field_tag 'video', :id => 'video-upload',
  13 + :accept => '.flv, .ts, .avi, .mp4, .mov, .webm, .wmv, .mkv'
13 14
14 .hide 15 .hide
15 = image_tag '/system/images/video/red-button.png' 16 = image_tag '/system/images/video/red-button.png'
@@ -22,7 +23,7 @@ @@ -22,7 +23,7 @@
22 video: { width: 940, height: 530 }, 23 video: { width: 940, height: 530 },
23 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 }, 24 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 },
24 { 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 }, 25 { 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 },
25 - { id: 'btn-video-upload', path: '/system/images/video/p_1.png', clickable: true, start: 25, end: 9999, x: 415, y: 410, delay: 300 } 26 + { id: 'btn-video-upload', path: '/system/images/video/p_1.png', clickable: true, start: debugTime(25), end: 9999, x: 415, y: 410, delay: 300 }
26 ] 27 ]
27 }; 28 };
28 29
app/views/v_libras/requests/new.haml
  1 +:javascript
  2 + $(function() {
  3 + $.contra( function() {
  4 + alert('Bem vindo ao modo debug! Os botões irão aparecer na tela antes do tempo normal.');
  5 + window.location.href = window.location.href + "?debug";
  6 + }, { code : [ 68, 69, 66, 85, 71 ] } );
  7 + });
  8 +
1 = include_videojs_assets 9 = include_videojs_assets
2 10
3 - content_for :js do 11 - content_for :js do
4 = javascript_include_tag "jquery.steps.js" 12 = javascript_include_tag "jquery.steps.js"
  13 + = javascript_include_tag "jquery.contra.min.js"
5 = javascript_include_tag "v_libras/requests/shared" 14 = javascript_include_tag "v_libras/requests/shared"
6 = javascript_include_tag "v_libras/requests/new" 15 = javascript_include_tag "v_libras/requests/new"
7 = javascript_include_tag "v_libras/requests/workflow" 16 = javascript_include_tag "v_libras/requests/workflow"
@@ -35,6 +44,10 @@ @@ -35,6 +44,10 @@
35 #menu.center.hide 44 #menu.center.hide
36 = button_tag 'Próximo', :class => "btn btn-large btn-success", :id => 'btn-next', :disabled => true 45 = button_tag 'Próximo', :class => "btn btn-large btn-success", :id => 'btn-next', :disabled => true
37 46
  47 + .progress.progress-striped.active.hide{:style => 'position: relative;'}
  48 + #upload-bar.bar
  49 + #upload-label.center{:style => 'position: absolute; width: 100%; font-size: 12px;'}
  50 +
38 .row-fluid 51 .row-fluid
39 #step-service 52 #step-service
40 53
config/initializers/assets.rb
@@ -4,6 +4,7 @@ Rails.application.config.assets.precompile += %w( v_libras/requests/new.js ) @@ -4,6 +4,7 @@ Rails.application.config.assets.precompile += %w( v_libras/requests/new.js )
4 Rails.application.config.assets.precompile += %w( v_libras/requests/workflow.js ) 4 Rails.application.config.assets.precompile += %w( v_libras/requests/workflow.js )
5 Rails.application.config.assets.precompile += %w( v_libras/videos/index.js ) 5 Rails.application.config.assets.precompile += %w( v_libras/videos/index.js )
6 Rails.application.config.assets.precompile += %w( jquery.steps.js ) 6 Rails.application.config.assets.precompile += %w( jquery.steps.js )
  7 +Rails.application.config.assets.precompile += %w( jquery.contra.min.js )
7 8
8 Rails.application.config.assets.precompile += %w( v_libras/requests.css ) 9 Rails.application.config.assets.precompile += %w( v_libras/requests.css )
9 Rails.application.config.assets.precompile += %w( jquery.steps.css ) 10 Rails.application.config.assets.precompile += %w( jquery.steps.css )
10 \ No newline at end of file 11 \ No newline at end of file
vendor/assets/javascripts/jquery.contra.min.js 0 → 100644
@@ -0,0 +1,7 @@ @@ -0,0 +1,7 @@
  1 +/* jQuery Contra v1.0
  2 + * http://jonraasch.com/blog/jquery-contra-plugin
  3 + *
  4 + * Copyright (c) 2009 Jon Raasch (http://jonraasch.com/)
  5 + * Licensed under the MIT License (see http://dev.jonraasch.com/contra/docs#licensing)
  6 + */
  7 +(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);
0 \ No newline at end of file 8 \ No newline at end of file