social_stream-documents 0.1.10 → 0.1.11

data/app/assets/javascripts/documents.js.erb

@@ -42,4 +42,24 @@ function removePlayers(){
 
 $('#closeButton').live("click",function(){
 	removePlayers();
-});
+});
+
+function hideJplayer(jplayerid){
+  $("#full_video_"+jplayerid).removeClass("jp-video-270p");
+  $("#jp_interface_"+jplayerid).hide();
+  $("#jp_playlist_"+jplayerid).hide();
+}
+
+function showJplayer(jplayerid){
+  $("#full_video_"+jplayerid).addClass("jp-video-270p");
+  $("#jp_interface_"+jplayerid).show();
+  $("#jp_playlist_"+jplayerid).show();
+  
+}
+
+$(".video_thumbnail_play_over").livequery("click",function(){
+  the_id = $(this).attr('id');
+  showJplayer(the_id);
+  $(this).parent().hide();
+  $("#jpId"+the_id).jPlayer("play", 0);
+});

data/app/assets/javascripts/social_stream-documents.js

@@ -1 +1,2 @@
+//= require jquery.jplayer
 //= require_tree .

data/app/assets/stylesheets/documents.css

@@ -3,7 +3,7 @@
 	padding-top: 10px;
 }
 
-.attachment_text
+.attachment_content
 {
 	position: relative;
 	width: 90%;
@@ -11,10 +11,17 @@
 	line-height: 20px;
 	height: auto;
 	float:left;
+	font-size:13px;	
+}
+
+.attachment_text
+{
+	line-height: 20px;
+	height: auto;
 	font-size:13px;
 }
 
-.attachment_text a
+.attachment_text_link
 {
 	color: #2A3890;
 	padding-left: 10px;
@@ -131,3 +138,48 @@
 .size_19px {
 	width: 19px;
 }
+
+
+#jpId {
+
+}
+
+.jp-audio, .jp-video {
+	margin: 5px 0 5px 0;
+}
+
+.hidenJplayer {
+	height: 0px;
+	width: 0px;
+}
+
+.video_thumbnail_class {
+	width: 180px;
+	height: 135px;
+}
+
+.video_thumbnail_image{
+	position: relative;
+	top:0px;
+	width: 180px;
+	z-index:1;
+}
+
+.video_thumbnail_play_over {
+	background: transparent url("jplayer.blue.monday.video.play.png") no-repeat center;
+	/* position: relative; */
+	position: relative;
+	cursor:pointer;
+	z-index:2;
+}
+
+.video_thumbnail_play_over:hover {
+	background: transparent url("jplayer.blue.monday.video.play.hover.png") no-repeat center;
+}
+
+.video_thumbnail_play_over {
+	top:-135px;
+	width:180px;
+	height:135px;
+}
+

data/app/assets/stylesheets/social_stream-documents.css

@@ -1,3 +1,4 @@
 /*
+ *= require jplayer.blue.monday
  *= require_tree .
  */

data/app/helpers/documents_helper.rb

@@ -2,14 +2,12 @@ module DocumentsHelper
 
   FORMATS = ["msword","vnd.ms-powerpoint","msexcel","rar","zip","mp3","plain","pdf"]
   
-  def thumb_for(document)
-    image_tag document.thumb(self)
-  end
   
-  def big_thumb_for(document)
-    image_tag document.big_thumb(self)
+  #size can be any of the names that the document has size for
+  def thumb_for(document, size)
+    image_tag document.thumb(size, self)
   end
-  
+    
   def link_for_wall(document)
     format = Mime::Type.lookup(document.file_content_type)
     url_for(document)+"."+format.to_sym.to_s+"?style=thumb0"

data/app/models/audio.rb

@@ -1,12 +1,11 @@
 class Audio < Document
  
   # Thumbnail file
-  def thumb helper    
-      "formats/audio.png"
-  end
-  
-  # Thumbnail file
-  def big_thumb helper    
-      "formats_big/audio.png"
+  def thumb(size, helper)
+    if format && IMAGE_FORMATS.include?(format.to_s)
+      "#{ size.to_s }/audio.png"
+    else
+      "#{ size.to_s }/audio.png"
+    end
   end
 end

data/app/models/document.rb

@@ -45,21 +45,12 @@ class Document < ActiveRecord::Base
   end
 
   # Thumbnail file
-  def thumb helper
+  def thumb(size, helper)
     if format && IMAGE_FORMATS.include?(format.to_s)
-      "formats/#{ format }.png"
+      "#{ size.to_s }/#{ format }.png"
     else
-      "formats/default.png"
+      "#{ size.to_s }/default.png"
     end
   end
