swcs/9minutes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: integrated playlist in player!! FIX: tinyyy fixes!

Browse Source
This commit is contained in:
Tobias Klika
2011-05-12 00:48:06 +02:00
parent 7a14ecfbe9
commit ef539e2450
6 changed files with 176 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/artists/show.html.haml
+1 -1
View File
@@ -32,7 +32,7 @@
= image_tag "ico/play.png", :class=>"play", :videoid=>id.videos.first.unique_id
= image_tag "ico/add.png", :class=>"add"
%span= track.name
= "by #{trimString(track.artist.name, 50)}"
= link_to trimString(track.artist.name, 50), :controller=>"artists",:action=>"show",:id=>CGI.escape(track.artist.name)
%br.clean
= link_to "NACHLADEN", :class => "more" do
= image_tag "ico/more.png"
app/views/layouts/application.html.haml
+9 -9
View File
@@ -10,13 +10,6 @@
= csrf_meta_tag
%body
#playlist-container
#playlist-navigation
.edit Editieren
.clear Leeren
.shuffle Shuffle
%br.clean
%ul#playlist
#site
#head
%h1
@@ -38,11 +31,18 @@
#predefinedTab
= yield
#player
#playlist-container
#playlist-navigation
.edit Editieren
.clear Leeren
.shuffle Shuffle
%br.clean
%ul#playlist
#videoDiv Loading
%p#song
= "Hometown Glory"
=raw "<span class='song'>Thomas, du olle Sau!</span>"
%br
%b=raw "<span>Artist: </span>Adele"
%b=raw "<span class='otherstyle'>Artist: </span><span class='artist'>Tobi Wan Kenobi</span>"
#controls
= link_to "", "javascript:void(0);", :onclick=>"", :class=>"backward"
= link_to "", "javascript:void(0);", :class=>"play"
app/views/search/index.html.haml
+5 -5
View File
@@ -78,13 +78,13 @@
%ul.songs.tab
- @tracks.track.each_with_index do |track, i|
- break if i == 18
- id = @youtube_client.videos_by(:query => "#{track.name} #{track.artist} official", :page => 1, :per_page => 1, :order_by => "relevance")
%li
= image_tag "ico/play.png", :class=>"play"
= image_tag "ico/play.png", :class=>"play", :videoid=>id.videos.first.unique_id
= image_tag "ico/add.png", :class=>"add"
%span
= track.name
=raw "&nbsp;"
= "by #{trimString(track.artist, 50)}"
%span= track.name
=raw "&nbsp;by "
= link_to trimString(track.artist, 50), :controller=>"artists",:action=>"show",:id=>CGI.escape(track.artist)
%br.clean
%br
= link_to "NACHLADEN", :class => "more" do
public/javascripts/application.js
+38 -11
View File
@@ -20,22 +20,26 @@ $(document).ready(function(){
initPlayer();
playSong();
});
$(window).load(function() {
initSearchDropdown(); // dropdown for the search input
fitImages(".artists.big img"); // resize and resposition images (artists, album)
fitImages(".artists.small img");
fitImages(".artists.ultrasmall img");
fitImages("#artist .side .img img");
});
$(window).load(function() {
initSearchDropdown(); // dropdown for the search input
});
function playSong(){
$('.songs .play').live('click',function(){
$id = $(this).attr("videoid");
ytplayer.loadVideoById($id);
loadVideo($id);
$('#song .artist').text($(this).parents('li').children('a').text());
$('#song .song').text($(this).parents('li').children('span').text());
});
}
@@ -47,7 +51,7 @@ function initPlaylist() {
if(storage !== undefined) {
size = storage.length;
for(i = 0; i < size; i++) {
$('#playlist').append('<li><span>'+ storage[i].title + '</span> by <a href="#">' + storage[i].artist + '</a></li>');
$('#playlist').append('<li videoid="'+ storage[i].videoid + '"><span>'+ storage[i].title + '</span> by <a href="#">' + storage[i].artist + '</a></li>');
$listElement = $('#playlist li:eq('+i+')');
$listElement.prepend('<img class="delete-handle" src="/images/ico/delete.png" />');
$listElement.append('<img class="drag-handle" src="/images/ico/drag.png" />');
@@ -62,6 +66,15 @@ function initPlaylist() {
});
$('#playlist .delete-handle').live("click", onRemoveSongFromPlaylist);
$('#player #icons .playlist').live("click", function(){
$('#playlist-container').toggle();
});
$('#playlist-navigation .clear').live('click', function(){
$('#playlist li').remove();
$.store.clear();
});
}
function savePlaylist() {
@@ -70,14 +83,13 @@ function savePlaylist() {
songs[i] = {
title : $(this).children('span').text(),
artist : $(this).children('a').text(),
videoid : "GAItz89a3na1"
videoid : $(this).attr('videoid')
}
});
console.log(songs);
//console.log(songs);
$.store.set("9minutesPlaylist", songs);
console.log("playlist saved ;)");
//console.log("playlist saved ;)");
}
function makeSongsAddable() {
@@ -85,9 +97,23 @@ function makeSongsAddable() {
}
function onAddSongToPlaylist(event) {
// if already in playlist
$listElement = $(event.target).parents('li').clone();
$vuid = $listElement.children('.play').attr('videoid');
if ($('#playlist li[videoid='+$vuid+']').html() != null)
{
alert("Already in playlist!");
return;
}
$listElement.children('img').remove();
$listElement.attr('data-itemidx', 0); // important for dragsort plugin
$listElement.attr('videoid', $vuid);
$listElement.prepend('<img class="delete-handle" src="/images/ico/delete.png" />');
$listElement.append('<img class="drag-handle" src="/images/ico/drag.png" />');
$listElement.appendTo('#playlist');
@@ -161,6 +187,7 @@ function initPlayer(){
$(this).toggleClass('pause');
});
$('#icons .volume').live('click', function(){
$('#player #volume').fadeToggle(300);
});
public/javascripts/player.js
+29 -44
View File
@@ -118,17 +118,23 @@
// Loads the selected video into the player.
function loadVideo(vid) {
var videoID = vid;
if(ytplayer) {
ytplayer.loadVideoById(videoID);
ytplayer.setPlaybackQuality("medium");
}
active = videoID;
$li = activeVid();
$('#playlist li').each(function(){
$(this).removeClass("active");
});
$li.addClass("active");
$('#song .artist').text($li.children('a').text());
$('#song .song').text($li.children('span').text());
}
$(document).ready(function(){
$('#playlist span').live('click',function(){
loadVideo($(this).parent().attr('videoid'));
});
});
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
@@ -140,8 +146,8 @@
ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
ytplayer.addEventListener("onError", "onPlayerError");
//Load an initial video into the player
ytplayer.cueVideoById("sCziT0ZWBDQ");
ytplayer.setPlaybackQuality("medium");
//ytplayer.cueVideoById("sCziT0ZWBDQ");
//active = "sCziT0ZWBDQ";
}
// The "main method" of this sample. Called when someone clicks "Run".
@@ -159,57 +165,36 @@
}
google.setOnLoadCallback(_run);
function addVideo(vid, name)
{
$('#playlist').append('<li vid="'+vid+'"><a href="javascript:void(0);" onclick="loadVideo(\''+vid+'\');">'
+name+'</a> <a class="del" onclick="deleteVid(\''+vid+'\');">(X)</a></li>');
}
function nextVideo()
{
$e = activeVid();
$next = $e.next('li');
if($next != null)
{
loadVideo($next.attr('vid'));
}
//$(this).parent().children().index(this);
if($next.html() != null)
loadVideo($next.attr('videoid'));
else loadVideo($('#playlist li:first-child').attr('videoid'));
}
function prevVideo()
{
$e = activeVid();
$prev = $e.prev('li');
if($prev != null)
{
loadVideo($prev.attr('vid'));
}
if($prev.html() != null)
loadVideo($prev.attr('videoid'));
else loadVideo($('#playlist li:last-child').attr('videoid'));
//$(this).parent().children().index(this);
}
function activeVid()
{
return $('#playlist [vid='+active+']');
$x = $('#playlist [videoid='+active+']');
console.log($('#playlist').html());
return ($x==null) ? '' : $x;
}
function deleteVid(vid)
{
$('#playlist [vid='+vid+']').remove();
}
function changeSize()
{
//$('object').width($('object').width()+40);
//$('object').height($('object').height()+30);
$extend = 100;
$extendy = 100;
$('#ytplayer').width($('ytplayer').width()+40);
$('#ytplayer').height($('ytplayer').height()+40);
}
$(document).ready(function(){
$("#changesize").live("click", function(){
changeSize();
});
});
$('document').ready(function(){
$('#player .forward').live('click', function(){
nextVideo();
});
$('#player .backward').live('click', function(){
prevVideo();
});
});
public/stylesheets/layout.css
+94 -84
View File
@@ -58,89 +58,6 @@ a { text-decoration: none; color: #7d8791; }
-webkit-border-radius: 5px;
}
/** PLAYLIST **/
#playlist-container
{
position: absolute;
top: 10px;
right: 10px;
min-width: 274px;
max-width: 274px;
min-height: 50px;
max-height: 400px;
background-color: white;
border: 1px solid #dfe4e8;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
z-index: 500;
}
#playlist-navigation { margin: 5px 5px 3px; }
#playlist-navigation div
{
display: block;
background-color: #f9f9f9;
border: 1px solid #dfe4e8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2px 3px;
height: 24px; line-height: 24px;
margin-right: 3px;
width: 78px;
text-align: center;
float: left;
cursor: default;
font-family: AauxNextBold, "Segoe UI", Arial, sans-serif;
}
#playlist-navigation div:hover { color: #027bbf; }
#playlist-navigation div:last-child { margin-right: 0; }
#playlist { overflow: hidden; padding: 5px 7px; }
#playlist li
{
position: relative;
height: 26px; line-height: 26px;
border-bottom: 1px dotted #dce2e6;
font-size: 11px;
padding: 0 3px;
overflow: hidden;
}
#playlist li:last-child { border-bottom: 0; }
#playlist .delete-handle
{
width: 18px;
height: 18px;
margin: 1px 0 6px -4px;
vertical-align: middle;
cursor: pointer;
}
#playlist .drag-handle
{
position: absolute;
right: 0;
top: 0;
padding: 8px 0;
vertical-align: middle;
padding-left: 3px;
cursor: move!important;
background-color: white;
}
#playlist li span
{
color: #027bbf;
font-size: 13px;
}
/** SITE **/
#site
@@ -707,7 +624,7 @@ div[wheel] > div { display: none; opacity: 0.0; position: relative; }
float: left;
}
#player #song:first-line { font-size: 14px;}
#player #song span { color: #424e54; }
#player #song .otherstyle { color: #424e54; }
#player #controls, #player #controls a { float: left; }
#player #controls { margin-top: 7px; }
#player .backward, #player .forward, #player .play
@@ -814,3 +731,96 @@ div[wheel] > div { display: none; opacity: 0.0; position: relative; }
width: 50px; height: 28px;
}
#ytPlayer { margin-top: 15px;}
/** PLAYLIST **/
#playlist-container
{
position: absolute;
bottom: 60px;
right: 10px;
min-width: 274px;
max-width: 274px;
min-height: 50px;
max-height: 400px;
background-color: white;
border: 1px solid #dfe4e8;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
z-index: 500;
display: none;
}
#playlist-navigation { margin: 5px 5px 3px; }
#playlist-navigation div
{
display: block;
background-color: #f9f9f9;
border: 1px solid #dfe4e8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2px 3px;
height: 24px; line-height: 24px;
margin-right: 3px;
width: 78px;
text-align: center;
float: left;
cursor: default;
font-family: AauxNextBold, "Segoe UI", Arial, sans-serif;
}
#playlist-navigation div:hover { color: #027bbf; }
#playlist-navigation div:last-child { margin-right: 0; }
#playlist { overflow: hidden; padding: 5px 7px; }
#playlist li
{
position: relative;
height: 26px; line-height: 26px;
border-bottom: 1px dotted #dce2e6;
font-size: 11px;
padding: 0 3px;
overflow: hidden;
}
#playlist li:last-child { border-bottom: 0; }
#playlist li.active
{
border-right: 5px solid #027bbf;
font-family: AauxNextBold, "Segoe UI", Arial, sans-serif!important;
}
#playlist .delete-handle
{
width: 18px;
height: 18px;
margin: 1px 0 6px -4px;
vertical-align: middle;
cursor: pointer;
}
#playlist .drag-handle
{
position: absolute;
right: 0;
top: 0;
padding: 8px 0;
vertical-align: middle;
padding-left: 3px;
cursor: move!important;
background-color: white;
}
#playlist li span
{
color: #027bbf;
font-size: 13px;
}