Enable looping of videos in Files.app.

chrome/browser/resources/file_manager/js/media/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.
 
 'use strict';
 
 /**
  * @fileoverview MediaControls class implements media playback controls
  * that exist outside of the audio/video HTML element.
  */
@@ skipping 147 matching lines @@
     this.pause();
   else
     this.play();
 };
 
 /**
  * @param {HTMLElement=} opt_parent Parent container.
  */
 MediaControls.prototype.initPlayButton = function(opt_parent) {
   this.playButton_ = this.createButton('play media-control',
-      this.togglePlayState.bind(this), opt_parent, 3 /* States. */);
+      this.onPlayButtonClicked.bind(this), opt_parent, 3 /* States. */);
 };
 
 /*
  * Time controls
  */
 
 /**
  * The default range of 100 is too coarse for the media progress slider.
  */
 MediaControls.PROGRESS_RANGE = 5000;
@@ skipping 775 matching lines @@
         this.getValue(), MediaControls.PreciseSlider.HIDE_AFTER_DRAG_DELAY);
     this.latestMouseUpTime_ = Date.now();
   }
 };
 
 /**
  * Create video controls.
  *
  * @param {HTMLElement} containerElement The container for the controls.
  * @param {function} onMediaError Function to display an error message.
+ * @param {function(string):string} stringFunction Function providing localized
+ *     strings.
  * @param {function=} opt_fullScreenToggle Function to toggle fullscreen mode.
  * @param {HTMLElement=} opt_stateIconParent The parent for the icon that
  *     gives visual feedback when the playback state changes.
  * @constructor
  */
