Permalink
Browse files

version 1.0 added

  • Loading branch information...
1 parent 69b279a commit 191e1179babf3521887ad8f90060b8a3afa0a9c7 Jozef Chraplewski committed Jan 19, 2012
Showing with 9,923 additions and 34 deletions.
  1. +0 −7 design/playlist.css
  2. +11 −7 dev.html.example
  3. +36 −20 src/playlist.js
  4. +56 −0 test.html
  5. +32 −0 test/mocks.js
  6. +165 −0 test/playlist_engine_test.js
  7. +6 −0 test/playlist_test.js
  8. +20 −0 test/playlist_thumb_test.js
  9. +228 −0 test/qunit-git.css
  10. +1,554 −0 test/qunit-git.js
  11. +7 −0 test/qunit/.gitignore
  12. +27 −0 test/qunit/README.md
  13. +16 −0 test/qunit/addons/canvas/README.md
  14. +76 −0 test/qunit/addons/canvas/canvas-test.js
  15. +19 −0 test/qunit/addons/canvas/canvas.html
  16. +6 −0 test/qunit/addons/canvas/qunit-canvas.js
  17. +17 −0 test/qunit/addons/close-enough/README.md
  18. +37 −0 test/qunit/addons/close-enough/close-enough-test.js
  19. +18 −0 test/qunit/addons/close-enough/close-enough.html
  20. +32 −0 test/qunit/addons/close-enough/qunit-close-enough.js
  21. +7 −0 test/qunit/addons/composite/README.md
  22. +33 −0 test/qunit/addons/composite/composite-demo-test.html
  23. +20 −0 test/qunit/addons/composite/composite-test.html
  24. +159 −0 test/qunit/addons/composite/composite-test.js
  25. +19 −0 test/qunit/addons/composite/dummy-qunit-test.html
  26. +19 −0 test/qunit/addons/composite/dummy-same-test.html
  27. +35 −0 test/qunit/addons/composite/index.html
  28. +13 −0 test/qunit/addons/composite/qunit-composite.css
  29. +82 −0 test/qunit/addons/composite/qunit-composite.js
  30. +18 −0 test/qunit/addons/step/README.md
  31. +25 −0 test/qunit/addons/step/qunit-step.js
  32. +13 −0 test/qunit/addons/step/step-test.js
  33. +19 −0 test/qunit/addons/step/step.html
  34. +27 −0 test/qunit/package.json
  35. +226 −0 test/qunit/qunit/qunit.css
  36. +1,552 −0 test/qunit/qunit/qunit.js
  37. +24 −0 test/qunit/test/headless.html
  38. +19 −0 test/qunit/test/index.html
  39. +17 −0 test/qunit/test/logs.html
  40. +153 −0 test/qunit/test/logs.js
  41. +1,421 −0 test/qunit/test/same.js
  42. +471 −0 test/qunit/test/test.js
  43. +2,916 −0 test/sinon-1.2.0.js
  44. +62 −0 test/sinon-qunit-1.0.0.js
  45. +56 −0 test/test.html
  46. +154 −0 test/test.js
