Video#show and responsive design

Fernando Brito
1 parent d417f408
Showing 9 changed files with 81 additions and 67 deletions Show diff stats
app/assets/stylesheets/bootstrap.css.less
app/assets/stylesheets/bootstrap_overrides.css.scss
app/controllers/application_controller.rb
app/controllers/v_libras/videos_controller.rb
app/helpers/application_helper.rb
app/views/layouts/application.html.erb
app/views/v_libras/requests/rapid.haml
app/views/v_libras/videos/index.haml
config/routes.rb
@@ -13,11 +13,6 @@
 @linkColor: #888;
 @linkColorHover: darken(@linkColor, 15%);
-
-body{
-  margin-top:80px;
-}
-
 footer {
   background-color: #d6d6d6;
   text-align:center;
@@ -48,4 +48,5 @@
 .login {
   padding: 3% 5%;
   margin: 10px 35% 30px;
+  text-align: center;
 }
 \ No newline at end of file
@@ -7,7 +7,7 @@ protected
   def check_vlibras_api_status
     unless ApiClient.check_status
       flash[:error] = t('error.api.offline')
-      redirect_to home_path
+      # redirect_to home_path
     end
   end
 class VLibras::VideosController < InheritedResources::Base
-  actions :destroy
+  actions :show, :destroy
-  before_filter :check_vlibras_api_status, :only => [ :index ]
+  before_filter :check_vlibras_api_status, :only => [ :index, :show ]
   before_filter :authenticate_user!
   def index
@@ -46,4 +46,11 @@ module ApplicationHelper
                 :data => { 'toggle' => "tooltip" }, :title => request.response)
   end
+  def custom_video_tag(video)
+    content_tag(:video, :id => "video_#{video.id}", :class => 'video-js vjs-default skin',
+                :controls => 'controls', :preload => 'auto', :width => '100%') do
+      content_tag(:source, '', :src => '/video.mp4', :type => 'video/mp4')
+    end
+  end
+
 end
@@ -6,6 +6,11 @@
   <%= javascript_include_tag "application" %>
   <%= yield :js %>
   <%= csrf_meta_tags %>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script type="text/javascript">
+      document.createElement('video');document.createElement('audio');document.createElement('track');
+  </script>
 </head>
 <body>
 <div class="navbar navbar-fixed-top">
@@ -72,14 +77,13 @@
   </div>
 </div>
-<div class="container">
+<div class="container-fluid">
   <% if content_for?(:menu) %>
   <div class="breadcrumb">
     <%= yield :menu %>
   </div>
   <% end %>
-
     <% flash.each do |type, message| %>
       <div class="alert <%= bootstrap_class_for(type) %> fade in">
         <button class="close" data-dismiss="alert">×</button>
@@ -93,5 +97,9 @@
     <p>GTAaaS - <%= t('shared.project') %> <a href="http://gtaaas.lavid.ufpb.br" target="_blank">LAVID</a> | &copy; <%= Time.now.year %>. <%= t('shared.copyright') %>.</p>
   </footer>
 </div>
+
+<link href="//vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
+<script src="//vjs.zencdn.net/4.6/video.js"></script>
+
 </body>
 </html>
 - content_for :js do
   = javascript_include_tag "v_libras/requests/rapid"
-.login
-  %h2
-    = t('videos.new')
+.row-fluid
+  .span4.offset4.login
+    %h2
+      = t('videos.new')
-  = form_tag v_libras_requests_path, method: :post, :multipart => true do |f|
-    - if @request.errors.any?
-      #error_explanation
-        %p/
-        %h4
-          = pluralize(@request.errors.count, "erro")
-          impede o vídeo de ser salvo:
-        %ul
-          - @request.errors.full_messages.each do |msg|
-            %li.error= msg
+    = form_tag v_libras_requests_path, method: :post, :multipart => true do |f|
+      - if @request.errors.any?
+        #error_explanation
+          %p/
+          %h4
+            = pluralize(@request.errors.count, "erro")
+            impede o vídeo de ser salvo:
+          %ul
+            - @request.errors.full_messages.each do |msg|
+              %li.error= msg
-    .field
-      = label_tag :service, t('videos.video_type'), :class => 'bold'
+      .field
+        = label_tag :service, t('videos.video_type'), :class => 'bold'
-      %label.radio
-        = radio_button_tag :service, 'video', false, :id => 'service-video'
-        Voz
-      %label.radio
-        = radio_button_tag :service, 'video-legenda', false, :id => 'service-video-subtitle'
-        Legenda (.SRT)
+        %label.radio
+          = radio_button_tag :service, 'video', false, :id => 'service-video'
+          Voz
+        %label.radio
+          = radio_button_tag :service, 'video-legenda', false, :id => 'service-video-subtitle'
+          Legenda (.SRT)
-    #url.hide
-      = label_tag :video, t('videos.url'), :class => "bold"
-      = file_field_tag :video, :onchange => "return check_video(this)"
-    #legend.hide
-      = label_tag :subtitle, t('videos.subtitle'), :class => "bold"
-      = file_field_tag :subtitle, :prompt => "LEGENDA", :onchange => "return check_subtitle(this)"
-    .field
-      = label_tag 'params[tamanho]', t('videos.window_size'), :class => "bold"
-      = select_tag 'params[tamanho]', options_for_select([['Pequena', 'pequeno'], ['Média', 'medio'], ['Grande', 'grande']])
-    .field
-      %p
-        %b
-          = label_tag 'params[posicao]',  t('videos.window_position'), :class => "bold"
-          = select_tag 'params[posicao]', options_for_select([[t('videos.top_left'),
-            'superior-esquerdo'], [t('videos.top_right'), 'superior-direito'],
-            [t('videos.bottom_right'),'inferior-direito'], [t('videos.bottom_left'), 'inferior-esquerdo']])
-    .field
-      = 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-primary actions"
+      #url.hide
+        = label_tag :video, t('videos.url'), :class => "bold"
+        = file_field_tag :video, :onchange => "return check_video(this)"
+      #legend.hide
+        = label_tag :subtitle, t('videos.subtitle'), :class => "bold"
+        = file_field_tag :subtitle, :prompt => "LEGENDA", :onchange => "return check_subtitle(this)"
+      .field
+        = label_tag 'params[tamanho]', t('videos.window_size'), :class => "bold"
+        = select_tag 'params[tamanho]', options_for_select([['Pequena', 'pequeno'], ['Média', 'medio'], ['Grande', 'grande']])
+      .field
+        %p
+          %b
+            = label_tag 'params[posicao]',  t('videos.window_position'), :class => "bold"
+            = select_tag 'params[posicao]', options_for_select([[t('videos.top_left'),
+              'superior-esquerdo'], [t('videos.top_right'), 'superior-direito'],
+              [t('videos.bottom_right'),'inferior-direito'], [t('videos.bottom_left'), 'inferior-esquerdo']])
+      .field
+        = 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-primary actions"
@@ -4,21 +4,23 @@
 .breadcrumb
   %h3= t('videos.list')