-  
-  # Thumbnail file
-  def big_thumb helper
-    if format && IMAGE_FORMATS.include?(format.to_s)
-      "formats_big/#{ format }.png"
-    else
-      "formats_big/default.png"
-    end
-  end
-  
+    
 end

data/app/models/picture.rb

@@ -5,13 +5,15 @@ class Picture < Document
                     :styles => {:thumb  => ["48x48#"],
                                 :thumb0 => ["130x80#"]
                                }                                  
-  def thumb helper
-    "formats/photo.png"
+  # Thumbnail file
+  def thumb(size, helper)
+    case size
+      when 16
+        "#{ size.to_s }/photo.png"
+      when 48
+        helper.picture_path self, :format => format, :style => 'thumb'    
+    end
   end
-  
-  def big_thumb helper
-    helper.picture_path self, :format => format, :style => 'thumb'
-  end
-  
+    
   
 end

data/app/models/video.rb

@@ -5,6 +5,7 @@ class Video < Document
                     :url => '/:class/:id.:extension',
                     :path => ':rails_root/documents/:class/:id_partition/:style.:extension',
                     :styles => {:webm => {:format => 'webm'},
+                                :flv => { :format => 'flv' }
                                 :thumb   => {:geometry => "48x48" , :format => 'png', :time => 5},
                                 :thumb0  => {:geometry => "130x80", :format => 'png', :time => 5}
                     },:processors => [:ffmpeg]
@@ -15,12 +16,11 @@ class Video < Document
      
                       
   # Thumbnail file
-  def thumb helper    
-      "formats/video.png"
-  end
-  
-  # Thumbnail file
-  def big_thumb helper    
-      "formats_big/video.png"
+  def thumb(size, helper)
+    if format && IMAGE_FORMATS.include?(format.to_s)
+      "#{ size.to_s }/video.png"
+    else
+      "#{ size.to_s }/video.png"
+    end
   end
 end

data/app/views/audios/_audio.html.erb

@@ -1,19 +1,60 @@
+<% content_for :javascript do %>
+
+  $("#jpId<%=audio.id%>").jPlayer( {
+    ready: function () {
+      $(this).jPlayer("setMedia", {
+        mp3: "<%= download_document_path(audio) %>" // Defines the mp3 url
+      });
+    },
+	swfPath: "assets",
+	cssSelectorAncestor: "#jp_interface_<%=audio.id%>"
+  });
+
+<% end %>
+
 <%= div_for audio, :class => 'content_size' do %>
 
   <div class="attachment_thumb">
-    <%= link_to thumb_for(audio),
+    <%= link_to thumb_for(audio, 16),
         {:controller => "documents", :action => "download", :id => audio}, 
         :class => "" %>
   </div>
   
-  <div class="attachment_text">
-  	<%= t('audio.msg') %><%= link_to "\""+audio.file_file_name+"\"", 
-    {:controller => "documents", :action => "download", :id => audio},  
-    :class => "" %>
-
-	<audio src="<%= download_document_path(audio) %>" controls="controls">
-		Your browser does not support the audio element.
-	</audio>
+  <div class="attachment_content">
+	  <div class="attachment_text">
+	  	<%= t('audio.msg') %><%= link_to "\""+audio.file_file_name+"\"", 
+	    {:controller => "documents", :action => "download", :id => audio},  
+	    :class => "attachment_text_link" %>
+	  </div>
+	<div id="jpId<%=audio.id%>"></div>
+	
+	<div class="jp-audio">
+    <div class="jp-type-single">
+      <div id="jp_interface_<%=audio.id%>" class="jp-interface">
+        <ul class="jp-controls">
+          <li><a href="#" class="jp-play" tabindex="1">play</a></li>
+          <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
+          <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
+          <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
+          <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
+        </ul>
+        <div class="jp-progress">
+          <div class="jp-seek-bar">
+            <div class="jp-play-bar"></div>
+          </div>
+        </div>
+        <div class="jp-volume-bar">
+          <div class="jp-volume-bar-value"></div>
+        </div>
+        <div class="jp-current-time"></div>
+        <div class="jp-duration"></div>
+      </div>
+      <div id="jp_playlist_<%=audio.id%>" class="jp-playlist">
+        
+      </div>
+    </div>
+  </div>
+  
   </div>
 
 <% end %>

data/app/views/common/_index.html.erb

@@ -27,7 +27,7 @@
 	<% document = a.activity_objects.first.document %>
 	<div class="attachment_tile">
 		<div class="attachment_tile_thumb">
-    		<%= link_to big_thumb_for(document), 
+    		<%= link_to thumb_for(document,48), 
                 {:controller => "documents", :action => "download", :id => document}, 
  				:type => document.type, 
 				:title => document.file_file_name,

