robut-rdio 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.document +5 -0
- data/.rspec +1 -0
- data/.rvmrc +1 -0
- data/Gemfile +18 -0
- data/Gemfile.lock +54 -0
- data/LICENSE.txt +20 -0
- data/README.md +79 -0
- data/README.rdoc +19 -0
- data/Rakefile +54 -0
- data/VERSION +1 -0
- data/lib/robut-rdio.rb +174 -0
- data/lib/server/public/css/rdio.css +141 -0
- data/lib/server/public/css/style.css +79 -0
- data/lib/server/public/css/style_after.css +42 -0
- data/lib/server/public/images/background.png +0 -0
- data/lib/server/public/images/no-album.png +0 -0
- data/lib/server/public/index.html +43 -0
- data/lib/server/public/js/libs/dd_belatedpng.js +13 -0
- data/lib/server/public/js/libs/jquery-1.5.1.min.js +16 -0
- data/lib/server/public/js/libs/modernizr-1.7.min.js +2 -0
- data/lib/server/public/js/rdio.js +170 -0
- data/lib/server/public/js/script.js +3 -0
- data/lib/server/server.rb +72 -0
- data/lib/tasks/shell.rake +1 -0
- data/plugin-tester.rb +52 -0
- data/robut-rdio.gemspec +92 -0
- data/spec/robut-rdio_spec.rb +101 -0
- data/spec/spec_helper.rb +12 -0
- metadata +178 -0
data/.document
ADDED
data/.rspec
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
--color
|
data/.rvmrc
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
rvm --create 1.9.2@robut-rdio
|
data/Gemfile
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
source "http://rubygems.org"
|
2
|
+
# Add dependencies required to use your gem here.
|
3
|
+
# Example:
|
4
|
+
# gem "activesupport", ">= 2.3.5"
|
5
|
+
|
6
|
+
# Add dependencies to develop your gem here.
|
7
|
+
# Include everything needed to run rake, tests, features, etc.
|
8
|
+
gem 'robut'
|
9
|
+
group :development do
|
10
|
+
gem 'thin'
|
11
|
+
gem "rspec", "~> 2.3.0"
|
12
|
+
gem "bundler", "~> 1.0.0"
|
13
|
+
gem "jeweler", "~> 1.6.4"
|
14
|
+
gem "rcov", ">= 0"
|
15
|
+
gem 'rdio', '0.0.91' # .92 is horked
|
16
|
+
gem 'sinatra'
|
17
|
+
gem 'highline'
|
18
|
+
end
|
data/Gemfile.lock
ADDED
@@ -0,0 +1,54 @@
|
|
1
|
+
GEM
|
2
|
+
remote: http://rubygems.org/
|
3
|
+
specs:
|
4
|
+
daemons (1.1.4)
|
5
|
+
diff-lcs (1.1.3)
|
6
|
+
eventmachine (0.12.10)
|
7
|
+
git (1.2.5)
|
8
|
+
highline (1.6.5)
|
9
|
+
jeweler (1.6.4)
|
10
|
+
bundler (~> 1.0)
|
11
|
+
git (>= 1.2.5)
|
12
|
+
rake
|
13
|
+
oauth (0.4.5)
|
14
|
+
rack (1.3.5)
|
15
|
+
rack-protection (1.1.4)
|
16
|
+
rack
|
17
|
+
rake (0.9.2.2)
|
18
|
+
rcov (0.9.11)
|
19
|
+
rdio (0.0.91)
|
20
|
+
oauth (>= 0.3.0)
|
21
|
+
robut (0.3.0)
|
22
|
+
xmpp4r (~> 0.5.0)
|
23
|
+
rspec (2.3.0)
|
24
|
+
rspec-core (~> 2.3.0)
|
25
|
+
rspec-expectations (~> 2.3.0)
|
26
|
+
rspec-mocks (~> 2.3.0)
|
27
|
+
rspec-core (2.3.1)
|
28
|
+
rspec-expectations (2.3.0)
|
29
|
+
diff-lcs (~> 1.1.2)
|
30
|
+
rspec-mocks (2.3.0)
|
31
|
+
sinatra (1.3.1)
|
32
|
+
rack (~> 1.3, >= 1.3.4)
|
33
|
+
rack-protection (~> 1.1, >= 1.1.2)
|
34
|
+
tilt (~> 1.3, >= 1.3.3)
|
35
|
+
thin (1.2.11)
|
36
|
+
daemons (>= 1.0.9)
|
37
|
+
eventmachine (>= 0.12.6)
|
38
|
+
rack (>= 1.0.0)
|
39
|
+
tilt (1.3.3)
|
40
|
+
xmpp4r (0.5)
|
41
|
+
|
42
|
+
PLATFORMS
|
43
|
+
ruby
|
44
|
+
|
45
|
+
DEPENDENCIES
|
46
|
+
bundler (~> 1.0.0)
|
47
|
+
highline
|
48
|
+
jeweler (~> 1.6.4)
|
49
|
+
rcov
|
50
|
+
rdio (= 0.0.91)
|
51
|
+
robut
|
52
|
+
rspec (~> 2.3.0)
|
53
|
+
sinatra
|
54
|
+
thin
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright (c) 2011 Adam Pearson
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,79 @@
|
|
1
|
+
robut-rdio
|
2
|
+
====================
|
3
|
+
|
4
|
+
A web-powered RDIO plugin for robut
|
5
|
+
|
6
|
+
How to test Robut-Rdio interactively
|
7
|
+
------------------
|
8
|
+
|
9
|
+
You can test the plugin in an interative shell with:
|
10
|
+
|
11
|
+
```shell
|
12
|
+
export RDIO_KEY=<your key>
|
13
|
+
export RDIO_SECRET=<your secret>
|
14
|
+
rake shell
|
15
|
+
```
|
16
|
+
|
17
|
+
This will open a pseudo-robut environment where anything entered into the shell will be responded to as if it were a hipchat message.
|
18
|
+
|
19
|
+
You shoule see something like:
|
20
|
+
|
21
|
+
```shell
|
22
|
+
== Sinatra/1.3.1 has taken the stage on 4567 for development with backup from Thin
|
23
|
+
>> Thin web server (v1.2.11 codename Bat-Shit Crazy)
|
24
|
+
>> Maximum connections set to 1024
|
25
|
+
>> Listening on 0.0.0.0:4567, CTRL+C to stop
|
26
|
+
Welcome to the robut plugin test environment.
|
27
|
+
|
28
|
+
You can direct your messages to the bot using:
|
29
|
+
@dj
|
30
|
+
|
31
|
+
Type 'exit' or 'quit' to exit this session
|
32
|
+
|
33
|
+
hipchat>
|
34
|
+
|
35
|
+
```
|
36
|
+
|
37
|
+
You can now point a web browser to the url that Rack gives you to run the client as well while you test the chat input.
|
38
|
+
|
39
|
+
|
40
|
+
Then you can do the following while your web browser responds to the changes:
|
41
|
+
|
42
|
+
```shell
|
43
|
+
hipchat> @dj find guero
|
44
|
+
Searching for: guero...
|
45
|
+
0: Beck - Guero
|
46
|
+
1: Beck - Guero - E-Pro
|
47
|
+
2: Beck - Guero - Girl
|
48
|
+
3: Beck - Guero - Que' Onda Guero
|
49
|
+
4: Beck - Guero - Black Tambourine
|
50
|
+
5: Beck - Guero - Missing
|
51
|
+
6: Beck - Guero - Hell Yes
|
52
|
+
7: Beck - Guero - Earthquake Weather
|
53
|
+
8: Beck - Guero - Go It Alone
|
54
|
+
9: Beck - Guero - Broken Drum
|
55
|
+
hipchat> @dj play 6
|
56
|
+
Queuing: Beck - Hell Yes
|
57
|
+
hipchat>
|
58
|
+
```
|
59
|
+
|
60
|
+
Now, the browser should have a song queued up and playing.
|
61
|
+
|
62
|
+
|
63
|
+
Contributing to robut-rdio
|
64
|
+
----------------
|
65
|
+
|
66
|
+
* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet
|
67
|
+
* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it
|
68
|
+
* Fork the project
|
69
|
+
* Start a feature/bugfix branch
|
70
|
+
* Commit and push until you are happy with your contribution
|
71
|
+
* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
|
72
|
+
* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
|
73
|
+
|
74
|
+
Copyright
|
75
|
+
----------
|
76
|
+
|
77
|
+
Copyright (c) 2011 Adam Pearson. See LICENSE.txt for
|
78
|
+
further details.
|
79
|
+
|
data/README.rdoc
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
= robut-rdio
|
2
|
+
|
3
|
+
Description goes here.
|
4
|
+
|
5
|
+
== Contributing to robut-rdio
|
6
|
+
|
7
|
+
* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet
|
8
|
+
* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it
|
9
|
+
* Fork the project
|
10
|
+
* Start a feature/bugfix branch
|
11
|
+
* Commit and push until you are happy with your contribution
|
12
|
+
* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
|
13
|
+
* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
|
14
|
+
|
15
|
+
== Copyright
|
16
|
+
|
17
|
+
Copyright (c) 2011 Adam Pearson. See LICENSE.txt for
|
18
|
+
further details.
|
19
|
+
|
data/Rakefile
ADDED
@@ -0,0 +1,54 @@
|
|
1
|
+
# encoding: utf-8
|
2
|
+
|
3
|
+
require 'rubygems'
|
4
|
+
require 'bundler'
|
5
|
+
begin
|
6
|
+
Bundler.setup(:default, :development)
|
7
|
+
rescue Bundler::BundlerError => e
|
8
|
+
$stderr.puts e.message
|
9
|
+
$stderr.puts "Run `bundle install` to install missing gems"
|
10
|
+
exit e.status_code
|
11
|
+
end
|
12
|
+
require 'rake'
|
13
|
+
|
14
|
+
require 'jeweler'
|
15
|
+
Jeweler::Tasks.new do |gem|
|
16
|
+
# gem is a Gem::Specification... see http://docs.rubygems.org/read/chapter/20 for more options
|
17
|
+
gem.name = "robut-rdio"
|
18
|
+
gem.homepage = "http://github.com/radamant/robut-rdio"
|
19
|
+
gem.license = "MIT"
|
20
|
+
gem.summary = %Q{An RDIO client/server plugin for Robut}
|
21
|
+
gem.description = %Q{}
|
22
|
+
gem.email = "ampearson@gmail.com"
|
23
|
+
gem.authors = ["Adam Pearson"]
|
24
|
+
# dependencies defined in Gemfile
|
25
|
+
end
|
26
|
+
Jeweler::RubygemsDotOrgTasks.new
|
27
|
+
|
28
|
+
require 'rspec/core'
|
29
|
+
require 'rspec/core/rake_task'
|
30
|
+
RSpec::Core::RakeTask.new(:spec) do |spec|
|
31
|
+
spec.pattern = FileList['spec/**/*_spec.rb']
|
32
|
+
end
|
33
|
+
|
34
|
+
RSpec::Core::RakeTask.new(:rcov) do |spec|
|
35
|
+
spec.pattern = 'spec/**/*_spec.rb'
|
36
|
+
spec.rcov = true
|
37
|
+
end
|
38
|
+
|
39
|
+
task :default => :spec
|
40
|
+
|
41
|
+
require 'rake/rdoctask'
|
42
|
+
Rake::RDocTask.new do |rdoc|
|
43
|
+
version = File.exist?('VERSION') ? File.read('VERSION') : ""
|
44
|
+
|
45
|
+
rdoc.rdoc_dir = 'rdoc'
|
46
|
+
rdoc.title = "robut-rdio #{version}"
|
47
|
+
rdoc.rdoc_files.include('README*')
|
48
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
49
|
+
end
|
50
|
+
|
51
|
+
desc 'Run plugin in a simulated Robut environment'
|
52
|
+
task :shell do
|
53
|
+
load 'plugin-tester.rb'
|
54
|
+
end
|
data/VERSION
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
0.1.0
|
data/lib/robut-rdio.rb
ADDED
@@ -0,0 +1,174 @@
|
|
1
|
+
require 'robut'
|
2
|
+
require_relative 'server/server'
|
3
|
+
require 'rdio'
|
4
|
+
|
5
|
+
# A plugin that hooks into Rdio, allowing you to queue songs from
|
6
|
+
# HipChat. +key+ and +secret+ must be set before we can deal with any
|
7
|
+
# Rdio commands. Additionally, you must call +start_server+ in your
|
8
|
+
# Chatfile to start the Rdio web server.
|
9
|
+
class Robut::Plugin::Rdio
|
10
|
+
include Robut::Plugin
|
11
|
+
|
12
|
+
class << self
|
13
|
+
# Your Rdio API Key
|
14
|
+
attr_accessor :key
|
15
|
+
|
16
|
+
# Your Rdio API app secret
|
17
|
+
attr_accessor :secret
|
18
|
+
|
19
|
+
# The port the Rdio web player will run on. Defaults to 4567.
|
20
|
+
attr_accessor :port
|
21
|
+
|
22
|
+
# The host the Rdio web player will run on. Defaults to localhost.
|
23
|
+
attr_accessor :host
|
24
|
+
|
25
|
+
# The playback token for +domain+. If you're accessing Rdio on
|
26
|
+
# localhost, you shouldn't need to change this. Otherwise,
|
27
|
+
# download the rdio-python plugin:
|
28
|
+
#
|
29
|
+
# https://github.com/rdio/rdio-python
|
30
|
+
#
|
31
|
+
# and generate a new token for your domain:
|
32
|
+
#
|
33
|
+
# ./rdio-call --consumer-key=YOUR_CONSUMER_KEY --consumer-secret=YOUR_CONSUMER_SECRET getPlaybackToken domain=YOUR_DOMAIN
|
34
|
+
attr_accessor :token
|
35
|
+
|
36
|
+
# The domain associated with +token+. Defaults to localhost.
|
37
|
+
attr_accessor :domain
|
38
|
+
end
|
39
|
+
|
40
|
+
# Starts a Robut::Plugin::Rdio::Server server for communicating with
|
41
|
+
# the actual Rdio web player. You must call this in the Chatfile if
|
42
|
+
# you plan on using this gem.
|
43
|
+
def self.start_server
|
44
|
+
@server = Thread.new { Server.run! :host => (host || "localhost"), :port => (port || 4567) }
|
45
|
+
Server.token = self.token || "GAlNi78J_____zlyYWs5ZG02N2pkaHlhcWsyOWJtYjkyN2xvY2FsaG9zdEbwl7EHvbylWSWFWYMZwfc="
|
46
|
+
Server.domain = self.domain || "localhost"
|
47
|
+
end
|
48
|
+
|
49
|
+
# Returns a description of how to use this plugin
|
50
|
+
def usage
|
51
|
+
[
|
52
|
+
"#{at_nick} play <song> - queues <song> for playing",
|
53
|
+
"#{at_nick} play album <album> - queues <album> for playing",
|
54
|
+
"#{at_nick} play track <track> - queues <track> for playing",
|
55
|
+
"#{at_nick} play/unpause - unpauses the track that is currently playing",
|
56
|
+
"#{at_nick} next - move to the next track",
|
57
|
+
"#{at_nick} restart - restart the current track"
|
58
|
+
]
|
59
|
+
end
|
60
|
+
|
61
|
+
# Queues songs into the Rdio web player. @nick play search query
|
62
|
+
# will queue the first search result matching 'search query' into
|
63
|
+
# the web player. It can be an artist, album, or song.
|
64
|
+
def handle(time, sender_nick, message)
|
65
|
+
::Rdio.init(self.class.key, self.class.secret)
|
66
|
+
words = words(message)
|
67
|
+
|
68
|
+
if sent_to_me?(message)
|
69
|
+
if words.join(' ') =~ /^(play)?\s?(result)?\s?\d/
|
70
|
+
play_result(words.last.to_i)
|
71
|
+
elsif words.first == 'play' and words.length > 1
|
72
|
+
results = search(words)
|
73
|
+
result = results.first
|
74
|
+
if result
|
75
|
+
queue(result)
|
76
|
+
else
|
77
|
+
reply("I couldn't find #{words.join(" ")} on Rdio.")
|
78
|
+
end
|
79
|
+
elsif words.join(' ') =~ /(find|do you have(\sany)?)\s?(.+[^?])\??/
|
80
|
+
find(['',Regexp.last_match[-1]])
|
81
|
+
else words.first =~ /play|(?:un)?pause|next|restart|back|clear/
|
82
|
+
run_command(words.first)
|
83
|
+
end
|
84
|
+
|
85
|
+
end
|
86
|
+
end
|
87
|
+
|
88
|
+
def results
|
89
|
+
@@results
|
90
|
+
end
|
91
|
+
|
92
|
+
private
|
93
|
+
RESULT_DISPLAYER = {
|
94
|
+
::Rdio::Album => lambda{|album| "#{album.artist.name} - #{album.name}"},
|
95
|
+
::Rdio::Track => lambda{|track| "#{track.artist.name} - #{track.album.name} - #{track.name}"}
|
96
|
+
}
|
97
|
+
|
98
|
+
def run_command(command)
|
99
|
+
Server.command << command
|
100
|
+
end
|
101
|
+
|
102
|
+
def find(query)
|
103
|
+
reply("Searching for: #{query[1..-1].join(' ')}...")
|
104
|
+
@@results = search(query)
|
105
|
+
|
106
|
+
result_display = format_results(@@results)
|
107
|
+
reply(result_display)
|
108
|
+
end
|
109
|
+
|
110
|
+
def format_results(results)
|
111
|
+
result_display = ""
|
112
|
+
results.each_with_index do |result, index|
|
113
|
+
result_display += format_result(result, index) + "\n"
|
114
|
+
end
|
115
|
+
result_display
|
116
|
+
end
|
117
|
+
|
118
|
+
def play_result(number)
|
119
|
+
if !has_results?
|
120
|
+
reply("I don't have any search results") and return
|
121
|
+
end
|
122
|
+
|
123
|
+
if !has_result?(number)
|
124
|
+
reply("I don't have that result") and return
|
125
|
+
end
|
126
|
+
|
127
|
+
queue result_at(number)
|
128
|
+
end
|
129
|
+
|
130
|
+
def has_results?
|
131
|
+
@@results && @@results.any?
|
132
|
+
end
|
133
|
+
|
134
|
+
def has_result?(number)
|
135
|
+
!@@results[number].nil?
|
136
|
+
end
|
137
|
+
|
138
|
+
def result_at(number)
|
139
|
+
@@results[number]
|
140
|
+
end
|
141
|
+
|
142
|
+
def queue(result)
|
143
|
+
Server.queue << result.key
|
144
|
+
name = result.name
|
145
|
+
name = "#{result.artist_name} - #{name}" if result.respond_to?(:artist_name) && result.artist_name
|
146
|
+
reply("Queuing: #{name}")
|
147
|
+
end
|
148
|
+
|
149
|
+
|
150
|
+
def format_result(search_result, index)
|
151
|
+
response = RESULT_DISPLAYER[search_result.class].call(search_result)
|
152
|
+
puts response
|
153
|
+
"#{index}: #{response}"
|
154
|
+
end
|
155
|
+
|
156
|
+
# Searches Rdio for sources matching +words+. If the first word is
|
157
|
+
# 'track', it only searches tracks, same for 'album'. Otherwise,
|
158
|
+
# matches both albums and tracks.
|
159
|
+
def search(words)
|
160
|
+
api = ::Rdio::Api.new(self.class.key, self.class.secret)
|
161
|
+
|
162
|
+
if words[1] == "album"
|
163
|
+
query_string = words[2..-1].join(' ')
|
164
|
+
results = api.search(query_string, "Album")
|
165
|
+
elsif words[1] == "track"
|
166
|
+
query_string = words[2..-1].join(' ')
|
167
|
+
results = api.search(query_string, "Track")
|
168
|
+
else
|
169
|
+
query_string = words[1..-1].join(' ')
|
170
|
+
results = api.search(query_string, "Album,Track")
|
171
|
+
end
|
172
|
+
end
|
173
|
+
|
174
|
+
end
|
@@ -0,0 +1,141 @@
|
|
1
|
+
|
2
|
+
#content {
|
3
|
+
margin: 16px 120px;
|
4
|
+
}
|
5
|
+
|
6
|
+
body {
|
7
|
+
background-color: #bbb;
|
8
|
+
background: url('/images/background.png');
|
9
|
+
}
|
10
|
+
|
11
|
+
h1, h2 {
|
12
|
+
background-color: #fff;
|
13
|
+
text-rendering: optimizeLegibility;
|
14
|
+
padding: 8px 12px;
|
15
|
+
display: none;
|
16
|
+
}
|
17
|
+
|
18
|
+
h1 {
|
19
|
+
font-size: 2.2em;
|
20
|
+
margin-bottom: 24px;
|
21
|
+
}
|
22
|
+
|
23
|
+
h2 {
|
24
|
+
clear: left;
|
25
|
+
font-size: 1.8em;
|
26
|
+
-moz-border-radius-topleft: 4px;
|
27
|
+
-moz-border-radius-topright: 4px;
|
28
|
+
-moz-border-radius-bottomright: 0px;
|
29
|
+
-moz-border-radius-bottomleft: 0px;
|
30
|
+
border-top-left-radius: 4px;
|
31
|
+
border-top-right-radius: 4px;
|
32
|
+
border-bottom-right-radius: 0px;
|
33
|
+
border-bottom-left-radius: 0px;
|
34
|
+
}
|
35
|
+
|
36
|
+
#player {
|
37
|
+
margin-bottom: 32px;
|
38
|
+
}
|
39
|
+
|
40
|
+
#player:after {
|
41
|
+
content: " ";
|
42
|
+
display: block;
|
43
|
+
height: 0;
|
44
|
+
clear: both;
|
45
|
+
visibility: hidden;
|
46
|
+
}
|
47
|
+
|
48
|
+
#filter {
|
49
|
+
background: none; /* Old browsers */
|
50
|
+
|
51
|
+
background: -webkit-gradient(linear, 0 0, 0 100%,
|
52
|
+
color-stop(0, rgba(255,255,255,0.30)),
|
53
|
+
color-stop(0.5, rgba(255,255,255,0.25)),
|
54
|
+
color-stop(0.5, rgba(255,255,255,0.1)),
|
55
|
+
color-stop(1, rgba(255,255,255,0.30)));
|
56
|
+
|
57
|
+
position: absolute;
|
58
|
+
top: 0px;
|
59
|
+
left: 0px;
|
60
|
+
height: 200px;
|
61
|
+
width: 200px;
|
62
|
+
}
|
63
|
+
|
64
|
+
#controls {
|
65
|
+
position: relative;
|
66
|
+
width: 200px;
|
67
|
+
float: left;
|
68
|
+
min-height: 200px;
|
69
|
+
}
|
70
|
+
|
71
|
+
#controls img {
|
72
|
+
-webkit-box-shadow: 0px 3px 4px #666;
|
73
|
+
-moz-box-shadow: 0px 3px 4px #666;
|
74
|
+
box-shadow: 0px 3px 4px #666;
|
75
|
+
}
|
76
|
+
|
77
|
+
#controls img, #controls #filter, h1 {
|
78
|
+
-moz-border-radius: 4px;
|
79
|
+
border-radius: 4px;
|
80
|
+
}
|
81
|
+
|
82
|
+
ul {
|
83
|
+
margin: 0px;
|
84
|
+
list-style-type: none;
|
85
|
+
margin-bottom: 24px;
|
86
|
+
}
|
87
|
+
|
88
|
+
#now_playing {
|
89
|
+
margin-left: 220px;
|
90
|
+
}
|
91
|
+
|
92
|
+
li, h1, h2 {
|
93
|
+
text-shadow: 0px 1px 1px #ffffff;
|
94
|
+
filter: dropshadow(color=#ffffff, offx=0, offy=1);
|
95
|
+
background: #eeeeee; /* Old browsers */
|
96
|
+
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
|
97
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
|
98
|
+
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
|
99
|
+
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera11.10+ */
|
100
|
+
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
|
101
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
|
102
|
+
background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */
|
103
|
+
}
|
104
|
+
|
105
|
+
li, h2, h1 {
|
106
|
+
border: 1px solid #989898;
|
107
|
+
}
|
108
|
+
|
109
|
+
li, h2 {
|
110
|
+
border-bottom-width: 0px;
|
111
|
+
}
|
112
|
+
|
113
|
+
li {
|
114
|
+
padding: 8px;
|
115
|
+
font-weight: bold;
|
116
|
+
}
|
117
|
+
|
118
|
+
li:last-child {
|
119
|
+
border-bottom-width: 1px;
|
120
|
+
}
|
121
|
+
|
122
|
+
li.playing {
|
123
|
+
border-color: #007cf9;
|
124
|
+
background: #7abcff; /* Old browsers */
|
125
|
+
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
|
126
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
|
127
|
+
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
|
128
|
+
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera11.10+ */
|
129
|
+
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
|
130
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
|
131
|
+
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
|
132
|
+
color: #fff;
|
133
|
+
text-shadow: 0px -1px 1px #777777;
|
134
|
+
filter: dropshadow(color=#777777, offx=0, offy=-1);
|
135
|
+
}
|
136
|
+
|
137
|
+
li.playing+li {
|
138
|
+
border-top-color: #007cf9;
|
139
|
+
}
|
140
|
+
|
141
|
+
|
@@ -0,0 +1,79 @@
|
|
1
|
+
|
2
|
+
/* ==== Scroll down to find where to put your styles :) ==== */
|
3
|
+
|
4
|
+
/* HTML5 ✰ Boilerplate */
|
5
|
+
|
6
|
+
html, body, div, span, object, iframe,
|
7
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
8
|
+
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
|
9
|
+
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
|
10
|
+
fieldset, form, label, legend,
|
11
|
+
table, caption, tbody, tfoot, thead, tr, th, td,
|
12
|
+
article, aside, canvas, details, figcaption, figure,
|
13
|
+
footer, header, hgroup, menu, nav, section, summary,
|
14
|
+
time, mark, audio, video {
|
15
|
+
margin: 0;
|
16
|
+
padding: 0;
|
17
|
+
border: 0;
|
18
|
+
font-size: 100%;
|
19
|
+
font: inherit;
|
20
|
+
vertical-align: baseline;
|
21
|
+
}
|
22
|
+
|
23
|
+
article, aside, details, figcaption, figure,
|
24
|
+
footer, header, hgroup, menu, nav, section {
|
25
|
+
display: block;
|
26
|
+
}
|
27
|
+
|
28
|
+
blockquote, q { quotes: none; }
|
29
|
+
blockquote:before, blockquote:after,
|
30
|
+
q:before, q:after { content: ''; content: none; }
|
31
|
+
ins { background-color: #ff9; color: #000; text-decoration: none; }
|
32
|
+
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
|
33
|
+
del { text-decoration: line-through; }
|
34
|
+
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
|
35
|
+
table { border-collapse: collapse; border-spacing: 0; }
|
36
|
+
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
|
37
|
+
input, select { vertical-align: middle; }
|
38
|
+
|
39
|
+
body { font:13px/1.231 sans-serif; *font-size:small; }
|
40
|
+
select, input, textarea, button { font:99% sans-serif; }
|
41
|
+
pre, code, kbd, samp { font-family: monospace, sans-serif; }
|
42
|
+
|
43
|
+
html { overflow-y: scroll; }
|
44
|
+
a:hover, a:active { outline: none; }
|
45
|
+
ul, ol { margin-left: 2em; }
|
46
|
+
ol { list-style-type: decimal; }
|
47
|
+
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
|
48
|
+
small { font-size: 85%; }
|
49
|
+
strong, th { font-weight: bold; }
|
50
|
+
td { vertical-align: top; }
|
51
|
+
|
52
|
+
sub, sup { font-size: 75%; line-height: 0; position: relative; }
|
53
|
+
sup { top: -0.5em; }
|
54
|
+
sub { bottom: -0.25em; }
|
55
|
+
|
56
|
+
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
|
57
|
+
textarea { overflow: auto; }
|
58
|
+
.ie6 legend, .ie7 legend { margin-left: -7px; }
|
59
|
+
input[type="radio"] { vertical-align: text-bottom; }
|
60
|
+
input[type="checkbox"] { vertical-align: bottom; }
|
61
|
+
.ie7 input[type="checkbox"] { vertical-align: baseline; }
|
62
|
+
.ie6 input { vertical-align: text-bottom; }
|
63
|
+
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
|
64
|
+
button, input, select, textarea { margin: 0; }
|
65
|
+
input:valid, textarea:valid { }
|
66
|
+
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
|
67
|
+
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
|
68
|
+
|
69
|
+
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
|
70
|
+
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
|
71
|
+
a:link { -webkit-tap-highlight-color: #FF5E99; }
|
72
|
+
|
73
|
+
button { width: auto; overflow: visible; }
|
74
|
+
.ie7 img { -ms-interpolation-mode: bicubic; }
|
75
|
+
|
76
|
+
body, select, input, textarea { color: #444; }
|
77
|
+
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
|
78
|
+
a, a:active, a:visited { color: #607890; }
|
79
|
+
a:hover { color: #036; }
|