| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE HTML> | |
| 2 <html i18n-values="dir:textdirection;"> | |
| 3 <head> | |
| 4 <meta charset="utf-8"> | |
| 5 <title>Media Playlist</title> | |
| 6 <style type="text/css"> | |
| 7 body { | |
| 8 background: #080809; | |
| 9 } | |
| 10 | |
| 11 .playlist { | |
| 12 width: 100%; | |
| 13 height: 100%; | |
| 14 background: #080809; | |
| 15 color: #8AACE7; | |
| 16 font-size: .7em; | |
| 17 position: absolute; | |
| 18 top: 0; | |
| 19 left: 0; | |
| 20 } | |
| 21 | |
| 22 .playlistitem { | |
| 23 width: 100%; | |
| 24 padding: 6px; | |
| 25 cursor: pointer; | |
| 26 } | |
| 27 | |
| 28 .playing { | |
| 29 background: #393b41; | |
| 30 color: #dddde7; | |
| 31 font-weight: bold; | |
| 32 } | |
| 33 | |
| 34 .tracknum { | |
| 35 width: 20px; | |
| 36 position: relative; | |
| 37 float: left; | |
| 38 } | |
| 39 | |
| 40 .title { | |
| 41 | |
| 42 } | |
| 43 | |
| 44 .innertitle { | |
| 45 text-decoration: line-through; | |
| 46 } | |
| 47 | |
| 48 .error { | |
| 49 color: red; | |
| 50 float: left; | |
| 51 padding-right: 5px; | |
| 52 } | |
| 53 | |
| 54 </style> | |
| 55 <script src="shared/js/local_strings.js"></script> | |
| 56 <script> | |
| 57 | |
| 58 function $(o) { | |
| 59 return document.getElementById(o); | |
| 60 } | |
| 61 | |
| 62 function pathIsVideoFile(path) { | |
| 63 return /\.(mp4|ogg|mpg|avi)$/i.test(path); | |
| 64 }; | |
| 65 | |
| 66 function pathIsAudioFile(path) { | |
| 67 return /\.(mp3|m4a)$/i.test(path); | |
| 68 }; | |
| 69 | |
| 70 /////////////////////////////////////////////////////////////////////////////// | |
| 71 // Document Functions: | |
| 72 /** | |
| 73 * Window onload handler, sets up the page. | |
| 74 */ | |
| 75 | |
| 76 var currentPlaylist = null; | |
| 77 var currentOffset = -1; | |
| 78 function load() { | |
| 79 document.body.addEventListener('dragover', function(e) { | |
| 80 if (e.preventDefault) e.preventDefault(); | |
| 81 }); | |
| 82 document.body.addEventListener('drop', function(e) { | |
| 83 if (e.preventDefault) e.preventDefault(); | |
| 84 }); | |
| 85 chrome.send("getCurrentPlaylist", []); | |
| 86 }; | |
| 87 | |
| 88 function getDisplayNameFromPath(path) { | |
| 89 slash = path.lastIndexOf("/") | |
| 90 if (slash != -1) { | |
| 91 fileName = path.substring(slash+1,path.length) | |
| 92 return fileName; | |
| 93 } else { | |
| 94 return path; | |
| 95 } | |
| 96 }; | |
| 97 | |
| 98 function setPlaylistOffset(offset) { | |
| 99 chrome.send("setCurrentPlaylistOffset", ['' + offset]); | |
| 100 }; | |
| 101 | |
| 102 function updateUI() { | |
| 103 var main = $('main'); | |
| 104 if (currentPlaylist) { | |
| 105 main.innerHTML = ''; | |
| 106 var main = $('main'); | |
| 107 for (var x = 0; x < currentPlaylist.length; x++) { | |
| 108 var rowdiv = document.createElement('div'); | |
| 109 rowdiv.className = 'playlistitem'; | |
| 110 | |
| 111 var numberdiv = document.createElement('div'); | |
| 112 numberdiv.className = 'tracknum'; | |
| 113 numberdiv.textContent = '' + (x + 1); | |
| 114 rowdiv.appendChild(numberdiv); | |
| 115 | |
| 116 var titlediv = document.createElement('div'); | |
| 117 if (currentPlaylist[x].error) { | |
| 118 var errormark = document.createElement('div'); | |
| 119 errormark.className = 'error'; | |
| 120 errormark.textContent = 'X'; | |
| 121 var innertitle = document.createElement('div'); | |
| 122 innertitle.className = 'innertitle'; | |
| 123 innertitle.textContent = | |
| 124 decodeURI(getDisplayNameFromPath(currentPlaylist[x].path)); | |
| 125 titlediv.appendChild(errormark); | |
| 126 titlediv.appendChild(innertitle); | |
| 127 } else { | |
| 128 titlediv.className = 'title'; | |
| 129 titlediv.textContent = | |
| 130 decodeURI(getDisplayNameFromPath(currentPlaylist[x].path)); | |
| 131 } | |
| 132 rowdiv.appendChild(titlediv); | |
| 133 rowdiv.onclick = new Function('setPlaylistOffset(' + x + ')'); | |
| 134 if (currentOffset == x) { | |
| 135 rowdiv.className = 'playlistitem playing'; | |
| 136 } | |
| 137 main.appendChild(rowdiv); | |
| 138 } | |
| 139 } | |
| 140 }; | |
| 141 | |
| 142 function playlistChanged(info, playlist) { | |
| 143 currentPlaylist = playlist; | |
| 144 currentOffset = info.currentOffset; | |
| 145 updateUI(); | |
| 146 }; | |
| 147 </script> | |
| 148 <body onload='load();' onselectstart='return false'> | |
| 149 <div id='main' class='playlist'> | |
| 150 </div> | |
| 151 </body> | |
| 152 </html> | |
| OLD | NEW |