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 <rmwh84@motorola.com>
---
 .../video-player.reel/images/fullscreen-enter.png  | Bin 0 -> 1178 bytes
 .../video-player.reel/images/fullscreen-exit.png   | Bin 0 -> 1214 bytes
 .../montage/ui/video-player.reel/images/pause.png  | Bin 0 -> 1040 bytes
 .../montage/ui/video-player.reel/images/play.png   | Bin 0 -> 1375 bytes
 .../ui/video-player.reel/images/volume-down.png    | Bin 0 -> 991 bytes
 .../ui/video-player.reel/images/volume-up.png      | Bin 0 -> 1094 bytes
 .../montage/ui/video-player.reel/video-player.css  | 313 +++++++++++++++++
 .../montage/ui/video-player.reel/video-player.html | 371 +++++++++++++++++++++
 .../montage/ui/video-player.reel/video-player.js   | 368 ++++++++++++++++++++
 9 files changed, 1052 insertions(+)
 create mode 100755 node_modules/montage/ui/video-player.reel/images/fullscreen-enter.png
 create mode 100755 node_modules/montage/ui/video-player.reel/images/fullscreen-exit.png
 create mode 100755 node_modules/montage/ui/video-player.reel/images/pause.png
 create mode 100755 node_modules/montage/ui/video-player.reel/images/play.png
 create mode 100755 node_modules/montage/ui/video-player.reel/images/volume-down.png
 create mode 100755 node_modules/montage/ui/video-player.reel/images/volume-up.png
 create mode 100755 node_modules/montage/ui/video-player.reel/video-player.css
 create mode 100755 node_modules/montage/ui/video-player.reel/video-player.html
 create mode 100755 node_modules/montage/ui/video-player.reel/video-player.js

(limited to 'node_modules/montage/ui/video-player.reel')

