Module: TLS::HTML
- Included in:
- Player
- Defined in:
- lib/the_little_streamer/html.rb
Instance Method Summary collapse
-
#audio(path) ⇒ Object
Audio tag.
- #css ⇒ Object
-
#link(root, path, text = path, params = {}) ⇒ Object
Create a link.
-
#page(body = nil) ⇒ Object
Wrap up in HTML.
-
#player_html(songs) ⇒ Object
Output HTML for player.
-
#playlist_html(songs) ⇒ Object
HTML for displaying playlist.
-
#playlist_js(songs) ⇒ Object
Javascript for playlist.
-
#prev_and_next ⇒ Object
Back/forward links.
- #search_box ⇒ Object
-
#song_info(song) ⇒ Object
HTML for song information header.
-
#song_to_js(song) ⇒ Object
Javascript for a song.
-
#title(artist, album = nil) ⇒ Object
Some navigation.
Instance Method Details
#audio(path) ⇒ Object
Audio tag
105 106 107 108 109 110 111 112 113 114 |
# File 'lib/the_little_streamer/html.rb', line 105 def audio path <<-HTML <audio id='player' onEnded='javascript:play_next()' src=#{("/" << URI.escape(path)).inspect} autobuffer controls autoplay > You need the power of HTML5! </audio> <script type="text/javascript"> document.getElementById('player').volume = 0.3; </script> HTML end |
#css ⇒ Object
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
# File 'lib/the_little_streamer/html.rb', line 32 def css @css ||= <<-CSS body { font-family: Helvetica,Verdana,Arial,sans-serif; font-size: 13pt; } span#title { font-size: 14pt; font-weight: bold; } span#artist { font-size: 14pt; font-weight: bold; } span#artist a { text-decoration: none; color: black; } span#artist a:hover { text-decoration: underline; } span#album { font-style: italic; } span#album a { text-decoration: none; color: black; } span#album a:hover { text-decoration: underline; } div#playlist { float: left; margin-top: 15px; height: 80%; overflow: auto; text-align: left; } div#playerbox { float: left; text-align: center; } CSS @css end |
#link(root, path, text = path, params = {}) ⇒ Object
Create a link
89 90 91 92 93 |
# File 'lib/the_little_streamer/html.rb', line 89 def link root, path, text = path, params = {} full_path = root.split('/').map! {|r| URI.escape r }.join('/') << "/" << URI.escape(path) params = params.map { |k, v| "#{k}=#{v}" }.join "&" "<a href=\"#{full_path}?#{params}\">#{text}</a>" end |
#page(body = nil) ⇒ Object
Wrap up in HTML
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
# File 'lib/the_little_streamer/html.rb', line 3 def page body = nil if block_given? body = yield end <<-HTML <html> <head> <style type="text/css"> #{css} </style> <title>The Little Streamer</title> </head> <body> #{body} </body> <script> if(document.getElementById('artist')) { window.onload = function() { var artist = document.getElementById('artist').firstChild.innerText; var title = document.getElementById('title').innerHTML; document.title = title + " by " + artist; } } </script> </html> HTML end |
#player_html(songs) ⇒ Object
Output HTML for player
196 197 198 199 200 201 202 203 204 205 206 207 |
# File 'lib/the_little_streamer/html.rb', line 196 def player_html songs page <<-HTML <div id="playerbox"> #{song_info songs.first}<br/> #{audio songs.first.path}<br/> #{prev_and_next if songs.length > 1} #{playlist_js songs} #{playlist_html songs if songs.length > 1} <div style="clear:both">#{link "/", "", "Back to All Music"}</div> </div> HTML end |
#playlist_html(songs) ⇒ Object
HTML for displaying playlist
117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
# File 'lib/the_little_streamer/html.rb', line 117 def playlist_html songs list = [] songs.each_with_index do |song, i| list << "<li><a href=\"javascript:play_index(#{i})\">#{song.artist} - #{song.title}</a></li>" end <<-HTML <div style="clear:both"> </div> <div id="playlist"> <ol> #{list.join} </ol> </div> HTML end |
#playlist_js(songs) ⇒ Object
Javascript for playlist
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
# File 'lib/the_little_streamer/html.rb', line 135 def playlist_js songs <<-JAVASCRIPT <script type="text/javascript"> var player = document.getElementById('player'); var artist = document.getElementById('artist'); var album = document.getElementById('album'); var title = document.getElementById('title'); var playlist = [#{songs.map { |s| song_to_js s }.join "," }] var current_song = 0; play_next = function(reverse) { if(reverse && current_song > 0) current_song--; else if(!reverse && current_song < playlist.length) current_song++; else return; play_current(); } play_current = function() { var song = playlist[current_song]; player.src = song.path; artist.innerHTML = song.artist album.innerHTML = song.album title.innerHTML = song.title document.title = song.title + " by " + artist.firstChild.innerText; player.play(); } play_index = function(index) { current_song = index; play_current(); } </script> JAVASCRIPT end |
#prev_and_next ⇒ Object
Back/forward links
190 191 192 193 |
# File 'lib/the_little_streamer/html.rb', line 190 def prev_and_next @prev_and_next ||= "<a href='javascript:play_next(true)'>Prev</a> <a href='javascript:play_next()'>Next</a>" @prev_and_next end |
#search_box ⇒ Object
209 210 211 212 213 214 215 216 217 218 |
# File 'lib/the_little_streamer/html.rb', line 209 def search_box <<-HTML <div id="searchbox"> <form action="/search"> <label for="search">Search:</label> <input type="text" /> </form> </div> HTML end |
#song_info(song) ⇒ Object
HTML for song information header
185 186 187 |
# File 'lib/the_little_streamer/html.rb', line 185 def song_info song "<span id='title'>#{song.title}</span> by <span id='artist'>#{link "/artist/", song.artist}</span><br/><span id='album'>#{link "/artist/#{song.artist}/album", song.album}</span>" end |
#song_to_js(song) ⇒ Object
Javascript for a song
175 176 177 178 179 180 181 182 |
# File 'lib/the_little_streamer/html.rb', line 175 def song_to_js song <<-JAVASCRIPT { artist: #{link("/artist", song.artist, song.artist).inspect}, album: #{link("/artist/#{song.artist}/album/", song.album, song.album).inspect}, title: #{song.title.inspect}, path: #{(CGI.escapeHTML "/" << CGI.escape(song.path)).inspect} } JAVASCRIPT end |
#title(artist, album = nil) ⇒ Object
Some navigation
96 97 98 99 100 101 102 |
# File 'lib/the_little_streamer/html.rb', line 96 def title artist, album = nil if album "<h3>#{link "/", "", "Music"} : #{link "/artist/", artist, artist} : #{album}</h3>" else "<h3>#{link "/", "", "Music"} : #{artist}</h3>" end end |