browser/resources/mediaplayer.html

<!DOCTYPE HTML>
<html i18n-values="dir:textdirection;">
<head>
<meta charset="utf-8">
<title>Media Player</title>
<style type="text/css">

body {
  overflow: hidden;
  background: black;
}

.error {
  left: 0;
  right: 0;
  color: white;
  bottom: 38px;
  position: absolute;
}

.glow {
  left: 0;
  right: 0;
  bottom: 30px;
  height: 8px;
  opacity: .4;
  position: absolute;
  background: -webkit-linear-gradient(transparent, white);
}

.audiotitle {
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
  color: white;
  top: 100px;
}

.progress {
  -webkit-appearance: sliderthumb-horizontal;
  position: absolute;
  background: transparent;
  left: 93px;
  right: 120px;
  bottom: -2px;
  height: 30px;
  z-index: 99999;
  border-left: 1px solid #424242;
}

.playercontrolsbox {
  bottom: 0;
  left: 0;
  height: 30px;
  right: 0;
  position: absolute;
}

.videocontrols {
  top: 0;
  left: 0;
  z-index: 999;
  height: 100%;
  opacity: .9;
  right: 0;
  position: absolute;
  background: -webkit-linear-gradient(#323232, #070707);
}

.sliderback {
  bottom: 12px;
  left: 93px;
  right: 120px;
  height: 5px;
  position: absolute;
  border-radius: 3px;
  background: -webkit-linear-gradient(#ced9fa, #e8ecf9);
  border: 1px solid #ffffff;
}

.sliderplayed {
  height: 100%;
  width:0;
  left: -1px;
  top: -1px;
  border-radius: 3px;
  border: 1px solid #9ca5b7;
  position: absolute;
  background: -webkit-linear-gradient(#4a5d84, #232c3d);
}

.sliderloaded {
  height: 100%;
  width:0;
  left: -1px;
  top: -1px;
  border-radius: 3px;
  position: absolute;
  background: #6a799a;
  border: 1px solid #ffffff;
}

.audiocontrols {
  top: 0;
  left: 0;
  z-index: 999;
  height: 100%;
  opacity: .9;
  right: 0;
  position: absolute;
  background: -webkit-linear-gradient(#323232, #070707);
}

.soundbutton {
  position: absolute;
  right: 30px;
  bottom: 0;
  border-left: 1px solid #424242;
  border-right: 1px solid black;
}

.soundiconhigh {
  background: url('shared/images/mediaplayer_vol_high.png');
}

.soundiconmuted {
  background: url('shared/images/mediaplayer_vol_mute.png');
}

.soundiconhigh,
.soundiconmuted {
  background-repeat: no-repeat;
  background-position: 6px 8px;
}

.volume {
  position: absolute;
  bottom: 30px;
  height: 80px;
  width: 30px;
  right: 30px;
  z-index: 99999;
  background: black;
  background: -webkit-linear-gradient(#323232, #070707);
}

.fullscreen {
  position: absolute;
  right: 60px;
  bottom: 0;
  border-left: 1px solid #424242;
  border-right: 1px solid black;
}

.fullscreenicon {
  background: url('shared/images/mediaplayer_full_screen.png');
  background-repeat: no-repeat;
  background-position: 6px 8px;
}

.fullscreenexiticon {
  background: url('shared/images/mediaplayer_full_screen_exit.png');
  background-repeat: no-repeat;
  background-position: 6px 8px;
}

.volumeslider {
  -webkit-appearance: slider-vertical;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.playbutton {
  position: absolute;
  left: 30px;
  bottom: 0;
  border-left: 1px solid #424242;
  border-right: 1px solid black;
}

.playicon {
  background: url('shared/images/mediaplayer_play.png');
  background-repeat: no-repeat;
  background-position: 9px 8px;
}

.pausebutton {
  position: absolute;
  left: 30px;
  bottom: 0;
  border-left: 1px solid #424242;
  border-right: 1px solid black;
}

.pauseicon {
  background: url('shared/images/mediaplayer_pause.png');
  background-repeat: no-repeat;
  background-position: 9px 8px;
}

.prevbutton {
  position: absolute;
  left: 0;
  bottom: 0;
  border-right: 1px solid black;
}

.previcon {
  background: url('shared/images/mediaplayer_prev.png');
  background-repeat: no-repeat;
  background-position: 6px 8px;
}

.playbackvideoelement {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.duration {
  right: 90px;
  color: white;
  position: absolute;
  top: 8.5px;
  font-size: .6em;
  height: 30px;
}

.playbackaudioelement {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.nextbutton {
  position: absolute;
  left: 60px;
  bottom: 0;
  border-left: 1px solid #424242;
  border-right: 1px solid black;
}

.nexticon {
  background: url('shared/images/mediaplayer_next.png');
  background-repeat: no-repeat;
  background-position: 6px 8px;
}

.playlistbutton {
  position: absolute;
  right: 0;
  bottom: 0;
  border-left: 1px solid #424242;
  border-right: 1px solid black;
}

.playlisticon {
  background: url('shared/images/mediaplayer_playlist.png');
  background-repeat: no-repeat;
  background-position: 6px 8px;
}

.controlbutton {
  z-index: 9999;
  cursor: pointer;
  width: 28px;
  height: 30px;
}

.controlbutton:hover {
  background: -webkit-linear-gradient(#6a7eac, #000);
}

.icon {
  width: 100%;
  height: 100%;
  z-index: 9999;
}

</style>
<script src="shared/js/local_strings.js"></script>
<script src="shared/js/media_common.js"></script>
<script>

function $(o) {
  return document.getElementById(o);
}

var videoPlaybackElement = null;
var audioPlaybackElement = null;
var currentPlaylist = null;
var currentItem = -1;
var savedVolumeValue = 0;
var hideVolumeTimerId = 0;
var localStrings;
var fullScreen = false;

///////////////////////////////////////////////////////////////////////////////
// Document Functions:
/**
 * Window onload handler, sets up the page.
 */
function load() {
  document.body.addEventListener('dragover', function(e) {
    if (e.preventDefault) e.preventDefault();
  });
  document.body.addEventListener('drop', function(e) {
    if (e.preventDefault) e.preventDefault();
  });
  document.body.addEventListener('keydown', onkeydown);

  localStrings = new LocalStrings();
  chrome.send('getCurrentPlaylist', []);
}

function onMediaProgress() {
  var element = getMediaElement();
  var current = element.currentTime;
  var duration = element.duration;
  var progress = $('progress');
  progress.value = (current*100)/duration;
  var played = $('sliderplayed');
  played.style.width = '' + progress.value + '%';
  if (progress.value == 100) {
    onMediaComplete();
  }
}

function onLoadedProgress(e) {
  var element = $('sliderloaded');
  if (e.lengthComputable) {
    element.style.display = 'block';
    var percent = (e.loaded * 100) / e.total;
    element.style.width = '' + percent + '%';
  } else {
    element.style.display = 'none';
  }
}

function onMediaError(e) {
  console.log('Got new error');
  console.log(e);
  chrome.send('playbackError', ['Error playing back',
      currentPlaylist[currentItem].path]);
  if (currentPlaylist.length == 1) {
    $('error').textContent = localStrings.getString('errorstring');
  } else {
    chrome.send("showPlaylist", []);
  }
  onMediaComplete();
}

function onMediaComplete() {
  currentItem ++;
  if (currentItem >= currentPlaylist.length) {
    currentItem -= 1;
    var element = getMediaElement();
    if (!getMediaElement().error) {
      element.currentTime = 0;
      element.pause();
      onMediaProgress();
    }
    onMediaPause();
    return;
  }
  var mediaElement = getMediaElement();
  mediaElement.removeEventListener("progress", onLoadedProgress, true);
  mediaElement.removeEventListener("timeupdate", onMediaProgress, true);
  mediaElement.removeEventListener("durationchange", onMetadataAvail, true);
  // MediaElement.removeEventListener("ended", onMediaComplete, true);
  mediaElement.removeEventListener("play", onMediaPlay, true);
  mediaElement.removeEventListener("pause", onMediaPause, true);
  mediaElement.onerror = undefined;
  chrome.send('currentOffsetChanged', ['' + currentItem]);
  playMediaFile(currentPlaylist[currentItem].path);
}

function onMediaPlay() {
  var pausebutton = $('pausebutton');
  var playbutton = $('playbutton');
  pausebutton.style.display = 'block';
  playbutton.style.display = 'none';
}

function onMediaPause() {
  var pausebutton = $('pausebutton');
  var playbutton = $('playbutton');
  playbutton.style.display = 'block';
  pausebutton.style.display = 'none';
}

function setupMediaEvents(element) {
  element.addEventListener("progress", onLoadedProgress, true);
  element.addEventListener("timeupdate", onMediaProgress, true);
  element.addEventListener("durationchange", onMetadataAvail, true);
  // element.addEventListener("ended", onMediaComplete, true);
  element.onerror = onMediaError;
  element.addEventListener("play", onMediaPlay, true);
  element.addEventListener("pause", onMediaPause, true);
  element.oncontextmenu = function() {
     return false;
  };
}

function getMediaElement() {
  var mediaElement;
  if (videoPlaybackElement) {
    mediaElement = videoPlaybackElement;
  } else {
    mediaElement = audioPlaybackElement;
  }
  return mediaElement;
}

function playPauseButtonClick() {
  var mediaElement = getMediaElement();
  if (mediaElement.paused || mediaElement.ended) {
    mediaElement.play();
  } else {
    mediaElement.pause();
  }
}

function prevButtonClick() {
  var element = getMediaElement();
  if (element.currentTime > 6) {
    element.currentTime = 0;
    return;
  }
  currentItem --;
  if (currentItem < 0) {
    currentItem = -1;
    return;
  }
  chrome.send('currentOffsetChanged', ['' + currentItem]);
  playMediaFile(currentPlaylist[currentItem].path);
}

function nextButtonClick() {
  currentItem ++;
  if (currentItem >= currentPlaylist.length) {
    currentItem = -1;
    return;
  }
  chrome.send('currentOffsetChanged', ['' + currentItem]);
  playMediaFile(currentPlaylist[currentItem].path);
}

function userChangedProgress() {
  var val = $('progress').value;
  var element = getMediaElement();
  if (element.seekable && element.duration) {
    var current = (progress.value * element.duration)/100;
    element.currentTime = current;
  }
}

function changeVolumeVisibility(visible) {
  var volume = $('volume');
  volume.style.display = visible ? 'block' : 'none';
}

function showVolume() {
  if (hideVolumeTimerId) {
    clearTimeout(hideVolumeTimerId);
    hideVolumeTimerId = 0;
  }

  changeVolumeVisibility(true);
}

function hideVolume() {
  if (!hideVolumeTimerId)
    hideVolumeTimerId = setTimeout('changeVolumeVisibility(false)', 500);
}

function volumeChange() {
  var volumeslider = $('volumeslider');
  var element = getMediaElement();
  element.volume = (volumeslider.value/100);

  var soundicon = $('soundicon');
  soundicon.className = soundicon.className.replace(
      /soundicon.*/,
      element.volume > 0 ? 'soundiconhigh' : 'soundiconmuted');
}

function muteVolume(mute) {
  var volumeslider = $('volumeslider');
  var element = getMediaElement();
  if (mute) {
    savedVolumeValue = volumeslider.value;
    volumeslider.value = 0;
    volumeChange();
  } else {
    volumeslider.value = savedVolumeValue;
    volumeChange();
  }
}

function toggleVolumeMute() {
  muteVolume($('volumeslider').value != 0);
}

function getPathAndFilenameForPath(path) {
  return path.match(/(.*)[\/\\]([^\/\\]+)\.\w+$/);
}


var hidingControlsAnimation = null;

const INACTIVITY_TIMEOUT = 5000;
const INACTIVITY_CHECK_INTERVAL = 1000;
const ANIMATION_DURATION = 1500;
const ANIMATION_STEP = 50;

function HidingControlsAnimation() {
  this.offsetPercent = 0;
  this.recentActivity = Date.now();

  this.inactivityInterval = setInterval(this.checkInactivity.bind(this),
                                        INACTIVITY_CHECK_INTERVAL);

  this.onActivityClosure = this.onActivity.bind(this);
  document.body.addEventListener('mousemove', this.onActivityClosure);
  document.body.addEventListener('mousedown', this.onActivityClosure);
  document.body.addEventListener('keydown', this.onActivityClosure);
}

HidingControlsAnimation.prototype = {

    cleanup: function () {
      this.stopAnimation();
      clearInterval(this.inactivityInterval);
      document.body.removeEventListener('mousemove', this.onActivityClosure);
      document.body.removeEventListener('mousedown', this.onActivityClosure);
      document.body.removeEventListener('keydown', this.onActivityClosure);
    },

    onActivity: function() {
      this.recentActivity = Date.now();
      // If not fully visible, start sliding up (or reverse sliding down).
      if (this.offsetPercent != 0)
        this.startAnimation(-1);
    },

    checkInactivity: function() {
      if ((Date.now() - this.recentActivity) > INACTIVITY_TIMEOUT) {
      // If fully visible start sliding down.
      if (this.offsetPercent == 0)
          this.startAnimation(1);
      }
    },

    startAnimation: function (direction) {
      this.direction = direction;
      this.startOffset = this.offsetPercent;
      this.startTime = Date.now();
      if (!this.animationInterval)
        this.animationInterval = setInterval(this.doAnimation.bind(this),
                                             ANIMATION_STEP);
    },

    doAnimation: function () {
      var phase = (Date.now() - this.startTime) / ANIMATION_DURATION;

      var newOffsetPercent = this.startOffset + this.direction * phase * 100;

      if (newOffsetPercent <= 0) {
        this.offsetPercent = 0;
        this.stopAnimation();
      } else if (newOffsetPercent >= 100){
        this.offsetPercent = 100;
        this.stopAnimation();
      } else {
        this.offsetPercent = Math.round(newOffsetPercent);
      }

      $('playercontrols').style.top = this.offsetPercent + '%';
    },

    stopAnimation: function () {
      if (this.animationInterval) {
        clearInterval(this.animationInterval);
        this.animationInterval = null;
      }
    }
};

function setupPlaybackControls() {
  var element = $('playercontrols');
  playercontrols.innerHTML = ''; // clear out other
  var controlsclass = '';
  if (hidingControlsAnimation) {
    hidingControlsAnimation.cleanup();
    hidingControlsAnimation = null;
  }
  if (videoPlaybackElement != null) {
    controlsclass = 'video';
    element.className = 'videocontrols';
    hidingControlsAnimation = new HidingControlsAnimation();
  } else if (audioPlaybackElement != null) {
    controlsclass = 'audio';
    element.className = 'audiocontrols';
  }

  var playbutton = document.createElement('div');
  playbutton.id = 'playbutton';
  playbutton.className = controlsclass + ' controlbutton playbutton';
  playbutton.onclick = playPauseButtonClick;
  var playicon = document.createElement('div');
  playicon.className = 'icon playicon';
  playbutton.appendChild(playicon);
  element.appendChild(playbutton);


  var pausebutton = document.createElement('div');
  pausebutton.id = 'pausebutton';
  pausebutton.className = controlsclass + ' controlbutton pausebutton';
  pausebutton.onclick = playPauseButtonClick;
  var pauseicon = document.createElement('div');
  pauseicon.className = 'icon pauseicon';
  pausebutton.appendChild(pauseicon);
  element.appendChild(pausebutton);

  var nextbutton = document.createElement('div');
  nextbutton.id = 'nextbutton';
  nextbutton.className = controlsclass + ' controlbutton nextbutton';
  nextbutton.onclick = nextButtonClick;
  var nexticon = document.createElement('div');
  nexticon.className = 'icon nexticon';
  nextbutton.appendChild(nexticon);
  element.appendChild(nextbutton);

  var prevbutton = document.createElement('div');
  prevbutton.id = 'prevbutton';
  prevbutton.className = controlsclass + ' controlbutton prevbutton';
  prevbutton.onclick = prevButtonClick;
  var previcon = document.createElement('div');
  previcon.className = 'icon previcon';
  prevbutton.appendChild(previcon);
  element.appendChild(prevbutton);

  var playlistbutton = document.createElement('div');
  playlistbutton.id = 'playlistbutton';
  playlistbutton.className = ' controlbutton playlistbutton';
  playlistbutton.onclick = togglePlaylist;
  var playlisticon = document.createElement('div');
  playlisticon.className = 'icon playlisticon';
  playlistbutton.appendChild(playlisticon);
  element.appendChild(playlistbutton);

  var slider = document.createElement('input');
  slider.type = 'range';
  slider.id = 'progress';
  slider.className = controlsclass + ' progress';
  slider.onchange = userChangedProgress;
  element.appendChild(slider);

  var sliderback = document.createElement('div');
  sliderback.className = 'sliderback';
  element.appendChild(sliderback);

  var loaded = document.createElement('div');
  loaded.id = 'sliderloaded';
  loaded.className = 'sliderloaded';
  sliderback.appendChild(loaded);

  var played = document.createElement('div');
  played.id = 'sliderplayed';
  played.className = 'sliderplayed';
  sliderback.appendChild(played);

  var soundbutton = document.createElement('div');
  soundbutton.id = 'soundbutton';
  soundbutton.className = controlsclass + ' controlbutton soundbutton';
  soundbutton.onclick = toggleVolumeMute;
  soundbutton.onmouseover = showVolume;
  soundbutton.onmouseout = hideVolume;
  var soundicon = document.createElement('div');
  soundicon.id = 'soundicon';
  soundicon.className = 'icon soundiconhigh';
  soundbutton.appendChild(soundicon);
  element.appendChild(soundbutton);

  var fullscreen = document.createElement('div');
  fullscreen.id = 'fullscreen';
  fullscreen.className = controlsclass + ' controlbutton fullscreen';
  fullscreen.onclick = toggleFullscreen;
  var fullscreenicon = document.createElement('div');
  fullscreenicon.id = 'fullscreenicon';
  fullscreenicon.className = 'icon fullscreenicon';
  fullscreen.appendChild(fullscreenicon);
  element.appendChild(fullscreen);

  var volume = document.createElement('div');
  volume.id = 'volume';
  volume.className = controlsclass + ' volume';
  volume.style.display = 'none';
  volume.onmouseover = showVolume;
  volume.onmouseout = hideVolume;
  var volumeslider = document.createElement('input');
  volumeslider.type = 'range';
  volumeslider.id = 'volumeslider';
  volumeslider.className = 'volumeslider';
  volumeslider.onchange = volumeChange;
  volume.appendChild(volumeslider);
  document.body.appendChild(volume);
  volumeChange();

  var duration = document.createElement('div');
  duration.id = 'duration';
  duration.className = 'duration';
  element.appendChild(duration);
}

function playAudioFile(uri) {
  if (videoPlaybackElement != null) {
    videoPlaybackElement.onerror = undefined;
    document.body.removeChild(videoPlaybackElement);
    videoPlaybackElement = null;
  }
  if (audioPlaybackElement == null) {
    audioPlaybackElement = document.createElement('audio');
    audioPlaybackElement.className = 'playbackaudioelement';
    audioPlaybackElement.autoplay = true;
    audioPlaybackElement.controls = false;
    setupMediaEvents(audioPlaybackElement);
    audioPlaybackElement.src = uri;
    setupPlaybackControls();
    document.body.appendChild(audioPlaybackElement);
    var paths = getPathAndFilenameForPath(uri);
    $('title').textContent = decodeURI(paths[2]);
  } else {
    setupMediaEvents(audioPlaybackElement);
    audioPlaybackElement.src = uri;
    audioPlaybackElement.load();
    audioPlaybackElement.play();
    var paths = getPathAndFilenameForPath(uri);
    $('title').textContent = decodeURI(paths[2]);
  }
}

function onkeydown(event) {
  const ESCAPE_KEY_CODE = 27;
  const SPACE_KEY_CODE = 32;
  switch (event.keyCode) {
    case ESCAPE_KEY_CODE:
      if (fullScreen)
        toggleFullscreen();
      break;

    case SPACE_KEY_CODE:
      playPauseButtonClick();
      break;
  }
}

function toggleFullscreen() {
  fullScreen = !fullScreen;
  var fullscreenicon = $('fullscreenicon');
  if (fullScreen) {
    fullscreenicon.classList.remove('fullscreenicon');
    fullscreenicon.classList.add('fullscreenexiticon');
  }
  else {
    fullscreenicon.classList.remove('fullscreenexiticon');
    fullscreenicon.classList.add('fullscreenicon');
  }
  chrome.send('toggleFullscreen', ['']);
}

function onMetadataAvail() {
  var element = getMediaElement();
  var duration = element.duration;
  if (duration) {
    var durString = '' + Math.floor((duration / 60)) + ':' + (Math.floor(duration) % 60);
    var durDiv = $('duration');
    durDiv.textContent = durString;
  }
}

function playVideoFile(uri) {
  if (audioPlaybackElement != null) {
    document.body.removeChild(audioPlaybackElement);
    audioPlaybackElement = null;
  }
  if (videoPlaybackElement == null) {
    videoPlaybackElement = document.createElement('video');
    videoPlaybackElement.className = 'playbackvideoelement';
    videoPlaybackElement.autoplay = true;
    videoPlaybackElement.controls = false;
    setupMediaEvents(videoPlaybackElement);
    videoPlaybackElement.src = uri;
    videoPlaybackElement.load();
    var toggleButton = document.createElement('div');
    toggleButton.className = 'fullscreentoggle';
    toggleButton.id = 'fullscreentoggle';
    toggleButton.onclick = toggleFullscreen;
    document.body.appendChild(toggleButton);
    setupPlaybackControls();
    document.body.appendChild(videoPlaybackElement);
  } else {
    setupMediaEvents(videoPlaybackElement);
    videoPlaybackElement.src = uri;
    videoPlaybackElement.load();
    videoPlaybackElement.currentTime = 0;
    videoPlaybackElement.play();
  }
}

function stopAllPlayback() {
  var element = getMediaElement();
  if (element != null) {
    element.pause();
  }
}

function playlistChanged(info, playlist) {
  if (info.force) {
    currentPlaylist = playlist;
    stopAllPlayback();
    if (playlist.length >= 1) {
      if (info.currentOffset) {
        currentItem = info.currentOffset;
      } else {
        currentItem = 0;
      }
      var item = playlist[currentItem];
      chrome.send('currentOffsetChanged', ['' + currentItem]);
      playMediaFile(item.path);
    }
  } else {
    var media = getMediaElement();
    currentPlaylist = playlist;
    // Only need to handle the case where we are not playing
    // since if it is currently playing, it will just move
    // to the next file when the current is complete.
    if (media == null) {
      for (var x = 0; x < playlist.length; x++) {
        if (playlist[x].path == info.path) {
          // found the newly added item.
          currentItem = x;
          chrome.send('currentOffsetChanged', ['' + currentItem]);
          playMediaFile(playlist[x].path);
          return;
        }
      }
      if (playlist.length > 0) {
        currentItem = 0;
        chrome.send('currentOffsetChanged', ['' + currentItem]);
        playMediaFile(playlist[0].path);
      }
    }
  }
}

function togglePlaylist() {
  chrome.send("togglePlaylist", []);
}

function playMediaFile(url) {
  $('error').textContent = '';
  console.log('playfile '+url);
  $('title').textContent = '';
  if (pathIsVideoFile(url) ) {
    playVideoFile(url);
  } else if(pathIsAudioFile(url)) {
    playAudioFile(url);
  } else {
    alert('file unknown:' + url);
  }
}

</script>
<body onload='load();' onselectstart='return false'>
<div id='error' class='error'></div>
<div id='title' class='audiotitle'></div>
<div id='glow' class='glow'></div>
<div class='playercontrolsbox'>
  <div id='playercontrols'>
  </div>
</div>
</body>
</html>