Implementing full screen mode for video player in Chrome OS File Browser.

chrome/browser/resources/file_manager/js/image_editor/media_controls.js

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview MediaControls class implements media playback controls
  * that exist outside of the audio/video HTML element.
  */
 
 /**
  * @param {HTMLMediaElement} mediaElement The media element to control.
  * @param {HTMLElement} containerElement The container for the controls.
+ * @param {function} fullScreenToggle Function to toggle the fullscreen mode.
  * @constructor
  */
-function MediaControls(mediaElement, containerElement) {
+function MediaControls(mediaElement, containerElement, fullScreenToggle) {
   this.media_ = mediaElement;
   this.container_ = containerElement;
   this.document_ = this.container_.ownerDocument;
 
-  this.setupPlaybackControls_();
+  this.setupPlaybackControls_(fullScreenToggle);
 
   this.setupMediaEvents_();
 }
 
 /**
  * Load the given url into the media element.
  *
  * @param {string} url
  */
 MediaControls.prototype.load = function(url) {
@@ skipping 59 matching lines @@
   return button;
 };
 
 // The default range of 100 is too coarse for the media progress slider.
 // 1000 should be enough as the entire media controls area is never longer
 // than 800px.
 MediaControls.PROGRESS_RANGE = 1000;
 
 /**
  * Create playback controls in DOM.
+ *
+ * @param {function} fullScreenToggle Function to toggle the fullscreen mode.
  */
-MediaControls.prototype.setupPlaybackControls_ = function() {
+MediaControls.prototype.setupPlaybackControls_ = function(fullScreenToggle) {
   this.playButton_ = this.createButton_(
       'play', this.onPlayButtonClick_.bind(this));
 
   this.progress_ = new MediaControls.Slider(
       this.createControl_('progress'),
       0, /* value */
       MediaControls.PROGRESS_RANGE);
 
   this.progress_.getContainer().addEventListener(
       'mousemove', this.onProgressMouseMove_.bind(this));
@@ skipping 27 matching lines @@
       100 /* range */);
   this.onVolumeChange_();
 
   this.volume_.getInput_().addEventListener(
       'change', this.onVolumeChange_.bind(this));
   this.volume_.getInput_().addEventListener(
       'mousedown', this.onVolumeMouseDown_.bind(this));
 
   this.volume_.setValue(this.media_.volume);
 
-  this.fullscreenButton_ = this.createButton_(
-      'fullscreen', this.onFullscreenButtonClick_.bind(this));
+  if (fullScreenToggle) {
+    this.fullscreenButton_ = this.createButton_('fullscreen', fullScreenToggle);
+  }
 };
 
 MediaControls.prototype.displayProgress_ = function(current, duration) {
   var ratio = current / duration;
   this.progress_.setFilled(ratio);
   this.progress_.setValue(ratio);
   this.currentTime_.textContent = MediaControls.formatTime_(current);
 };
 
 MediaControls.prototype.onPlayButtonClick_ = function() {
@@ skipping 110 matching lines @@
     this.soundButton_.classList.add('muted');
   }
 };
 
 MediaControls.prototype.onVolumeMouseDown_ = function () {
   if (this.media_.volume != 0) {
     this.savedVolume_ = this.media_.volume;
   }
 };
 
-MediaControls.prototype.onFullscreenButtonClick_ = function() {
-  this.fullscreenButton_.classList.toggle('on');
-  // TODO: invoke the actual full screen mode
-};
-
 /**
  * Attach media event handlers.
  */
 MediaControls.prototype.setupMediaEvents_ = function() {
   this.media_.addEventListener(
       'play', this.onMediaPlay_.bind(this, true));
   this.media_.addEventListener(
       'pause', this.onMediaPlay_.bind(this, false));
   this.media_.addEventListener(
       'durationchange', this.onMediaDuration_.bind(this));
@@ skipping 136 matching lines @@
 /**
  * Compute the proportion in which the given position divides the slider bar.
  *
  * @param {number} position in pixels.
  * @return {number} [0..1] proportion.
  */
 MediaControls.Slider.prototype.getProportion = function (position) {
   var rect = this.bar_.getBoundingClientRect();
   return Math.max(0, Math.min(1, (position - rect.left) / rect.width));
 };