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 |