From b37b2e379a01771b6e3620b5655d3ea4e68d95af Mon Sep 17 00:00:00 2001 From: Fernando Brito Date: Tue, 3 Jun 2014 09:52:57 -0300 Subject: [PATCH] New features on wizard --- app/assets/javascripts/v_libras/requests/new.js | 48 ++++++++++++++++++++++++++++++++++++++++++------ app/assets/javascripts/v_libras/requests/workflow.js | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ app/assets/javascripts/v_libras/videos/index.js | 1 + app/assets/stylesheets/components/video_player.css.scss | 3 ++- app/assets/stylesheets/v_libras/requests.css.scss | 36 ++++++++++++++++++++++++++++++++++++ app/helpers/application_helper.rb | 8 +++++++- app/views/v_libras/requests/_position_step.haml | 27 +++++++++++++++++++++++++++ app/views/v_libras/requests/_service_step.haml | 27 +++++++++++++++++++++++++++ app/views/v_libras/requests/_size_step.haml | 26 ++++++++++++++++++++++++++ app/views/v_libras/requests/_video_step.haml | 8 ++++++++ app/views/v_libras/requests/new.haml | 28 +++++----------------------- config/initializers/assets.rb | 1 + config/initializers/devise.rb | 3 ++- lib/api_client/client.rb | 2 +- vendor/assets/stylesheets/jquery.steps.css | 2 +- 15 files changed, 278 insertions(+), 34 deletions(-) create mode 100644 app/assets/javascripts/v_libras/requests/workflow.js create mode 100644 app/views/v_libras/requests/_position_step.haml create mode 100644 app/views/v_libras/requests/_service_step.haml create mode 100644 app/views/v_libras/requests/_size_step.haml create mode 100644 app/views/v_libras/requests/_video_step.haml diff --git a/app/assets/javascripts/v_libras/requests/new.js b/app/assets/javascripts/v_libras/requests/new.js index 44635d0..45d13ed 100644 --- a/app/assets/javascripts/v_libras/requests/new.js +++ b/app/assets/javascripts/v_libras/requests/new.js @@ -25,6 +25,18 @@ $(function () { function stepChanged(event, currentIndex, priorIndex) { var totalSteps = $("#vlibras-wizard .content section").size(); + if ((priorIndex === 0) && (currentIndex === 1)) { + VLibrasSubAudio.play(); + } + + if ((priorIndex === 1) && (currentIndex === 2)) { + VLibrasPosition.play(); + } + + if ((priorIndex === 2) && (currentIndex === 3)) { + VLibrasSize.play(); + } + if ((currentIndex + 1) === totalSteps) { $("#btn-next").text("Finalizar"); } else { @@ -64,17 +76,43 @@ $(function () { $("#btn-next").prop('disabled', true); } - $(".btn-window-position").click(function() { + $("#vlibras-wizard").find("#position-step").on("click", "a", function() { $("#vlibras-form").addHidden('params[posicao]', $(this).data("value")); $("#vlibras-form").addHidden('params[transparencia]', 'opaco'); - activateNextButton(); + $("#vlibras-wizard").steps('next'); + + alert("Posição: " + $(this).data("value")); return false; }); - $(".btn-window-size").click(function() { + $("#vlibras-wizard").find("#size-step").on("click", "a", function() { $("#vlibras-form").addHidden('params[tamanho]', $(this).data("value")); - activateNextButton(); + $("#vlibras-wizard").steps('finish'); + + alert("Tamanho: " + $(this).data("value")); + + return false; + }); + + + /* + * Service + */ + $("#vlibras-wizard").on("click", "#btn-video-legenda", function() { + alert("Serviço: video-legenda"); + + $("#vlibras-form").addHidden('service', 'video-legenda'); + $("#subtitle-upload").parent().show(); + + return false; + }); + + $("#vlibras-wizard").on("click", "#btn-video", function() { + alert("Serviço: video"); + + $("#vlibras-wizard").steps('next'); + $("#vlibras-form").addHidden('service', 'video'); return false; }); @@ -85,8 +123,6 @@ $(function () { * Validates video and subtitle extension and activate the next button */ $("#vlibras-form #subtitle-upload").change(function() { - $("#vlibras-form").addHidden('service', 'video-legenda'); - var acceptedFileTypes = ["srt"]; validateFileWizard($(this), acceptedFileTypes); }); diff --git a/app/assets/javascripts/v_libras/requests/workflow.js b/app/assets/javascripts/v_libras/requests/workflow.js new file mode 100644 index 0000000..8f13104 --- /dev/null +++ b/app/assets/javascripts/v_libras/requests/workflow.js @@ -0,0 +1,92 @@ +var VLibrasLocalization = function() { + var _id, _wrapper, _video_wrapper, _video, _options; + + function _initParams() { + _wrapper = $(".wrapper").filter(_id), + _video_wrapper = _wrapper.find(".video_wrapper"), + _video = _wrapper.find("video"); + } + + function _wrapperConfig() { + _wrapper.width(_options.video.width); + _wrapper.height(_options.video.height); + } + + function _videoWrapperConfig() { + _video_wrapper.css('position', 'absolute'); + _video_wrapper.css('z-index', 1); + _video_wrapper.width(_options.video.width); + _video_wrapper.height(_options.video.height); + } + + function _videoConfig() { + _video.css('position', 'relative'); + _video.css('z-index', 0); + _video.attr('width', _options.video.width); + _video.attr('height', _options.video.height); + } + + function _addButtons() { + + var time_helper = null; + + var interval = setInterval(function() { + var time = Math.round( _video[0].currentTime * 10 ) / 10; + + if (time !== time_helper){ + $('.footnote').text(time); + + for (var i = 0; i < _options.buttons.length; i++) + _createButton(i, time); + + time_helper = time; + } + }, 10); + } + + function _createButton(index, time) { + if (time === _options.buttons[index].start) { + var image = null; + + if (_options.buttons[index].clickable === true) { + image = $(''); + } else { + image = $(''); + } + + image.attr('id', _options.buttons[index].id); + image.data('value', _options.buttons[index].value); + image.attr('data-value', _options.buttons[index].value); + image.css('position', 'relative'); + image.css('top', _options.buttons[index].y); + image.css('left', _options.buttons[index].x); + + image.hide().appendTo(_video_wrapper).fadeIn(_options.buttons[index].delay); + } + + if (time === _options.buttons[index].end) { + $('#' + _options.buttons[index].id).fadeOut(_options.buttons[index].delay); + } + } + + return { + init: function(id, optns) { + _id = id; + _options = optns; + + _initParams(); + _wrapperConfig(); + _videoWrapperConfig(); + _videoConfig(); + _addButtons(); + }, + + play: function() { + _video[0].play(); + }, + + stop: function() { + _video[0].stop(); + } + } +}; \ No newline at end of file diff --git a/app/assets/javascripts/v_libras/videos/index.js b/app/assets/javascripts/v_libras/videos/index.js index 91aae98..1df4510 100644 --- a/app/assets/javascripts/v_libras/videos/index.js +++ b/app/assets/javascripts/v_libras/videos/index.js @@ -10,6 +10,7 @@ $(function() { // bind to a channel event channel.bind('update', function(data) { + alert("Um vídeo que estava em processamento está disponível. Sua página será atualizada automaticamente.") location.reload(); }); }); \ No newline at end of file diff --git a/app/assets/stylesheets/components/video_player.css.scss b/app/assets/stylesheets/components/video_player.css.scss index 5ce38ec..ae23fa0 100644 --- a/app/assets/stylesheets/components/video_player.css.scss +++ b/app/assets/stylesheets/components/video_player.css.scss @@ -8,7 +8,8 @@ } .video-wizard { - max-width: 50%; + max-width: 100%; + margin-bottom: 20px; } .video-vlibras { diff --git a/app/assets/stylesheets/v_libras/requests.css.scss b/app/assets/stylesheets/v_libras/requests.css.scss index 3079a61..2b0f7c4 100644 --- a/app/assets/stylesheets/v_libras/requests.css.scss +++ b/app/assets/stylesheets/v_libras/requests.css.scss @@ -2,4 +2,40 @@ .actions { display: none; } + + img { + border: 0; + } + + .wrapper { + margin: 0 auto; + } + + #b_size_4 { + z-index: 3; + opacity: 0.4; + } + + #b_size_4:hover { + opacity: 1; + } + + #b_size_5 { + z-index: 2; + opacity: 0.4; + } + + #b_size_5:hover { + opacity: 1; + } + + #b_size_6 { + z-index: 1; + opacity: 0.4; + } + + #b_size_6:hover { + opacity: 1; + } + } \ No newline at end of file diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 0295705..18ccab7 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -58,7 +58,13 @@ module ApplicationHelper options[:preload] = 'auto' content_tag(:video, options) do - content_tag(:source, '', :src => url, :type => 'video/mp4') + if url.class == String + content_tag(:source, '', :src => url, :type => 'video/mp4') + else + url.each do |v| + concat content_tag(:source, '', :src => v) + end + end end end diff --git a/app/views/v_libras/requests/_position_step.haml b/app/views/v_libras/requests/_position_step.haml new file mode 100644 index 0000000..d5b75d9 --- /dev/null +++ b/app/views/v_libras/requests/_position_step.haml @@ -0,0 +1,27 @@ +#position-step.wrapper + .video_wrapper + + %video.video-wizard + %source{src: "/system/videos/workflow/localizacao.mp4"} + %source{src: "/system/videos/workflow/localizacao.webm"} + Your browser does not support the video tag. + + =# html5_video_tag(['/system/videos/workflow/localizacao.mp4', '/system/videos/workflow/localizacao.webm'], + 'id') + +:javascript + var optionsPosition = { + video: { width: 940, height: 530 }, + buttons: [ { id: 'b_loc_1', path: '/system/images/loc/p_1.png', clickable: false, start: 7.6, end: 8.5, x: 670, y: 340, delay: 300, value: null }, + { 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: null, 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: null, x: 680, y: 30, delay: 300, value: "superior-direito" }, + { id: 'b_loc_7', path: '/system/images/loc/p_1.png', clickable: true, start: 19.1, end: null, x: 568, y: 410, delay: 300, value: "inferior-direito" }, + { id: 'b_loc_8', path: '/system/images/loc/p_2.png', clickable: true, start: 19.1, end: null, x: -310, y: 410, delay: 300, value: "inferior-esquerdo" } + ] + }; + + var VLibrasPosition = new VLibrasLocalization(); + VLibrasPosition.init("#position-step", optionsPosition); \ No newline at end of file diff --git a/app/views/v_libras/requests/_service_step.haml b/app/views/v_libras/requests/_service_step.haml new file mode 100644 index 0000000..13cf560 --- /dev/null +++ b/app/views/v_libras/requests/_service_step.haml @@ -0,0 +1,27 @@ +#service-step.wrapper + .video_wrapper + + %video.video-wizard + %source{src: "/system/videos/workflow/sub_audio.mp4"} + %source{src: "/system/videos/workflow/sub_audio.webm"} + Your browser does not support the video tag. + + =# html5_video_tag("/system/videos/workflow/sub_audio.mp4", 'id', 'video-wizard', :autoplay => true) + + .span4.offset4.hide + = file_field_tag 'subtitle', :id => 'subtitle-upload' + + +:javascript + var optionsService = { + video: { width: 940, height: 530 }, + buttons: [ { 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: null, x: 790, y: 410, delay: 300 }, + { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: 26, end: null, x: -80, y: 410, delay: 300 } + ] + }; + + var VLibrasSubAudio = new VLibrasLocalization(); + VLibrasSubAudio.init("#service-step", optionsService); + diff --git a/app/views/v_libras/requests/_size_step.haml b/app/views/v_libras/requests/_size_step.haml new file mode 100644 index 0000000..9016ca9 --- /dev/null +++ b/app/views/v_libras/requests/_size_step.haml @@ -0,0 +1,26 @@ +#size-step.wrapper + .video_wrapper + + %video.video-wizard + %source{src: "/system/videos/workflow/tamanho.mp4"} + %source{src: "/system/videos/workflow/tamanho.webm"} + Your browser does not support the video tag. + + =# html5_video_tag("/video.mp4", 'id', 'video-wizard', :autoplay => 'autoplay') + + +:javascript + var optionsSize = { + video: { width: 940, height: 530 }, + buttons: [ { id: 'b_size_1', path: '/system/images/size/p_1.png', clickable: false, start: 6.8, end: 7.8, x: 770, y: 400, delay: 300, value: null }, + { id: 'b_size_2', path: '/system/images/size/p_2.png', clickable: false, start: 8.2, end: 9.2, x: 714, y: 355, delay: 300, value: null }, + { id: 'b_size_3', path: '/system/images/size/p_3.png', clickable: false, start: 9.7, end: 10.7, x: 658, y: 310, delay: 300, value: null}, + { id: 'b_size_4', path: '/system/images/size/p_1.png', clickable: true, start: 11.3, end: null, x: 780, y: 320, delay: 300, value: "pequeno" }, + { id: 'b_size_5', path: '/system/images/size/p_2.png', clickable: true, start: 11.3, end: null, x: 610, y: 320, delay: 300, value: "medio" }, + { id: 'b_size_6', path: '/system/images/size/p_3.png', clickable: true, start: 11.3, end: null, x: 384, y: 320, delay: 300, value: "grande" } + ] + }; + + var VLibrasSize = new VLibrasLocalization(); + VLibrasSize.init("#size-step", optionsSize); + diff --git a/app/views/v_libras/requests/_video_step.haml b/app/views/v_libras/requests/_video_step.haml new file mode 100644 index 0000000..e62de5b --- /dev/null +++ b/app/views/v_libras/requests/_video_step.haml @@ -0,0 +1,8 @@ +%p + = html5_video_tag("/video.mp4", 'id', 'video-wizard', :autoplay => true) + + .span6.offset3 + .span2 + = label_tag :video, t('videos.url'), :class => "bold" + .span10 + = file_field_tag 'video', :id => 'video-upload' \ No newline at end of file diff --git a/app/views/v_libras/requests/new.haml b/app/views/v_libras/requests/new.haml index 786254e..243ed31 100644 --- a/app/views/v_libras/requests/new.haml +++ b/app/views/v_libras/requests/new.haml @@ -2,6 +2,7 @@ = javascript_include_tag "jquery.steps.js" = javascript_include_tag "v_libras/requests/shared" = javascript_include_tag "v_libras/requests/new" + = javascript_include_tag "v_libras/requests/workflow" - content_for :css do = stylesheet_link_tag "jquery.steps.css" @@ -15,38 +16,19 @@ #vlibras-wizard %h2 Vídeo %section - %p - instruções + upload do arquivo de vído - só libera o botão quando o video for escolhido - - = html5_video_tag("/video.mp4", 'id', 'video-wizard', :autoplay => 'autoplay') - - .span4 - = file_field_tag 'video', :id => 'video-upload' + = render :partial => 'video_step' %h2 Áudio ou Legenda %section - %p - escolha se é audio ou legenda - se for legenda, mostra o input file e quando arquivo for selecionado, libera o botão de avançar - - .span4 - = file_field_tag 'subtitle', :id => 'subtitle-upload' + = render :partial => 'service_step' %h2 Posição %section - %p - = button_tag 'Superior Esquerdo', :class => 'btn btn-large btn-window-position', :data => { :value => 'superior-esquerdo' } - = button_tag 'Superior Direito', :class => 'btn btn-large btn-window-position', :data => { :value => 'superior-direito' } - = button_tag 'Inferior Direito', :class => 'btn btn-large btn-window-position', :data => { :value => 'inferior-direito' } - = button_tag 'Inferior Esquerdo', :class => 'btn btn-large btn-window-position', :data => { :value => 'inferior-esquerdo' } + = render :partial => 'position_step' %h2 Tamanho %section - %p - = button_tag 'Pequeno', :class => 'btn btn-large btn-window-size', :data => { :value => 'pequeno' } - = button_tag 'Médio', :class => 'btn btn-large btn-window-size', :data => { :value => 'medio' } - = button_tag 'Grande', :class => 'btn btn-large btn-window-size', :data => { :value => 'grande' } + = render :partial => 'size_step' #menu.center = button_tag 'Próximo', :class => "btn btn-large btn-success", :id => 'btn-next', :disabled => true diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index dc26005..7e1075f 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -1,6 +1,7 @@ Rails.application.config.assets.precompile += %w( v_libras/requests/shared.js ) Rails.application.config.assets.precompile += %w( v_libras/requests/rapid.js ) 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 ) diff --git a/config/initializers/devise.rb b/config/initializers/devise.rb index fea06aa..bc4b413 100644 --- a/config/initializers/devise.rb +++ b/config/initializers/devise.rb @@ -97,7 +97,8 @@ Devise.setup do |config| config.stretches = Rails.env.test? ? 1 : 10 # Setup a pepper to generate the encrypted password. - # config.pepper = '2907dad46ee52172663da4398e3197c50517be04581626455d75df94ddc21ea16e57e553e71f0302ccb14f1078582cf7d678dc0bac4c2068da7e25fea0d1896e' + config.pepper = '2907dad46ee52172663da4398e3197c50517be04581626455d75df94ddc21ea16e57e553e71f0302ccb14f1078582cf7d678dc0bac4c2068da7e25fea0d1896e' + config.secret_key = 'de136343dad2a57b136ea61d4bf9841d1490b58093e59295b523a9f729824fa101d5747acb8de947275b2c122656b8daff0df3567393b4b077e5b9fc8515991d' # ==> Configuration for :confirmable # A period that the user is allowed to access the website even without diff --git a/lib/api_client/client.rb b/lib/api_client/client.rb index 97cd9a1..e7a5397 100644 --- a/lib/api_client/client.rb +++ b/lib/api_client/client.rb @@ -34,7 +34,7 @@ module ApiClient::Client def self.process_params(request, files) options = { query: request.params.clone } options[:query].merge!(:servico => request.service_type) - options[:query].merge!(:callback => "http://150.165.205.197:3000/v_libras/requests/callback?request_id=#{request.id}") + options[:query].merge!(:callback => "http://150.165.205.192:3000/v_libras/requests/callback?request_id=#{request.id}") options[:query].merge!(:video => files[:video].file.to_file) diff --git a/vendor/assets/stylesheets/jquery.steps.css b/vendor/assets/stylesheets/jquery.steps.css index ad9f1c1..392b6ac 100644 --- a/vendor/assets/stylesheets/jquery.steps.css +++ b/vendor/assets/stylesheets/jquery.steps.css @@ -142,7 +142,7 @@ background: #eee; display: block; margin: 0.5em; - min-height: 35em; + min-height: 45em; overflow: hidden; position: relative; width: auto; -- libgit2 0.21.2