player; playlist; interface improvements;
This commit is contained in:
Tobias Klika
@@ -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
|
||||
|
||||
|
||||
@@ -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"
|
||||
%li= link_to image_tag("startsite/small/coldplay.jpg"),"", :class=>"rr dir"
|
||||
#search_home
|
||||
%br.clean
|
||||
#home_foot
|
||||
.right
|
||||
|
||||
@@ -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"
|
||||
= 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"
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
@@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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('<a class="playsong"/><a class="addsong" href="javascript:void(0);" />');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
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('<a class="playsong"/><a class="add" href="javascript:void(0);" onclick="open_playlists(this);"/>');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 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)
|
||||
|
||||
@@ -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
|
||||
}
|
||||
+24
-111
@@ -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('<li videoid="'+ storage[i].videoid + '"><h3><div>'+ storage[i].title + '</div><span>' + storage[i].artist + '</span></h3></li>');
|
||||
$listElement = $('.play_list 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" />');
|
||||
// }
|
||||
// }
|
||||
/*
|
||||
$('ul#playlist').dragsort({
|
||||
dragSelector: '.drag-handle',
|
||||
dragEnd: savePlaylist,
|
||||
placeHolderTemplate: '<li class="placeholder">',
|
||||
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('<img class="delete-handle" src="/images/ico/delete.png" />');
|
||||
// $listElement.append('<img class="drag-handle" src="/images/ico/drag.png" />');
|
||||
$listElement.appendTo('#playlist');
|
||||
|
||||
savePlaylist();
|
||||
}
|
||||
|
||||
function onRemoveTrackFromPlaylist(event) {
|
||||
$listElement = $(event.target).parent();
|
||||
$listElement.fadeTo(300, 0.1, function() {
|
||||
$(this).hide("blind", function() {
|
||||
$(this).remove();
|
||||
savePlaylist();
|
||||
});
|
||||
});
|
||||
}*/
|
||||
function volumeControl(mute){
|
||||
if(mute)
|
||||
$('.volume').addClass("novolume").removeClass("volume");
|
||||
else
|
||||
$('.novolume').addClass("volume").removeClass("novolume");
|
||||
}
|
||||
@@ -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 = "<div class='el' vid='"+url+"'><h3><div>"+track+"</div><span>"+artist+"</span></h3></div>";
|
||||
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");
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});*/
|
||||
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;
|
||||
}
|
||||
@@ -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<c;)a="0"+a;return a}function T(a,c,j){var q=a.getDate(),h=a.getDay(),r=a.getMonth();a=a.getFullYear();var f={d:q,dd:S(q),ddd:B[j].shortDays[h],dddd:B[j].days[h],m:r+1,mm:S(r+1),mmm:B[j].shortMonths[r],mmmm:B[j].months[r],yy:String(a).slice(2),yyyy:a};c=c.replace(X,function(s){return s in f?f[s]:s.slice(1,s.length-1)});return Y.html(c).html()}function v(a){return parseInt(a,10)}function U(a,
|
||||
c){return a.getFullYear()===c.getFullYear()&&a.getMonth()==c.getMonth()&&a.getDate()==c.getDate()}function C(a){if(a){if(a.constructor==Date)return a;if(typeof a=="string"){var c=a.split("-");if(c.length==3)return new Date(v(c[0]),v(c[1])-1,v(c[2]));if(!/^-?\d+$/.test(a))return;a=v(a)}c=new Date;c.setDate(c.getDate()+a);return c}}function Z(a,c){function j(b,e,g){n=b;D=b.getFullYear();E=b.getMonth();G=b.getDate();g=g||d.Event("api");g.type="change";H.trigger(g,[b]);if(!g.isDefaultPrevented()){a.val(T(b,
|
||||
e.format,e.lang));a.data("date",b);h.hide(g)}}function q(b){b.type="onShow";H.trigger(b);d(document).bind("keydown.d",function(e){if(e.ctrlKey)return true;var g=e.keyCode;if(g==8){a.val("");return h.hide(e)}if(g==27)return h.hide(e);if(d(V).index(g)>=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("<input/>");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("<div><div><a/><div/><a/></div><div><div/><div/></div></div>").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("<select/>").attr("id",f.month),A=d("<select/>").attr("id",f.year);M.html(z.add(A))}for(var $=
|
||||
k.find("#"+f.days),O=0;O<7;O++)$.append(d("<span/>").text(s.shortDays[(O+c.firstDay)%7]));d("body").append(k)}if(c.trigger)L=d("<a/>").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(i<m)i=m;else if(i>p)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){m<new Date(b,x+1,-1)&&p>new Date(b,x,0)&&z.append(d("<option/>").html(F).attr("value",
|
||||
x))});A.empty();i=r.getFullYear();for(var l=i+c.yearRange[0];l<i+c.yearRange[1];l++)m<=new Date(l+1,-1,1)&&p>new Date(l,0,0)&&A.append(d("<option/>").text(l));z.val(e);A.val(b)}else M.html(s.months[e]+" "+b);K.empty();I.add(J).removeClass(f.disabled);l=!g?-7:0;for(var u,y;l<(!g?35:42);l++){u=d("<a/>");if(l%7===0){P=d("<div/>").addClass(f.week);K.append(P)}if(l<g){u.addClass(f.off);y=o-g+l+1;i=new Date(b,e-1,y)}else 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&&i<m&&u.add(I).addClass(f.disabled);p&&i>p&&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&&n<m&&h.setValue(m);return h},setMax:function(b,e){p=C(b);e&&n>p&&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("<a/>");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("<div><div/><a href='#'/></div>").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("<input/>");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:"<div/>",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("<p/>").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);
|
||||
@@ -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
|
||||
})();
|
||||
@@ -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
|
||||
})();
|
||||
|
||||
+103
-15
@@ -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; }
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -327,4 +327,6 @@ $padding: 22px;
|
||||
padding: 10px;
|
||||
border: 1px solid desaturate(darken($ultra-light, 6%), 20%);
|
||||
background: $ultra-light;
|
||||
}
|
||||
}
|
||||
|
||||
#videoInfo { color: White!important; }
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user