Loop main video, use flash only as fallback

Former-commit-id: a3cd1993f7b8811729874ed9d89671ae5353d544

.gitignore

@@ -17,3 +17,5 @@ app/assets/images/handshapes/
 app/assets/images/locations/
 app/assets/images/signs/
 
+
+.DS_Store

app/assets/javascripts/application.js

@@ -1,9 +1,52 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery-ui
-//= require flowplayer-5.4.6
+//= require flowplayer-5.4.6.min
 //= require_self
 
+(function() {
+  var hidePlay = function(){this.getPlugin('play').css({opacity:0});};
+
+  window.flowplayer.conf = {
+    key: ['#$c1ee98f7e52a995b8d9', '$c1ee98f7e52a995b8d9'],
+    clip: {
+      onFail: function(a,b,c){
+      },
+      autoPlay: false,
+      autoBuffering: true,
+      onFinish: hidePlay,
+      onStart:  hidePlay
+    },
+    swf: '/flowplayer.commercial-5.4.6.swf',
+    plugins: {
+      play:{opacity:0},
+      controls: {
+        height:25,
+        opacity:0.5,
+        volume:false,
+        mute:false,
+        time:false,
+        stop:false,
+        fastForward:false,
+        slowForward:false,
+        scrubber:true,
+        backgroundColor:'rgba(0,0,0,0)',
+        backgroundGradient:'none',
+        buttonColor:'#ffffff',
+        buttonOverColor: '#ffffff',
+        autoHide:'never',
+
+        tooltips:{
+          buttons:true
+        }
+      }
+    },
+    play: {
+      replayLabel: null
+    }
+  };
+})();
+
 $(function(){
   var use_video;
   var setup = function(){
@@ -55,16 +98,16 @@ $(function(){
       });
       list.before(video_bucket);
     }
-  }
+  };
 
   var setup_use_video = function(){
-    use_video = navigator.userAgent.match(/iphone/i) && navigator.userAgent.match(/ipad/i)
-  }
+    use_video = navigator.userAgent.match(/iphone/i) && navigator.userAgent.match(/ipad/i);
+  };
   var setup_videos = function(){
     var videos;
     var id_offset = 0;
 
-    if (videos = $('.video_replace')){
+    if (videos = $('.video_replace')) {
       videos.each(function(){
         var wrapper = $(this);
         var href = wrapper.attr('href');
@@ -85,48 +128,9 @@ $(function(){
         }
       });
     }
-    var hidePlay = function(){this.getPlugin('play').css({opacity:0})};
-    var flowplayer_config = {
-      key: '#$c1ee98f7e52a995b8d9',
-      clip: {
-        onFail: function(a,b,c){
-        },
-        autoPlay: false,
-        autoBuffering: true,
-        onFinish: hidePlay,
-        onStart:  hidePlay
-      },
-
-      plugins: {
-        play:{opacity:0},
-        controls: {
-          height:25,
-          opacity:0.5,
-          volume:false,
-          mute:false,
-          time:false,
-          stop:false,
-          fastForward:false,
-          slowForward:false,
-          scrubber:true,
-          backgroundColor:'rgba(0,0,0,0)',
-          backgroundGradient: [1,0],
-          buttonColor:'#ffffff',
-          buttonOverColor: '#ffffff',
-          backgroundGradient:'none',
-          autoHide:'never',
 
-          tooltips:{
-            buttons:true
-          }
-        }
-      },
-      play: {
-        replayLabel: null
-      }
-    };
-    var flowplayer_hidden_config = $.extend(true, {}, flowplayer_config)
-    flowplayer_hidden_config.clip.autoBuffering = false;
+    //var flowplayer_hidden_config = $.extend(true, {}, flowplayer_config)
+    //flowplayer_hidden_config.clip.autoBuffering = false;
     // $f('.video_replace_hidden_flash', {src: '/flowplayer.commercial-3.2.7.swf' , wmode: 'transparent'}, flowplayer_hidden_config); //.each(function(){this.ipad()});
     // $f('.video_replace_flash', {src: '/flowplayer.commercial-3.2.7.swf' , wmode: 'transparent'}, flowplayer_config); //.each(function(){this.ipad()});
     // $('.video_replace').attr('href', 'javascript:void(0);');
@@ -335,31 +339,31 @@ $(function(){
       });
       reset_menu_position();
     }
-  }
+  };
   var setup_print_view = function(){
     //load print
     if (document.printView) {
-      $('textarea, input[type="text"]').attr('readonly', true)
+      $('textarea, input[type="text"]').attr('readonly', true);
       $(window).bind('load', function(){
         window.print();
       });
     }
-  }
+  };
   var hide_vocab_bar_if_empty = function(){
     var bar = $('.vocab_sheet_bar');
     if (bar.length && bar.find('.vocab_sheet_bar_item').length === 0) {
       bar.hide();
       $('body').removeClass('vocab_sheet_background');
     }
-  }
+  };
   var show_vocab_bar = function(){
     if ($('.vocab_sheet_bar').length){
       $('.vocab_sheet_bar').show();
       $('body').addClass('vocab_sheet_background');
     }
-  }
+  };
   var setup_vocab_remove = function(){
-    $('.remove').live('click', function(e){
+    $('.remove').on('click', function(e){
       e.preventDefault();
       var button = $(this);
       var form = button.closest('form');
@@ -368,9 +372,8 @@ $(function(){
         $(this).remove();
         hide_vocab_bar_if_empty();
       });
-
     });
-  }
+  };
   var setup_add_to_sheet = function(){
     $('.add_to_sheet').click(function(e){
       e.preventDefault();

app/helpers/application_helper.rb

@@ -2,35 +2,46 @@ module ApplicationHelper
   def page_title
     "#{@title}#{' -' if @title} #{t('layout.title')}"
   end
-  
+
   def render_navigation_link(link)
     link_to_unless_current(link.label, link.path) do
       content_tag :span, link.label
     end
   end
-
+
+  def flow_video_tag(source, options = {})
+    options.symbolize_keys!
+
+    source_tag = content_tag(:source, nil, type: 'video/mp4', src: source)
+    wrapper_class = "flowplayer #{options.delete(:wrapper_class)}"
+    content_tag(:div, class: wrapper_class) do
+      content_tag(:video, source_tag, loop: !!options[:loop])
+    end
+  end
+
+
   def submit_button text = 'search.submit', options = {}
     "<div class='button input_button'>
       <div class='r'></div>
       #{submit_tag(t(text), options.merge({:name => nil}))}
      </div>".html_safe
   end
-  
+
   def link_button text, url=nil, options = {}
     url ||='javascript:void(0);'
     link_to "<div class='r'></div>#{t(text)}".html_safe, url, {:class => ("button link_button #{options[:class]}")}.reverse_merge(options)
   end
-  
+
   def div_button text, options = {}
     content_tag :div, "<div class='r'></div>#{t(text)}".html_safe, {:class => ("button link_button #{options[:class]}")}.reverse_merge(options)
   end
-  
+
   def query_for_query_string
     query = @query.dup
     query.each { |k,v| query[k] = v.is_a?(Array) ? v.join(' ') : v }
     return HashWithIndifferentAccess.new query
   end
-  
+
   def print_stylesheet_tag(print)
     # if the url looks like ?print=true
     # change the print button to a back button that's visible on screen but hidden on print.
@@ -41,19 +52,19 @@ def print_stylesheet_tag(print)
       stylesheet_link_tag('print', :media => 'print')
     end
   end
-  
+
   def print_javascripts_tag(print)
     if print
       "<script>
         document.printView = true;
       </script>".html_safe
     end
   end
-  
+
   def video_translation part
-    content_tag :div, 
+    content_tag :div,
       [content_tag(:div, '', :href => part.translation_path, :class => 'video_replace translation_video main_video hidden_video'),
-       link_button((part.page.multiple_page_parts? ? 'play_this_section' : 'play_this_page'), nil, :class => 'translation_button')].join(' ').html_safe, 
+       link_button((part.page.multiple_page_parts? ? 'play_this_section' : 'play_this_page'), nil, :class => 'translation_button')].join(' ').html_safe,
       :class => 'videos clearfix_left'
   end
 end

app/views/signs/show.html.haml

@@ -20,25 +20,20 @@
         = handshape_image @sign.handshape
         = location_image @sign.location
     .videos
-      .flowplayer.main_video.normal
-        %video
-          %source{type: 'video/mp4', src: @sign.video}
-      -# = link_to '', @sign.video, :class => 'video_replace main_video normal'
+      = flow_video_tag @sign.video, wrapper_class: "main_video normal", loop: true
+
       - if @sign.video_slow.present?
-        .flowplayer.main_video.slow
-          %video
-            %source{type: 'video/mp4', src: @sign.video_slow}
-        -# = link_to '', @sign.video_slow, :class => 'video_replace main_video slow'
+        = flow_video_tag @sign.video_slow, wrapper_class: "main_video slow"
         = link_button('signs.show.in_slow_motion', nil, :class => 'button normal')
         = link_button('signs.show.at_normal_speed', nil, :class => 'button slow')
     - unless @sign.examples.length.zero?
       .examples.rule_after.clearfix
         %h2= t('signs.show.usage_examples')
         - @sign.examples.each do |example|
           .example.clearfix.typography.videos
-            = link_to '', example[:video], :class => 'video_replace example_video normal'
+            = flow_video_tag example[:video], wrapper_class: "example_video normal"
             - if example[:video_slow]
-              = link_to '', example[:video_slow], :class => 'video_replace example_video slow'
+              = flow_video_tag example[:video_slow], wrapper_class: "example_video slow"
             %p
               %em= example[:translation]
             %p= render_transcription(example[:transcription], @sign.id)