data/app/views/documents/_document.html.erb

@@ -5,7 +5,7 @@
 <%= div_for document, :class => 'content_size' do %>
 
   <div class="attachment_thumb">
-    <%= link_to thumb_for(document),
+    <%= link_to thumb_for(document, 16),
         {:controller => "documents", :action => "download", :id => document}, 
         :class => "" %>
   </div>
@@ -13,7 +13,7 @@
   <div class="attachment_text">
   	<%= t('document.msg') %><%= link_to "\""+document.file_file_name+"\"", 
     {:controller => "documents", :action => "download", :id => document},  
-    :class => "" %>
+    :class => "attachment_text_link" %>
   </div>
 
 <% end %>

data/app/views/pictures/_picture.html.erb

@@ -1,7 +1,7 @@
 <%= div_for picture, :class => 'content_size' do %>
 
   <div class="attachment_thumb">
-    <%= link_to thumb_for(picture),
+    <%= link_to thumb_for(picture, 16),
         {:controller => "documents", :action => "download", :id => picture}, 
         :class => "" %>
   </div>
@@ -9,7 +9,7 @@
   <div class="attachment_text picture_summary_class">
   	<%= t('picture.msg') %><%= link_to "\""+picture.file_file_name+"\"", 
     {:controller => "documents", :action => "download", :id => picture},  
-    :class => "" %>
+    :class => "attachment_text_link" %>
   </div>
 
 <% end %>

data/app/views/toolbar/_uploads_menu.html.erb

@@ -2,7 +2,7 @@
   <%= link_to( image_tag("btn/btn_resource.png",:class =>"menu_icon")+t('resource.title'),"#") %>
 	<ul>
     <li>
-      <%= link_to( image_tag("btn/btn_documents.png",
+      <%= link_to( image_tag("btn/btn_document.png",
       :class => "menu_icon")+t('document.title'), documents_path) %>
     </li>
     <li>

data/app/views/videos/_video.html.erb

@@ -1,7 +1,27 @@
+<% content_for :javascript do %>
+
+  $("#jpId<%=video.id%>").jPlayer( {
+    ready: function () {
+      $(this).jPlayer("setMedia", {
+        webmv: "<%= video_path(video)+"?style=webm" %>", // Defines the webm url
+		flv: "<%= video_path(video)+"?style=flv" %>"
+      });
+    },
+	solution:"flash, html",
+	preload: "none",
+	supplied: "webmv, flv",
+	swfPath: "assets",
+	cssSelectorAncestor: "#jp_interface_<%=video.id%>"
+  });
+  
+  hideJplayer(<%=video.id%>);
+  
+<% end %>
+
 <%= div_for video, :class => 'content_size' do %>
 
   <div class="attachment_thumb">
-    <%= link_to thumb_for(video),
+    <%= link_to thumb_for(video, 16),
         {:controller => "documents", :action => "download", :id => video}, 
         :class => "" %>
   </div>
@@ -9,11 +29,42 @@
   <div class="attachment_text">
   	<%= t('video.msg') %><%= link_to "\""+video.file_file_name+"\"", 
     {:controller => "documents", :action => "download", :id => video},  
-    :class => "" %>
+    :class => "attachment_text_link" %>
 
-	<video src="<%= video_path(video)+"?style=webm" %>" controls="controls">
-		Your browser does not support the video element.
-	</video>
+  <div id="video_thumbnail_<%=video.id%>" class="video_thumbnail_class">
+    <%=image_tag(video_path(video)+"?style=png", :class => "video_thumbnail_image")%>
+	<div id="<%=video.id%>" class="video_thumbnail_play_over"></div>
+  </div>
+
+
+  <div id="full_video_<%=video.id%>" class="jp-video jp-video-270p">
+    <div class="jp-type-single">
+      <div id="jpId<%=video.id%>" class="jp-jplayer"></div>
+      <div id="jp_interface_<%=video.id%>" class="jp-interface">
+        <div class="jp-video-play"></div>
+        <ul class="jp-controls">
+          <li><a href="#" class="jp-play" tabindex="1">play</a></li>
+          <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
+          <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
+          <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
+          <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
+        </ul>
+        <div class="jp-progress">
+          <div class="jp-seek-bar">
+            <div class="jp-play-bar"></div>
+          </div>
+        </div>
+        <div class="jp-volume-bar">
+          <div class="jp-volume-bar-value"></div>
+        </div>
+        <div class="jp-current-time"></div>
+        <div class="jp-duration"></div>
+      </div>
+      <div id="jp_playlist_<%=video.id%>" class="jp-playlist">
+      </div>
+    </div>
+  </div>
+	
   </div>
 
 <% end %>