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,6 +25,18 @@ $(function () {
25 function stepChanged(event, currentIndex, priorIndex) { 25 function stepChanged(event, currentIndex, priorIndex) {
26 var totalSteps = $("#vlibras-wizard .content section").size(); 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 if ((currentIndex + 1) === totalSteps) { 40 if ((currentIndex + 1) === totalSteps) {
29 $("#btn-next").text("Finalizar"); 41 $("#btn-next").text("Finalizar");
30 } else { 42 } else {
@@ -64,17 +76,43 @@ $(function () { @@ -64,17 +76,43 @@ $(function () {
64 $("#btn-next").prop('disabled', true); 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 $("#vlibras-form").addHidden('params[posicao]', $(this).data("value")); 80 $("#vlibras-form").addHidden('params[posicao]', $(this).data("value"));
69 $("#vlibras-form").addHidden('params[transparencia]', 'opaco'); 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 return false; 86 return false;
73 }); 87 });
74 88
75 - $(".btn-window-size").click(function() { 89 + $("#vlibras-wizard").find("#size-step").on("click", "a", function() {
76 $("#vlibras-form").addHidden('params[tamanho]', $(this).data("value")); 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 return false; 117 return false;
80 }); 118 });
@@ -85,8 +123,6 @@ $(function () { @@ -85,8 +123,6 @@ $(function () {
85 * Validates video and subtitle extension and activate the next button 123 * Validates video and subtitle extension and activate the next button
86 */ 124 */
87 $("#vlibras-form #subtitle-upload").change(function() { 125 $("#vlibras-form #subtitle-upload").change(function() {
88 - $("#vlibras-form").addHidden('service', 'video-legenda');  
89 -  
90 var acceptedFileTypes = ["srt"]; 126 var acceptedFileTypes = ["srt"];
91 validateFileWizard($(this), acceptedFileTypes); 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 @@ @@ -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 \ No newline at end of file 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,6 +10,7 @@ $(function() {
10 10
11 // bind to a channel event 11 // bind to a channel event
12 channel.bind('update', function(data) { 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 location.reload(); 14 location.reload();
14 }); 15 });
15 }); 16 });
16 \ No newline at end of file 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,7 +8,8 @@
8 } 8 }
9 9
10 .video-wizard { 10 .video-wizard {
11 - max-width: 50%; 11 + max-width: 100%;
  12 + margin-bottom: 20px;
12 } 13 }
13 14
14 .video-vlibras { 15 .video-vlibras {
app/assets/stylesheets/v_libras/requests.css.scss
  Diff comments   View file @b37b2e3
@@ -2,4 +2,40 @@ @@ -2,4 +2,40 @@
2 .actions { 2 .actions {
3 display: none; 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 \ No newline at end of file 42 \ No newline at end of file
app/helpers/application_helper.rb
  Diff comments   View file @b37b2e3
@@ -58,7 +58,13 @@ module ApplicationHelper @@ -58,7 +58,13 @@ module ApplicationHelper
58 options[:preload] = 'auto' 58 options[:preload] = 'auto'
59 59
60 content_tag(:video, options) do 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 end 68 end
63 end 69 end
64 70
app/views/v_libras/requests/_position_step.haml 0 → 100644
  Diff comments   View file @b37b2e3
@@ -0,0 +1,27 @@ @@ -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 \ No newline at end of file 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 @@ @@ -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 @@ @@ -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 @@ @@ -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 \ No newline at end of file 9 \ No newline at end of file
app/views/v_libras/requests/new.haml
  Diff comments   View file @b37b2e3
@@ -2,6 +2,7 @@ @@ -2,6 +2,7 @@
2 = javascript_include_tag "jquery.steps.js" 2 = javascript_include_tag "jquery.steps.js"
3 = javascript_include_tag "v_libras/requests/shared" 3 = javascript_include_tag "v_libras/requests/shared"
4 = javascript_include_tag "v_libras/requests/new" 4 = javascript_include_tag "v_libras/requests/new"
  5 + = javascript_include_tag "v_libras/requests/workflow"
5 6
6 - content_for :css do 7 - content_for :css do
7 = stylesheet_link_tag "jquery.steps.css" 8 = stylesheet_link_tag "jquery.steps.css"
@@ -15,38 +16,19 @@ @@ -15,38 +16,19 @@
15 #vlibras-wizard 16 #vlibras-wizard
16 %h2 Vídeo 17 %h2 Vídeo
17 %section 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 %h2 Áudio ou Legenda 21 %h2 Áudio ou Legenda
28 %section 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 %h2 Posição 25 %h2 Posição
37 %section 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 %h2 Tamanho 29 %h2 Tamanho
45 %section 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 #menu.center 33 #menu.center
52 = button_tag 'Próximo', :class => "btn btn-large btn-success", :id => 'btn-next', :disabled => true 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 Rails.application.config.assets.precompile += %w( v_libras/requests/shared.js ) 1 Rails.application.config.assets.precompile += %w( v_libras/requests/shared.js )
2 Rails.application.config.assets.precompile += %w( v_libras/requests/rapid.js ) 2 Rails.application.config.assets.precompile += %w( v_libras/requests/rapid.js )
3 Rails.application.config.assets.precompile += %w( v_libras/requests/new.js ) 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 Rails.application.config.assets.precompile += %w( v_libras/videos/index.js ) 5 Rails.application.config.assets.precompile += %w( v_libras/videos/index.js )
5 Rails.application.config.assets.precompile += %w( jquery.steps.js ) 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,7 +97,8 @@ Devise.setup do |config|
97 config.stretches = Rails.env.test? ? 1 : 10 97 config.stretches = Rails.env.test? ? 1 : 10
98 98
99 # Setup a pepper to generate the encrypted password. 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 # ==> Configuration for :confirmable 103 # ==> Configuration for :confirmable
103 # A period that the user is allowed to access the website even without 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,7 +34,7 @@ module ApiClient::Client
34 def self.process_params(request, files) 34 def self.process_params(request, files)
35 options = { query: request.params.clone } 35 options = { query: request.params.clone }
36 options[:query].merge!(:servico => request.service_type) 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 options[:query].merge!(:video => files[:video].file.to_file) 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,7 +142,7 @@
142 background: #eee; 142 background: #eee;
143 display: block; 143 display: block;
144 margin: 0.5em; 144 margin: 0.5em;
145 - min-height: 35em; 145 + min-height: 45em;
146 overflow: hidden; 146 overflow: hidden;
147 position: relative; 147 position: relative;
148 width: auto; 148 width: auto;