-.row.text-center
-  - @videos.each do |video|
-    .span4
-      .ribbon-wrapper-green
-        .ribbon-content
-          = link_to image_tag("avatar.png"), video.url
-        .ribbon-green Novo
-
-      %p
-        = link_to  video_path(video), class: "btn btn-success" do
-          = content_tag(:span, '', :class => 'icon-download icon-white')
-          Baixar
-
-        = link_to content_tag(:span, '', :class => 'icon-trash icon-white'),  v_libras_video_path(video), method: :delete,
-          class: "btn btn-danger", data: { confirm: t('shared.confirm_delete') }
+
+- @videos.in_groups_of(3, false) do |group|
+  .row-fluid.text-center
+    - for video in group
+      .span4
+        .ribbon-wrapper-green
+          .ribbon-content
+            = link_to image_tag("avatar.png"), video
+          .ribbon-green Novo
+
+        %p
+          = link_to  video_path(video), class: "btn btn-success" do
+            = content_tag(:span, '', :class => 'icon-download icon-white')
+            Baixar
+
+          = link_to content_tag(:span, '', :class => 'icon-trash icon-white'),  v_libras_video_path(video), method: :delete,
+            class: "btn btn-danger", data: { confirm: t('shared.confirm_delete') }
 .breadcrumb.requests
   %h4= t('requests.list')
@@ -17,7 +17,7 @@ Rails.application.routes.draw do
       post 'callback', on: :collection
     end
-    resources :videos, :only => [ :index, :destroy ]
+    resources :videos, :only => [ :index, :show, :destroy ]
   end
	@@ -48,4 +48,5 @@		@@ -48,4 +48,5 @@
48	.login {	48	.login {
49	padding: 3% 5%;	49	padding: 3% 5%;
50	margin: 10px 35% 30px;	50	margin: 10px 35% 30px;
		51	+ text-align: center;
51	}	52	}
52	\ No newline at end of file	53	\ No newline at end of file
	@@ -7,7 +7,7 @@ protected		@@ -7,7 +7,7 @@ protected
7	def check_vlibras_api_status	7	def check_vlibras_api_status
8	unless ApiClient.check_status	8	unless ApiClient.check_status
9	flash[:error] = t('error.api.offline')	9	flash[:error] = t('error.api.offline')
10	- redirect_to home_path	10	+ # redirect_to home_path
11	end	11	end
12	end	12	end
13		13
1	class VLibras::VideosController < InheritedResources::Base	1	class VLibras::VideosController < InheritedResources::Base
2	- actions :destroy	2	+ actions :show, :destroy
3		3
4	- before_filter :check_vlibras_api_status, :only => [ :index ]	4	+ before_filter :check_vlibras_api_status, :only => [ :index, :show ]
5	before_filter :authenticate_user!	5	before_filter :authenticate_user!
6		6
7	def index	7	def index
	@@ -46,4 +46,11 @@ module ApplicationHelper		@@ -46,4 +46,11 @@ module ApplicationHelper
46	:data => { 'toggle' => "tooltip" }, :title => request.response)	46	:data => { 'toggle' => "tooltip" }, :title => request.response)
47	end	47	end
48		48
		49	+ def custom_video_tag(video)
		50	+ content_tag(:video, :id => "video_#{video.id}", :class => 'video-js vjs-default skin',
		51	+ :controls => 'controls', :preload => 'auto', :width => '100%') do
		52	+ content_tag(:source, '', :src => '/video.mp4', :type => 'video/mp4')
		53	+ end
		54	+ end
		55	+
49	end	56	end
	@@ -17,7 +17,7 @@ Rails.application.routes.draw do		@@ -17,7 +17,7 @@ Rails.application.routes.draw do
17	post 'callback', on: :collection	17	post 'callback', on: :collection
18	end	18	end
19		19
20	- resources :videos, :only => [ :index, :destroy ]	20	+ resources :videos, :only => [ :index, :show, :destroy ]
21		21
22		22
23	end	23	end