View
@@ -6,10 +6,6 @@
display: none;
}
-.vjs-playlist .wrapper {
- border: 1px solid red;
-}
-
.vjs-playlist img {
margin: 10px;
border: 3px solid #555;
@@ -20,15 +16,12 @@
}
.vjs-playlist img:hover {
- float: left;
border: 3px solid #777;
cursor: pointer;
border-radius: 6px;
-moz-border-radius: 6px;
}
-.clear { clear: both }
-
/* Scrollbar
---------------------------------------------------------*/
View
@@ -7,17 +7,21 @@
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
- <!-- playlist stuff -->
<link href="design/playlist.css" rel="stylesheet" type="text/css">
<script src="src/playlist.js"></script>
+
+ <script type="text/javascript">
+ _V_.options.components.push('playlist');
+ </script>
</head>
-
<body>
<div id="vid1_playlist" class="vjs-playlist">
<img src="http://video-js.zencoder.com/oceans-clip.png"
data-poster="http://view.staging.vzaar.com/438562.thumb"
data-sources='[{"src":"http://video-js.zencoder.com/oceans-clip.mp4",
- "type":"video/mp4", "media":"", "title":""}]'/>
+ "type":"video/mp4", "media":"", "title":""},
+ {"src":"http://video-js.zencoder.com/oceans-clip.ogv",
+ "type":"video/ogg", "media":"", "title":""}]'/>
<img src="http://view.staging.vzaar.com/438562.thumb"
data-poster="http://view.staging.vzaar.com/438562.thumb"
@@ -27,7 +31,9 @@
<img src="http://video-js.zencoder.com/oceans-clip.png"
data-poster="http://view.staging.vzaar.com/438562.thumb"
data-sources='[{"src":"http://video-js.zencoder.com/oceans-clip.mp4",
- "type":"video/mp4", "media":"", "title":""}]'/>
+ "type":"video/mp4", "media":"", "title":""},
+ {"src":"http://video-js.zencoder.com/oceans-clip.ogv",
+ "type":"video/ogg", "media":"", "title":""}]'/>
<img src="http://view.staging.vzaar.com/438562.thumb"
data-poster="http://view.staging.vzaar.com/438562.thumb"
@@ -43,9 +49,8 @@
data-poster="http://view.staging.vzaar.com/438562.thumb"
data-sources='[{"src":"http://view.staging.vzaar.com/438562/video",
"type":"video/mp4", "media":"", "title":""}]'/>
-
</div>
-
+
<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{}'>
@@ -54,6 +59,5 @@
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'/>
<p>Video Playback Not Supported</p>
</video>
-
</body>
</html>
View
@@ -1,6 +1,3 @@
-// add playlist to vj's components'
-_V_.options.components.push("playlist")
-
_V_.PlaylistEngine = _V_.Class.extend({
init: function(player, videos) {
this.player = player;
@@ -9,8 +6,12 @@ _V_.PlaylistEngine = _V_.Class.extend({
},
play: function(index) {
- this.currentIndex = index;
- this.updateVideo();
+ if (this.videos.length > 1) {
+ this.currentIndex = index;
+ this.updateVideo();
+ } else {
+ throw new Error("Playlist is empty");
+ };
},
pause: function() {
@@ -88,27 +89,16 @@ _V_.Playlist = _V_.Component.extend({
show: function() {
this.enableWebkitScrollbar();
- // calculate width based on number of thumbs in the playlist
- this.wrapperEl.style.width = this.calculateWrapperWidth() + "px";
-
- // playlist width should be the same as video
+ this.setWrapperWidth();
this.setWidth(this.player.width())
this.setPosition();
this._super();
},
- calculateWrapperWidth: function() {
- return (this.videos.length * 155);
- },
-
- setPosition: function() {
- this.el.style.bottom = this.hasScrollbar() ? "-134px" : "-124px";
- },
-
createElement: function() {
- // find playlist tag
- this.wrapperEl = document.getElementById(this.player.el.id + "_playlist");
+ this.wrapperEl = this.findPlaylistEl();
+
var id = this.wrapperEl.attributes.id.value;
// transform it into the wrapper tag
this.wrapperEl.removeAttribute('id');
@@ -121,6 +111,12 @@ _V_.Playlist = _V_.Component.extend({
return el;
},
+ findPlaylistEl: function() {
+ var el = document.getElementById(this.player.el.id + "_playlist");
+ if (!el) { throw Error("Playlist element not found") };
+ return el;
+ },
+
hasScrollbar: function() {
var wrapperWidth = parseInt(this.wrapperEl.style.width);
var width = parseInt(this.el.style.width);
@@ -156,7 +152,27 @@ _V_.Playlist = _V_.Component.extend({
setWidth: function(width) {
this.el.style.width = width + "px";
- }
+ },
+
+ setWrapperWidth: function() {
+ // calculate width based on number of thumbs in the playlist
+ this.wrapperEl.style.width = this.calculateWrapperWidth() + "px";
+ },
+
+ calculateWrapperWidth: function() {
+ return (this.videos.length * 155);
+ },
+
+ setPosition: function() {
+ if (this.hasScrollbar() && !(_V_.isAndroid())) {
+ var val = "-134px";
+ } else {
+ var val = "-124px";
+ };
+ this.el.style.bottom = val;
+ // add extra margin to main tag when many videos are embeded
+ this.player.el.style.marginBottom = val.slice(1);
+ },
});
_V_.PlaylistThumb = _V_.Component.extend({
View
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
+ <title>vzaar html5 tester</title>
+
+ <link href="design/playlist.css" rel="stylesheet" type="text/css">
+
+ <!-- video.js -->
+ <script src="http://vjs.zencdn.net/c/video.js"></script>
+
+ <!-- playlist -->
+ <script src="src/playlist.js"></script>
+
+ <!-- qunit -->
+ <script type="text/javascript" src="test/qunit-git.js"></script>
+ <link rel="stylesheet" href="test/qunit-git.css" type="text/css" media="screen" charset="utf-8"></link>
+
+ <script type="text/javascript" src="test/sinon-1.2.0.js"></script>
+ <script type="text/javascript" src="test/sinon-qunit-1.0.0.js"></script>
+
+ <script type="text/javascript" src="test/mocks.js"></script>
+ <script type="text/javascript" src="test/playlist_engine_test.js"></script>
+ <script type="text/javascript"
+ src="test/playlist_test.js"></script>
+
+ <script type="text/javascript"
+ src="test/playlist_thumb_test.js"></script>
+ <!-- end qunit -->
+
+ </head>
+
+ <body>
+ <h1 id="qunit-header">Tests</h1>
+ <h2 id="qunit-banner"></h2>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+
+
+
+ <div id="qunit-fixture">
+ <div id="vid1_playlist">
+ <img src="thumb1"
+ data-poster="poster1"
+ data-sources='[{"src":"src1.mp4",
+ "type":"video/mp4", "media":"", "title":""},
+ {"src":"src2.ogv",
+ "type":"video/ogg", "media":"", "title":""}]'/>
+
+ <img src="thumb2"
+ data-poster="poster2"
+ data-sources='[{"src":"src1.mp4",
+ "type":"video/mp4", "media":"", "title":""}]'/>
+ </div>
+ </body>
+</html>
View
@@ -0,0 +1,32 @@
+// mocks go here
+
+function mkPlayer() {
+ return {
+ pause: function(){},
+ load: function(){},
+ width: function(){},
+ src: function(sources){},
+ triggerReady: function(){},
+ tag: { poster: "poster" },
+ el: { id: "vid1", style: {} }
+ };
+};
+
+function mkVideo(src) {
+ return {
+ sources: function(){},
+ poster: function() { return src + '/poster' }
+ };
+};
+
+function videos() {
+ return [ mkVideo('src1'), mkVideo('src2') ];
+};
+
+function mkThumb() {
+ var player = mkPlayer();
+ var el = document.getElementById(player.el.id + "_playlist").children[0];
+ var options = { index: 0, el: el };
+ var obj = new _V_.PlaylistThumb(player, options);
+ return obj;
+};
Oops, something went wrong.

0 comments on commit 191e117

Please sign in to comment.