From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- .../montage/ui/video-player.reel/video-player.js | 368 +++++++++++++++++++++ 1 file changed, 368 insertions(+) create mode 100755 node_modules/montage/ui/video-player.reel/video-player.js (limited to 'node_modules/montage/ui/video-player.reel/video-player.js') diff --git a/node_modules/montage/ui/video-player.reel/video-player.js b/node_modules/montage/ui/video-player.reel/video-player.js new file mode 100755 index 00000000..e2832ce0 --- /dev/null +++ b/node_modules/montage/ui/video-player.reel/video-player.js @@ -0,0 +1,368 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +"use strict"; +/** + @module montage/ui/video-player + @requires montage + @requires montage/ui/component + @requires core/logger + @requires core/event/action-event-listener + @requires ui/controller/media-controller +*/ +var Montage = require("montage").Montage, + Component = require("ui/component").Component, + logger = require("core/logger").logger("video-player"), + ActionEventListener = require("core/event/action-event-listener").ActionEventListener, + MediaController = require("ui/controller/media-controller").MediaController; +/** + @class module:montage/ui/video-player.VideoPlayer + */ +var VideoPlayer = exports.VideoPlayer = Montage.create(Component,/** @lends module:montage/ui/video-player.VideoPlayer# */ { + + /*----------------------------------------------------------------------------- + MARK: Constants + -----------------------------------------------------------------------------*/ +/** + The interval in milliseconds that the control panel is displayed without interaction before being hidden. + @type {number} + @default 5000 +*/ + CONTROL_SHOW_TIME: { enumerable: true, value: 5000, writable: false }, + /*----------------------------------------------------------------------------- + MARK: Element Getters + -----------------------------------------------------------------------------*/ + /** + The DIV element used to display the play button in the media controller. + @type {external:Element} + @default null + */ + playButton: { value: null, enumerable: false }, + + /** + The DIV element used to display the repeat button in the media controller. + @type {external:Element} + @default null + */ + repeatButton: { value: null, enumerable: false }, + + /** + The DIV element used to display the volume level in the media controller. + @type {external:Element} + @default null + */ + volumeLevel: { value: null, enumerable: false }, + + /** + The DIV element used to display the volume level in the media controller. + @type {external:Element} + @default null + */ + controls: { value: null, enumerable: false }, + + /** + The DIV element used to display the in the media controller. + @type {external:Element} + @default null + */ + fullScreenPanel: { value: null, enumerable: false }, + /** + Description TODO + @type {external:Element} + @default null + */ + fullScreenButton: { value: null, enumerable: false }, + + /*----------------------------------------------------------------------------- + MARK: Component References + -----------------------------------------------------------------------------*/ + /** + The DynamicText component used to display the currently playing track's playback position. + @type {module:montage/ui/dynamic-text.DynamicText} + @default null + */ + positionText: { value: null, enumerable: false }, /* montage/ui/dynamic-text */ + + /** + The DynamicText component used to display the currently playing track's duration. + @type {module:montage/ui/dynamic-text.DynamicText} + @default null + */ + durationText: { value: null, enumerable: false }, /* montage/ui/dynamic-text */ + + /** + The Slider component used to control the playback position. + @type {module:montage/ui/slider.Slider} + @default null + */ + slider: { value: null, enumerable: false }, /* montage/ui/slider */ + /*----------------------------------------------------------------------------- + MARK: Properties + -----------------------------------------------------------------------------*/ + /** + The MediaController instance used by the VideoPlayer. + @type {module:montage/ui/controller/media-controller.MediaController} + @default null + */ + controller: { value: null, enumerable: false }, /* montage/controller/media-controller */ + + /** + The source URL for the video. + @type {string} + @default null + */ + src: { value: null }, + /*----------------------------------------------------------------------------- + MARK: Actions + -----------------------------------------------------------------------------*/ + /*----------------------------------------------------------------------------- + MARK: UI Setters + -----------------------------------------------------------------------------*/ + /** + Determines whether video controls are hidden automatically. + @type {Boolean} + @default true + */ + autoHide: { value: true }, + + /** + Specifies whether the full screen video is supported. + @type {Boolean} + @default true + */ + supportsFullScreen: { value: true }, + +/** + @private +*/ + _isFullScreen: { value: false }, + + templateDidLoad: { + value: function() { + if(logger.isDebug) { + logger.debug("MediaController:templateDidLoad"); + } + Object.defineBinding(this.positionText, "value", { + boundObject: this.controller, + boundObjectPropertyPath: "position", + boundValueMutator: this._prettyTime + }); + Object.defineBinding(this.durationText, "value", { + boundObject: this.controller, + boundObjectPropertyPath: "duration", + boundValueMutator: this._prettyTime + }); + Object.defineBinding(this.slider, "maxValue", { + boundObject: this.controller, + boundObjectPropertyPath: "duration", + boundValueMutator: this._roundTime, + oneWay: false + }); + } + }, +/** + @private +*/ + _prettyTime: { + value: function(time) { + var sec, min, hour; + time = parseInt(time, 10); + if (isNaN(time) || time < 0) + return ""; + sec = time % 60; + min = Math.floor(time / 60) % 60; + hour = Math.floor(time / 3600); + return (hour > 0 ? hour + ":" : "") + (min < 10 ? "0"+min : min) + ":" + (sec < 10 ? "0"+sec : sec); + } + }, +/** + @private +*/ + _roundTime: { + value: function(time) { + return (time < 0 ? 0 : Math.floor(time)); + } + }, +/** + Description TODO + @function + @private + */ + handleMediaStateChange: { + value: function() { + this.needsDraw = true; + } + }, + /*----------------------------------------------------------------------------- + MARK: Interaction + -----------------------------------------------------------------------------*/ +/** + Description TODO + @private +*/ + _showControls: { + value: true, enumerable: false + }, +/** + Description TODO + @private +*/ + _hideControlsId: { + value: null, enumerable: false + }, +/** + Description TODO + @function + @private + */ + handleMouseup: { + value: function() { + this.showControlsForInterval(); + } + }, +/** + Description TODO + @function + @private + */ + handleTouchend: { + value: function() { + this.showControlsForInterval(); + } + }, +/** + Displays the video player controlls for the interval specified by the CONTROL_SHOW_TIME property. + @function + */ + showControlsForInterval: { + value: function() { + this._showControls = true; + this.needsDraw = true; + + var self = this; + var hideControls = function() { + self._showControls = false; + self._hideControlsId = null; + self.needsDraw = true; + } + + if (this._hideControlsId) { + window.clearTimeout(this._hideControlsId); + } + this._hideControlsId = window.setTimeout(hideControls, this.CONTROL_SHOW_TIME); + } + }, +/** + Toggles full-screen playback mode. + @function + */ + toggleFullScreen: { + value: function() { + if (this.supportsFullScreen) { + this._isFullScreen = !this._isFullScreen; + this.needsDraw = true; + } + } + }, +/** + @private +*/ + _installMediaEventListeners: { + value: function() { + this.controller.addEventListener("mediaStateChange", this, false); + } + }, +/** + @private +*/ + _installUserActionDetector: { + value: function() { + if (window.touch && this.autoHide) { + this.element.addEventListener("touchstart", this, false); + } else if (this.autoHide) { + this.element.addEventListener("mouseup", this, false); + } + } + }, +/** + @private + */ + prepareForDraw: { + value: function() { + this._installUserActionDetector(); + this.controller._installControlEventHandlers(); + this._installMediaEventListeners(); + + if (!this.autoHide) { + this.element.style.paddingBottom = "50px"; + } + } + }, +/** + @private + */ + draw: { + value: function() { + var volumeWidth; + // Handle loading + if (this.controller.status === this.controller.EMPTY) { + this.controller.loadMedia(); + } else { + // Handle playing + if (this.controller.status === this.controller.PLAYING) { + if (!this.playButton.classList.contains('playing')) { + this.playButton.classList.add('playing'); + } + } else { + if (this.playButton.classList.contains('playing')) { + this.playButton.classList.remove('playing'); + } + } + + if (this.volumeLevel) { + volumeWidth = Math.floor(this.controller.volume); + this.volumeLevel.style.width = volumeWidth + "%"; + } + + if (this.controller.repeat) { + if (!this.repeatButton.classList.contains("loop")) { + this.repeatButton.classList.add("loop"); + } + } else { + if (this.repeatButton.classList.contains("loop")) { + this.repeatButton.classList.remove("loop"); + } + } + + if (this._showControls) { + this.controls.classList.remove("hide-controls"); + this.controls.classList.add("show-controls"); + } else { + this.controls.classList.remove("show-controls"); + this.controls.classList.add("hide-controls"); + } + + if (this.supportsFullScreen) { + this.fullScreenPanel.classList.add("support-fullscreen"); + this.fullScreenPanel.classList.remove("hide-fullscreen"); + if (!this._isFullScreen) { + this.fullScreenButton.classList.add("enter-fullscreen"); + this.fullScreenButton.classList.remove("exit-fullscreen"); + this.element.classList.remove("fullscreen"); + } else { + this.fullScreenButton.classList.add("exit-fullscreen"); + this.fullScreenButton.classList.remove("enter-fullscreen"); + this.element.classList.add("fullscreen"); + } + } else { + this.fullScreenPanel.classList.remove("support-fullscreen"); + this.fullScreenPanel.classList.add("hide-fullscreen"); + this.element.classList.remove("fullscreen"); + } + } + } + } + +}); -- cgit v1.2.3