playlist.html - Android社区 - https://www.androidos.net.cn/

<!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>