Download as
Browse Code »

Commit d5463318aa2bf4b36d1baf7d88f4f9c5a4949b74

Authored by Fernando Brito
1 parent 3259d858
Exists in master and in 1 other branch v2

Progress bar on rapid VLibras

Showing 7 changed files with 121 additions and 15 deletions   Show diff stats
@@ -14,6 +14,7 @@ gem 'less-rails' @@ -14,6 +14,7 @@ gem 'less-rails'
14 gem 'uglifier', '>= 1.3.0' 14 gem 'uglifier', '>= 1.3.0'
15 gem 'coffee-rails', '~> 4.0.0' 15 gem 'coffee-rails', '~> 4.0.0'
16 gem 'jquery-rails' 16 gem 'jquery-rails'
  17 +gem 'jquery.fileupload-rails'
17 18
18 gem 'httmultiparty' 19 gem 'httmultiparty'
19 20
@@ -212,6 +212,9 @@ GEM @@ -212,6 +212,9 @@ GEM
212 thor (>= 0.14, < 2.0) 212 thor (>= 0.14, < 2.0)
213 jquery-ui-rails (4.2.1) 213 jquery-ui-rails (4.2.1)
214 railties (>= 3.2.16) 214 railties (>= 3.2.16)
  215 + jquery.fileupload-rails (1.9.0)
  216 + jquery-ui-rails (>= 3.0, < 5.0)
  217 + railties (>= 3.1)
215 json (1.8.1) 218 json (1.8.1)
216 kaminari (0.15.1) 219 kaminari (0.15.1)
217 actionpack (>= 3.0.0) 220 actionpack (>= 3.0.0)
@@ -447,6 +450,7 @@ DEPENDENCIES @@ -447,6 +450,7 @@ DEPENDENCIES
447 httmultiparty 450 httmultiparty
448 inherited_resources 451 inherited_resources
449 jquery-rails 452 jquery-rails
  453 + jquery.fileupload-rails
450 kaminari 454 kaminari
451 kaminari-bootstrap (~> 0.1.3) 455 kaminari-bootstrap (~> 0.1.3)
452 launchy 456 launchy
app/assets/javascripts/application.js
  Diff comments   View file @d546331
@@ -12,6 +12,6 @@ @@ -12,6 +12,6 @@
12 // 12 //
13 //= require jquery 13 //= require jquery
14 //= require jquery_ujs 14 //= require jquery_ujs
  15 +//= require jquery.fileupload
15 //= require twitter/bootstrap 16 //= require twitter/bootstrap
16 -//= require websocket_rails/main  
17 - 17 +//= require websocket_rails/main
18 \ No newline at end of file 18 \ No newline at end of file
app/assets/javascripts/v_libras/requests/rapid.js
  Diff comments   View file @d546331
  1 +/*
  2 + * jquery-File-Upload
  3 + */
  4 +$(function() {
  5 + var videoFile;
  6 + var subtitleFile;
  7 +
  8 + function uploadFiles() {
  9 + if (subtitleFile == null) {
  10 + files = [videoFile];
  11 + params = ['video'];
  12 + } else {
  13 + files = [videoFile, subtitleFile];
  14 + params = ['video', 'subtitle'];
  15 + }
  16 +
  17 + $('#vlibras-rapid-form').fileupload('send',
  18 + { files: files,
  19 + paramName: params });
  20 + }
  21 +
  22 + $('#vlibras-rapid-form').fileupload({
  23 + autoUpload: false,
  24 + singleFileUploads: false,
  25 + limitConcurrentUploads: 1,
  26 +
  27 + always: function(e, data) {
  28 + location.href = data.jqXHR.responseJSON.redirect_to;
  29 + },
  30 +
  31 + add: function(e, data) {
  32 + if (data.fileInput[0].name === 'video') {
  33 + videoFile = data.files[0];
  34 + } else if (data.fileInput[0].name === 'subtitle') {
  35 + subtitleFile = data.files[0];
  36 + };
  37 +
  38 + $("#submit-button").unbind('click').on('click', function(event) {
  39 + $(".field").hide();
  40 + $(".progress").show();
  41 + $("#submit-button").hide();
  42 + $("#vlibras-rapid h2").text("Enviando...");
  43 +
  44 + uploadFiles();
  45 +
  46 + event.preventDefault();
  47 + });
  48 + }
  49 + });
  50 +
  51 + $("#vlibras-rapid-form").bind("fileuploadprogress", function (e, data) {
  52 + var percentage = Math.round(data.loaded / data.total * 100);
  53 + var bitrate = Math.round(data.bitrate / 8 / 1024 * 100) / 100 + " KB/s";
  54 +
  55 + $("#upload-bar").css("width", percentage + "%");
  56 + $("#upload-label").text(percentage + "% (" + bitrate + ")");
  57 + });
  58 +});
  59 +
  60 +
  61 +
  62 +/*
  63 + * Radio box service (video or video-subtitle)
  64 + */
  65 +
