B2G/gaia/shared/js/media/media_frame.js
/*
 * media_frame.js:
 *
 * A MediaFrame displays a photo or a video. The gallery app uses
 * three side by side to support smooth panning from one item to the
 * next.  The Camera app uses one for image and video preview. The
 * Gallery app's open activity uses one of these to display the opened
 * item.
 *
 * MediaFrames have different behavior depending on whether they display
 * images or videos. Photo frames allow the user to zoom and pan on the photo.
 * Video frames allow the user to play and pause but don't allow zooming.
 *
 * When a frame is displaying a video, it handles mouse events.
 * When display a picture, however, it expects the client to handle events
 * and call the pan() and zoom() methods.
 *
 * The pan() method is a little unusual. It "uses" as much of the pan
 * event as it can, and returns a number indicating how much of the
 * horizontal motion it did not use. The gallery uses this returned
 * value for transitioning between frames.  If a frame displays a
 * photo that is not zoomed in at all, then it can't use any of the
 * pan, and returns the full amount which the gallery app turns into a
 * panning motion between frames.  But if the photo is zoomed in, then
 * the MediaFrame will just move the photo within itself, if it can, and
 * return 0.
 *
 * Much of the code in this file used to be part of the PhotoState class.
 */
media_frame.js:
A MediaFrame displays a photo or a video. The gallery app uses
three side by side to support smooth panning from one item to the
next.  The Camera app uses one for image and video preview. The
Gallery app's open activity uses one of these to display the opened
item.

MediaFrames have different behavior depending on whether they display
images or videos. Photo frames allow the user to zoom and pan on the photo.
Video frames allow the user to play and pause but don't allow zooming.

When a frame is displaying a video, it handles mouse events.
When display a picture, however, it expects the client to handle events
and call the pan() and zoom() methods.

The pan() method is a little unusual. It "uses" as much of the pan
event as it can, and returns a number indicating how much of the
horizontal motion it did not use. The gallery uses this returned
value for transitioning between frames.  If a frame displays a
photo that is not zoomed in at all, then it can't use any of the
pan, and returns the full amount which the gallery app turns into a
panning motion between frames.  But if the photo is zoomed in, then
the MediaFrame will just move the photo within itself, if it can, and
return 0.

Much of the code in this file used to be part of the PhotoState class.
media_frame . js : A MediaFrame displays a photo or a video . The gallery app uses three side by side to support smooth panning from one item to the next . The Camera app uses one for image and video preview . The Gallery app ' s open activity uses one of these to display the opened item . MediaFrames have different behavior depending on whether they display images or videos . Photo frames allow the user to zoom and pan on the photo . Video frames allow the user to play and pause but don ' t allow zooming . When a frame is displaying a video it handles mouse events . When display a picture however it expects the client to handle events and call the pan () and zoom () methods . The pan () method is a little unusual . It " uses " as much of the pan event as it can and returns a number indicating how much of the horizontal motion it did not use . The gallery uses this returned value for transitioning between frames . If a frame displays a photo that is not zoomed in at all then it can ' t use any of the pan and returns the full amount which the gallery app turns into a panning motion between frames . But if the photo is zoomed in then the MediaFrame will just move the photo within itself if it can and return 0 . Much of the code in this file used to be part of the PhotoState class .
function MediaFrame(container, includeVideo) {
  if (typeof container === 'string')
    container = document.getElementById(container);
  this.container = container;
  this.image = document.createElement('img');
  this.container.appendChild(this.image);
  this.image.style.display = 'none';
  if (includeVideo !== false) {
    this.video = new VideoPlayer(container);
    this.video.hide();
  }
  this.displayingVideo = false;
  this.displayingImage = false;
  this.imageblob = null;
  this.previewblob = null;
  this.videoblob = null;
  this.posterblob = null;
  this.url = null;
  var self = this;
  this.image.onerror = function(e) {
    if (self.onerror)
      self.onerror(e);
  };
}
function MediaFrame ( container , includeVideo ) { if ( typeof container === 'string' ) container = document . getElementById ( container ) ; this . container = container ; this . image = document . createElement ( 'img' ) ; this . container . appendChild ( this . image ) ; this . image . style . display = 'none' ; if ( includeVideo !== false ) { this . video = new VideoPlayer ( container ) ; this . video . hide ( ) ; } this . displayingVideo = false ; this . displayingImage = false ; this . imageblob = null ; this . previewblob = null ; this . videoblob = null ; this . posterblob = null ; this . url = null ; var self = this ; this . image . onerror = function ( e ) { if ( self . onerror ) self . onerror ( e ) ; } ; }
media_frame.js:
 A MediaFrame displays a photo or a video.
media_frame . js : A MediaFrame displays a photo or a video .