diff --git a/node_modules/montage/ui/video-player.reel/images/fullscreen-enter.png b/node_modules/montage/ui/video-player.reel/images/fullscreen-enter.png
new file mode 100755
index 00000000..9e241b93
Binary files /dev/null and b/node_modules/montage/ui/video-player.reel/images/fullscreen-enter.png differ
diff --git a/node_modules/montage/ui/video-player.reel/images/fullscreen-exit.png b/node_modules/montage/ui/video-player.reel/images/fullscreen-exit.png
new file mode 100755
index 00000000..d0fc423f
Binary files /dev/null and b/node_modules/montage/ui/video-player.reel/images/fullscreen-exit.png differ
diff --git a/node_modules/montage/ui/video-player.reel/images/pause.png b/node_modules/montage/ui/video-player.reel/images/pause.png
new file mode 100755
index 00000000..2609c141
Binary files /dev/null and b/node_modules/montage/ui/video-player.reel/images/pause.png differ
diff --git a/node_modules/montage/ui/video-player.reel/images/play.png b/node_modules/montage/ui/video-player.reel/images/play.png
new file mode 100755
index 00000000..7bd57281
Binary files /dev/null and b/node_modules/montage/ui/video-player.reel/images/play.png differ
diff --git a/node_modules/montage/ui/video-player.reel/images/volume-down.png b/node_modules/montage/ui/video-player.reel/images/volume-down.png
new file mode 100755
index 00000000..9ed82d90
Binary files /dev/null and b/node_modules/montage/ui/video-player.reel/images/volume-down.png differ
diff --git a/node_modules/montage/ui/video-player.reel/images/volume-up.png b/node_modules/montage/ui/video-player.reel/images/volume-up.png
new file mode 100755
index 00000000..bc5ab795
Binary files /dev/null and b/node_modules/montage/ui/video-player.reel/images/volume-up.png differ
diff --git a/node_modules/montage/ui/video-player.reel/video-player.css b/node_modules/montage/ui/video-player.reel/video-player.css
new file mode 100755
index 00000000..1e4518ca
--- /dev/null
+++ b/node_modules/montage/ui/video-player.reel/video-player.css
@@ -0,0 +1,313 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+/*-----------------------------------------------------------------------------
+MARK:    media
+-----------------------------------------------------------------------------*/
+
+.montage-video-player {
+    position: relative;
+    min-width: 500px;
+    overflow: hidden;
+    border: 1px solid black;
+    background-color: #000;      /* black opaque */
+}
+
+.montage-video-player.fullscreen {
+    position: absolute;
+    display: -webkit-box;
+    -webkit-box-sizing: border-box;
+    z-index: 1000;						/* TODO: Define global z-index regions */
+    top: 0;
+   	left: 0;
+    border: none;
+    width: 100%;
+    height: 100%;
+}
+
+.montage-video-player .video {
+    display: block; /* Get rid of the bottom space */
+    position: relative;
+    width: 100%;
+    height: auto;
+}
+
+
+/*-----------------------------------------------------------------------------
+MARK:    Controller
+-----------------------------------------------------------------------------*/
+.montage-video-player .control-wrapper {
+    position: absolute;
+    left: 0;
+	bottom: 0;
+	right: 0;
+	height: 50px;
+	box-shadow: inset 0 2px 6px 2px hsla(0,0%,0%,.4);
+	background-color: hsla(0,0%,0%,.95);
+	background-image: -webkit-linear-gradient(top,	hsla(0,0%,100%,.27)  0%,
+													hsla(0,0%,100%,.15) 50%,
+													hsla(0,0%,30%,.4) 50%,
+													hsla(0,0%,0%,1) 100%);
+}
+
+.montage-video-player .control-wrapper.hide-controls {
+    opacity: 0;
+    pointer-events: none;
+    -webkit-transform: translateY(50px);
+    -webkit-transition: opacity .2s linear, -webkit-transform .2s cubic-bezier(.6,0,1,.75);
+}
+
+.montage-video-player .control-wrapper.show-controls {
+    opacity: 1.0;
+    -webkit-transition: opacity .2s linear, -webkit-transform .3s cubic-bezier(0,.4,.16,1);
+}
+
+
+.montage-video-player .controller {
+    display: -webkit-box;
+    position: relative;
+    max-width: 1280px;    
+    color: #ffffff;
+    margin: 0 auto;
+    overflow: hidden;
+}
+
+.montage-video-player .controller > div {
+    border-right: 1px solid hsla(0,0%,0%,.7);
+    border-left: 1px solid hsla(0,0%,100%,.1);
+}
+.montage-video-player .controller > div:first-child {
+    border-left: none;
+}
+.montage-video-player .controller > div:last-child {
+     border-right: none;
+}
+
+.montage-video-player .controller-text {
+    font: bold 14px "Helvetica Neue", Helvetica, sans-serif;
+    color: #888;
+    text-shadow: 0 1px 0px #000;
+}
+
+
+/*-----------------------------------------------------------------------------
+MARK:    Scrubber Panel
+-----------------------------------------------------------------------------*/
+
+.montage-video-player .controller-scrubber-panel {
+    display: -webkit-box;
+    -webkit-box-flex: 1;
+    height: 50px;
+    text-align: center;
+}
+
+.montage-video-player .scrubber {
+    display: block;
+    -webkit-box-flex: 1;
+    margin-top: -2px;
+}
+
+.montage-video-player .position {
+    display: block;
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    text-align: right;
+}
+
+.montage-video-player .duration {
+    display: block;
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    text-align: left;
+}
+
+
+/*-----------------------------------------------------------------------------
+MARK:    Button Panel
+-----------------------------------------------------------------------------*/
+
+.montage-video-player .controller-button-panel {
+    display: block;
+    position: relative;
+    height: 50px;
+}
+
+.montage-video-player .controller-button {
+    position: relative;
+    width: 50px;
+    height: 50px;
+    outline: none;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+.montage-video-player .controller-button:active {
+	background-color: hsla(0,0%,0%,.4);
+}
+
+.montage-video-player .play                   { background-image: url("images/play.png"); }
+.montage-video-player .play.playing          { background-image: url("images/pause.png"); }
+
+.montage-video-player .ff, 
+.montage-video-player .rw,
+.montage-video-player .repeat
+{ display: none; } /* Temporarly disabled */
+
+/*-----------------------------------------------------------------------------
+MARK:    Volume Panel
+-----------------------------------------------------------------------------*/
+
+.montage-video-player .controller-volume-panel {
+    display: -webkit-box;
+    position: relative;
+    width: 148px;
+    height: 50px;
+}
+
+.montage-video-player .volume {
+    position: relative;
+    top: 16px;
+    -webkit-box-flex: 1;
+}
+
+.montage-video-player .controller-progress {
+    height: 15px;
+	box-shadow: inset 0 0px 3px 1px hsla(0,0%,0%,.5);
+	background: -webkit-repeating-linear-gradient(left, hsl(0,0%,25%) 0, hsl(0,0%,25%) 3px, 
+														hsl(0,0%,10%) 3px, hsl(0,0%,10%) 5px);
+}
+.montage-video-player .controller-progress:before {
+	content: "";
+	position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+	background: -webkit-linear-gradient(top, hsla(0,0%,0%,0), hsla(0,0%,0%,.3) );
+}
+
+.montage-video-player .volume-progress {
+    width: 50%;
+    height: 100%;
+    background: -webkit-repeating-linear-gradient(left, hsl(195,90%,50%) 0, hsl(195,90%,50%) 3px, 
+    													transparent 3px, transparent 5px);
+    -webkit-transition: width .1s ease-in-out;
+}
+
+.montage-video-player .volume-plus,
+.montage-video-player .volume-minus {
+    width: 50px;
+}
+
+.montage-video-player .volume-minus        { background-image: url("images/volume-down.png"); }
+.montage-video-player .volume-minus:active { 
+	background-color: transparent;
+	background-image: url("images/volume-down.png"), 
+	-webkit-linear-gradient(right, hsla(0,0%,0%,0), hsla(0,0%,0%,.5) ); 
+}
+.montage-video-player .volume-plus         { background-image: url("images/volume-up.png"); }
+.montage-video-player .volume-plus:active { 
+	background-color: transparent;
+	background-image: url("images/volume-up.png"), 
+	-webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,0%,.5) ); 
+}
+
+.montage-video-player  .controller-volume-panel .mute               { display: none; }  /* also MUTE[muted] */
+
+
+
+/*-----------------------------------------------------------------------------
+MARK:    Stop Panel
+-----------------------------------------------------------------------------*/
+
+.montage-video-player .controller-stop-panel {
+    display: block;
+    position: relative;
+    width: auto;
+    height: 50px;
+}
+
+
+.montage-video-player .STOP {
+    float: none;
+    right: 0;
+}
+
+/*-----------------------------------------------------------------------------
+MARK:    Fullscreen Panel
+-----------------------------------------------------------------------------*/
+
+.montage-video-player .controller-fullscreen-panel {
+    display: block;
+    position: relative;
+    width: auto;
+    height: 50px;
+}
+
+
+.montage-video-player .fullscreen {
+    float: none;
+    right: 0;
+}
+
+.montage-video-player .enter-fullscreen        { background-image: url("images/fullscreen-enter.png"); }
+.montage-video-player .exit-fullscreen         { background-image: url("images/fullscreen-exit.png"); }
+
+.montage-video-player .support-fullscreen { display: block; }
+.montage-video-player .hide-fullscreen { display: none; }
+
+
+/*-----------------------------------------------------------------------------
+MARK:    Track Panel
+-----------------------------------------------------------------------------*/
+
+.montage-video-player .controller-track-panel {
+    display: none;
+    position: relative;
+    width: 110px;
+    height: 50px;
+}
+
+.montage-video-player .controller-track-panel .controller-button {
+    float: none;
+    position: absolute;
+    outline: none;
+}
+
+.montage-video-player .PREVIOUS {
+    top: 0;
+    left: 0;
+}
+
+.montage-video-player .NEXT {
+    top: 0;
+    left: 55px;
+}
+
+.montage-video-player .supportsPlaylistControls .controller-button:active {
+    color: #f44;
+}
+
+.montage-video-player .supportsPlaylistControls {
+    display: none;
+    height: 50px;
+}
+
+
+.montage-video-player .STOP           { background-image: url("images/media-1up-controls-exitFullscreen.png"); }
+.montage-video-player .STOP:active    { background-image: url("images/media-1up-controls-exitFullscreen-P.png"); }
+
+.montage-video-player .PREVIOUS       { background-image: url("images/photos-1up-controls-prev.png"); }
+.montage-video-player .PREVIOUS:active{ background-image: url("images/photos-1up-controls-prev-P.png"); }
+
+.montage-video-player .NEXT           { background-image: url("images/photos-1up-controls-next.png"); }
+.montage-video-player .NEXT:active    { background-image: url("images/photos-1up-controls-next-P.png"); }
+
+.montage-video-player .montage-slider.pressed .handlerbg div,
+.montage-video-player .montage-slider.pressed .handler div,
+.montage-video-player .montage-slider.pressed .handler2 div,
+.montage-video-player .montage-slider.pressed .handler3 div,
+.montage-video-player .montage-slider.pressed .handler4 div {
+    -webkit-transform: scale3d(.85, .85, .85);
+}
\ No newline at end of file
diff --git a/node_modules/montage/ui/video-player.reel/video-player.html b/node_modules/montage/ui/video-player.reel/video-player.html
new file mode 100755
index 00000000..96e8bf29
--- /dev/null
+++ b/node_modules/montage/ui/video-player.reel/video-player.html
@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <link rel="stylesheet" type="text/css" href="video-player.css">
+
+    <script type="text/montage-serialization">
+{
+    "dynamictext1": {
+        "module": "montage/ui/dynamic-text.reel",
+        "name": "DynamicText",
+        "properties": {
+            "element": {
+                "#": "duration"
+            }
+        }
+    },
+    "dynamictext2": {
+        "module": "montage/ui/dynamic-text.reel",
+        "name": "DynamicText",
+        "properties": {
+            "element": {
+                "#": "position"
+            }
+        }
+    },
+    "mediacontroller1": {
+        "module": "montage/ui/controller/media-controller",
+        "name": "MediaController",
+        "properties": {
+            "mediaElement": {
+                "#": "video-tag"
+            }
+        },
+        "bindings": {
+            "mediaSrc": {
+                "boundObject": {
+                    "@": "owner"
+                },
+                "boundObjectPropertyPath": "src",
+                "oneway": true
+            }
+        }
+    },
+    "slider1": {
+        "module": "montage/ui/slider.reel",
+        "name": "Slider",
+        "properties": {
+            "element": {
+                "#": "durationSlider"
+            },
+            "minValue": 0,
+            "hasTapBarToScroll": true
+        },
+        "bindings": {
+            "value": {
+                "boundObject": {
+                    "@": "owner"
+                },
+                "boundObjectPropertyPath": "controller.position",
+                "oneway": false
+            }
+        }
+    },
+    "actioneventlistener1": {
+        "module": "montage/core/event/action-event-listener",
+        "name": "ActionEventListener",
+        "properties": {
+            "handler": {
+                "@": "mediacontroller1"
+            },
+            "action": "playPause"
+        }
+    },
+    "togglebutton1": {
+        "module": "montage/ui/button.reel",
+        "name": "ToggleButton",
+        "properties": {
+            "element": {
+                "#": "playButton"
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "actioneventlistener1"
+                },
+                "capture": false
+            }
+        ]
+    },
+    "actioneventlistener2": {
+        "module": "montage/core/event/action-event-listener",
+        "name": "ActionEventListener",
+        "properties": {
+            "handler": {
+                "@": "mediacontroller1"
+            },
+            "action": "rewind"
+        }
+    },
+    "button1": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+            "element": {
+                "#": "rewindButton"
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "actioneventlistener2"
+                },
+                "capture": false
+            }
+        ]
+    },
+    "actioneventlistener3": {
+        "module": "montage/core/event/action-event-listener",
+        "name": "ActionEventListener",
+        "properties": {
+            "handler": {
+                "@": "mediacontroller1"
+            },
+            "action": "fastForward"
+        }
+    },
+    "button2": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+            "element": {
+                "#": "ffButton"
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "actioneventlistener3"
+                },
+                "capture": false
+            }
+        ]
+    },
+    "actioneventlistener4": {
+        "module": "montage/core/event/action-event-listener",
+        "name": "ActionEventListener",
+        "properties": {
+            "handler": {
+                "@": "mediacontroller1"
+            },
+            "action": "volumeDecrease"
+        }
+    },
+    "button3": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+            "element": {
+                "#": "decreaseVolume"
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "actioneventlistener4"
+                },
+                "capture": false
+            }
+        ]
+    },
+    "actioneventlistener5": {
+        "module": "montage/core/event/action-event-listener",
+        "name": "ActionEventListener",
+        "properties": {
+            "handler": {
+                "@": "mediacontroller1"
+            },
+            "action": "volumeIncrease"
+        }
+    },
+    "button4": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+            "element": {
+                "#": "increaseVolume"
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "actioneventlistener5"
+                },
+                "capture": false
+            }
+        ]
+    },
+    "actioneventlistener6": {
+        "module": "montage/core/event/action-event-listener",
+        "name": "ActionEventListener",
+        "properties": {
+            "handler": {
+                "@": "mediacontroller1"
+            },
+            "action": "toggleMute"
+        }
+    },
+    "button5": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+            "element": {
+                "#": "muteButton"
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "actioneventlistener6"
+                },
+                "capture": false
+            }
+        ]
+    },
+    "actioneventlistener7": {
+        "module": "montage/core/event/action-event-listener",
+        "name": "ActionEventListener",
+        "properties": {
+            "handler": {
+                "@": "mediacontroller1"
+            },
+            "action": "toggleRepeat"
+        }
+    },
+    "button6": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+            "element": {
+                "#": "repeatButton"
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "actioneventlistener7"
+                },
+                "capture": false
+            }
+        ]
+    },
+    "actioneventlistener8": {
+        "module": "montage/core/event/action-event-listener",
+        "name": "ActionEventListener",
+        "properties": {
+            "handler": {
+                "@": "owner"
+            },
+            "action": "toggleFullScreen"
+        }
+    },
+    "button7": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+            "element": {
+                "#": "fullScreenButton"
+            }
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {
+                    "@": "actioneventlistener8"
+                },
+                "capture": false
+            }
+        ]
+    },
+    "owner": {
+        "module": "montage/ui/video-player.reel",
+        "name": "VideoPlayer",
+        "properties": {
+            "element": {
+                "#": "video-player"
+            },
+            "playButton": {
+                "#": "playButton"
+            },
+            "repeatButton": {
+                "#": "repeatButton"
+            },
+            "volumeLevel": {
+                "#": "volumeLevel"
+            },
+            "controls": {
+                "#": "controlWrapper"
+            },
+            "fullScreenPanel": {
+                "#": "fullScreenPanel"
+            },
+            "fullScreenButton": {
+                "#": "fullScreenButton"
+            },
+            "slider": {
+                "@": "slider1"
+            },
+            "durationText": {
+                "@": "dynamictext1"
+            },
+            "positionText": {
+                "@": "dynamictext2"
+            },
+            "controller": {
+                "@": "mediacontroller1"
+            }
+        }
+    }
+}
+    </script>
+
+
+</head>
+<body>
+
+<div id="video-player" class="montage-video-player">
+    <video id="video-tag" class="video"></video>
+
+    <div id="controlWrapper" class="control-wrapper">
+        <div id="controller" class="controller">
+            <div class="controller-button-panel">
+                <div id="repeatButton" class="repeat controller-button" title="Repeat Video"></div>
+                <div id="rewindButton" class="rw controller-button" title="Rewind"> </div>
+                <div id="playButton" class="play controller-button" title="Play/Pause"> </div>
+                <div id="ffButton" class="ff controller-button" title="Fast Forward"> </div>
+            </div>
+            <div class="controller-scrubber-panel">
+                <div id="position" class="position controller-text"></div>
+                <div id="durationSlider" class="scrubber dark"></div>
+                <div id="duration" class="duration controller-text"></div>
+            </div>
+            <div class="controller-volume-panel">
+                <div id="muteButton" class="mute controller-button" title="Mute"></div>
+                <div id="decreaseVolume" class="volume-minus controller-button" title="Decrease Volume"> </div>
+                <div class="volume controller-progress"><div id="volumeLevel" class="volume-progress"></div></div>
+                <div id="increaseVolume" class="volume-plus controller-button" title="Increase Volume"> </div>
+            </div>
+            <div id="fullScreenPanel" class="controller-fullscreen-panel">
+                <div id="fullScreenButton" class="fullscreen controller-button" title="Toggle Fullscreen"> </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+</body>
+</html>
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 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+"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