Adding Jplayer, removing audivid

chriserin · Feb 22, 2011 · fe2950a · fe2950a
1 parent 8f131c2
commit fe2950a
Show file tree

Hide file tree

Showing 14 changed files with 713 additions and 87 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -0,0 +1,126 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    abstract (1.0.0)
+    actionmailer (3.0.4)
+      actionpack (= 3.0.4)
+      mail (~> 2.2.15)
+    actionpack (3.0.4)
+      activemodel (= 3.0.4)
+      activesupport (= 3.0.4)
+      builder (~> 2.1.2)
+      erubis (~> 2.6.6)
+      i18n (~> 0.4)
+      rack (~> 1.2.1)
+      rack-mount (~> 0.6.13)
+      rack-test (~> 0.5.7)
+      tzinfo (~> 0.3.23)
+    activemodel (3.0.4)
+      activesupport (= 3.0.4)
+      builder (~> 2.1.2)
+      i18n (~> 0.4)
+    activerecord (3.0.4)
+      activemodel (= 3.0.4)
+      activesupport (= 3.0.4)
+      arel (~> 2.0.2)
+      tzinfo (~> 0.3.23)
+    activeresource (3.0.4)
+      activemodel (= 3.0.4)
+      activesupport (= 3.0.4)
+    activesupport (3.0.4)
+    annotate-models (1.0.4)
+    arel (2.0.8)
+    aws-s3 (0.6.2)
+      builder
+      mime-types
+      xml-simple
+    builder (2.1.2)
+    diff-lcs (1.1.2)
+    erubis (2.6.6)
+      abstract (>= 1.0.0)
+    factory_girl (1.3.3)
+    factory_girl_rails (1.0)
+      factory_girl (~> 1.3)
+      rails (>= 3.0.0.beta4)
+    faker (0.3.1)
+    gravatar_image_tag (1.0.0.pre2)
+    i18n (0.5.0)
+    jquery-rails (0.2.7)
+      rails (~> 3.0)
+      thor (~> 0.14.4)
+    mail (2.2.15)
+      activesupport (>= 2.3.6)
+      i18n (>= 0.4.0)
+      mime-types (~> 1.16)
+      treetop (~> 1.4.8)
+    maruku (0.6.0)
+      syntax (>= 1.0.0)
+    mime-types (1.16)
+    nokogiri (1.4.4.1-x86-mingw32)
+    paperclip (2.3.8)
+      activerecord
+      activesupport
+    polyglot (0.3.1)
+    rack (1.2.1)
+    rack-mount (0.6.13)
+      rack (>= 1.0.0)
+    rack-test (0.5.7)
+      rack (>= 1.0)
+    rails (3.0.4)
+      actionmailer (= 3.0.4)
+      actionpack (= 3.0.4)
+      activerecord (= 3.0.4)
+      activeresource (= 3.0.4)
+      activesupport (= 3.0.4)
+      bundler (~> 1.0)
+      railties (= 3.0.4)
+    railties (3.0.4)
+      actionpack (= 3.0.4)
+      activesupport (= 3.0.4)
+      rake (>= 0.8.7)
+      thor (~> 0.14.4)
+    rake (0.8.7)
+    rspec (2.5.0)
+      rspec-core (~> 2.5.0)
+      rspec-expectations (~> 2.5.0)
+      rspec-mocks (~> 2.5.0)
+    rspec-core (2.5.1)
+    rspec-expectations (2.5.0)
+      diff-lcs (~> 1.1.2)
+    rspec-mocks (2.5.0)
+    rspec-rails (2.5.0)
+      actionpack (~> 3.0)
+      activesupport (~> 3.0)
+      railties (~> 3.0)
+      rspec (~> 2.5.0)
+    sqlite3-ruby (1.3.2-x86-mingw32)
+    syntax (1.0.0)
+    thor (0.14.6)
+    treetop (1.4.9)
+      polyglot (>= 0.3.1)
+    tzinfo (0.3.24)
+    webrat (0.7.1)
+      nokogiri (>= 1.2.0)
+      rack (>= 1.0)
+      rack-test (>= 0.5.3)
+    will_paginate (3.0.pre2)
+    xml-simple (1.0.14)
+
+PLATFORMS
+  x86-mingw32
+
+DEPENDENCIES
+  annotate-models (= 1.0.4)
+  aws-s3
+  factory_girl_rails (= 1.0)
+  faker (= 0.3.1)
+  gravatar_image_tag (= 1.0.0.pre2)
+  jquery-rails (>= 0.2.6)
+  maruku
+  paperclip (~> 2.3)
+  rails (= 3.0.4)
+  rspec (= 2.5.0)
+  rspec-rails (= 2.5.0)
+  sqlite3-ruby (= 1.3.2)
+  webrat (= 0.7.1)
+  will_paginate (= 3.0.pre2)
diff --git a/app/views/example_site/index.html.erb b/app/views/example_site/index.html.erb
@@ -3,10 +3,13 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Your Band</title>
-	<%= stylesheet_link_tag 'your_style_sheet', :media => 'screen' %>	
+	<%= stylesheet_link_tag 'your_style_sheet', :media => 'screen' %>
+	<%= stylesheet_link_tag 'skin/jplayer.blue.monday', :media => 'screen' %>	
+    <%= javascript_include_tag :defaults %>
+    <%= javascript_include_tag 'jquery.jplayer.min' %>	
 </head>
 <body>
 	This is the example band frontpage
