Permalink
Browse files

[#447] Added getBoundingClientrect(), getStyle()

  • Loading branch information...
1 parent f23e244 commit f24607b603c0e57f19adf94af69e943f0c4fec18 @stevenaw committed Mar 31, 2011
@@ -3,10 +3,6 @@
<head>
<title>Popcorn Base Player Example</title>
<style>
- iframe{
- display:block;
- border:0;
- }
body > div {
width: 100%;
float: left;
@@ -15,10 +11,14 @@
div div {
margin-bottom:20px;
}
-
- .api_output {
- float:right;
- padding-left: 20px;
+
+ #player_1 {
+ position: absolute;
+ left: 250px;
+ top: 20px;
+ width: 300px;
+ height: 150px;
+ background: #FFAAAA;
}
</style>
@@ -31,19 +31,35 @@
document.addEventListener( "DOMContentLoaded", function() {
var ticks = 0,
player = Popcorn.baseplayer(),
- popcorn = Popcorn( player )
- .listen( "timeupdate", function() {
- document.getElementById( "playerTicks" ).innerHTML = ++ticks;
- document.getElementById( "playerMs" ).innerHTML = popcorn.currentTime();
- });
+ dimensions,
+ popcorn;
document.getElementById( "btnPlay" ).addEventListener( "click", function() { popcorn.play(); }, false );
document.getElementById( "btnPause" ).addEventListener( "click", function() { popcorn.pause(); }, false );
- popcorn.exec( 2, function() {
- document.getElementById( "playerOutput" ).innerHTML = "2 seconds reached";
- });
+ player.resource = document.getElementById('player_1');
+
+ player.resource.innerHTML += '<br />Width and Height: '+player.getStyle( 'width' ) + ' by ' + player.getStyle( 'height' )
+ + '<br /> Positioned at: '+player.getStyle( 'left' ) + ',' + player.getStyle( 'top' );
+
+ dimensions = player.getBoundingClientRect();
+ document.getElementById( "playerTop" ).innerHTML = dimensions.top;
+ document.getElementById( "playerLeft" ).innerHTML = dimensions.left;
+ document.getElementById( "playerBottom" ).innerHTML = dimensions.bottom;
+ document.getElementById( "playerRight" ).innerHTML = dimensions.right;
+ document.getElementById( "playerWidth" ).innerHTML = dimensions.width;
+ document.getElementById( "playerHeight" ).innerHTML = dimensions.height;
+ popcorn = Popcorn( player )
+ .listen( "timeupdate", function() {
+ document.getElementById( "playerTicks" ).innerHTML = ++ticks;
+ document.getElementById( "playerMs" ).innerHTML = popcorn.currentTime().toFixed(5);
+ })
+ .exec( 2, function() {
+ document.getElementById( "playerOutput" ).innerHTML = "2 seconds reached";
+ });
+
+ // The ready state and resource selection would be handled by the player extending this base player
player.readyState = 2;
popcorn.play();
}, false);
@@ -55,9 +71,17 @@
Seconds: <span id="playerMs" ></span><br />
Event Output: <span id="playerOutput" ></span><br />
<button class="simple" id="btnPlay">Play</button>
- <button class="simple" id="btnPause">Pause</button>
+ <button class="simple" id="btnPause">Pause</button><br r/>
+ Top: <span id="playerTop" ></span><br />
+ Left: <span id="playerLeft" ></span><br />
+ Bottom: <span id="playerBottom" ></span><br />
+ Right: <span id="playerRight" ></span><br />
+ Width: <span id="playerWidth" ></span><br />
+ Height: <span id="playerHeight" ></span><br />
</div>
+ <span id="player_1">This is a container for the player, auto-sized for testing purposes. It displays CSS values.</span>
+
<br />
<br />
This demo showcases basic functionality of a player. It is a shell of an HTMLMediaElement with basic timing routines.<br />
@@ -1,83 +1,123 @@
-Popcorn.baseplayer = function() {
- return new Popcorn.baseplayer.init();
-}
-
-Popcorn.baseplayer.init = function() {
- this.readyState = 0;
- this.currentTime = 0;
- this.duration = 0;
- this.paused = 1;
- this.ended = 0;
- this.volume = 1;
- this.muted = 0;
- this.playbackRate = 1;
-
- // These are considered to be "on" by being defined. Initialize to undefined
- this.autoplay;
- this.loop;
-
- // List of events
- this.events = {};
-}
+(function( global, doc ) {
+ Popcorn.baseplayer = function() {
+ return new Popcorn.baseplayer.init();
+ }
-Popcorn.baseplayer.init.prototype = {
- load: function() {},
-
- play: function() {
- this.paused = 0;
- this.timeupdate();
- },
-
- pause: function() {
+ Popcorn.baseplayer.init = function() {
+ this.readyState = 0;
+ this.currentTime = 0;
+ this.duration = 0;
this.paused = 1;
- },
-
- timeupdate: function() {
- // The player was paused since the last time update
- if ( this.paused ) {
- return;
- }
+ this.ended = 0;
+ this.volume = 1;
+ this.muted = 0;
+ this.playbackRate = 1;
- // So we can refer to the instance when setTimeout is run
- var self = this;
- this.currentTime += 0.015;
+ // These are considered to be "on" by being defined. Initialize to undefined
+ this.autoplay;
+ this.loop;
- this.dispatchEvent( "timeupdate" );
- setTimeout( function() {
- self.timeupdate.call( self );
- }, 15 );
- },
-
- // Add an event listener to the object
- addEventListener: function( evtName, fn ) {
- if ( !this.events[evtName] ) {
- this.events[evtName] = [];
- }
+ // List of events
+ this.events = {};
- this.events[evtName].push( fn );
- return fn;
- },
-
- // Can take event object or simple string
- dispatchEvent: function( oEvent ) {
- var evt,
- self = this,
- eventInterface,
- eventName = oEvent.type;
+ // The underlying player resource. May be <canvas>, <iframe>, <object>, array, etc
+ this.resource;
+ }
+
+ Popcorn.baseplayer.init.prototype = {
+ load: function() {},
+
+ play: function() {
+ this.paused = 0;
+ this.timeupdate();
+ },
+
+ pause: function() {
+ this.paused = 1;
+ },
+
+ timeupdate: function() {
+ // The player was paused since the last time update
+ if ( this.paused ) {
+ return;
+ }
+
+ // So we can refer to the instance when setTimeout is run
+ var self = this;
+ this.currentTime += 0.015;
+
+ this.dispatchEvent( "timeupdate" );
+ setTimeout( function() {
+ self.timeupdate.call( self );
+ }, 15 );
+ },
+
+ // By default, assumes this.resource is a DOM Element
+ // Changing the type of this.resource requires this method to be overridden
+ getBoundingClientRect: function() {
+ var b = this.resource.getBoundingClientRect();
+
+ return {
+ bottom: b.bottom,
+ left: b.left,
+ right: b.right,
+ top: b.top,
- // A string was passed, create event object
- if ( !eventName ) {
- eventName = oEvent;
- eventInterface = Popcorn.events.getInterface( eventName );
+ // These not guaranteed to be in there
+ width: b.width || ( b.right - b.left ),
+ height: b.height || ( b.bottom - b.top )
+ };
+ },
+
+ // By default, assumes this.resource is a DOM Element
+ // Changing the type of this.resource requires this method to be overridden
+ // Returns the computed value for CSS style 'prop' as computed by the browser
+ getStyle: function( prop ) {
+ var elem = this.resource;
- if ( eventInterface ) {
- evt = document.createEvent( eventInterface );
- evt.initEvent( eventName, true, true, window, 1 );
+ if ( elem.currentStyle ) {
+ // IE syntax
+ return elem.currentStyle[prop];
+ } else if ( global.getComputedStyle ) {
+ // Firefox, Chrome et. al
+ return doc.defaultView.getComputedStyle( elem, null ).getPropertyValue( prop );
+ } else {
+ // Fallback, just in case
+ return elem.style[prop];
}
- }
+ },
- Popcorn.forEach( this.events[eventName], function( val ) {
- val.call( self, evt, self );
- });
- }
-};
+ // Add an event listener to the object
+ addEventListener: function( evtName, fn ) {
+ if ( !this.events[evtName] ) {
+ this.events[evtName] = [];
+ }
+
+ this.events[evtName].push( fn );
+ return fn;
+ },
+
+ // Can take event object or simple string
+ dispatchEvent: function( oEvent ) {
+ var evt,
+ self = this,
+ eventInterface,
+ eventName = oEvent.type;
+
+ // A string was passed, create event object
+ if ( !eventName ) {
+ eventName = oEvent;
+ eventInterface = Popcorn.events.getInterface( eventName );
+
+ if ( eventInterface ) {
+ evt = document.createEvent( eventInterface );
+ evt.initEvent( eventName, true, true, window, 1 );
+ }
+ }
+
+ Popcorn.forEach( this.events[eventName], function( val ) {
+ val.call( self, evt, self );
+ });
+ }
+ };
+})( window, document );
@@ -14,6 +14,25 @@
<script src="popcorn.baseplayer.unit.js"></script>
<script src="popcorn.baseplayer.js"></script>
+ <style>
+ body > div {
+ width: 100%;
+ float: left;
+ overflow: hidden;
+ }
+ div div {
+ margin-bottom:20px;
+ }
+
+ #player_1 {
+ position: absolute;
+ left: 220px;
+ top: 260px;
+ width: 300px;
+ height: 250px;
+ background: #FFAAAA;
+ }
+ </style>
</head>
<body>
<h1 id="qunit-header">Popcorn Base Player Plugin</h1>
@@ -23,6 +42,6 @@ <h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"> </div>
- <div id="player_1" width="500" height="281"></div>
+ <span id="player_1">This is a container for the player, auto-sized for testing purposes.</span>
</body>
</html>
Oops, something went wrong.

0 comments on commit f24607b

Please sign in to comment.