1 $(function() { 66 $(function() {
2 $("#service-video").click(function() { 67 $("#service-video").click(function() {
3 $("#url").show('slow'); 68 $("#url").show('slow');
4 $("#legend").hide('slow'); 69 $("#legend").hide('slow');
5 }); 70 });
6 71
7 - $("#vlibras-rapid").submit(function() {  
8 - $("#vlibras-rapid #submit-button").prop('disabled', true);  
9 - $("#vlibras-rapid #submit-button").attr("value", "Enviando...");  
10 - });  
11 -  
12 $("#service-video-subtitle").click(function() { 72 $("#service-video-subtitle").click(function() {
13 - $("#url").show('slow');  
14 - $("#legend").show('slow'); 73 + $("#url").show("slow");
  74 + $("#legend").show("slow");
15 }); 75 });
16 76
17 /* When user press "Back" on the browser */ 77 /* When user press "Back" on the browser */
@@ -48,7 +108,16 @@ $(function() { @@ -48,7 +108,16 @@ $(function() {
48 alert("Apenas os formatos abaixo são aceitos:\n\n" + acceptedFileTypes.join(", ")); 108 alert("Apenas os formatos abaixo são aceitos:\n\n" + acceptedFileTypes.join(", "));
49 } 109 }
50 110
  111 + updateButton(input);
  112 +
51 return true; 113 return true;
52 } 114 }
  115 +
  116 + function updateButton(input) {
  117 + var filename = input.val().split("\\").pop();
  118 + var buttonText = "Arquivo: " + filename;
  119 +
  120 + input.parent().find(".button-text").text(buttonText);
  121 + }
53 }); 122 });
54 123
app/assets/stylesheets/bootstrap_overrides.css.scss
  Diff comments   View file @d546331
@@ -55,6 +55,23 @@ @@ -55,6 +55,23 @@
55 overflow: auto; 55 overflow: auto;
56 } 56 }
57 57
  58 +.fileinput-button {
  59 + position: relative;
  60 + overflow: hidden;
  61 +}
  62 +
  63 +.fileinput-button input {
  64 + position: absolute;
  65 + top: 0;
  66 + right: 0;
  67 + margin: 0;
  68 + opacity: 0;
  69 + -ms-filter: 'alpha(opacity=0)';
  70 + font-size: 200px;
  71 + direction: ltr;
  72 + cursor: pointer;
  73 +}
  74 +
