Youtube player autonext track is OOOONNNNNN -- The player is handled by...

Youtube player autonext track is OOOONNNNNN -- The player is handled by javascript now (ruby before).

app/assets/javascripts/music_player.js

-function music_player() {
-  $.get("/musics/"+$(this).data().id, function( data ) {
-    $( "#music_player" ).html( data );
-  }); 
-}
+var music_info;
+var player;
 
 $( ".clickable_links" ).each(function() {
-  $(this).on( 'click', music_player );
+  if ($(this).data().player == "youtube" ) {
+    $(this).on( 'click', youtube_click);
+  }
 });
+
+function youtube_click() {
+  music_info = $(this);
+  youtube_player();
+}
+
+function youtube_player() {
+  if (player && $("div#music_player").length == 0) {
+    player.loadVideoById(music_info.data().url);
+  }
+  else {
+    player = new YT.Player('music_player', {
+      height: '390',
+      width: '640',
+      videoId: music_info.data().url,
+      events: {
+        'onReady': player_launch,
+        'onStateChange': onPlayerStateChange,
+        'onError': player_error
+      }
+    });
+  }
+}
+
+function next_music() {
+  music_info = $("li[data-id=\'"+music_info.data().id+"\']").next();
+  if (music_info.data().player == "youtube" ) {
+    youtube_player();
+  } 
+}
+
+function onPlayerStateChange(event) {
+  if (event.data == 0) {
+    next_music();
+  }
+}
+
+function player_error(event) {
+  next_music();
+}
+
+function player_launch(event) {
+  event.target.playVideo();
+}

app/views/layouts/application.html.erb

@@ -10,5 +10,6 @@
 <%= yield %>
 
 </body>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+<script src="https://www.youtube.com/iframe_api"></script>
 </html>

app/views/musics/index.html.erb

@@ -2,7 +2,20 @@
 
 <ul>
   <% @musics.each do |music| %>
-    <li class="clickable_links" data-id="<%= music.id %>" >
+    <li class="clickable_links" 
+        data-id="<%= music.id %>" 
+        data-player="<%= music.type %>" 
+        data-url="<%= 
+            if music.type == "youtube" 
+              track = music.url.sub(/.*v=/,'')
+            elsif music.type == "soundcloud"
+              begin
+                track = $soundcloud.get('/resolve', :url => music.url)
+                track.id 
+              rescue
+                "Link down"
+              end 
+            end %>">
       <span class="music_id"><%= music.id %></span>
       <span class="music_title"><%= music.title%></span>
       <span class="music_tags"><%= music.tags.map{|t| t.tag}.join(", ") %></span>
@@ -11,4 +24,3 @@
   <% end %>
 </ul>
 <%= paginate @musics %>
-

app/views/musics/show.html.erb

 <ul>
-  <li>
-    <span>
-      <%= @music.id %>
-    </span>
-    <span>
-      <a href="<%= @music.url %>"><%= @music.title %></a>
-    </span>
-    <span>
-      <%= @music.sender %>
-    </span>
+  <li class="clickable_links" data-url="
+    <%= 
+      if @music.type == "youtube" 
+        track = @music.url.sub(/.*v=/,'')
+  elsif @music.type == "soundcloud"
+    begin
+      track = $soundcloud.get('/resolve', :url => @music.url)
+      track.id 
+    rescue
+      "Link down"
+    end 
+  end %>
+   ">
+      <span class="music_id"><%= @music.id %></span>
+      <span class="music_title"><%= @music.title%></span>
+      <span class="music_tags"><%= @music.tags.map{|t| t.tag}.join(", ") %></span>
+      <span class="music_sender"><%= @music.sender_irc %></span>
   </li>
 </ul>
 <%=if @music.type == "youtube" 
@@ -16,10 +23,9 @@
     raw("<iframe id=\"ytplayer\" type=\"text/html\" width=\"640\" height=\"390\" src=\""+track+"?autoplay=1\" frameborder=\"0\"/>")
   elsif @music.type == "soundcloud"
     begin
-      track = $soundcloud.get('/oembed', :url => @music.url)
-      raw(track['html'])
-      #track = $soundcloud.get('/resolve', :url => @music.url)
-      #raw("<iframe width=\"100%\" height=\"400\" scrolling=\"no\" frameborder=\"no\"  src=\"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/"+track.id+"&amp;auto_play=true&amp;hide_related=false&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;visual=true\"></iframe>")
+      track = $soundcloud.get('/oembed', :url => @music.url, :maxwidth => "800", :maxheight => "150", :auto_play => "true")
+      raw(track['html'].gsub("visual=true&","")) 
+      #The Soundcloud API doesn't enable modification of the parameter 'visual'
     rescue
       "Link down"
     end

app/views/tags/show.html.erb

@@ -2,7 +2,20 @@
 
 <ul>
   <% @musics.each do |music| %>
-    <li class="clickable_links" data-id="<%= music.id %>" >
+    <li class="clickable_links" 
+        data-id="<%= music.id %>" 
+        data-player="<%= music.type %>" 
+        data-url="<%= 
+            if music.type == "youtube" 
+              track = music.url.sub(/.*v=/,'')
+            elsif music.type == "soundcloud"
+              begin
+                track = $soundcloud.get('/resolve', :url => music.url)
+                track.id 
+              rescue
+                "Link down"
+              end 
+            end %>">
       <span class="music_id"><%= music.id %></span>
       <span class="music_title"><%= music.title %></span>
       <span class="music_tags"><%= music.tags.map{|t| t.tag}.join(", ") %></span>
@@ -10,4 +23,4 @@
     </li>
   <% end %>
 </ul>
-
+<%= paginate @musics %>