Skip to content
This repository has been archived by the owner on Jun 29, 2018. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
Fix Bug 890250 - Get ie8 shim working on most recent popcorn.
  • Loading branch information
@ScottDowne @mjschranz
ScottDowne authored and mjschranz committed Feb 19, 2014
1 parent 698268a commit 373097d
Show file tree
Hide file tree
Showing 9 changed files with 374 additions and 209 deletions.
50 changes: 17 additions & 33 deletions ie8/popcorn.ie8.html
View file
Expand Up @@ -4,17 +4,15 @@
<title>Popcorn Youtube Player Example</title>
<script src="popcorn.ie8.js"></script>
<script src="../popcorn.js"></script>
<script src="../modules/player/popcorn.player.js"></script>
<script src="../players/youtube/popcorn.youtube.js"></script>
<script src="../wrappers/common/popcorn._mediaElementProto.js"></script>
<script src="../wrappers/jwplayer/popcorn.HTMLJWPlayerVideoElement.js"></script>
<script src="../plugins/footnote/popcorn.footnote.js"></script>
<script src="../plugins/flickr/popcorn.flickr.js"></script>
<script src="../plugins/attribution/popcorn.attribution.js"></script>
<script src="../plugins/webpage/popcorn.webpage.js"></script>
<script src="../plugins/googlefeed/popcorn.googlefeed.js"></script>
<script src="../plugins/image/popcorn.image.js"></script>
<script src="../plugins/subtitle/popcorn.subtitle.js"></script>
<script>
var attachEvent = function( element, event, callBack ) {
var addEventListenerHelper = function( element, event, callBack ) {

if ( element.addEventListener ) {

Expand All @@ -34,7 +32,7 @@

var done = false;

attachEvent( document, "DOMContentLoaded", function( e ) {
addEventListenerHelper( document, "DOMContentLoaded", function( e ) {

if ( done ) {

Expand All @@ -44,9 +42,11 @@
done = true;

var paused = true,
media = new Popcorn.HTMLJWPlayerVideoElement( "#video" ),
popcorn;

popcorn = Popcorn.youtube( "#video", "http://www.youtube.com/watch?v=nfGV32RNkhw&autoplay=0" );
media.src = "http://media.w3.org/2010/05/sintel/trailer.mp4?controls=1";
popcorn = Popcorn( media );

popcorn = popcorn
.footnote({
Expand All @@ -62,16 +62,6 @@
numberofimages: "8",
target: "flickrdiv"
})
.attribution({
start: 5, // seconds
end: 60, // seconds
nameofwork: "Internet",
nameofworkurl: "http://www.archive.org/details/CC1232_internet",
copyrightholder: "The Computer Chronicles",
license: "CC-BY-NC-ND",
licenseurl: "http://creativecommons.org/licenses/by-nc-nd/2.0/",
target: "attribdiv"
})
.subtitle({
start: 5, // seconds
end: 15, // seconds
Expand All @@ -94,13 +84,6 @@
title: "Planet Feed",
orientation: "Vertical"
})*/
.image({
start: 5, // seconds
end: 15, // seconds
href: "http://www.drumbeat.org/",
src: "https://www.drumbeat.org/media//images/drumbeat-logo-splash.png",
target: "imagediv"
})
.listen( "durationchange", function() {
element( "player-duration" ).innerHTML = popcorn.duration();
})
Expand All @@ -125,7 +108,7 @@

// Single play/pause button

attachEvent( element( "btn-play-pause" ), "click", function() {
addEventListenerHelper( element( "btn-play-pause" ), "click", function() {

if ( paused ) {
popcorn.play();
Expand All @@ -135,18 +118,18 @@
}, false);

// Seek
attachEvent( element( "btn-seek" ), "click", function() {
addEventListenerHelper( element( "btn-seek" ), "click", function() {

popcorn.currentTime( 30 );
}, false);

// Volume
attachEvent( element( "btn-volume" ), "click", function() {
addEventListenerHelper( element( "btn-volume" ), "click", function() {
var volume = ( popcorn.volume() === 1 ) ? 0.5 : 1;
popcorn.volume( volume );
}, false);

attachEvent( element( "btn-mute" ), "click", function() {
addEventListenerHelper( element( "btn-mute" ), "click", function() {
popcorn.mute( !popcorn.media.muted );
}, false );
}, false );
Expand All @@ -155,7 +138,12 @@
<body>
<div>
<div>
<div id="video" style="width: 360px; height: 300px;" ></div><br />
<!-- Base containing element needs some dimensions and somewhere down the line a parent element
is relatively positioned -->
<div id="video-container" style="width: 360px; height: 300px; position: relative;">
<!-- z-index of video target has to be lower than what's provided for plugins (1000)-->
<div id="video" style="width: 360px; height: 300px; z-index: 5;" ></div>
</div>
<button class="simple" id="btn-play-pause">Play</button>
<button class="seek" id="btn-seek">Seek to 30</button>
<button class="volume" id="btn-volume">Toggle Volume</button>
Expand Down Expand Up @@ -185,7 +173,6 @@ <h4>Expected Events</h4>
<ul>
<li>From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.</li>
<li>From 20 to 40 seconds, the a flickr stream of 8 images tagged 'georgia' will appear below 'Flickr Area'.</li>
<li>From 5 to 60 seconds, the Creative Commons license will appear below 'Attributions Area'.</li>
<li>From 5 to 15 seconds, the Mozilla Drumbeat logo will appear below 'Image Area'.</li>
<li>From 5 to 15 seconds, the subtitle 'This is overlaid on top of the video. You can hightlight it!' will appear in front of the video.</li>
<li>From 0 to 20 seconds, blogs from 'http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml' will appear below 'Google Feed Area'.</li>
Expand All @@ -195,9 +182,6 @@ <h4>Expected Events</h4>
<div id="footnotediv" width="50%" height="50%">
<strong>Footnote Area</strong><br />
</div>
<div id="attribdiv" width="50%" height="50%">
<strong>Attributions Area</strong><br />
</div>
<div id="flickrdiv" width="50%" height="50%">
<strong>Flickr Area</strong><br />
</div>
Expand Down
132 changes: 130 additions & 2 deletions ie8/popcorn.ie8.js
View file
Expand Up @@ -14,18 +14,41 @@
document.detachEvent( event, callBack );
};

window.addEventListener = window.addEventListener || function( event, callBack ) {

event = "on" + event;

window.attachEvent( event, callBack );
};

window.removeEventListener = window.removeEventListener || function( event, callBack ) {

event = "on" + event;

window.detachEvent( event, callBack );
};

HTMLScriptElement.prototype.addEventListener = HTMLScriptElement.prototype.addEventListener || function( event, callBack ) {

event = ( event === "load" ) ? "onreadystatechange" : "on" + event;

this.attachEvent( event, callBack );
if( event === "onreadystatechange" ){
callBack.readyStateCheck = callBack.readyStateCheck || function( e ){

if( self.readyState === "loaded" ){
callBack( e );
}
};
}

this.attachEvent( event, ( callBack.readyStateCheck || callBack ) );
};

HTMLScriptElement.prototype.removeEventListener = HTMLScriptElement.prototype.removeEventListener || function( event, callBack ) {

event = ( event === "load" ) ? "onreadystatechange" : "on" + event;

this.detachEvent( event, callBack );
this.detachEvent( event, ( callBack.readyStateCheck || callBack ) );
};

document.createEvent = document.createEvent || function ( type ) {
Expand Down Expand Up @@ -197,4 +220,109 @@
};
}

// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
Object.keys = (function () {
'use strict';
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
dontEnumsLength = dontEnums.length;

return function (obj) {
if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
throw new TypeError('Object.keys called on non-object');
}

var result = [], prop, i;

for (prop in obj) {
if (hasOwnProperty.call(obj, prop)) {
result.push(prop);
}
}

if (hasDontEnumBug) {
for (i = 0; i < dontEnumsLength; i++) {
if (hasOwnProperty.call(obj, dontEnums[i])) {
result.push(dontEnums[i]);
}
}
}
return result;
};
}());
}

if ( !Object.defineProperties ) {
Object.defineProperties = function(obj, properties) {
function convertToDescriptor(desc) {
function hasProperty(obj, prop) {
return Object.prototype.hasOwnProperty.call(obj, prop);
}

function isCallable(v) {
// NB: modify as necessary if other values than functions are callable.
return typeof v === "function";
}

if (typeof desc !== "object" || desc === null)
throw new TypeError("bad desc");

var d = {};

if (hasProperty(desc, "enumerable"))
d.enumerable = !!obj.enumerable;
if (hasProperty(desc, "configurable"))
d.configurable = !!desc.configurable;
if (hasProperty(desc, "value"))
d.value = obj.value;
if (hasProperty(desc, "writable"))
d.writable = !!desc.writable;
if ( hasProperty(desc, "get") ) {
var g = desc.get;

if (!isCallable(g) && g !== "undefined")
throw new TypeError("bad get");
d.get = g;
}
if ( hasProperty(desc, "set") ) {
var s = desc.set;
if (!isCallable(s) && s !== "undefined")
throw new TypeError("bad set");
d.set = s;
}

if (("get" in d || "set" in d) && ("value" in d || "writable" in d))
throw new TypeError("identity-confused descriptor");

return d;
}

if (typeof obj !== "object" || obj === null)
throw new TypeError("bad obj");

properties = Object(properties);

var keys = Object.keys(properties);
var descs = [];

for (var i = 0; i < keys.length; i++)
descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);

for (var i = 0; i < descs.length; i++)
Object.defineProperty(obj, descs[i][0], descs[i][1]);

return obj;
};
}

})();
26 changes: 12 additions & 14 deletions popcorn.js
View file
Expand Up @@ -77,9 +77,11 @@
put: function( dictionary ) {
// For each own property of src, let key be the property key
// and desc be the property descriptor of the property.
Object.getOwnPropertyNames( dictionary ).forEach(function( key ) {
this[ key ] = dictionary[ key ];
}, this);
for ( var key in dictionary ) {
if ( dictionary.hasOwnProperty( key ) ) {
this[ key ] = dictionary[ key ];
}
}
}
},

Expand Down Expand Up @@ -342,12 +344,9 @@
}
};

Object.defineProperty( this, "error", {
get: function() {

return self.media.error;
}
});
self.media.addEventListener( "error", function() {
self.error = self.media.error;
}, false );

// http://www.whatwg.org/specs/web-apps/current-work/#dom-media-readystate
//
Expand Down Expand Up @@ -1203,11 +1202,7 @@
this.endIndex = 0;
this.previousUpdateTime = -1;

Object.defineProperty( this, "count", {
get: function() {
return this.byStart.length;
}
});
this.count = 1;
}

function isMatch( obj, key, value ) {
Expand Down Expand Up @@ -1279,6 +1274,8 @@
this.parent.data.trackEvents.endIndex++;
}

this.count++;

};

TrackEvents.prototype.remove = function( removeId, state ) {
Expand Down Expand Up @@ -1385,6 +1382,7 @@
this.byStart = byStart;
this.byEnd = byEnd;
this.animating = animating;
this.count--;

historyLen = this.parent.data.history.length;

Expand Down

0 comments on commit 373097d

Please sign in to comment.