<!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; } .glow { left: 0; right: 0; bottom: 30px; height: 8px; opacity: .4; position: absolute; background: -webkit-gradient(linear, left bottom, left top, from(white), to(transparent)); } .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; } .videocontrols { bottom: 0; left: 0; z-index: 999; height: 30px; opacity: .9; right: 0; position: absolute; background: -webkit-gradient(linear, left top, left bottom, from(#323232), to(#070707)); } .sliderback { bottom: 12px; left: 93px; right: 120px; height: 5px; position: absolute; -webkit-border-radius: 3px; background: -webkit-gradient(linear, left top, left bottom, from(#ced9fa), to(#e8ecf9)); border: 1px solid #ffffff; } .sliderplayed { height: 100%; width:0; left: -1px; top: -1px; -webkit-border-radius: 3px; border: 1px solid #9ca5b7; position: absolute; background: -webkit-gradient(linear, left top, left bottom, from(#4a5d84), to(#232c3d)); } .sliderloaded { height: 100%; width:0; left: -1px; top: -1px; -webkit-border-radius: 3px; position: absolute; background: #6a799a; border: 1px solid #ffffff; } .audiocontrols { bottom: 0; left: 0; z-index: 999; height: 30px; opacity: .9; right: 0; position: absolute; background: -webkit-gradient(linear, left top, left bottom, from(#323232), to(#070707)); } .soundbutton { position: absolute; right: 30px; cursor: pointer; bottom: 0; z-index: 9999; width: 28px; background: url('../../app/theme/mediaplayer_vol_high.png'); background-repeat: no-repeat; background-position: 6px 8px; height: 30px; border-left: 1px solid #424242; border-right: 1px solid black; } .volume { position: absolute; bottom: 30px; height: 80px; width: 30px; right: 30px; z-index: 99999; background: black; background: -webkit-gradient(linear, left top, left bottom, from(#323232), to(#070707)); } .fullscreen { position: absolute; right: 60px; cursor: pointer; bottom: 0; z-index: 9999; width: 28px; background: url('../../app/theme/mediaplayer_full_screen.png'); background-repeat: no-repeat; background-position: 8px 8px; height: 30px; border-left: 1px solid #424242; border-right: 1px solid black; } .volumeslider { -webkit-appearance: slider-vertical; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .playbutton { position: absolute; left: 30px; bottom: 0; cursor: pointer; z-index: 9999; width: 28px; background: url('../../app/theme/mediaplayer_play.png'); background-repeat: no-repeat; background-position: 9px 8px; height: 30px; border-left: 1px solid #424242; border-right: 1px solid black; } .pausebutton { position: absolute; left: 30px; bottom: 0; cursor: pointer; z-index: 9999; width: 28px; height: 30px; background: url('../../app/theme/mediaplayer_pause.png'); background-repeat: no-repeat; background-position: 11px 8px; border-left: 1px solid #424242; border-right: 1px solid black; } .prevbutton { position: absolute; left: 0; cursor: pointer; bottom: 0; width: 29px; height: 30px; background: url('../../app/theme/mediaplayer_prev.png'); background-repeat: no-repeat; background-position: 6px 8px; border-right: 1px solid black; } .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; cursor: pointer; bottom: 0; z-index: 9999; width: 28px; height: 30px; background: url('../../app/theme/mediaplayer_next.png'); background-repeat: no-repeat; background-position: 6px 8px; border-left: 1px solid #424242; border-right: 1px solid black; } .playlistbutton { position: absolute; right: 0; cursor: pointer; z-index: 9999; bottom: 0; width: 28px; height: 30px; background: url('../../app/theme/mediaplayer_playlist.png'); background-repeat: no-repeat; background-position: 6px 8px; border-left: 1px solid #424242; border-right: 1px solid black; } </style> <script src='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. */ function load() { chrome.send('getCurrentPlaylist', []); }; var videoPlaybackElement = null; var audioPlaybackElement = null; var currentPlaylist = null; var currentItem = -1; 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) { chrome.send('playbackError', ['Error playing back']); onMediaComplete(); }; function onMediaComplete() { 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); currentItem ++; if (currentItem >= currentPlaylist.length) { currentItem = -1; return; } 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); }; 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 toggleVolumeVisible() { var volume_div = $('volume'); if (volume_div.style.display == 'none') { volume_div.style.display = 'block'; } else { volume_div.style.display = 'none'; } }; function volumeChange() { var volumeslider = $('volumeslider'); var element = getMediaElement(); element.volume = (volumeslider.value/100); }; function setupPlaybackControls() { var element = $('playercontrols'); playercontrols.innerHTML = ''; // clear out other var controlsclass = ''; if (videoPlaybackElement != null) { controlsclass = 'video'; element.className = 'videocontrols'; } else if (audioPlaybackElement != null) { controlsclass = 'audio'; element.className = 'audiocontrols'; } var playbutton = document.createElement('div'); playbutton.id = 'playbutton'; playbutton.className = controlsclass + ' playbutton'; playbutton.onclick = playPauseButtonClick; element.appendChild(playbutton); var pausebutton = document.createElement('div'); pausebutton.id = 'pausebutton'; pausebutton.className = controlsclass + ' pausebutton'; pausebutton.onclick = playPauseButtonClick; element.appendChild(pausebutton); var nextbutton = document.createElement('div'); nextbutton.id = 'nextbutton'; nextbutton.className = controlsclass + ' nextbutton'; nextbutton.onclick = nextButtonClick; element.appendChild(nextbutton); var prevbutton = document.createElement('div'); prevbutton.id = 'prevbutton'; prevbutton.className = controlsclass + ' prevbutton'; prevbutton.onclick = prevButtonClick; element.appendChild(prevbutton); var playlistbutton = document.createElement('div'); playlistbutton.id = 'playlistbutton'; playlistbutton.className = 'playlistbutton'; playlistbutton.onclick = togglePlaylist; 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 + ' soundbutton'; soundbutton.onclick = toggleVolumeVisible; element.appendChild(soundbutton); var fullscreen = document.createElement('div'); fullscreen.id = 'fullscreen'; fullscreen.className = controlsclass + ' fullscreen'; fullscreen.onclick = toggleFullscreen; element.appendChild(fullscreen); var volume = document.createElement('div'); volume.id = 'volume'; volume.className = controlsclass + ' volume'; volume.style.display = 'none'; var volumeslider = document.createElement('input'); volumeslider.type = 'range'; volumeslider.id = 'volumeslider'; volumeslider.className = 'volumeslider'; volumeslider.onchange = volumeChange; volume.appendChild(volumeslider); document.body.appendChild(volume); var duration = document.createElement('div'); duration.id = 'duration'; duration.className = 'duration'; element.appendChild(duration); }; function playAudioFile(uri) { if (videoPlaybackElement != null) { 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); } else { setupMediaEvents(audioPlaybackElement); audioPlaybackElement.src = uri; audioPlaybackElement.currentTime = 0; audioPlaybackElement.load(); audioPlaybackElement.play(); } }; function toggleFullscreen() { 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.currentTime = 0; videoPlaybackElement.load(); 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]; 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 || media.ended == true) { 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) { if (pathIsVideoFile(url) ) { playVideoFile(url); } else if(pathIsAudioFile(url)) { playAudioFile(url); } else { alert('file unknown'); } }; </script> <body onload='load();' onselectstart='return false'> <div id='glow' class='glow'></div> <div id='playercontrols' class='playercontrols'> </div> </body> </html>