Index: chrome/browser/resources/video_player/js/video_player.js |
diff --git a/chrome/browser/resources/video_player/js/video_player.js b/chrome/browser/resources/video_player/js/video_player.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..3843a8aa03a3bfd08a3d7f068badaad8a51fdaaa |
--- /dev/null |
+++ b/chrome/browser/resources/video_player/js/video_player.js |
@@ -0,0 +1,217 @@ |
+// Copyright 2014 The Chromium Authors. All rights reserved. |
+// Use of this source code is governed by a BSD-style license that can be |
+// found in the LICENSE file. |
+ |
+'use strict'; |
+ |
+/** |
+ * Displays error message. |
+ * @param {string} message Message id. |
+ */ |
+function showErrorMessage(message) { |
+ var errorBanner = document.querySelector('#error'); |
+ errorBanner.textContent = |
+ loadTimeData.getString(message); |
+ errorBanner.setAttribute('visible', 'true'); |
+ |
+ // The window is hidden if the video has not loaded yet. |
+ chrome.app.window.current().show(); |
+} |
+ |
+/** |
+ * Handles playback (decoder) errors. |
+ */ |
+function onPlaybackError() { |
+ showErrorMessage('GALLERY_VIDEO_DECODING_ERROR'); |
+ decodeErrorOccured = true; |
+ |
+ // Disable inactivity watcher, and disable the ui, by hiding tools manually. |
+ controls.inactivityWatcher.disabled = true; |
+ document.querySelector('#video-player').setAttribute('disabled', 'true'); |
+ |
+ // Detach the video element, since it may be unreliable and reset stored |
+ // current playback time. |
+ controls.cleanup(); |
+ controls.clearState(); |
+ |
+ // Avoid reusing a video element. |
+ video.parentNode.removeChild(video); |
+ video = null; |
+} |
+ |
+/** |
+ * @param {Element} playerContainer Main container. |
+ * @param {Element} videoContainer Container for the video element. |
+ * @param {Element} controlsContainer Container for video controls. |
+ * @constructor |
+ */ |
+function FullWindowVideoControls( |
+ playerContainer, videoContainer, controlsContainer) { |
+ VideoControls.call(this, |
+ controlsContainer, |
+ onPlaybackError, |
+ loadTimeData.getString.bind(loadTimeData), |
+ this.toggleFullScreen_.bind(this), |
+ videoContainer); |
+ |
+ this.playerContainer_ = playerContainer; |
+ |
+ this.updateStyle(); |
+ window.addEventListener('resize', this.updateStyle.bind(this)); |
+ |
+ document.addEventListener('keydown', function(e) { |
+ if (e.keyIdentifier == 'U+0020') { // Space |
+ this.togglePlayStateWithFeedback(); |
+ e.preventDefault(); |
+ } |
+ if (e.keyIdentifier == 'U+001B') { // Escape |
+ util.toggleFullScreen( |
+ chrome.app.window.current(), |
+ false); // Leave the full screen mode. |
+ e.preventDefault(); |
+ } |
+ }.bind(this)); |
+ |
+ // TODO(mtomasz): Simplify. crbug.com/254318. |
+ videoContainer.addEventListener('click', function(e) { |
+ if (e.ctrlKey) { |
+ this.toggleLoopedModeWithFeedback(true); |
+ if (!this.isPlaying()) |
+ this.togglePlayStateWithFeedback(); |
+ } else { |
+ this.togglePlayStateWithFeedback(); |
+ } |
+ }.bind(this)); |
+ |
+ this.inactivityWatcher_ = new MouseInactivityWatcher(playerContainer); |
+ this.__defineGetter__('inactivityWatcher', function() { |
+ return this.inactivityWatcher_; |
+ }); |
+ |
+ this.inactivityWatcher_.check(); |
+ |
+ Object.seal(this); |
+} |
+ |
+FullWindowVideoControls.prototype = { __proto__: VideoControls.prototype }; |
+ |
+/** |
+ * Toggles the full screen mode. |
+ * @private |
+ */ |
+FullWindowVideoControls.prototype.toggleFullScreen_ = function() { |
+ var appWindow = chrome.app.window.current(); |
+ util.toggleFullScreen(appWindow, !util.isFullScreen(appWindow)); |
+}; |
+ |
+// TODO(mtomasz): Convert it to class members: crbug.com/171191. |
+var decodeErrorOccured; |
+var video; |
+var controls; |
+ |
+/** |
+ * Initializes the video player window. |
+ */ |
+function loadVideoPlayer() { |
+ document.ondragstart = function(e) { e.preventDefault() }; |
+ |
+ chrome.fileBrowserPrivate.getStrings(function(strings) { |
+ loadTimeData.data = strings; |
+ |
+ var url = window.videoUrl; |
+ document.title = window.videoTitle; |
+ |
+ controls = new FullWindowVideoControls( |
+ document.querySelector('#video-player'), |
+ document.querySelector('#video-container'), |
+ document.querySelector('#controls')); |
+ |
+ var reloadVideo = function(e) { |
+ if (decodeErrorOccured && |
+ // Ignore shortcut keys |
+ !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) { |
+ loadVideo(url); |
+ e.preventDefault(); |
+ } |
+ }; |
+ |
+ loadVideo(url); |
+ document.addEventListener('keydown', reloadVideo, true); |
+ document.addEventListener('click', reloadVideo, true); |
+ }); |
+} |
+ |
+/** |
+ * Unloads the player. |
+ */ |
+function unload() { |
+ if (!controls.getMedia()) |
+ return; |
+ |
+ controls.savePosition(true /* exiting */); |
+ controls.cleanup(); |
+} |
+ |
+/** |
+ * Reloads the player. |
+ * @param {string} url URL of the video file. |
+ */ |
+function loadVideo(url) { |
+ // Re-enable ui and hide error message if already displayed. |
+ document.querySelector('#video-player').removeAttribute('disabled'); |
+ document.querySelector('#error').removeAttribute('visible'); |
+ controls.inactivityWatcher.disabled = false; |
+ decodeErrorOccured = false; |
+ |
+ // Detach the previous video element, if exists. |
+ if (video) |
+ video.parentNode.removeChild(video); |
+ |
+ video = document.createElement('video'); |
+ document.querySelector('#video-container').appendChild(video); |
+ controls.attachMedia(video); |
+ |
+ video.src = url; |
+ video.load(); |
+ video.addEventListener('loadedmetadata', function() { |
+ // TODO: chrome.app.window soon will be able to resize the content area. |
+ // Until then use approximate title bar height. |
+ var TITLE_HEIGHT = 33; |
+ |
+ var aspect = video.videoWidth / video.videoHeight; |
+ var newWidth = video.videoWidth; |
+ var newHeight = video.videoHeight + TITLE_HEIGHT; |
+ |
+ var shrinkX = newWidth / window.screen.availWidth; |
+ var shrinkY = newHeight / window.screen.availHeight; |
+ if (shrinkX > 1 || shrinkY > 1) { |
+ if (shrinkY > shrinkX) { |
+ newHeight = newHeight / shrinkY; |
+ newWidth = (newHeight - TITLE_HEIGHT) * aspect; |
+ } else { |
+ newWidth = newWidth / shrinkX; |
+ newHeight = newWidth / aspect + TITLE_HEIGHT; |
+ } |
+ } |
+ |
+ var oldLeft = window.screenX; |
+ var oldTop = window.screenY; |
+ var oldWidth = window.outerWidth; |
+ var oldHeight = window.outerHeight; |
+ |
+ if (!oldWidth && !oldHeight) { |
+ oldLeft = window.screen.availWidth / 2; |
+ oldTop = window.screen.availHeight / 2; |
+ } |
+ |
+ var appWindow = chrome.app.window.current(); |
+ appWindow.resizeTo(newWidth, newHeight); |
+ appWindow.moveTo(oldLeft - (newWidth - oldWidth) / 2, |
+ oldTop - (newHeight - oldHeight) / 2); |
+ appWindow.show(); |
+ |
+ video.play(); |
+ }); |
+} |
+ |
+util.addPageLoadHandler(loadVideoPlayer); |