-function VideoControls(containerElement, onMediaError,
+function VideoControls(containerElement, onMediaError, stringFunction,
    opt_fullScreenToggle, opt_stateIconParent) {
   MediaControls.call(this, containerElement, onMediaError);
+  this.stringFunction_ = stringFunction;
 
   this.container_.classList.add('video-controls');
-
   this.initPlayButton();
-
   this.initTimeControls(true /* show seek mark */);
-
   this.initVolumeControls();
 
   if (opt_fullScreenToggle) {
     this.fullscreenButton_ =
         this.createButton('fullscreen', opt_fullScreenToggle);
   }
 
   if (opt_stateIconParent) {
     this.stateIcon_ = this.createControl(
         'playback-state-icon', opt_stateIconParent);
+    this.textBanner_ = this.createControl('text-banner', opt_stateIconParent);
   }
 
   var videoControls = this;
   chrome.mediaPlayerPrivate.onTogglePlayState.addListener(
       function() { videoControls.togglePlayStateWithFeedback(); });
 }
 
 /**
  * No resume if we are withing this margin from the start or the end.
  */
 VideoControls.RESUME_MARGIN = 0.03;
 
 /**
  * No resume for videos shorter than this.
  */
 VideoControls.RESUME_THRESHOLD = 5 * 60; // 5 min.
 
 /**
  * When resuming rewind back this much.
  */
 VideoControls.RESUME_REWIND = 5;  // seconds.
 
 VideoControls.prototype = { __proto__: MediaControls.prototype };
 
 /**
+ * Shows icon feedback for the current state of the video player.
+ * @private
+ */
+VideoControls.prototype.showIconFeedback_ = function() {
+  this.stateIcon_.removeAttribute('state');
+  setTimeout(function() {
+    this.stateIcon_.setAttribute('state', this.isPlaying() ? 'play' : 'pause');
+  }.bind(this), 0);
+};
+
+/**
+ * Shows a text banner.
+ *
+ * @param {string} identifier String identifier.
+ * @private
+ */
+VideoControls.prototype.showTextBanner_ = function(identifier) {
+  this.textBanner_.removeAttribute('visible');
+  this.textBanner_.textContent = this.stringFunction_(identifier);
+  setTimeout(function() {
+    this.textBanner_.setAttribute('visible', 'true');
+  }.bind(this), 0);
+};
+
+/**
+ * Toggle play/pause state on a mouse click on the play/pause button. Can be
+ * called externally.
+ *
+ * @param {Event} event Mouse click event.
+ */
+VideoControls.prototype.onPlayButtonClicked = function(event) {
+  if (event.ctrlKey) {
+    this.toggleLoopedModeWithFeedback(true);
+    if (!this.isPlaying())
+      this.togglePlayState();
+  } else {
+    this.togglePlayState();
+  }
+};
+
+/**
  * Media completion handler.
  */
 VideoControls.prototype.onMediaComplete = function() {
   this.onMediaPlay_(false);  // Just update the UI.
   this.savePosition();  // This will effectively forget the position.
 };
 
 /**
- * Toggle play/pause state and flash an icon over the video.
+ * Toggles the looped mode with feedback.
+ * @param {boolean} on Whether enabled or not.
+ */
+VideoControls.prototype.toggleLoopedModeWithFeedback = function(on) {
+  if (!this.getMedia().duration)
+    return;
+
+  this.toggleLoopedMode(on);
+  if (on)
+    this.showTextBanner_('GALLERY_VIDEO_LOOPED_MODE');
+};
+
+/**
+ * Toggles the looped mode.
+ * @param {boolean} on Whether enabled or not.
+ */
+VideoControls.prototype.toggleLoopedMode = function(on) {
+  this.getMedia().loop = on;
+};
+
+/**
+ * Toggles play/pause state and flash an icon over the video.
  */
 VideoControls.prototype.togglePlayStateWithFeedback = function() {
   if (!this.getMedia().duration)
     return;
 
   this.togglePlayState();
-
-  this.stateIcon_.removeAttribute('state');
-  setTimeout(function() {
-    this.stateIcon_.setAttribute('state', this.isPlaying() ? 'play' : 'pause');
-  }.bind(this), 0);
+  this.showIconFeedback_();
 };
 
 /**
- * Toggle play/pause state.
+ * Toggles play/pause state.
  */
 VideoControls.prototype.togglePlayState = function() {
   if (this.isPlaying()) {
-    // User gave the Pause command.
+    // User gave the Pause command. Save the state and reset the loop mode.
+    this.toggleLoopedMode(false);
     this.savePosition();
   }
   MediaControls.prototype.togglePlayState.apply(this, arguments);
 };
 
 /**
- * Save the playback position to the persistent storage.
+ * Saves the playback position to the persistent storage.
  * @param {boolean=} opt_sync True if the position must be saved synchronously
  *     (required when closing app windows).
  */
 VideoControls.prototype.savePosition = function(opt_sync) {
   if (!this.media_.duration ||
       this.media_.duration < VideoControls.RESUME_THRESHOLD) {
     return;
   }
 
   var ratio = this.media_.currentTime / this.media_.duration;
@@ skipping 13 matching lines @@
     // Pass the data to the background page.
     if (!window.saveOnExit)
       window.saveOnExit = [];
     window.saveOnExit.push({ key: this.media_.src, value: position });
   } else {
     util.AppCache.update(this.media_.src, position);
   }
 };
 
 /**
- * Resume the playback position saved in the persistent storage.
+ * Resumes the playback position saved in the persistent storage.
  */
 VideoControls.prototype.restorePlayState = function() {
   if (this.media_.duration >= VideoControls.RESUME_THRESHOLD) {
     util.AppCache.getValue(this.media_.src, function(position) {
       if (position)
         this.media_.currentTime = position;
     }.bind(this));
   }
 };
 
 /**
- * Update style to best fit the size of the container.
+ * Updates style to best fit the size of the container.
  */
 VideoControls.prototype.updateStyle = function() {
   // We assume that the video controls element fills the parent container.
   // This is easier than adding margins to this.container_.clientWidth.
   var width = this.container_.parentNode.clientWidth;
 
   // Set the margin to 5px for width >= 400, 0px for width < 160,
   // interpolate linearly in between.
   this.container_.style.margin =
       Math.ceil((Math.max(160, Math.min(width, 400)) - 160) / 48) + 'px';
 
   var hideBelow = function(selector, limit) {
     this.container_.querySelector(selector).style.display =
         width < limit ? 'none' : '-webkit-box';
   }.bind(this);
 
   hideBelow('.time', 350);
   hideBelow('.volume', 275);
   hideBelow('.volume-controls', 210);
   hideBelow('.fullscreen', 150);
 };
 
 /**
- * Create audio controls.
+ * Creates audio controls.
  *
  * @param {HTMLElement} container Parent container.
  * @param {function(boolean)} advanceTrack Parameter: true=forward.
  * @param {function} onError Error handler.
  * @constructor
  */
 function AudioControls(container, advanceTrack, onError) {
   MediaControls.call(this, container, onError);
 
   this.container_.classList.add('audio-controls');
@@ skipping 36 matching lines @@
 AudioControls.prototype.onAdvanceClick_ = function(forward) {
   if (!forward &&
       (this.getMedia().currentTime > AudioControls.TRACK_RESTART_THRESHOLD)) {
     // We are far enough from the beginning of the current track.
     // Restart it instead of than skipping to the previous one.
     this.getMedia().currentTime = 0;
   } else {
     this.advanceTrack_(forward);
   }
 };