Home | History | Annotate | Download | only in resources 
      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>
    153