From d5463318aa2bf4b36d1baf7d88f4f9c5a4949b74 Mon Sep 17 00:00:00 2001 From: Fernando Brito Date: Tue, 26 Aug 2014 13:01:32 -0300 Subject: [PATCH] Progress bar on rapid VLibras --- Gemfile | 1 + Gemfile.lock | 4 ++++ app/assets/javascripts/application.js | 4 ++-- app/assets/javascripts/v_libras/requests/rapid.js | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------- app/assets/stylesheets/bootstrap_overrides.css.scss | 17 +++++++++++++++++ app/controllers/v_libras/requests_controller.rb | 5 +++-- app/views/v_libras/requests/rapid.haml | 22 ++++++++++++++++++---- 7 files changed, 121 insertions(+), 15 deletions(-) diff --git a/Gemfile b/Gemfile index ed8dbe1..b3b56db 100644 --- a/Gemfile +++ b/Gemfile @@ -14,6 +14,7 @@ gem 'less-rails' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.0.0' gem 'jquery-rails' +gem 'jquery.fileupload-rails' gem 'httmultiparty' diff --git a/Gemfile.lock b/Gemfile.lock index 5b004f0..41e8e27 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -212,6 +212,9 @@ GEM thor (>= 0.14, < 2.0) jquery-ui-rails (4.2.1) railties (>= 3.2.16) + jquery.fileupload-rails (1.9.0) + jquery-ui-rails (>= 3.0, < 5.0) + railties (>= 3.1) json (1.8.1) kaminari (0.15.1) actionpack (>= 3.0.0) @@ -447,6 +450,7 @@ DEPENDENCIES httmultiparty inherited_resources jquery-rails + jquery.fileupload-rails kaminari kaminari-bootstrap (~> 0.1.3) launchy diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 977b28f..dbde4c9 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -12,6 +12,6 @@ // //= require jquery //= require jquery_ujs +//= require jquery.fileupload //= require twitter/bootstrap -//= require websocket_rails/main - +//= require websocket_rails/main \ No newline at end of file diff --git a/app/assets/javascripts/v_libras/requests/rapid.js b/app/assets/javascripts/v_libras/requests/rapid.js index f548b40..27e66ab 100644 --- a/app/assets/javascripts/v_libras/requests/rapid.js +++ b/app/assets/javascripts/v_libras/requests/rapid.js @@ -1,17 +1,77 @@ +/* + * jquery-File-Upload + */ +$(function() { + var videoFile; + var subtitleFile; + + function uploadFiles() { + if (subtitleFile == null) { + files = [videoFile]; + params = ['video']; + } else { + files = [videoFile, subtitleFile]; + params = ['video', 'subtitle']; + } + + $('#vlibras-rapid-form').fileupload('send', + { files: files, + paramName: params }); + } + + $('#vlibras-rapid-form').fileupload({ + autoUpload: false, + singleFileUploads: false, + limitConcurrentUploads: 1, + + always: function(e, data) { + location.href = data.jqXHR.responseJSON.redirect_to; + }, + + add: function(e, data) { + if (data.fileInput[0].name === 'video') { + videoFile = data.files[0]; + } else if (data.fileInput[0].name === 'subtitle') { + subtitleFile = data.files[0]; + }; + + $("#submit-button").unbind('click').on('click', function(event) { + $(".field").hide(); + $(".progress").show(); + $("#submit-button").hide(); + $("#vlibras-rapid h2").text("Enviando..."); + + uploadFiles(); + + event.preventDefault(); + }); + } + }); + + $("#vlibras-rapid-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 + ")"); + }); +}); + + + +/* + * Radio box service (video or video-subtitle) + */ + $(function() { $("#service-video").click(function() { $("#url").show('slow'); $("#legend").hide('slow'); }); - $("#vlibras-rapid").submit(function() { - $("#vlibras-rapid #submit-button").prop('disabled', true); - $("#vlibras-rapid #submit-button").attr("value", "Enviando..."); - }); - $("#service-video-subtitle").click(function() { - $("#url").show('slow'); - $("#legend").show('slow'); + $("#url").show("slow"); + $("#legend").show("slow"); }); /* When user press "Back" on the browser */ @@ -48,7 +108,16 @@ $(function() { alert("Apenas os formatos abaixo são aceitos:\n\n" + acceptedFileTypes.join(", ")); } + updateButton(input); + return true; } + + function updateButton(input) { + var filename = input.val().split("\\").pop(); + var buttonText = "Arquivo: " + filename; + + input.parent().find(".button-text").text(buttonText); + } }); diff --git a/app/assets/stylesheets/bootstrap_overrides.css.scss b/app/assets/stylesheets/bootstrap_overrides.css.scss index 7d8d35f..914c29a 100644 --- a/app/assets/stylesheets/bootstrap_overrides.css.scss +++ b/app/assets/stylesheets/bootstrap_overrides.css.scss @@ -55,6 +55,23 @@ overflow: auto; } +.fileinput-button { + position: relative; + overflow: hidden; +} + +.fileinput-button input { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + -ms-filter: 'alpha(opacity=0)'; + font-size: 200px; + direction: ltr; + cursor: pointer; +} + /* Fix menu */ @media (max-width: 767px) { .nav-collapse.user-menu { diff --git a/app/controllers/v_libras/requests_controller.rb b/app/controllers/v_libras/requests_controller.rb index 9850dfa..8e78543 100644 --- a/app/controllers/v_libras/requests_controller.rb +++ b/app/controllers/v_libras/requests_controller.rb @@ -20,7 +20,7 @@ class VLibras::RequestsController < ApplicationController flash[:success] = 'Sua requisição foi submetida com sucesso!' - redirect_to v_libras_videos_path('video-wait' => true) + render json: { status: 'ok', redirect_to: v_libras_videos_path('video-wait' => true)}, status: 200 else flash[:error] = 'Algo deu errado com a sua requisição. Por favor verifique opções escolhidas.' flash[:warning] = @request.errors.full_messages.to_sentence.humanize @@ -28,7 +28,8 @@ class VLibras::RequestsController < ApplicationController # Warning: this code is also present on #perform_request, if the request is successfully done @request.files.values.each { |f| f.file.delete } - redirect_to :back + # same as redirect :back + render json: { status: 'error', redirect_to: request.headers["Referer"]}, status: 400 end end diff --git a/app/views/v_libras/requests/rapid.haml b/app/views/v_libras/requests/rapid.haml index decee0e..65686b6 100644 --- a/app/views/v_libras/requests/rapid.haml +++ b/app/views/v_libras/requests/rapid.haml @@ -7,7 +7,7 @@ %h2 = t('videos.new') - = form_tag v_libras_requests_path, method: :post, :multipart => true do |f| + = form_tag v_libras_requests_path, method: :post, :multipart => true, :id => 'vlibras-rapid-form' do |f| - if @request.errors.any? #error_explanation %p/ @@ -30,11 +30,21 @@ #url.field.hide = label_tag :video, t('videos.url'), :class => "bold" - = file_field_tag :video, :prompt => "Arquivo de vídeo", :id => 'video-upload' + + %span.btn.fileinput-button + %i.icon-film + %span.button-text Escolha o vídeo... + = file_field_tag :video, :prompt => "Arquivo de vídeo", :id => 'video-upload', + :accept => '.flv, .ts, .avi, .mp4, .mov, .webm, .wmv, .mkv' #legend.field.hide = label_tag :subtitle, t('videos.subtitle'), :class => "bold" - = file_field_tag :subtitle, :prompt => "Legenda", :id => 'subtitle-upload' + + %span.btn.fileinput-button + %i.icon-list-alt + %span.button-text Escolha a legenda... + = file_field_tag :subtitle, :prompt => "Arquivo de legenda", :id => 'subtitle-upload', + :accept => '.srt' .field = label_tag 'params[tamanho]', t('videos.window_size'), :class => "bold" @@ -51,5 +61,9 @@ .field.hide = label_tag 'params[transparencia]', t('videos.transparency'), :class => "bold" = select_tag 'params[transparencia]', options_for_select([['Opaco', 'opaco'], ['Transparente', 'transparente']]) - = submit_tag "Confirmar", :class => "btn btn-success btn-large actions", :id => 'submit-button' + .progress.progress-striped.active.hide{:style => 'position: relative;'} + #upload-bar.bar + #upload-label.center{:style => 'position: absolute; width: 100%; font-size: 12px;'} + + = button_tag "Confirmar", :class => "btn btn-success btn-large actions", :id => 'submit-button' \ No newline at end of file -- libgit2 0.21.2