| <!DOCTYPE HTML> |
| <html i18n-values="dir:textdirection;"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Media Playlist</title> |
| <style type="text/css"> |
| body { |
| background: #080809; |
| } |
| |
| .playlist { |
| width: 100%; |
| height: 100%; |
| background: #080809; |
| color: #8AACE7; |
| font-size: .7em; |
| position: absolute; |
| top: 0; |
| left: 0; |
| } |
| |
| .playlistitem { |
| width: 100%; |
| padding: 6px; |
| cursor: pointer; |
| } |
| |
| .playing { |
| background: #393b41; |
| color: #dddde7; |
| font-weight: bold; |
| } |
| |
| .tracknum { |
| width: 20px; |
| position: relative; |
| float: left; |
| } |
| |
| .title { |
| |
| } |
| |
| .innertitle { |
| text-decoration: line-through; |
| } |
| |
| .error { |
| color: red; |
| float: left; |
| padding-right: 5px; |
| } |
| |
| </style> |
| <script src="shared/js/local_strings.js"></script> |
| <script> |
| |
| function $(o) { |
| return document.getElementById(o); |
| } |
| |
| function pathIsVideoFile(path) { |
| return /\.(mp4|ogg|mpg|avi)$/i.test(path); |
| }; |
| |
| function pathIsAudioFile(path) { |
| return /\.(mp3|m4a)$/i.test(path); |
| }; |
| |
| /////////////////////////////////////////////////////////////////////////////// |
| // Document Functions: |
| /** |
| * Window onload handler, sets up the page. |
| */ |
| |
| var currentPlaylist = null; |
| var currentOffset = -1; |
| function load() { |
| document.body.addEventListener('dragover', function(e) { |
| if (e.preventDefault) e.preventDefault(); |
| }); |
| document.body.addEventListener('drop', function(e) { |
| if (e.preventDefault) e.preventDefault(); |
| }); |
| chrome.send("getCurrentPlaylist", []); |
| }; |
| |
| function getDisplayNameFromPath(path) { |
| slash = path.lastIndexOf("/") |
| if (slash != -1) { |
| fileName = path.substring(slash+1,path.length) |
| return fileName; |
| } else { |
| return path; |
| } |
| }; |
| |
| function setPlaylistOffset(offset) { |
| chrome.send("setCurrentPlaylistOffset", ['' + offset]); |
| }; |
| |
| function updateUI() { |
| var main = $('main'); |
| if (currentPlaylist) { |
| main.innerHTML = ''; |
| var main = $('main'); |
| for (var x = 0; x < currentPlaylist.length; x++) { |
| var rowdiv = document.createElement('div'); |
| rowdiv.className = 'playlistitem'; |
| |
| var numberdiv = document.createElement('div'); |
| numberdiv.className = 'tracknum'; |
| numberdiv.textContent = '' + (x + 1); |
| rowdiv.appendChild(numberdiv); |
| |
| var titlediv = document.createElement('div'); |
| if (currentPlaylist[x].error) { |
| var errormark = document.createElement('div'); |
| errormark.className = 'error'; |
| errormark.textContent = 'X'; |
| var innertitle = document.createElement('div'); |
| innertitle.className = 'innertitle'; |
| innertitle.textContent = |
| decodeURI(getDisplayNameFromPath(currentPlaylist[x].path)); |
| titlediv.appendChild(errormark); |
| titlediv.appendChild(innertitle); |
| } else { |
| titlediv.className = 'title'; |
| titlediv.textContent = |
| decodeURI(getDisplayNameFromPath(currentPlaylist[x].path)); |
| } |
| rowdiv.appendChild(titlediv); |
| rowdiv.onclick = new Function('setPlaylistOffset(' + x + ')'); |
| if (currentOffset == x) { |
| rowdiv.className = 'playlistitem playing'; |
| } |
| main.appendChild(rowdiv); |
| } |
| } |
| }; |
| |
| function playlistChanged(info, playlist) { |
| currentPlaylist = playlist; |
| currentOffset = info.currentOffset; |
| updateUI(); |
| }; |
| </script> |
| <body onload='load();' onselectstart='return false'> |
| <div id='main' class='playlist'> |
| </div> |
| </body> |
| </html> |