58 /* Fix menu */ 75 /* Fix menu */
59 @media (max-width: 767px) { 76 @media (max-width: 767px) {
60 .nav-collapse.user-menu { 77 .nav-collapse.user-menu {
app/controllers/v_libras/requests_controller.rb
  Diff comments   View file @d546331
@@ -20,7 +20,7 @@ class VLibras::RequestsController &lt; ApplicationController @@ -20,7 +20,7 @@ class VLibras::RequestsController &lt; ApplicationController
20 20
21 flash[:success] = 'Sua requisição foi submetida com sucesso!' 21 flash[:success] = 'Sua requisição foi submetida com sucesso!'
22 22
23 - redirect_to v_libras_videos_path('video-wait' => true) 23 + render json: { status: 'ok', redirect_to: v_libras_videos_path('video-wait' => true)}, status: 200
24 else 24 else
25 flash[:error] = 'Algo deu errado com a sua requisição. Por favor verifique opções escolhidas.' 25 flash[:error] = 'Algo deu errado com a sua requisição. Por favor verifique opções escolhidas.'
26 flash[:warning] = @request.errors.full_messages.to_sentence.humanize 26 flash[:warning] = @request.errors.full_messages.to_sentence.humanize
@@ -28,7 +28,8 @@ class VLibras::RequestsController &lt; ApplicationController @@ -28,7 +28,8 @@ class VLibras::RequestsController &lt; ApplicationController
28 # Warning: this code is also present on #perform_request, if the request is successfully done 28 # Warning: this code is also present on #perform_request, if the request is successfully done
29 @request.files.values.each { |f| f.file.delete } 29 @request.files.values.each { |f| f.file.delete }
30 30
31 - redirect_to :back 31 + # same as redirect :back
  32 + render json: { status: 'error', redirect_to: request.headers["Referer"]}, status: 400
32 end 33 end
33 end 34 end
34 35
app/views/v_libras/requests/rapid.haml
  Diff comments   View file @d546331
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 %h2 7 %h2
8 = t('videos.new') 8 = t('videos.new')
9 9
10 - = form_tag v_libras_requests_path, method: :post, :multipart => true do |f| 10 + = form_tag v_libras_requests_path, method: :post, :multipart => true, :id => 'vlibras-rapid-form' do |f|
11 - if @request.errors.any? 11 - if @request.errors.any?
12 #error_explanation 12 #error_explanation
13 %p/ 13 %p/
@@ -30,11 +30,21 @@ @@ -30,11 +30,21 @@
30 30
31 #url.field.hide 31 #url.field.hide
32 = label_tag :video, t('videos.url'), :class => "bold" 32 = label_tag :video, t('videos.url'), :class => "bold"
33 - = file_field_tag :video, :prompt => "Arquivo de vídeo", :id => 'video-upload' 33 +
  34 + %span.btn.fileinput-button
  35 + %i.icon-film
  36 + %span.button-text Escolha o vídeo...
  37 + = file_field_tag :video, :prompt => "Arquivo de vídeo", :id => 'video-upload',
  38 + :accept => '.flv, .ts, .avi, .mp4, .mov, .webm, .wmv, .mkv'
34 39
35 #legend.field.hide 40 #legend.field.hide
36 = label_tag :subtitle, t('videos.subtitle'), :class => "bold" 41 = label_tag :subtitle, t('videos.subtitle'), :class => "bold"
37 - = file_field_tag :subtitle, :prompt => "Legenda", :id => 'subtitle-upload' 42 +
  43 + %span.btn.fileinput-button
  44 + %i.icon-list-alt
  45 + %span.button-text Escolha a legenda...
  46 + = file_field_tag :subtitle, :prompt => "Arquivo de legenda", :id => 'subtitle-upload',
  47 + :accept => '.srt'
38 48
39 .field 49 .field
40 = label_tag 'params[tamanho]', t('videos.window_size'), :class => "bold" 50 = label_tag 'params[tamanho]', t('videos.window_size'), :class => "bold"
@@ -51,5 +61,9 @@ @@ -51,5 +61,9 @@
51 .field.hide 61 .field.hide
52 = label_tag 'params[transparencia]', t('videos.transparency'), :class => "bold" 62 = label_tag 'params[transparencia]', t('videos.transparency'), :class => "bold"
53 = select_tag 'params[transparencia]', options_for_select([['Opaco', 'opaco'], ['Transparente', 'transparente']]) 63 = select_tag 'params[transparencia]', options_for_select([['Opaco', 'opaco'], ['Transparente', 'transparente']])
54 - = submit_tag "Confirmar", :class => "btn btn-success btn-large actions", :id => 'submit-button'  
55 64
  65 + .progress.progress-striped.active.hide{:style => 'position: relative;'}
  66 + #upload-bar.bar
  67 + #upload-label.center{:style => 'position: absolute; width: 100%; font-size: 12px;'}
  68 +
  69 + = button_tag "Confirmar", :class => "btn btn-success btn-large actions", :id => 'submit-button'
56 \ No newline at end of file 70 \ No newline at end of file