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">
7body {
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
58function $(o) {
59  return document.getElementById(o);
60}
61
62function pathIsVideoFile(path) {
63  return /\.(mp4|ogg|mpg|avi)$/i.test(path);
64};
65
66function 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
76var currentPlaylist = null;
77var currentOffset = -1;
78function 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
88function 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
98function setPlaylistOffset(offset) {
99  chrome.send("setCurrentPlaylistOffset", ['' + offset]);
100};
101
102function 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
142function 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>
153