diff --git a/app/controllers/tracks_controller.rb b/app/controllers/tracks_controller.rb index 08eed4a..cd71a2a 100644 --- a/app/controllers/tracks_controller.rb +++ b/app/controllers/tracks_controller.rb @@ -3,7 +3,7 @@ class TracksController < ApplicationController end def search_video - + puts params @video = @youtube_client.videos_by(:query => "#{CGI.unescape(params[:artist])} #{CGI.unescape(params[:track])} official", :page => 1, :per_page => 1, :order_by => "relevance") @id = @video.videos.first.unique_id diff --git a/app/views/home/_index.html.haml b/app/views/home/_index.html.haml index 268f4e4..c8d0bf2 100644 --- a/app/views/home/_index.html.haml +++ b/app/views/home/_index.html.haml @@ -4,4 +4,8 @@ %ul#top_artist_nav %li= link_to image_tag("startsite/small/beatles.jpg"),"", :class=>"ll dir" %li= image_tag "startsite/small/katy-perry.jpg", :class=>"cc" - %li= link_to image_tag("startsite/small/coldplay.jpg"),"", :class=>"rr dir" \ No newline at end of file + %li= link_to image_tag("startsite/small/coldplay.jpg"),"", :class=>"rr dir" +#search_home +%br.clean +#home_foot + .right diff --git a/app/views/layouts/_player.html.haml b/app/views/layouts/_player.html.haml index c3cf9ed..f29dbc0 100644 --- a/app/views/layouts/_player.html.haml +++ b/app/views/layouts/_player.html.haml @@ -1,7 +1,7 @@ .player - = link_to image_tag("icons/player/backward.png"), "javascript:void(0);", :class=>"backward" - = link_to image_tag("icons/player/play.png"), "javascript:void(0);", :class=>"play" - = link_to image_tag("icons/player/forward.png"), "javascript:void(0);", :class=>"forward" - = link_to image_tag("icons/player/volume.png"), "javascript:void(0);", :class=>"volume" - = link_to image_tag("icons/player/repeat.png"), "javascript:void(0);", :class=>"repeat" - = link_to image_tag("icons/player/fullscreen.png"), "javascript:void(0);", :class=>"full" \ No newline at end of file + = link_to "", "javascript:void(0);", :class=>"backward" + = link_to "", "javascript:void(0);", :class=>"play" + = link_to "", "javascript:void(0);", :class=>"forward" + = link_to "", "javascript:void(0);", :class=>"volume" + =# link_to "", "javascript:void(0);", :class=>"repeat" + = link_to "", "javascript:void(0);", :class=>"full" \ No newline at end of file diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 61d6b4b..57ef370 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -5,6 +5,9 @@ = include_stylesheets :common, :media=>'all' = javascript_include_tag "http://www.google.com/jsapi" = include_javascripts :jquery, :helper, :plugins, :common + :javascript + google.load("swfobject", "2.1"); + google.setOnLoadCallback(_run); = favicon_link_tag = favicon_link_tag "9minutes-logo.png", :rel=>"icon", :type=>"image/png" = csrf_meta_tag @@ -42,35 +45,14 @@ %li= link_to "Legal", "#" %li= link_to "Faq", "#" #fullscreen_wrap + #fullscreen_close #fullscreen - %h2 Avril Lavigne - %h1 Alice (In Wonderland) + #headline + %h2 Avril Lavigne + %h1 Alice (In Wonderland) #video= image_tag "examples/video-big.jpg" .sidebar .top = render :partial=>"layouts/player" - %ul.play_list - %li - %h3 - %div= "Alice" - %span= "Avril Lavigne" - %li - %h3 - %div= "Firework" - %span= "Katie Perry" - %li - %h3 - %div= "What the Hell" - %span= "Avril Lavigne" - %li - %h3 - %div= "Not Enough" - %span= "Avril Lavigne" - %li - %h3 - %div= "Firework" - %span= "Katie Perry" - %li - %h3 - %div= "Firework" - %span= "Katie Perry" + %input#scrubbar{:type => "range", :name => "range1", :min => "0", :max => "100", :step => "1", :value => "0"} + %ul#playlist diff --git a/config/assets.yml b/config/assets.yml index ac6161f..af2b105 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -12,6 +12,8 @@ javascripts: common: - public/javascripts/config.js - public/javascripts/pinify.js + - public/javascripts/play.js + - public/javascripts/playlist.js - public/javascripts/home.js - public/javascripts/player.js - public/javascripts/search.js diff --git a/public/images/icons/fullscreen-close.png b/public/images/icons/fullscreen-close.png new file mode 100644 index 0000000..3443595 Binary files /dev/null and b/public/images/icons/fullscreen-close.png differ diff --git a/public/images/icons/player/novolume.png b/public/images/icons/player/novolume.png new file mode 100644 index 0000000..b43f06e Binary files /dev/null and b/public/images/icons/player/novolume.png differ diff --git a/public/images/icons/player/pause.png b/public/images/icons/player/pause.png new file mode 100644 index 0000000..5fac3fc Binary files /dev/null and b/public/images/icons/player/pause.png differ diff --git a/public/images/icons/player/volume.png b/public/images/icons/player/volume.png index a8131ae..2b89dfe 100644 Binary files a/public/images/icons/player/volume.png and b/public/images/icons/player/volume.png differ diff --git a/public/images/icons/playing.png b/public/images/icons/playing.png new file mode 100644 index 0000000..b0c4e00 Binary files /dev/null and b/public/images/icons/playing.png differ diff --git a/public/javascripts/ajax/requests.js b/public/javascripts/ajax/requests.js index 98f48d9..a2b54eb 100644 --- a/public/javascripts/ajax/requests.js +++ b/public/javascripts/ajax/requests.js @@ -96,19 +96,22 @@ function album_request(link, params, obj){ }); } -function video_request(link, params, obj){ +function video_request(link, artist, track, play){ + var params = "artist="+artist+"&track="+track; + var dat; $.ajax({ type: "GET", dataType: "html", - url: link, + url: jQuery.trim(link), data: params, error: function(){ hide_flash(false); show_flash(true); //enable_more_button(); + return null; }, success: function(data){ - playTrack(data, obj); + videoRequestResponse(jQuery.trim(data), artist, track, play); } }); } \ No newline at end of file diff --git a/public/javascripts/animations/animations.js b/public/javascripts/animations/animations.js index 9df9b9f..10612ac 100644 --- a/public/javascripts/animations/animations.js +++ b/public/javascripts/animations/animations.js @@ -43,9 +43,9 @@ function more_hover_out(obj){ } function init_playlist_scrollbar(){ - $('#fullscreen .play_list').jScrollPane(); + $('#fullscreen #playlist').jScrollPane(); - $('#fullscreen .play_list').hover(function(){ + $('#fullscreen #playlist').hover(function(){ $('#fullscreen .jspVerticalBar').stop().fadeTo(300, 1); }, function(){ $('#fullscreen .jspVerticalBar').stop().fadeTo(200, 0.02); diff --git a/public/javascripts/animations/fullscreen.js b/public/javascripts/animations/fullscreen.js index b142a5f..6edd0d5 100644 --- a/public/javascripts/animations/fullscreen.js +++ b/public/javascripts/animations/fullscreen.js @@ -1,33 +1,52 @@ $(document).ready(function() { $('.full').live("click",function(){ - if($(this).hasClass("open")) { + showFullscreen(false); + }); + $("#fullscreen_close").click(function(){ + showFullscreen(false); + }); +}); + +function showFullscreen(auto){ + /*if(auto && $('.full').hasClass("open")) + { + clearInterval(fullscreenInt); + return; + }*/ + + if($('.full').hasClass("open")) { + $('#fullscreen').css("top", 0); $("#fullscreen").animate({ - marginTop: -300, + marginTop: -400, opacity: 0 }, 500, function(){ - $(this).hide(); + $('#ytPlayer').css("marginTop", -9999); $("#site, #bg_stripe").show().animate({ marginTop: 0, opacity: 1 }, 500); $("#fullscreen_wrap").fadeTo(500, 0, function(){$(this).hide();}); + $("#fullscreen_close").fadeTo(500, 0); }); $('.full').removeClass("open"); + //fullscreenInt = setInterval ( "showFullscreen(true)", 15000 ); } else { + $('#fullscreen').css("top", 0); $("#site, #bg_stripe").animate({ marginTop: 400, opacity: 0 }, 500, function(){ $(this).hide(); + $('#ytPlayer').css("marginTop", 0); $("#fullscreen").css("marginTop", -100).show().animate({ marginTop: 120, opacity: 1 }, 500); init_playlist_scrollbar(); $("#fullscreen_wrap").fadeTo(1000, 0.5); + $("#fullscreen_close").fadeTo(500, 1); }); $('.full').addClass("open"); } - }); -}); \ No newline at end of file +} \ No newline at end of file diff --git a/public/javascripts/config.js b/public/javascripts/config.js index de6b5eb..f6a158d 100644 --- a/public/javascripts/config.js +++ b/public/javascripts/config.js @@ -12,6 +12,7 @@ var register_path = "/register"; var login_path = "/login"; var logout_path = "/logout"; var favourite_path = "/favourize"; +var search_video_path = "/search_video"; $(document).ready(function(){ // home path diff --git a/public/javascripts/layout.js b/public/javascripts/layout.js index 34944eb..b038ff4 100644 --- a/public/javascripts/layout.js +++ b/public/javascripts/layout.js @@ -1,5 +1,6 @@ $(document).ready(function() { Path.listen(); + initPlaylist(); }); @@ -29,6 +30,19 @@ function init_tabs(){ }); } + +// add controls to songs +function add_controls(){ + $('.list.songs').each(function(){ + $(this).children("li").each(function(){ + if(!$(this).has(".playsong").length) + $(this).prepend(''); + }); + }); +} + + + function init_artist(){ add_controls(); add_more_button(); @@ -50,21 +64,6 @@ function submit_redirect(obj){ } -// add controls to songs -function add_controls(){ - $('.list.songs').each(function(){ - $(this).children("li").each(function(){ - if(!$(this).has(".playsong").length) - $(this).prepend(''); - }); - }); -} - -// TODO: add a playlist dropdown for selection -function open_playlists(obj){ -} - - function add_more_button(){ $('.list').each(function(){ if($(this).hasClass("andmore") && !$(this).parent().has(".more").length) diff --git a/public/javascripts/play.js b/public/javascripts/play.js new file mode 100644 index 0000000..f23856e --- /dev/null +++ b/public/javascripts/play.js @@ -0,0 +1,31 @@ +$(document).ready(function(){ + + $('.playsong').live("click", function(){ + videoRequest(this, true); + }); + $('.addsong').live("click", function(){ + videoRequest(this, false); + }); + +}); + +function videoRequest(me, play) { + var artist = $(me).parent().attr("artist"); + var track = $(me).parent().attr("track"); + video_request(search_video_path, artist, track, play); +} + +function videoRequestResponse(data, artist, track, play) { + if(play) + playTrack(data, artist, track); + else + addTrack(data, artist, track, true); +} + + +function playTrack(url, artist, track){ + loadVideo(url); + $('#fullscreen h2').text(artist); + $('#fullscreen h1').text(track); + // $('#fullscreen +} \ No newline at end of file diff --git a/public/javascripts/player.js b/public/javascripts/player.js index eee577a..69f638e 100644 --- a/public/javascripts/player.js +++ b/public/javascripts/player.js @@ -1,116 +1,29 @@ -/*$(document).ready(function(){ - loadPlayer(); - initPlaylist(); - makeTracksAddable(); // bind click-event to "add" button (for each track) - initPlayer(); - initPlayTrack(); +// CLICK HANDLER +$(document).ready(function(){ + $('.play').live('click', playVideo); + $('.pause').live('click', pauseVideo); + + $('.volume').live('click', muteVideo); + $('.novolume').live('click', unMuteVideo); + + + $('#scrubbar').rangeinput({ + progress: true, + speed: 200 + }); }); -function initPlayer(){ - $('.play').live('click', function(){ - if($(this).hasClass('pause')) pauseVideo(); - else playVideo(); - - $(this).toggleClass('pause'); - }); +function playControl(play){ + if(play) + $('.play').addClass("pause").removeClass("play"); + else + $('.pause').addClass("play").removeClass("pause"); } - -function initPlayTrack(){ - $('.playsong').live('click',function(){ - url = "/search_video"; - params = "artist="+$(this).parents('li').attr("artist")+"&track="+$(this).parents('li').attr("track"); - video_request(url, params, this); - }); -} - -function playTrack(data, obj){ - loadVideo(data); - $('#fullscreen h2').text($(obj).parents('li').attr("artist")); - $('#fullscreen h1').text($(obj).parents('li').attr("track")); -} - - -function initPlaylist() { - // TODO: reload Playlist form localStorage - storage = $.store.get("9minutesPlaylist"); - if(storage !== undefined) { - size = storage.length; - for(i = 0; i < size; i++) { - $('.play_list').append('

  • '+ storage[i].title + '
    ' + storage[i].artist + '

    • '); - $listElement = $('.play_list li:eq('+i+')');*/ - //$listElement.prepend(''); - //$listElement.append(''); - // } - // } -/* - $('ul#playlist').dragsort({ - dragSelector: '.drag-handle', - dragEnd: savePlaylist, - placeHolderTemplate: '
  • ', - scrollContainer: '#playlist-container' - }); - - $('#playlist .delete-handle').live("click", onRemoveTrackFromPlaylist); - - $('#player #icons .playlist').live("click", function(){ - $('#playlist-container').toggle(); - }); - - $('#playlist-navigation .clear').live('click', function(){ - $('#playlist li').remove(); - $.store.clear(); - }); -} -/* -function savePlaylist() { - var tracks = []; - $('.play_list li').each(function(i) { - tracks[i] = { - title : $(this).attr("track"), // TODO - artist : $(this).attr("artist"), - videoid : $(this).attr('videoid') - } - }); - - //console.log(tracks); - $.store.set("9minutesPlaylist", tracks); - //console.log("playlist saved ;)"); -} - -function makeTracksAddable() { - $('.add').live("click", onAddTrackToPlaylist); -} - -function onAddTrackToPlaylist(event) { - // if already in playlist - $listElement = $(event.target).parents('li').clone(); // TODO - $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(''); - // $listElement.append(''); - $listElement.appendTo('#playlist'); - - savePlaylist(); -} - -function onRemoveTrackFromPlaylist(event) { - $listElement = $(event.target).parent(); - $listElement.fadeTo(300, 0.1, function() { - $(this).hide("blind", function() { - $(this).remove(); - savePlaylist(); - }); - }); -}*/ \ No newline at end of file +function volumeControl(mute){ + if(mute) + $('.volume').addClass("novolume").removeClass("volume"); + else + $('.novolume').addClass("volume").removeClass("novolume"); +} \ No newline at end of file diff --git a/public/javascripts/playlist.js b/public/javascripts/playlist.js new file mode 100644 index 0000000..2e706a0 --- /dev/null +++ b/public/javascripts/playlist.js @@ -0,0 +1,73 @@ +var fullscreenInt; + +$(document).ready(function(){ + $('#playlist .el').live('click', function(){ + playTrack(getVid(this), getArtist(this), getTrack(this)); + }); + + $('.player .forward').live('click', function(){ + nextVideo(); + }); + $('.player .backward').live('click', function(){ + prevVideo(); + }); +}); + +function initPlaylist() { + storage = $.store.get("9minutesPlaylist"); + if(storage !== undefined) { + size = storage.length; + for(i = 0; i < size; i++) { + addTrack(storage[i].videoid, storage[i].artist, storage[i].title, false); + } + } + + //if($('#playlist .el').size() > 0) + // fullscreenInt = setInterval ( "showFullscreen(true)", 15000 ); +} + +function savePlaylist() { + var tracks = []; + $('#playlist .el').each(function(i) { + tracks[i] = { + title : getTrack(this), + artist : getArtist(this), + videoid : getVid(this) + } + }); + + $.store.set("9minutesPlaylist", tracks); +} + +function addTrack(url, artist, track, save){ + var appendData = "

    "+track+"
    "+artist+"

    "; + if(save) + { + $('#playlist .jspPane').append(appendData); + savePlaylist(); + } + else + $('#playlist').append(appendData); +} + + + +function getArtist(obj) { + return $(obj).children('h3').children('span').text(); +} +function getTrack(obj) { + return $(obj).children('h3').children('div').text(); +} +function getVid(obj) { + return $(obj).attr('vid'); +} + + +function setCurrentSong(vid) { + var me = $('#playlist .el[vid="'+vid+'"]'); + var id = $(me).parent().children().index(me); + $('#playlist .el').each(function(){ + $(this).removeClass("active"); + }); + $('#playlist .el:eq('+id+')').addClass("active"); +} \ No newline at end of file diff --git a/public/javascripts/plugins/player.js b/public/javascripts/plugins/player.js index 2700bce..b6c6e72 100644 --- a/public/javascripts/plugins/player.js +++ b/public/javascripts/plugins/player.js @@ -1,200 +1,145 @@ -/*// Place your application-specific JavaScript functions and classes here -// This file is automatically included by javascript_include_tag :defaults - google.load("swfobject", "2.1"); +var active = null; - var active = null; - /* - * Chromeless player has no controls. - - var updateInterval = 0; - var dragging = false; +function updateHTML(elmId, value) { + document.getElementById(elmId).innerHTML = value; +} - // Update a particular HTML element with a new value - function updateHTML(elmId, value) { - document.getElementById(elmId).innerHTML = value; - } +function onPlayerError(errorCode) { + alert("An error occured of type:" + errorCode); +} - // This function is called when an error is thrown by the player - function onPlayerError(errorCode) { - alert("An error occvured of type:" + errorCode); - } - - // This function is called when the player changes state - function onPlayerStateChange(newState) { - updateHTML("playerState", newState); - } - - // Display information about the current state of the player - function updatePlayerInfo() { - // Also check that at least one function exists since when IE unloads the - // page, it will destroy the SWF before clearing the interval. - if(ytplayer && ytplayer.getDuration) { - updateHTML("duration", getTimeFromInt(ytplayer.getDuration())); - updateHTML("currentTime", getTimeFromInt(ytplayer.getCurrentTime())); - /* - updateHTML("bytesTotal", ytplayer.getVideoBytesTotal()); - updateHTML("startBytes", ytplayer.getVideoStartBytes()); - updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());*/ - /* - if(ytplayer.getPlayerState() == 1) $('#player .play').addClass('pause'); - else $('#player .play').removeClass('pause'); - - if(!dragging) - { - var api = $("#scrubbar input").data("rangeinput"); - var crnt = (parseInt(ytplayer.getCurrentTime()) / parseInt(ytplayer.getDuration())) * 100; - $("#scrubbar input").data("rangeinput").setValue(crnt); - } - } - } - - - // Allow the user to set the volume from 0-100 - function setVideoVolume(volume) { - if(isNaN(volume) || volume < 0 || volume > 100) { - alert("Please enter a valid volume between 0 and 100."); - } - else if(ytplayer){ - ytplayer.setVolume(volume); - } - } - - function duration(){ - if (ytplayer) { - ytplayer.getDuration(); - } - } - function currentTime(){ - if (ytplayer) { - ytplayer.getCurrentTime(); - } - } - - function playVideo() { - if (ytplayer) { - ytplayer.playVideo(); - } - } - - function pauseVideo() { - if (ytplayer) { - ytplayer.pauseVideo(); - } - } - - function muteVideo() { - if(ytplayer) { - ytplayer.mute(); - } - } - - function unMuteVideo() { - if(ytplayer) { - ytplayer.unMute(); - } - } - - function seek(sec){ - if(ytplayer) { - sec = (sec / 100) * parseInt(ytplayer.getDuration()); - ytplayer.seekTo(sec, true); - } - } - - function startDraggingTime(){ - dragging = true; - } - function stopDraggingTime(){ - dragging = false; - } - - - function startUpdate(){ - updateInterval = setInterval(updatePlayerInfo, 250); - } - function stopUpdate(){ - clearInterval(updateInterval); - } - // Loads the selected video into the player. - function loadVideo(vid) { - var videoID = vid; - ytplayer.loadVideoById(videoID); - active = videoID; - $li = activeVid(); - $('.play_list li').each(function(){ - $(this).removeClass("active"); - }); - $li.addClass("active"); - - $('#track .artist').text($li.children('a').text()); - $('#track .track').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) { - ytplayer = document.getElementById("video"); - // This causes the updatePlayerInfo function to be called every 250ms to - // get fresh data from the player - startUpdate(); - updatePlayerInfo(); - ytplayer.addEventListener("onStateChange", "onPlayerStateChange"); - ytplayer.addEventListener("onError", "onPlayerError"); - //Load an initial video into the player - //ytplayer.cueVideoById("sCziT0ZWBDQ"); - //active = "sCziT0ZWBDQ"; - } - - // The "main method" of this sample. Called when someone clicks "Run". - function loadPlayer() { - // Lets Flash from another domain call JavaScript - var params = { allowScriptAccess: "always" }; - // The element id of the Flash embed - var atts = { id: "ytPlayer" }; - // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/) - swfobject.embedSWF("http://www.youtube.com/apiplayer?version=3&enablejsapi=1", - "videoDiv", "640", "360", "8", null, null, params, atts); - } - function _run() { - loadPlayer(); - } - google.setOnLoadCallback(_run); - - function nextVideo() - { - $e = activeVid(); - $next = $e.next('li'); - if($next.html() != null) - loadVideo($next.attr('videoid')); - else loadVideo($('.play_list li:first-child').attr('videoid')); - } - function prevVideo() - { - $e = activeVid(); - $prev = $e.prev('li'); - if($prev.html() != null) - loadVideo($prev.attr('videoid')); - else loadVideo($('.play_list li:last-child').attr('videoid')); - //$(this).parent().children().index(this); - } - - function activeVid() - { - $x = $('.play_list [videoid='+active+']'); - //console.log($('#playlist').html()); - return ($x==null) ? '' : $x; - } - - $('document').ready(function(){ - $('.forward').live('click', function(){ +function onPlayerStateChange(newState) { + switch(newState) { + case 1: // PLAY + playControl(true); + break; + case 2: // PAUSE + case 5: + playControl(false); + break; + case 0: + playControl(false); nextVideo(); - }); - $('.backward').live('click', function(){ - prevVideo(); - }); - });*/ \ No newline at end of file + break; + } + +} + +function updatePlayerInfo() { + if(ytplayer && ytplayer.getDuration) { + var crnt = (parseInt(ytplayer.getCurrentTime()) / parseInt(ytplayer.getDuration())) * 100; + $(".sidebar #scrubbar").data("rangeinput").setValue(crnt); + } +} + +function playVideo() { + if (ytplayer) { + ytplayer.playVideo(); + } +} + +function pauseVideo() { + if (ytplayer) { + ytplayer.pauseVideo(); + } +} + +function muteVideo() { + if(ytplayer) { + volumeControl(true); + ytplayer.mute(); + } +} + +function unMuteVideo() { + if(ytplayer) { + volumeControl(false); + ytplayer.unMute(); + } +} + + + +function nextVideo() +{ + $e = activeVid(); + $next = $e.next('div'); + if($next.html() != null) + loadVideo($next.attr('vid')); + else loadVideo($('#playlist .el:first-child').attr('vid')); +} + +function prevVideo() +{ + $e = activeVid(); + $prev = $e.prev('div'); + if($prev.html() != null) + loadVideo($prev.attr('vid')); + else loadVideo($('#playlist .el:last-child').attr('vid')); + //$(this).parent().children().index(this); +} + + + + + + +function loadVideo(vid) { + ytplayer.loadVideoById(vid); + + active = vid; + setCurrentSong(vid); + /* + active = videoID; + $li = activeVid(); + $('#playlist li').each(function(){ + $(this).removeClass("active"); + }); + $li.addClass("active"); + + $('#track .artist').text($li.children('a').text()); + $('#track .track').text($li.children('span').text());*/ +} + + + + + + +// This function is automatically called by the player once it loads +function onYouTubePlayerReady(playerId) { + ytplayer = document.getElementById("ytPlayer"); + // This causes the updatePlayerInfo function to be called every 250ms to + // get fresh data from the player + setInterval(updatePlayerInfo, 250); + updatePlayerInfo(); + ytplayer.addEventListener("onStateChange", "onPlayerStateChange"); + ytplayer.addEventListener("onError", "onPlayerError"); + //Load an initial video into the player + ytplayer.cueVideoById("sEOLtJZjnEA"); +} + +// The "main method" of this sample. Called when someone clicks "Run". +function loadPlayer() { + // Lets Flash from another domain call JavaScript + var params = { allowScriptAccess: "always" }; + // The element id of the Flash embed + var atts = { id: "ytPlayer" }; + // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/) + swfobject.embedSWF("http://www.youtube.com/apiplayer?" + + "&enablejsapi=1&playerapiid=player1", + "video", "640", "360", "8", null, null, params, atts); +} + +function _run() { + loadPlayer(); + $('#fullscreen').css("top", -9999); +} + + + +function activeVid() +{ + $x = $('#playlist .el[vid='+active+']'); + return ($x==null) ? '' : $x; +} \ No newline at end of file diff --git a/public/javascripts/plugins/rangeinput.js b/public/javascripts/plugins/rangeinput.js new file mode 100644 index 0000000..582fc39 --- /dev/null +++ b/public/javascripts/plugins/rangeinput.js @@ -0,0 +1,49 @@ +/* + * jQuery Tools 1.2.5 - The missing UI library for the Web + * + * [dateinput, rangeinput, validator] + * + * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE. + * + * http://flowplayer.org/tools/ + * + * File generated: Wed Sep 22 06:12:54 GMT 2010 + */ +(function(d){function R(a,c){return 32-(new Date(a,c,32)).getDate()}function S(a,c){a=""+a;for(c=c||2;a.length=0){if(!w){h.show(e);return e.preventDefault()}var i=d("#"+f.weeks+" a"),t=d("."+f.focus),o=i.index(t);t.removeClass(f.focus);if(g==74||g==40)o+=7;else if(g==75||g==38)o-=7;else if(g==76||g==39)o+=1;else if(g==72||g==37)o-=1;if(o>41){h.addMonth();t=d("#"+ +f.weeks+" a:eq("+(o-42)+")")}else if(o<0){h.addMonth(-1);t=d("#"+f.weeks+" a:eq("+(o+42)+")")}else t=i.eq(o);t.addClass(f.focus);return e.preventDefault()}if(g==34)return h.addMonth();if(g==33)return h.addMonth(-1);if(g==36)return h.today();if(g==13)d(e.target).is("select")||d("."+f.focus).click();return d([16,17,18,9]).index(g)>=0});d(document).bind("click.d",function(e){var g=e.target;if(!d(g).parents("#"+f.root).length&&g!=a[0]&&(!L||g!=L[0]))h.hide(e)})}var h=this,r=new Date,f=c.css,s=B[c.lang], +k=d("#"+f.root),M=k.find("#"+f.title),L,I,J,D,E,G,n=a.attr("data-value")||c.value||a.val(),m=a.attr("min")||c.min,p=a.attr("max")||c.max,w;if(m===0)m="0";n=C(n)||r;m=C(m||c.yearRange[0]*365);p=C(p||c.yearRange[1]*365);if(!s)throw"Dateinput: invalid language: "+c.lang;if(a.attr("type")=="date"){var N=d("");d.each("class,disabled,id,maxlength,name,readonly,required,size,style,tabindex,title,value".split(","),function(b,e){N.attr(e,a.attr(e))});a.replaceWith(N);a=N}a.addClass(f.input);var H= +a.add(h);if(!k.length){k=d("
    ").hide().css({position:"absolute"}).attr("id",f.root);k.children().eq(0).attr("id",f.head).end().eq(1).attr("id",f.body).children().eq(0).attr("id",f.days).end().eq(1).attr("id",f.weeks).end().end().end().find("a").eq(0).attr("id",f.prev).end().eq(1).attr("id",f.next);M=k.find("#"+f.head).find("div").attr("id",f.title);if(c.selectors){var z=d("").attr("id",f.year);M.html(z.add(A))}for(var $= +k.find("#"+f.days),O=0;O<7;O++)$.append(d("").text(s.shortDays[(O+c.firstDay)%7]));d("body").append(k)}if(c.trigger)L=d("").attr("href","#").addClass(f.trigger).click(function(b){h.show();return b.preventDefault()}).insertAfter(a);var K=k.find("#"+f.weeks);A=k.find("#"+f.year);z=k.find("#"+f.month);d.extend(h,{show:function(b){if(!(a.attr("readonly")||a.attr("disabled")||w)){b=b||d.Event();b.type="onBeforeShow";H.trigger(b);if(!b.isDefaultPrevented()){d.each(W,function(){this.hide()}); +w=true;z.unbind("change").change(function(){h.setValue(A.val(),d(this).val())});A.unbind("change").change(function(){h.setValue(d(this).val(),z.val())});I=k.find("#"+f.prev).unbind("click").click(function(){I.hasClass(f.disabled)||h.addMonth(-1);return false});J=k.find("#"+f.next).unbind("click").click(function(){J.hasClass(f.disabled)||h.addMonth();return false});h.setValue(n);var e=a.offset();if(/iPad/i.test(navigator.userAgent))e.top-=d(window).scrollTop();k.css({top:e.top+a.outerHeight({margins:true})+ +c.offset[0],left:e.left+c.offset[1]});if(c.speed)k.show(c.speed,function(){q(b)});else{k.show();q(b)}return h}}},setValue:function(b,e,g){var i=v(e)>=-1?new Date(v(b),v(e),v(g||1)):b||n;if(ip)i=p;b=i.getFullYear();e=i.getMonth();g=i.getDate();if(e==-1){e=11;b--}else if(e==12){e=0;b++}if(!w){j(i,c);return h}E=e;D=b;g=new Date(b,e,1-c.firstDay);g=g.getDay();var t=R(b,e),o=R(b,e-1),P;if(c.selectors){z.empty();d.each(s.months,function(x,F){mnew Date(b,x,0)&&z.append(d("");if(l%7===0){P=d("
    ").addClass(f.week);K.append(P)}if(l=g+t){u.addClass(f.off);y=l-t-g+1;i=new Date(b,e+1,y)}else{y=l-g+1;i=new Date(b, +e,y);if(U(n,i))u.attr("id",f.current).addClass(f.focus);else U(r,i)&&u.attr("id",f.today)}m&&ip&&u.add(J).addClass(f.disabled);u.attr("href","#"+y).text(y).data("date",i);P.append(u)}K.find("a").click(function(x){var F=d(this);if(!F.hasClass(f.disabled)){d("#"+f.current).removeAttr("id");F.attr("id",f.current);j(F.data("date"),c,x)}return false});f.sunday&&K.find(f.week).each(function(){var x=c.firstDay?7-c.firstDay:0;d(this).children().slice(x,x+1).addClass(f.sunday)}); +return h},setMin:function(b,e){m=C(b);e&&np&&h.setValue(p);return h},today:function(){return h.setValue(r)},addDay:function(b){return this.setValue(D,E,G+(b||1))},addMonth:function(b){return this.setValue(D,E+(b||1),G)},addYear:function(b){return this.setValue(D+(b||1),E,G)},hide:function(b){if(w){b=d.Event();b.type="onHide";H.trigger(b);d(document).unbind("click.d").unbind("keydown.d");if(b.isDefaultPrevented())return;k.hide();w=false}return h}, +getConf:function(){return c},getInput:function(){return a},getCalendar:function(){return k},getValue:function(b){return b?T(n,b,c.lang):n},isOpen:function(){return w}});d.each(["onBeforeShow","onShow","change","onHide"],function(b,e){d.isFunction(c[e])&&d(h).bind(e,c[e]);h[e]=function(g){g&&d(h).bind(e,g);return h}});a.bind("focus click",h.show).keydown(function(b){var e=b.keyCode;if(!w&&d(V).index(e)>=0){h.show(b);return b.preventDefault()}return b.shiftKey||b.ctrlKey||b.altKey||e==9?true:b.preventDefault()}); +C(a.val())&&j(n,c)}d.tools=d.tools||{version:"1.2.5"};var W=[],Q,V=[75,76,38,39,74,72,40,37],B={};Q=d.tools.dateinput={conf:{format:"mm/dd/yy",selectors:false,yearRange:[-5,5],lang:"en",offset:[0,0],speed:0,firstDay:0,min:undefined,max:undefined,trigger:false,css:{prefix:"cal",input:"date",root:0,head:0,title:0,prev:0,next:0,month:0,year:0,days:0,body:0,weeks:0,today:0,current:0,week:0,off:0,sunday:0,focus:0,disabled:0,trigger:0}},localize:function(a,c){d.each(c,function(j,q){c[j]=q.split(",")}); +B[a]=c}};Q.localize("en",{months:"January,February,March,April,May,June,July,August,September,October,November,December",shortMonths:"Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec",days:"Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday",shortDays:"Sun,Mon,Tue,Wed,Thu,Fri,Sat"});var X=/d{1,4}|m{1,4}|yy(?:yy)?|"[^"]*"|'[^']*'/g,Y=d("");d.expr[":"].date=function(a){var c=a.getAttribute("type");return c&&c=="date"||!!d(a).data("dateinput")};d.fn.dateinput=function(a){if(this.data("dateinput"))return this; +a=d.extend(true,{},Q.conf,a);d.each(a.css,function(j,q){if(!q&&j!="prefix")a.css[j]=(a.css.prefix||"")+(q||j)});var c;this.each(function(){var j=new Z(d(this),a);W.push(j);j=j.getInput().data("dateinput",j);c=c?c.add(j):j});return c?c:this}})(jQuery); +(function(e){function F(d,a){a=Math.pow(10,a);return Math.round(d*a)/a}function q(d,a){if(a=parseInt(d.css(a),10))return a;return(d=d[0].currentStyle)&&d.width&&parseInt(d.width,10)}function C(d){return(d=d.data("events"))&&d.onSlide}function G(d,a){function h(c,b,f,j){if(f===undefined)f=b/k*z;else if(j)f-=a.min;if(s)f=Math.round(f/s)*s;if(b===undefined||s)b=f*k/z;if(isNaN(f))return g;b=Math.max(0,Math.min(b,k));f=b/k*z;if(j||!n)f+=a.min;if(n)if(j)b=k-b;else f=a.max-f;f=F(f,t);var r=c.type=="click"; +if(D&&l!==undefined&&!r){c.type="onSlide";A.trigger(c,[f,b]);if(c.isDefaultPrevented())return g}j=r?a.speed:0;r=r?function(){c.type="change";A.trigger(c,[f])}:null;if(n){m.animate({top:b},j,r);a.progress&&B.animate({height:k-b+m.width()/2},j)}else{m.animate({left:b},j,r);a.progress&&B.animate({width:b+m.width()/2},j)}l=f;H=b;d.val(f);return g}function o(){if(n=a.vertical||q(i,"height")>q(i,"width")){k=q(i,"height")-q(m,"height");u=i.offset().top+k}else{k=q(i,"width")-q(m,"width");u=i.offset().left}} +function v(){o();g.setValue(a.value!==undefined?a.value:a.min)}var g=this,p=a.css,i=e("
    ").data("rangeinput",g),n,l,u,k,H;d.before(i);var m=i.addClass(p.slider).find("a").addClass(p.handle),B=i.find("div").addClass(p.progress);e.each("min,max,step,value".split(","),function(c,b){c=d.attr(b);if(parseFloat(c))a[b]=parseFloat(c,10)});var z=a.max-a.min,s=a.step=="any"?0:a.step,t=a.precision;if(t===undefined)try{t=s.toString().split(".")[1].length}catch(I){t=0}if(d.attr("type")== +"range"){var w=e("");e.each("class,disabled,id,maxlength,name,readonly,required,size,style,tabindex,title,value".split(","),function(c,b){w.attr(b,d.attr(b))});w.val(a.value);d.replaceWith(w);d=w}d.addClass(p.input);var A=e(g).add(d),D=true;e.extend(g,{getValue:function(){return l},setValue:function(c,b){o();return h(b||e.Event("api"),undefined,c,true)},getConf:function(){return a},getProgress:function(){return B},getHandle:function(){return m},getInput:function(){return d},step:function(c, +b){b=b||e.Event();var f=a.step=="any"?1:a.step;g.setValue(l+f*(c||1),b)},stepUp:function(c){return g.step(c||1)},stepDown:function(c){return g.step(-c||-1)}});e.each("onSlide,change".split(","),function(c,b){e.isFunction(a[b])&&e(g).bind(b,a[b]);g[b]=function(f){f&&e(g).bind(b,f);return g}});m.drag({drag:false}).bind("dragStart",function(){o();D=C(e(g))||C(d)}).bind("drag",function(c,b,f){if(d.is(":disabled"))return false;h(c,n?b:f)}).bind("dragEnd",function(c){if(!c.isDefaultPrevented()){c.type= +"change";A.trigger(c,[l])}}).click(function(c){return c.preventDefault()});i.click(function(c){if(d.is(":disabled")||c.target==m[0])return c.preventDefault();o();var b=m.width()/2;h(c,n?k-u-b+c.pageY:c.pageX-u-b)});a.keyboard&&d.keydown(function(c){if(!d.attr("readonly")){var b=c.keyCode,f=e([75,76,38,33,39]).index(b)!=-1,j=e([74,72,40,34,37]).index(b)!=-1;if((f||j)&&!(c.shiftKey||c.altKey||c.ctrlKey)){if(f)g.step(b==33?10:1,c);else if(j)g.step(b==34?-10:-1,c);return c.preventDefault()}}});d.blur(function(c){var b= +e(this).val();b!==l&&g.setValue(b,c)});e.extend(d[0],{stepUp:g.stepUp,stepDown:g.stepDown});v();k||e(window).load(v)}e.tools=e.tools||{version:"1.2.5"};var E;E=e.tools.rangeinput={conf:{min:0,max:100,step:"any",steps:0,value:0,precision:undefined,vertical:0,keyboard:true,progress:false,speed:100,css:{input:"range",slider:"slider",progress:"progress",handle:"handle"}}};var x,y;e.fn.drag=function(d){document.ondragstart=function(){return false};d=e.extend({x:true,y:true,drag:true},d);x=x||e(document).bind("mousedown mouseup", +function(a){var h=e(a.target);if(a.type=="mousedown"&&h.data("drag")){var o=h.position(),v=a.pageX-o.left,g=a.pageY-o.top,p=true;x.bind("mousemove.drag",function(i){var n=i.pageX-v;i=i.pageY-g;var l={};if(d.x)l.left=n;if(d.y)l.top=i;if(p){h.trigger("dragStart");p=false}d.drag&&h.css(l);h.trigger("drag",[i,n]);y=h});a.preventDefault()}else try{y&&y.trigger("dragEnd")}finally{x.unbind("mousemove.drag");y=null}});return this.data("drag",true)};e.expr[":"].range=function(d){var a=d.getAttribute("type"); +return a&&a=="range"||!!e(d).filter("input").data("rangeinput")};e.fn.rangeinput=function(d){if(this.data("rangeinput"))return this;d=e.extend(true,{},E.conf,d);var a;this.each(function(){var h=new G(e(this),e.extend(true,{},d));h=h.getInput().data("rangeinput",h);a=a?a.add(h):h});return a?a:this}})(jQuery); +(function(e){function t(a,b,c){var k=a.offset().top,f=a.offset().left,l=c.position.split(/,?\s+/),p=l[0];l=l[1];k-=b.outerHeight()-c.offset[0];f+=a.outerWidth()+c.offset[1];if(/iPad/i.test(navigator.userAgent))k-=e(window).scrollTop();c=b.outerHeight()+a.outerHeight();if(p=="center")k+=c/2;if(p=="bottom")k+=c;a=a.outerWidth();if(l=="center")f-=(a+b.outerWidth())/2;if(l=="left")f-=a;return{top:k,left:f}}function y(a){function b(){return this.getAttribute("type")==a}b.key="[type="+a+"]";return b}function u(a, +b,c){function k(g,d,i){if(!(!c.grouped&&g.length)){var j;if(i===false||e.isArray(i)){j=h.messages[d.key||d]||h.messages["*"];j=j[c.lang]||h.messages["*"].en;(d=j.match(/\$\d/g))&&e.isArray(i)&&e.each(d,function(m){j=j.replace(this,i[m])})}else j=i[c.lang]||i;g.push(j)}}var f=this,l=b.add(f);a=a.not(":button, :image, :reset, :submit");e.extend(f,{getConf:function(){return c},getForm:function(){return b},getInputs:function(){return a},reflow:function(){a.each(function(){var g=e(this),d=g.data("msg.el"); +if(d){g=t(g,d,c);d.css({top:g.top,left:g.left})}});return f},invalidate:function(g,d){if(!d){var i=[];e.each(g,function(j,m){j=a.filter("[name='"+j+"']");if(j.length){j.trigger("OI",[m]);i.push({input:j,messages:[m]})}});g=i;d=e.Event()}d.type="onFail";l.trigger(d,[g]);d.isDefaultPrevented()||q[c.effect][0].call(f,g,d);return f},reset:function(g){g=g||a;g.removeClass(c.errorClass).each(function(){var d=e(this).data("msg.el");if(d){d.remove();e(this).data("msg.el",null)}}).unbind(c.errorInputEvent|| +"");return f},destroy:function(){b.unbind(c.formEvent+".V").unbind("reset.V");a.unbind(c.inputEvent+".V").unbind("change.V");return f.reset()},checkValidity:function(g,d){g=g||a;g=g.not(":disabled");if(!g.length)return true;d=d||e.Event();d.type="onBeforeValidate";l.trigger(d,[g]);if(d.isDefaultPrevented())return d.result;var i=[];g.not(":radio:not(:checked)").each(function(){var m=[],n=e(this).data("messages",m),v=r&&n.is(":date")?"onHide.v":c.errorInputEvent+".v";n.unbind(v);e.each(w,function(){var o= +this,s=o[0];if(n.filter(s).length){o=o[1].call(f,n,n.val());if(o!==true){d.type="onBeforeFail";l.trigger(d,[n,s]);if(d.isDefaultPrevented())return false;var x=n.attr(c.messageAttr);if(x){m=[x];return false}else k(m,s,o)}}});if(m.length){i.push({input:n,messages:m});n.trigger("OI",[m]);c.errorInputEvent&&n.bind(v,function(o){f.checkValidity(n,o)})}if(c.singleError&&i.length)return false});var j=q[c.effect];if(!j)throw'Validator: cannot find effect "'+c.effect+'"';if(i.length){f.invalidate(i,d);return false}else{j[1].call(f, +g,d);d.type="onSuccess";l.trigger(d,[g]);g.unbind(c.errorInputEvent+".v")}return true}});e.each("onBeforeValidate,onBeforeFail,onFail,onSuccess".split(","),function(g,d){e.isFunction(c[d])&&e(f).bind(d,c[d]);f[d]=function(i){i&&e(f).bind(d,i);return f}});c.formEvent&&b.bind(c.formEvent+".V",function(g){if(!f.checkValidity(null,g))return g.preventDefault()});b.bind("reset.V",function(){f.reset()});a[0]&&a[0].validity&&a.each(function(){this.oninvalid=function(){return false}});if(b[0])b[0].checkValidity= +f.checkValidity;c.inputEvent&&a.bind(c.inputEvent+".V",function(g){f.checkValidity(e(this),g)});a.filter(":checkbox, select").filter("[required]").bind("change.V",function(g){var d=e(this);if(this.checked||d.is("select")&&e(this).val())q[c.effect][1].call(f,d,g)});var p=a.filter(":radio").change(function(g){f.checkValidity(p,g)});e(window).resize(function(){f.reflow()})}e.tools=e.tools||{version:"1.2.5"};var z=/\[type=([a-z]+)\]/,A=/^-?[0-9]*(\.[0-9]+)?$/,r=e.tools.dateinput,B=/^([a-z0-9_\.\-\+]+)@([\da-z\.\-]+)\.([a-z\.]{2,6})$/i, +C=/^(https?:\/\/)?[\da-z\.\-]+\.[a-z\.]{2,6}[#&+_\?\/\w \.\-=]*$/i,h;h=e.tools.validator={conf:{grouped:false,effect:"default",errorClass:"invalid",inputEvent:null,errorInputEvent:"keyup",formEvent:"submit",lang:"en",message:"
    ",messageAttr:"data-message",messageClass:"error",offset:[0,0],position:"center right",singleError:false,speed:"normal"},messages:{"*":{en:"Please correct this value"}},localize:function(a,b){e.each(b,function(c,k){h.messages[c]=h.messages[c]||{};h.messages[c][a]=k})}, +localizeFn:function(a,b){h.messages[a]=h.messages[a]||{};e.extend(h.messages[a],b)},fn:function(a,b,c){if(e.isFunction(b))c=b;else{if(typeof b=="string")b={en:b};this.messages[a.key||a]=b}if(b=z.exec(a))a=y(b[1]);w.push([a,c])},addEffect:function(a,b,c){q[a]=[b,c]}};var w=[],q={"default":[function(a){var b=this.getConf();e.each(a,function(c,k){c=k.input;c.addClass(b.errorClass);var f=c.data("msg.el");if(!f){f=e(b.message).addClass(b.messageClass).appendTo(document.body);c.data("msg.el",f)}f.css({visibility:"hidden"}).find("p").remove(); +e.each(k.messages,function(l,p){e("

    ").html(p).appendTo(f)});f.outerWidth()==f.parent().width()&&f.add(f.find("p")).css({display:"inline"});k=t(c,f,b);f.css({visibility:"visible",position:"absolute",top:k.top,left:k.left}).fadeIn(b.speed)})},function(a){var b=this.getConf();a.removeClass(b.errorClass).each(function(){var c=e(this).data("msg.el");c&&c.css({visibility:"hidden"})})}]};e.each("email,url,number".split(","),function(a,b){e.expr[":"][b]=function(c){return c.getAttribute("type")===b}}); +e.fn.oninvalid=function(a){return this[a?"bind":"trigger"]("OI",a)};h.fn(":email","Please enter a valid email address",function(a,b){return!b||B.test(b)});h.fn(":url","Please enter a valid URL",function(a,b){return!b||C.test(b)});h.fn(":number","Please enter a numeric value.",function(a,b){return A.test(b)});h.fn("[max]","Please enter a value smaller than $1",function(a,b){if(b===""||r&&a.is(":date"))return true;a=a.attr("max");return parseFloat(b)<=parseFloat(a)?true:[a]});h.fn("[min]","Please enter a value larger than $1", +function(a,b){if(b===""||r&&a.is(":date"))return true;a=a.attr("min");return parseFloat(b)>=parseFloat(a)?true:[a]});h.fn("[required]","Please complete this mandatory field.",function(a,b){if(a.is(":checkbox"))return a.is(":checked");return!!b});h.fn("[pattern]",function(a){var b=new RegExp("^"+a.attr("pattern")+"$");return b.test(a.val())});e.fn.validator=function(a){var b=this.data("validator");if(b){b.destroy();this.removeData("validator")}a=e.extend(true,{},h.conf,a);if(this.is("form"))return this.each(function(){var c= +e(this);b=new u(c.find(":input"),c,a);c.data("validator",b)});else{b=new u(this,this.eq(0).closest("form"),a);return this.data("validator",b)}}})(jQuery); \ No newline at end of file diff --git a/public/javascripts/plugins/store.js b/public/javascripts/plugins/store.js new file mode 100644 index 0000000..944c1e9 --- /dev/null +++ b/public/javascripts/plugins/store.js @@ -0,0 +1,94 @@ +jQuery.store = (function(){ + var api = {}, + win = window, + doc = win.document, + localStorageName = 'localStorage', + globalStorageName = 'globalStorage', + storage + + api.disabled = false + api.set = function(key, value) {} + api.get = function(key) {} + api.remove = function(key) {} + api.clear = function() {} + api.transact = function(key, transactionFn) { + var val = api.get(key) + if (typeof val == 'undefined') { val = {} } + transactionFn(val) + api.set(key, val) + } + + api.serialize = function(value) { + return JSON.stringify(value) + } + api.deserialize = function(value) { + if (typeof value != 'string') { return undefined } + return JSON.parse(value) + } + + // Functions to encapsulate questionable FireFox 3.6.13 behavior + // when about.config::dom.storage.enabled === false + // See https://github.com/marcuswestin/store.js/issues#issue/13 + function isLocalStorageNameSupported() { + try { return (localStorageName in win && win[localStorageName]) } + catch(err) { return false } + } + + function isGlobalStorageNameSupported() { + try { return (globalStorageName in win && win[globalStorageName] && win[globalStorageName][win.location.hostname]) } + catch(err) { return false } + } + + if (isLocalStorageNameSupported()) { + storage = win[localStorageName] + api.set = function(key, val) { storage.setItem(key, api.serialize(val)) } + api.get = function(key) { return api.deserialize(storage.getItem(key)) } + api.remove = function(key) { storage.removeItem(key) } + api.clear = function() { storage.clear() } + + } else if (isGlobalStorageNameSupported()) { + storage = win[globalStorageName][win.location.hostname] + api.set = function(key, val) { storage[key] = api.serialize(val) } + api.get = function(key) { return api.deserialize(storage[key] && storage[key].value) } + api.remove = function(key) { delete storage[key] } + api.clear = function() { for (var key in storage ) { delete storage[key] } } + + } else if (doc.documentElement.addBehavior) { + var storage = doc.createElement('div') + function withIEStorage(storeFunction) { + return function() { + var args = Array.prototype.slice.call(arguments, 0) + args.unshift(storage) + doc.body.appendChild(storage) + storage.addBehavior('#default#userData') + storage.load(localStorageName) + var result = storeFunction.apply(api, args) + doc.body.removeChild(storage) + return result + } + } + api.set = withIEStorage(function(storage, key, val) { + storage.setAttribute(key, api.serialize(val)) + storage.save(localStorageName) + }) + api.get = withIEStorage(function(storage, key) { + return api.deserialize(storage.getAttribute(key)) + }) + api.remove = withIEStorage(function(storage, key) { + storage.removeAttribute(key) + storage.save(localStorageName) + }) + api.clear = withIEStorage(function(storage) { + var attributes = storage.XMLDocument.documentElement.attributes + storage.load(localStorageName) + for (var i=0, attr; attr = attributes[i]; i++) { + storage.removeAttribute(attr.name) + } + storage.save(localStorageName) + }) + } else { + api.disabled = true + } + + return api +})(); diff --git a/public/javascripts/store.js b/public/javascripts/store.js index 3c9b227..e69de29 100644 --- a/public/javascripts/store.js +++ b/public/javascripts/store.js @@ -1,101 +0,0 @@ -/* Copyright (c) 2010 Marcus Westin - * - * store.js - */ - -jQuery.store = (function(){ - var api = {}, - win = window, - doc = win.document, - localStorageName = 'localStorage', - globalStorageName = 'globalStorage', - storage - - api.disabled = false - api.set = function(key, value) {} - api.get = function(key) {} - api.remove = function(key) {} - api.clear = function() {} - api.transact = function(key, transactionFn) { - var val = api.get(key) - if (typeof val == 'undefined') { val = {} } - transactionFn(val) - api.set(key, val) - } - - api.serialize = function(value) { - return JSON.stringify(value) - } - api.deserialize = function(value) { - if (typeof value != 'string') { return undefined } - return JSON.parse(value) - } - - // Functions to encapsulate questionable FireFox 3.6.13 behavior - // when about.config::dom.storage.enabled === false - // See https://github.com/marcuswestin/store.js/issues#issue/13 - function isLocalStorageNameSupported() { - try { return (localStorageName in win && win[localStorageName]) } - catch(err) { return false } - } - - function isGlobalStorageNameSupported() { - try { return (globalStorageName in win && win[globalStorageName] && win[globalStorageName][win.location.hostname]) } - catch(err) { return false } - } - - if (isLocalStorageNameSupported()) { - storage = win[localStorageName] - api.set = function(key, val) { storage.setItem(key, api.serialize(val)) } - api.get = function(key) { return api.deserialize(storage.getItem(key)) } - api.remove = function(key) { storage.removeItem(key) } - api.clear = function() { storage.clear() } - - } else if (isGlobalStorageNameSupported()) { - storage = win[globalStorageName][win.location.hostname] - api.set = function(key, val) { storage[key] = api.serialize(val) } - api.get = function(key) { return api.deserialize(storage[key] && storage[key].value) } - api.remove = function(key) { delete storage[key] } - api.clear = function() { for (var key in storage ) { delete storage[key] } } - - } else if (doc.documentElement.addBehavior) { - var storage = doc.createElement('div') - function withIEStorage(storeFunction) { - return function() { - var args = Array.prototype.slice.call(arguments, 0) - args.unshift(storage) - // See http://msdn.microsoft.com/en-us/library/ms531081(v=VS.85).aspx - // and http://msdn.microsoft.com/en-us/library/ms531424(v=VS.85).aspx - doc.body.appendChild(storage) - storage.addBehavior('#default#userData') - storage.load(localStorageName) - var result = storeFunction.apply(api, args) - doc.body.removeChild(storage) - return result - } - } - api.set = withIEStorage(function(storage, key, val) { - storage.setAttribute(key, api.serialize(val)) - storage.save(localStorageName) - }) - api.get = withIEStorage(function(storage, key) { - return api.deserialize(storage.getAttribute(key)) - }) - api.remove = withIEStorage(function(storage, key) { - storage.removeAttribute(key) - storage.save(localStorageName) - }) - api.clear = withIEStorage(function(storage) { - var attributes = storage.XMLDocument.documentElement.attributes - storage.load(localStorageName) - for (var i=0, attr; attr = attributes[i]; i++) { - storage.removeAttribute(attr.name) - } - storage.save(localStorageName) - }) - } else { - api.disabled = true - } - - return api -})(); diff --git a/public/stylesheets/9minutes.css b/public/stylesheets/9minutes.css index dfe16b4..fc7707b 100644 --- a/public/stylesheets/9minutes.css +++ b/public/stylesheets/9minutes.css @@ -319,6 +319,9 @@ body { border: 1px solid #e5e7e9; background: #f4f6f9; } +#videoInfo { + color: White!important; } + /*********************************/ /************ LAYOUT *************/ /*********************************/ @@ -386,7 +389,10 @@ body { height: 19px; display: inline-block; margin: 28px 20px 0 0; + cursor: pointer; background: url("/images/icons/heart.png") no-repeat 0 0; } + #artist_left .heart.loved { + background-position: 0 -19px; } /*********************************/ /************ LAYOUT *************/ @@ -432,6 +438,24 @@ body { #top_artist_nav .rr { background: url("/images/icons/home-right.png"); } +#search_home { + width: 428px; + height: 43px; + background: #fff; + float: right; + padding: 14px 11px; } + +#home_foot { + display: block; + width: 950px; + height: 200px; + background: transparent url("/images/backgrounds/dark.png") repeat; } + #home_foot .right { + width: 300px; + height: 200px; + background: transparent url("/images/backgrounds/dark.png") repeat; + float: right; } + /*********************************/ /************ LAYOUT *************/ /*********************************/ @@ -610,14 +634,36 @@ body { line-height: 47px; } .player a { float: left; } - .player .play { - margin: -8px 5px 0 5px; } + .player .play, .player .pause { + margin: -8px 5px 0 5px; + width: 47px; + height: 47px; + display: inline-block; + background: url("/images/icons/player/play.png"); } + .player .pause { + background: url("/images/icons/player/pause.png"); } .player .forward, .player .backward { display: inline-block; width: 32px; - height: 32px; } - .player .volume, .player .repeat, .player .full { - margin: -5px 0 0 20px; } + height: 32px; + background: url("/images/icons/player/forward.png"); } + .player .backward { + background: url("/images/icons/player/backward.png"); } + .player .volume, .player .novolume, .player .repeat, .player .full { + margin: 8px 0 0 20px; } + .player .volume, .player .novolume { + width: 16px; + height: 16px; + display: inline-block; + background: url("/images/icons/player/volume.png"); } + .player .novolume { + background: url("/images/icons/player/novolume.png"); } + .player .full { + width: 16px; + height: 12px; + margin-top: 9px; + display: inline-block; + background: url("/images/icons/player/fullscreen.png"); } /*********************************/ /************ LAYOUT *************/ @@ -765,14 +811,14 @@ body { color: #0086cc; } .list.songs li:last-child { margin-bottom: 0; } - .list.songs li .playsong, .list.songs li .add { + .list.songs li .playsong, .list.songs li .addsong { width: 20px; height: 20px; display: inline-block; margin-right: 6px; background: url("/images/icons/list-controls.png") no-repeat 0 0; vertical-align: middle; } - .list.songs li .add { + .list.songs li .addsong { margin-right: 16px; background-position: 0 -20px; } .list.albums { @@ -907,6 +953,17 @@ body { left: 0; display: none; } +#fullscreen_close { + width: 78px; + height: 78px; + position: fixed; + left: -10px; + top: -20px; + background: url("/images/icons/fullscreen-close.png"); + opacity: 0; + z-index: 71; + cursor: pointer; } + #fullscreen { width: 950px; position: absolute; @@ -914,8 +971,7 @@ body { z-index: 70; opacity: 0; top: 0; - left: 50%; - display: none; } + left: 50%; } #fullscreen h2 { font-size: 18px; color: #fff; @@ -935,7 +991,33 @@ body { float: right; width: 310px; height: 360px; + /* slider root element */ + /* progress bar (enabled with progress: true) */ + /* drag handle */ + /* the input field */ background: transparent url("/images/backgrounds/dark.png") repeat; } + #fullscreen .sidebar .slider { + background: transparent; + position: relative; + cursor: pointer; + width: 310px; + height: 3px; + float: left; + clear: right; } + #fullscreen .sidebar .progress { + height: 3px; + width: 310px; + background: #0086cc; + position: absolute; } + #fullscreen .sidebar .handle { + background: #0097e6; + width: 0; + height: 3px; + position: absolute; + display: block; + cursor: pointer; } + #fullscreen .sidebar .range { + display: none; } #fullscreen .sidebar .top { width: 310px; height: 125px; @@ -946,23 +1028,29 @@ body { float: left; margin-top: 47px; margin-left: 40px; } - #fullscreen .sidebar .play_list { + #fullscreen .sidebar #playlist { width: 310px; - height: 235px; + height: 230px; padding: 10px 0; overflow: auto; } - #fullscreen .sidebar .play_list li { + #fullscreen .sidebar #playlist .el { + cursor: pointer; padding: 6px 25px; } - #fullscreen .sidebar .play_list li h3 { + #fullscreen .sidebar #playlist .el h3 { font-size: 22px; color: white; line-height: 22px; } - #fullscreen .sidebar .play_list li h3 span { + #fullscreen .sidebar #playlist .el h3 span { display: block; font-size: 12px; text-transform: uppercase; color: #0086cc; } - #fullscreen .sidebar .play_list .jspVerticalBar { + #fullscreen .sidebar #playlist .el.active { + margin-left: -20px; } + #fullscreen .sidebar #playlist .el.active h3 { + background: url("/images/icons/playing.png") no-repeat 0 7px; + text-indent: 18px; } + #fullscreen .sidebar #playlist .jspVerticalBar { left: 0!important; opacity: 0.02; } diff --git a/public/stylesheets/sass/_artist.scss b/public/stylesheets/sass/_artist.scss index baec25d..04c8392 100644 --- a/public/stylesheets/sass/_artist.scss +++ b/public/stylesheets/sass/_artist.scss @@ -84,6 +84,10 @@ $padding: 28px; height: 19px; display: inline-block; margin: 28px 20px 0 0; + cursor: pointer; background: url('#{$ico-url}/heart.png') no-repeat 0 0; + &.loved { + background-position: 0 -19px; + } } } \ No newline at end of file diff --git a/public/stylesheets/sass/_fullscreen.scss b/public/stylesheets/sass/_fullscreen.scss index 30f631b..f8b2e1e 100644 --- a/public/stylesheets/sass/_fullscreen.scss +++ b/public/stylesheets/sass/_fullscreen.scss @@ -13,6 +13,18 @@ display: none; } +#fullscreen_close { + width: 78px; + height: 78px; + position: fixed; + left: -10px; + top: -20px; + background: url('#{$ico-url}/fullscreen-close.png'); + opacity: 0; + z-index: 71; + cursor: pointer; +} + #fullscreen { width: 950px; position: absolute; @@ -20,7 +32,6 @@ z-index: 70; opacity: 0; top: 0; left: 50%; - display: none; h2 { font-size: 18px; color: #fff; @@ -39,10 +50,47 @@ height: 360px; @include stripe-bg(); } + + .sidebar { + $width: 310px; + $height: 3px; + float: right; - width: 310px; + width: $width; height: 360px; + + /* slider root element */ + .slider + { + background: transparent; + position: relative; + cursor: pointer; + width: $width; height: $height; + float: left; + clear: right; + } + + /* progress bar (enabled with progress: true) */ + .progress { + height: $height; width: $width; + background: $blue; + position: absolute; + } + + /* drag handle */ + .handle { + background: lighten($blue, 5%); + width: 0; height: $height; + position:absolute; + display:block; + cursor: pointer; + } + + /* the input field */ + .range { display: none; } + + @include stripe-bg(); .top { width: 310px; @@ -56,12 +104,13 @@ margin-left: 40px; } } - .play_list { + #playlist { width: 310px; - height: 235px; + height: 230px; padding: 10px 0; overflow: auto; - li { + .el { + cursor: pointer; padding: 6px 25px; h3 { font-size: 22px; @@ -74,6 +123,13 @@ color: $blue; } } + &.active { + margin-left: -20px; + h3 { + background: url('#{$ico-url}/playing.png') no-repeat 0 7px; + text-indent: 18px; + } + } } .jspVerticalBar { left: 0!important; opacity: 0.02; } } diff --git a/public/stylesheets/sass/_home.scss b/public/stylesheets/sass/_home.scss index 68bddf7..9b53208 100644 --- a/public/stylesheets/sass/_home.scss +++ b/public/stylesheets/sass/_home.scss @@ -40,4 +40,23 @@ .ll img, .rr img { opacity: 0.4 } .ll { background: url('#{$ico-url}/home-left.png') } .rr { background: url('#{$ico-url}/home-right.png') } +} +#search_home { + width: 428px; + height: 43px; + background: #fff; + float: right; + padding: 14px 11px; +} +#home_foot { + display: block; + width: 950px; + height: 200px; + @include stripe-bg(); + .right { + width: 300px; + height: 200px; + @include stripe-bg(); + float: right; + } } \ No newline at end of file diff --git a/public/stylesheets/sass/_layout.scss b/public/stylesheets/sass/_layout.scss index 0d16a01..833ec45 100644 --- a/public/stylesheets/sass/_layout.scss +++ b/public/stylesheets/sass/_layout.scss @@ -327,4 +327,6 @@ $padding: 22px; padding: 10px; border: 1px solid desaturate(darken($ultra-light, 6%), 20%); background: $ultra-light; -} \ No newline at end of file +} + +#videoInfo { color: White!important; } \ No newline at end of file diff --git a/public/stylesheets/sass/_lists.scss b/public/stylesheets/sass/_lists.scss index fa196bb..fbc8ad7 100644 --- a/public/stylesheets/sass/_lists.scss +++ b/public/stylesheets/sass/_lists.scss @@ -22,7 +22,7 @@ } @include std-font(); &:last-child { margin-bottom: 0; } - .playsong, .add { + .playsong, .addsong { width: 20px; height: 20px; display: inline-block; @@ -30,7 +30,7 @@ background: url('#{$ico-url}/list-controls.png') no-repeat 0 0; vertical-align: middle; } - .add { + .addsong { margin-right: 16px; background-position: 0 -20px; } diff --git a/public/stylesheets/sass/_player.scss b/public/stylesheets/sass/_player.scss index 9047e3a..5e41d40 100644 --- a/public/stylesheets/sass/_player.scss +++ b/public/stylesheets/sass/_player.scss @@ -8,13 +8,44 @@ margin: 52px 17px 0 0; line-height: 47px; a { float: left; } - .play { margin: -8px 5px 0 5px; } + .play, .pause { + margin: -8px 5px 0 5px; + width: 47px; + height: 47px; + display: inline-block; + background: url("#{$ico-url}/player/play.png"); + } + .pause { + background: url("#{$ico-url}/player/pause.png"); + } .forward, .backward { display: inline-block; width: 32px; height: 32px; + background: url("#{$ico-url}/player/forward.png"); } - .volume, .repeat, .full { - margin: -5px 0 0 20px; + .backward { + background: url("#{$ico-url}/player/backward.png"); + } + + .volume, .novolume, .repeat, .full { + margin: 8px 0 0 20px; + } + .volume, .novolume { + width: 16px; + height: 16px; + display: inline-block; + background: url("#{$ico-url}/player/volume.png"); + } + .novolume { + background: url("#{$ico-url}/player/novolume.png"); + } + + .full { + width: 16px; + height: 12px; + margin-top: 9px; + display: inline-block; + background: url("#{$ico-url}/player/fullscreen.png"); } } \ No newline at end of file