-	<%= audio_tag(@frontpage_audio_url, :autoplay => true, :controls => true) %>
+	<%= render 'tracks/player', :audio_url => @frontpage_audio_url %>
 </body>
 </html>
diff --git a/app/views/layouts/_g_stylesheets.html.erb b/app/views/layouts/_g_stylesheets.html.erb
@@ -1 +1,2 @@
-	<%= stylesheet_link_tag 'your_band', :media => 'screen' %>
+	<%= stylesheet_link_tag 'your_band', :media => 'screen' %>
+	<%= stylesheet_link_tag 'skin/jplayer.blue.monday', :media => 'screen' %>	
diff --git a/app/views/layouts/g_application.html.erb b/app/views/layouts/g_application.html.erb
@@ -5,7 +5,7 @@
     <%= csrf_meta_tag %>
     <%= render 'layouts/g_stylesheets' %>
     <%= javascript_include_tag :defaults %>
-    <%= javascript_include_tag 'jquery-audivid' %>	
+    <%= javascript_include_tag 'jquery.jplayer.min' %>	
   </head>
   <body>
     <div class="container">

diff --git a/app/views/tracks/_player.html.erb b/app/views/tracks/_player.html.erb
@@ -1,3 +1,47 @@
-<div id="player">
-	<%= audio_tag(@tracks.first.recording.url, :autoplay => false, :controls => true) %>
-</div>
+<script type="text/javascript">
+//<![CDATA[
+$(document).ready(function(){
+
+	$("#jquery_jplayer_1").jPlayer({
+		ready: function () {
+			$(this).jPlayer("setMedia", {
+				mp3: "<%= audio_url.split(/\?/)[0] %>"
+			}).jPlayer("play");
+		},
+		ended: function (event) {
+			$(this).jPlayer("play");
+		},
+		swfPath: "/javascript",
+		supplied: "mp3"
+	});
+});
+//]]>
+</script>
+
+		<div id="jquery_jplayer_1" class="jp-jplayer"></div>
+
+		<div class="jp-audio">
+			<div class="jp-type-single">
+				<div id="jp_interface_1" 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_1" class="jp-playlist">
+				</div>
+			</div>
+		</div>
diff --git a/public/javascripts/Jplayer.swf b/public/javascripts/Jplayer.swf
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -15,10 +15,11 @@ $(function(){
 		$("#micropost_content").val($("#micropost_content").val() + filename[2]);
 	});
 
-
 	$(".play_button").bind('click', function(e){
-		$('audio').audivid("src", $(this).siblings('a').attr("href"));
-		$('audio').audivid("play");		
+		var filename = $(this).siblings('a').attr("href").split(/\?/)[0];
+		alert(filename);
+		$("#jquery_jplayer_1").jPlayer("setMedia", { mp3: filename });
+		$("#jquery_jplayer_1").jPlayer("play");
+		$("#jp_playlist_1").html($(this).siblings('a').text());
 	});	
-});
-
+});
diff --git a/public/javascripts/jquery-audivid.js b/public/javascripts/jquery-audivid.js