Skip to content

Commit

Permalink
Removes prototype JS helpers. Adds jquery.jplayer and a couple of exa…
Browse files Browse the repository at this point in the history 
…mple pages for multi and single track playing
  • Loading branch information
@fonsecajavier
fonsecajavier committed Jan 30, 2013
1 parent 40616c2 commit 89d7cb5
Show file tree
Hide file tree
Showing 22 changed files with 2,152 additions and 9,268 deletions.
3 changes: 3 additions & 0 deletions app/controllers/pages_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,7 @@ class PagesController < ApplicationController
def home

end

def page2
end
end
15 changes: 14 additions & 1 deletion app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,21 @@
<head>
<title>Wavetest</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= stylesheet_link_tag "skin/jplayer.pink.flag" %>
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "ajax" %>
<%= javascript_include_tag "jquery.file" %>
<%= javascript_include_tag "jquery.form" %>
<%= javascript_include_tag "jquery.rails" %>
<%= javascript_include_tag "jplayer/jquery.jplayer.min" %>
<%= javascript_include_tag "jplayer/jplayer.playlist.min" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tag %>
<%= yield :head %>
</head>
<body>

Expand Down
90 changes: 89 additions & 1 deletion app/views/pages/home.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,91 @@
<p>
hello world!!
</p>
</p>

<div id="jp_container_1" class="jp-video jp-video-270p">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-title">
<ul>
<li></li>
</ul>
</div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
</div>
<div class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>

<% content_for :head do %>
<script type="text/javascript">
$(document).ready(function(){

new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"encoded",
artist:"piano artist",
mp3: "<%= AWS::S3::S3Object.url_for("prueba/encoded.mp3", BUCKET_S3, :expires => 60*60*3) %>"
},
{
title:"downloaded song",
artist:"organ artist",
mp3: "<%= AWS::S3::S3Object.url_for("prueba/organfinale.mp3", BUCKET_S3, :expires => 60*60*3) %>"
}
], {
swfPath: "/javascripts/jplayer",
supplied: "mp3"
});

});
</script>
<% end %>

<br />
<%= link_to "Go to page 2 (single-track player)", url_for(:controller => "pages", :action => "page2") %>
66 changes: 66 additions & 0 deletions app/views/pages/page2.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<p>
page 2!!
</p>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</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>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>Song Title</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>

<% content_for :head do %>
<script type="text/javascript">
$(document).ready(function(){

$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "<%= AWS::S3::S3Object.url_for("prueba/encoded.mp3", BUCKET_S3, :expires_in => 60*60*3) %>"
});
},
swfPath: "/javascripts/jplayer",
supplied: "mp3",
wmode: "window"
});

});
</script>
<% end %>

<br />
<%= link_to "Go to page 1 (multiple-track player)", url_for(:controller => "pages", :action => "home")%>
2 changes: 1 addition & 1 deletion config/routes.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,5 +54,5 @@

# This is a legacy wild controller route that's not recommended for RESTful applications.
# Note: This route will make all actions in every controller accessible via GET requests.
# match ':controller(/:action(/:id(.:format)))'
match ':controller(/:action(/:id(.:format)))'
end
99 changes: 99 additions & 0 deletions public/javascripts/ajax.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
$(document).ready(function() {

$('BODY').ajaxStop(function() {
// gets called after every ajax request completes
//renderCufon();
});

$('form[data-remote]:not([data-exclude])').live("submit", function(){
$(this).append("<img src='/img/ajax-loader.gif' />");
});

$('a[data-method], a[data-remote], form[data-remote]:not([data-exclude])').live('ajax:success', function(event, data, status, xhr) {
log("Ajaxing " + $(this).attr('id'));
//if(ajax_redirect(xhr)) { return; }

var self = $(this),
target = $(self.attr('data-target')),
action = self.attr('data-action'),
animation = self.attr('data-animation'),
closeModal = self.attr('data-close_modal'),
followUrl = self.attr('data-follow_url'),
resize = self.attr('data-resize');

if (target) {
if (!action || (action && action == 'replace')) {
target.replaceWith(data);
} else if (action && action == 'replace_content') {
if (animation && animation == 'fade_in') {
target.hide().html(data).fadeIn();
} else if (animation && animation == 'fade_out') {
target.fadeOut();
} else if (animation && animation == 'slide_down') {
target.hide().html(data).slideDown();
} else {
target.html(data);
}
} else if (action && action == 'append') {
target.append(data).end();
target.children().last().find(':text:visible:first').focus();

if ($.fancybox) {
$.fancybox.resize();
}
} else if (action && action == 'prepend') {
target.prepend(data).end();
target.children().first().find(':text:visible:first').focus();
}
} else {
self.replaceWith(data);
}
if(self.attr('data-target') == '#fancybox-inner'){
$.fancybox.resize();
}

if (closeModal && $.fancybox) {
$.fancybox.close();
if (followUrl) { //doesn't really follow just replaces html and acts as if it did
$('#content').html($(xhr.responseText).find('#content').html());
}
}

attachFancyBox();
bindPlanLinkClicks();

if(resize === 'true'){
$.fancybox.resize();
}
});

$('#fancybox-content form[data-remote]').live('ajax:error', function(event, xhr, status, error) {
$.fancybox({
content: xhr.responseText
});
});

$('a[data-remote].jq_removeUnsubscribe').live('click', function(){
$(this).remove();
})

});

var bindPlanLinkClicks = function(){
$('.jq_choosePlanLink').live('click', function(){
$('.jq_plan').removeClass('selected');
$(this).parents('.jq_plan').addClass('selected');

var planCode = $(this).data('planCode');
$('#subscription_planCode').val(planCode);

showSubscriptionFieldset(planCode);
return false;
});

$('.jq_plan.selected').each(function(index, element){
if($(element).find('a').data('plan') == 'PREMIUM_PLAN_V2'){
$('.jq_subscriptionData').show();
}
});
}
Loading

0 comments on commit 89d7cb5

Please sign in to comment.