Download as
Browse Code »

Commit b37b2e379a01771b6e3620b5655d3ea4e68d95af

Authored by Fernando Brito
1 parent 92fee8ea
Exists in master and in 2 other branches v2, wikilibras

New features on wizard

Showing 15 changed files with 278 additions and 34 deletions   Show diff stats
app/assets/javascripts/v_libras/requests/new.js
  Diff comments   View file @b37b2e3
... ... @@ -25,6 +25,18 @@ $(function () {
25 25 function stepChanged(event, currentIndex, priorIndex) {
26 26 var totalSteps = $("#vlibras-wizard .content section").size();
27 27  
  28 + if ((priorIndex === 0) && (currentIndex === 1)) {
  29 + VLibrasSubAudio.play();
  30 + }
  31 +
  32 + if ((priorIndex === 1) && (currentIndex === 2)) {
  33 + VLibrasPosition.play();
  34 + }
  35 +
  36 + if ((priorIndex === 2) && (currentIndex === 3)) {
  37 + VLibrasSize.play();
  38 + }
  39 +
28 40 if ((currentIndex + 1) === totalSteps) {
29 41 $("#btn-next").text("Finalizar");
30 42 } else {
... ... @@ -64,17 +76,43 @@ $(function () {
64 76 $("#btn-next").prop('disabled', true);
65 77 }
66 78  
67   - $(".btn-window-position").click(function() {
  79 + $("#vlibras-wizard").find("#position-step").on("click", "a", function() {
68 80 $("#vlibras-form").addHidden('params[posicao]', $(this).data("value"));
69 81 $("#vlibras-form").addHidden('params[transparencia]', 'opaco');
70   - activateNextButton();
  82 + $("#vlibras-wizard").steps('next');
  83 +
  84 + alert("Posição: " + $(this).data("value"));
71 85  
72 86 return false;
73 87 });
74 88  
75   - $(".btn-window-size").click(function() {
  89 + $("#vlibras-wizard").find("#size-step").on("click", "a", function() {
76 90 $("#vlibras-form").addHidden('params[tamanho]', $(this).data("value"));
77   - activateNextButton();
  91 + $("#vlibras-wizard").steps('finish');
  92 +
  93 + alert("Tamanho: " + $(this).data("value"));
  94 +
  95 + return false;
  96 + });
  97 +
  98 +
  99 + /*
  100 + * Service
  101 + */
  102 + $("#vlibras-wizard").on("click", "#btn-video-legenda", function() {
  103 + alert("Serviço: video-legenda");
  104 +
  105 + $("#vlibras-form").addHidden('service', 'video-legenda');
  106 + $("#subtitle-upload").parent().show();
  107 +
  108 + return false;
  109 + });
  110 +
  111 + $("#vlibras-wizard").on("click", "#btn-video", function() {
  112 + alert("Serviço: video");
  113 +
  114 + $("#vlibras-wizard").steps('next');
  115 + $("#vlibras-form").addHidden('service', 'video');
78 116  
79 117 return false;
80 118 });
... ... @@ -85,8 +123,6 @@ $(function () {
85 123 * Validates video and subtitle extension and activate the next button
86 124 */
87 125 $("#vlibras-form #subtitle-upload").change(function() {
88   - $("#vlibras-form").addHidden('service', 'video-legenda');
89   -
90 126 var acceptedFileTypes = ["srt"];
91 127 validateFileWizard($(this), acceptedFileTypes);
92 128 });
... ...
app/assets/javascripts/v_libras/requests/workflow.js 0 → 100644
  Diff comments   View file @b37b2e3
... ... @@ -0,0 +1,92 @@
  1 +var VLibrasLocalization = function() {
  2 + var _id, _wrapper, _video_wrapper, _video, _options;
  3 +
  4 + function _initParams() {
  5 + _wrapper = $(".wrapper").filter(_id),
  6 + _video_wrapper = _wrapper.find(".video_wrapper"),
  7 + _video = _wrapper.find("video");
  8 + }
  9 +
  10 + function _wrapperConfig() {
  11 + _wrapper.width(_options.video.width);
  12 + _wrapper.height(_options.video.height);
  13 + }
  14 +
  15 + function _videoWrapperConfig() {
  16 + _video_wrapper.css('position', 'absolute');
  17 + _video_wrapper.css('z-index', 1);
  18 + _video_wrapper.width(_options.video.width);
  19 + _video_wrapper.height(_options.video.height);
  20 + }
  21 +
  22 + function _videoConfig() {
  23 + _video.css('position', 'relative');
  24 + _video.css('z-index', 0);
  25 + _video.attr('width', _options.video.width);
  26 + _video.attr('height', _options.video.height);
  27 + }
  28 +
  29 + function _addButtons() {
  30 +
  31 + var time_helper = null;
  32 +
  33 + var interval = setInterval(function() {
  34 + var time = Math.round( _video[0].currentTime * 10 ) / 10;
  35 +
  36 + if (time !== time_helper){
  37 + $('.footnote').text(time);
  38 +
  39 + for (var i = 0; i < _options.buttons.length; i++)
  40 + _createButton(i, time);
  41 +
  42 + time_helper = time;
  43 + }
  44 + }, 10);
  45 + }
  46 +
  47 + function _createButton(index, time) {
  48 + if (time === _options.buttons[index].start) {
  49 + var image = null;
  50 +
  51 + if (_options.buttons[index].clickable === true) {
  52 + image = $('<a href="#"><img src="' + _options.buttons[index].path + '"></a>');
  53 + } else {
  54 + image = $('<img src="' + _options.buttons[index].path + '">');
  55 + }
  56 +
  57 + image.attr('id', _options.buttons[index].id);
  58 + image.data('value', _options.buttons[index].value);
  59 + image.attr('data-value', _options.buttons[index].value);
  60 + image.css('position', 'relative');
  61 + image.css('top', _options.buttons[index].y);
  62 + image.css('left', _options.buttons[index].x);
  63 +
  64 + image.hide().appendTo(_video_wrapper).fadeIn(_options.buttons[index].delay);
  65 + }
  66 +
  67 + if (time === _options.buttons[index].end) {
  68 + $('#' + _options.buttons[index].id).fadeOut(_options.buttons[index].delay);
  69 + }
  70 + }
  71 +
  72 + return {
  73 + init: function(id, optns) {
  74 + _id = id;
  75 + _options = optns;
  76 +
  77 + _initParams();
  78 + _wrapperConfig();
  79 + _videoWrapperConfig();
  80 + _videoConfig();
  81 + _addButtons();
  82 + },
  83 +
  84 + play: function() {
  85 + _video[0].play();
  86 + },
  87 +
  88 + stop: function() {
  89 + _video[0].stop();
  90 + }
  91 + }
  92 +};
0 93 \ No newline at end of file
... ...
app/assets/javascripts/v_libras/videos/index.js
  Diff comments   View file @b37b2e3
... ... @@ -10,6 +10,7 @@ $(function() {
10 10  
11 11 // bind to a channel event
12 12 channel.bind('update', function(data) {
  13 + alert("Um vídeo que estava em processamento está disponível. Sua página será atualizada automaticamente.")
13 14 location.reload();
14 15 });
15 16 });
16 17 \ No newline at end of file
... ...
app/assets/stylesheets/components/video_player.css.scss
  Diff comments   View file @b37b2e3
... ... @@ -8,7 +8,8 @@
8 8 }
9 9  
10 10 .video-wizard {
11   - max-width: 50%;
  11 + max-width: 100%;
  12 + margin-bottom: 20px;
12 13 }
13 14  
14 15 .video-vlibras {
... ...
app/assets/stylesheets/v_libras/requests.css.scss
  Diff comments   View file @b37b2e3
... ... @@ -2,4 +2,40 @@
2 2 .actions {
3 3 display: none;
4 4 }
  5 +
  6 + img {
  7 + border: 0;
  8 + }
  9 +
  10 + .wrapper {
  11 + margin: 0 auto;
  12 + }
  13 +
  14 + #b_size_4 {
  15 + z-index: 3;
  16 + opacity: 0.4;
  17 + }
  18 +
  19 + #b_size_4:hover {
  20 + opacity: 1;
  21 + }
  22 +
  23 + #b_size_5 {
  24 + z-index: 2;
  25 + opacity: 0.4;
  26 + }
  27 +
  28 + #b_size_5:hover {
  29 + opacity: 1;
  30 + }
  31 +
  32 + #b_size_6 {
  33 + z-index: 1;
  34 + opacity: 0.4;
  35 + }
  36 +
  37 + #b_size_6:hover {
  38 + opacity: 1;
  39 + }
  40 +
5 41 }
6 42 \ No newline at end of file
... ...
app/helpers/application_helper.rb
  Diff comments   View file @b37b2e3
... ... @@ -58,7 +58,13 @@ module ApplicationHelper
58 58 options[:preload] = 'auto'
59 59  
60 60 content_tag(:video, options) do
61   - content_tag(:source, '', :src => url, :type => 'video/mp4')
  61 + if url.class == String
  62 + content_tag(:source, '', :src => url, :type => 'video/mp4')
  63 + else
  64 + url.each do |v|
  65 + concat content_tag(:source, '', :src => v)
  66 + end
  67 + end
62 68 end
63 69 end
64 70  
... ...
app/views/v_libras/requests/_position_step.haml 0 → 100644
  Diff comments   View file @b37b2e3
... ... @@ -0,0 +1,27 @@
  1 +#position-step.wrapper
  2 + .video_wrapper
  3 +
  4 + %video.video-wizard
  5 + %source{src: "/system/videos/workflow/localizacao.mp4"}
  6 + %source{src: "/system/videos/workflow/localizacao.webm"}
  7 + Your browser does not support the video tag.
  8 +
  9 + =# html5_video_tag(['/system/videos/workflow/localizacao.mp4', '/system/videos/workflow/localizacao.webm'],
  10 + 'id')
  11 +
  12 +:javascript
  13 + var optionsPosition = {
  14 + video: { width: 940, height: 530 },
  15 + 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 },
  16 + { 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 },
  17 + { 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 },
  18 + { 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 },
  19 + { 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" },
  20 + { 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" },
  21 + { 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" },
  22 + { 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" }
  23 + ]
  24 + };
  25 +
  26 + var VLibrasPosition = new VLibrasLocalization();
  27 + VLibrasPosition.init("#position-step", optionsPosition);
0 28 \ No newline at end of file
... ...
app/views/v_libras/requests/_service_step.haml 0 → 100644
  Diff comments   View file @b37b2e3
... ... @@ -0,0 +1,27 @@
  1 +#service-step.wrapper
  2 + .video_wrapper
  3 +
  4 + %video.video-wizard
  5 + %source{src: "/system/videos/workflow/sub_audio.mp4"}
  6 + %source{src: "/system/videos/workflow/sub_audio.webm"}
  7 + Your browser does not support the video tag.
  8 +
  9 + =# html5_video_tag("/system/videos/workflow/sub_audio.mp4", 'id', 'video-wizard', :autoplay => true)
  10 +
  11 + .span4.offset4.hide
  12 + = file_field_tag 'subtitle', :id => 'subtitle-upload'
  13 +
  14 +
  15 +:javascript
  16 + var optionsService = {
  17 + video: { width: 940, height: 530 },
  18 + 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 },
  19 + { 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 },
  20 + { id: 'btn-video-legenda', path: '/system/images/sub_audio/p_1.png', clickable: true, start: 26, end: null, x: 790, y: 410, delay: 300 },
  21 + { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: 26, end: null, x: -80, y: 410, delay: 300 }
  22 + ]
  23 + };
  24 +
  25 + var VLibrasSubAudio = new VLibrasLocalization();
  26 + VLibrasSubAudio.init("#service-step", optionsService);
  27 +
... ...
app/views/v_libras/requests/_size_step.haml 0 → 100644
  Diff comments   View file @b37b2e3
... ... @@ -0,0 +1,26 @@
  1 +#size-step.wrapper
  2 + .video_wrapper
  3 +
  4 + %video.video-wizard
  5 + %source{src: "/system/videos/workflow/tamanho.mp4"}
  6 + %source{src: "/system/videos/workflow/tamanho.webm"}
  7 + Your browser does not support the video tag.
  8 +
  9 + =# html5_video_tag("/video.mp4", 'id', 'video-wizard', :autoplay => 'autoplay')
  10 +
  11 +
  12 +:javascript
  13 + var optionsSize = {
  14 + video: { width: 940, height: 530 },
  15 + 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 },
  16 + { 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 },
  17 + { 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},
  18 + { 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" },
  19 + { 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" },
  20 + { 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" }
  21 + ]
  22 + };
  23 +
  24 + var VLibrasSize = new VLibrasLocalization();
  25 + VLibrasSize.init("#size-step", optionsSize);
  26 +
... ...
app/views/v_libras/requests/_video_step.haml 0 → 100644
  Diff comments   View file @b37b2e3
... ... @@ -0,0 +1,8 @@
  1 +%p
  2 + = html5_video_tag("/video.mp4", 'id', 'video-wizard', :autoplay => true)
  3 +
  4 + .span6.offset3
  5 + .span2
  6 + = label_tag :video, t('videos.url'), :class => "bold"
  7 + .span10
  8 + = file_field_tag 'video', :id => 'video-upload'
0 9 \ No newline at end of file
... ...
app/views/v_libras/requests/new.haml
  Diff comments   View file @b37b2e3
... ... @@ -2,6 +2,7 @@
2 2 = javascript_include_tag "jquery.steps.js"
3 3 = javascript_include_tag "v_libras/requests/shared"
4 4 = javascript_include_tag "v_libras/requests/new"
  5 + = javascript_include_tag "v_libras/requests/workflow"
5 6  
6 7 - content_for :css do
7 8 = stylesheet_link_tag "jquery.steps.css"
... ... @@ -15,38 +16,19 @@
15 16 #vlibras-wizard
16 17 %h2 Vídeo
17 18 %section
18   - %p
19   - instruções + upload do arquivo de vído
20   - só libera o botão quando o video for escolhido
21   -
22   - = html5_video_tag("/video.mp4", 'id', 'video-wizard', :autoplay => 'autoplay')
23   -
24   - .span4
25   - = file_field_tag 'video', :id => 'video-upload'
  19 + = render :partial => 'video_step'
26 20  
27 21 %h2 Áudio ou Legenda
28 22 %section
29   - %p
30   - escolha se é audio ou legenda
31   - se for legenda, mostra o input file e quando arquivo for selecionado, libera o botão de avançar
32   -
33   - .span4
34   - = file_field_tag 'subtitle', :id => 'subtitle-upload'
  23 + = render :partial => 'service_step'
35 24  
36 25 %h2 Posição
37 26 %section
38   - %p
39   - = button_tag 'Superior Esquerdo', :class => 'btn btn-large btn-window-position', :data => { :value => 'superior-esquerdo' }
40   - = button_tag 'Superior Direito', :class => 'btn btn-large btn-window-position', :data => { :value => 'superior-direito' }
41   - = button_tag 'Inferior Direito', :class => 'btn btn-large btn-window-position', :data => { :value => 'inferior-direito' }
42   - = button_tag 'Inferior Esquerdo', :class => 'btn btn-large btn-window-position', :data => { :value => 'inferior-esquerdo' }
  27 + = render :partial => 'position_step'
43 28  
44 29 %h2 Tamanho
45 30 %section
46   - %p
47   - = button_tag 'Pequeno', :class => 'btn btn-large btn-window-size', :data => { :value => 'pequeno' }
48   - = button_tag 'Médio', :class => 'btn btn-large btn-window-size', :data => { :value => 'medio' }
49   - = button_tag 'Grande', :class => 'btn btn-large btn-window-size', :data => { :value => 'grande' }
  31 + = render :partial => 'size_step'
50 32  
51 33 #menu.center
52 34 = button_tag 'Próximo', :class => "btn btn-large btn-success", :id => 'btn-next', :disabled => true
... ...
config/initializers/assets.rb
  Diff comments   View file @b37b2e3
1 1 Rails.application.config.assets.precompile += %w( v_libras/requests/shared.js )
2 2 Rails.application.config.assets.precompile += %w( v_libras/requests/rapid.js )
3 3 Rails.application.config.assets.precompile += %w( v_libras/requests/new.js )
  4 +Rails.application.config.assets.precompile += %w( v_libras/requests/workflow.js )
4 5 Rails.application.config.assets.precompile += %w( v_libras/videos/index.js )
5 6 Rails.application.config.assets.precompile += %w( jquery.steps.js )
6 7  
... ...
config/initializers/devise.rb
  Diff comments   View file @b37b2e3
... ... @@ -97,7 +97,8 @@ Devise.setup do |config|
97 97 config.stretches = Rails.env.test? ? 1 : 10
98 98  
99 99 # Setup a pepper to generate the encrypted password.
100   - # config.pepper = '2907dad46ee52172663da4398e3197c50517be04581626455d75df94ddc21ea16e57e553e71f0302ccb14f1078582cf7d678dc0bac4c2068da7e25fea0d1896e'
  100 + config.pepper = '2907dad46ee52172663da4398e3197c50517be04581626455d75df94ddc21ea16e57e553e71f0302ccb14f1078582cf7d678dc0bac4c2068da7e25fea0d1896e'
  101 + config.secret_key = 'de136343dad2a57b136ea61d4bf9841d1490b58093e59295b523a9f729824fa101d5747acb8de947275b2c122656b8daff0df3567393b4b077e5b9fc8515991d'
101 102  
102 103 # ==> Configuration for :confirmable
103 104 # A period that the user is allowed to access the website even without
... ...
lib/api_client/client.rb
  Diff comments   View file @b37b2e3
... ... @@ -34,7 +34,7 @@ module ApiClient::Client
34 34 def self.process_params(request, files)
35 35 options = { query: request.params.clone }
36 36 options[:query].merge!(:servico => request.service_type)
37   - options[:query].merge!(:callback => "http://150.165.205.197:3000/v_libras/requests/callback?request_id=#{request.id}")
  37 + options[:query].merge!(:callback => "http://150.165.205.192:3000/v_libras/requests/callback?request_id=#{request.id}")
38 38  
39 39 options[:query].merge!(:video => files[:video].file.to_file)
40 40  
... ...
vendor/assets/stylesheets/jquery.steps.css
  Diff comments   View file @b37b2e3
... ... @@ -142,7 +142,7 @@
142 142 background: #eee;
143 143 display: block;
144 144 margin: 0.5em;
145   - min-height: 35em;
  145 + min-height: 45em;
146 146 overflow: hidden;
147 147 position: relative;
148 148 width: auto;
... ...