Author: andre
Date: 2010-04-01 20:26:14 +0200 (Thu, 01 Apr 2010)
New Revision: 41728
Modified:
openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css
openimages/trunk/src/main/webapp/oiplayer/index.html
openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
Log:
added a timeleft indicator
Modified: openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-04-01
14:24:41 UTC (rev 41727)
+++ openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-04-01
18:26:14 UTC (rev 41728)
@@ -114,26 +114,35 @@
float: left;
}
-div.oiplayer.fullscreen ul.controls li.play a,
-div.oiplayer.fullscreen ul.controls li.pause a { margin-left: 0; }
-
-div.oiplayer > div.controls.top ul.controls li.play a,
-div.oiplayer > div.controls.top ul.controls li.pause a { margin-left: 5px; }
-
-div.oiplayer div.oiplayerinfo
+div.oiplayer ul.controls li.position,
+div.oiplayer ul.controls li.timeleft
{
- font-size: xx-small;
- margin-top: 4px;
- background-color: #efefef;
+ float: left;
+ font-family: Monaco, Courier, monospaced;
+ font-size: 10px;
+ line-height: 26px;
+ color: #555;
+ text-align: right;
}
+div.oiplayer ul.controls li.position
+{
+ margin: 0 5px;
+ width: 32px;
+}
+div.oiplayer ul.controls li.timeleft
+{
+ margin-left: 5px;
+ width: 36px;
+}
+
div.oiplayer ul.controls li.sound a
{
float: right;
background-image: url(images/controls-soundon.png);
background-repeat: no-repeat;
width: 23px;
- margin-left: 7px;
+ margin-left: 5px;
}
div.oiplayer ul.controls li.sound.muted a
@@ -142,42 +151,30 @@
background-image: url(images/controls-soundoff.png);
background-repeat: no-repeat;
width: 23px;
- margin-left: 7px;
+ margin-left: 5px;
}
-div.oiplayer.fullscreen ul.controls li.sound a,
-div.oiplayer.fullscreen ul.controls li.sound.muted a { margin-right: 3px; }
-
-div.oiplayer div.top ul.controls li.sound a,
-div.oiplayer div.top ul.controls li.sound.muted a { margin-right: 8px; }
-
div.oiplayer ul.controls li.screen a
{
float: right;
background-image: url(images/controls-fullscreen.png);
background-repeat: no-repeat;
width: 23px;
- margin-left: 7px;
+ margin-left: 5px;
}
-div.oiplayer ul.controls li.position,
-div.oiplayer ul.controls li.timeleft
+div.oiplayer div.oiplayerinfo
{
- font-family: Monaco, Courier, monospaced;
- font-size: 12px;
- line-height: 26px;
- color: #555;
- margin-left: 0;
- float: left;
- width: 63px;
- text-align: center;
+ font-size: xx-small;
+ margin-top: 4px;
+ background-color: #efefef;
}
/* ### slider, jquery-ui etc. ### */
div.oiplayer div.controls li.slider
{
float: left;
- margin-left: 7px;
+ margin-left: 0px;
background: url(images/slider11-left.png) left -50px no-repeat;
padding-left: 9px;
}
@@ -237,7 +234,8 @@
/* dark (only possible with top really) */
div.oiplayer div.controls.dark { background-image:
url(images/controls-blackbg.png); }
-div.oiplayer div.controls.dark li.position { color: #efefef; }
+div.oiplayer div.controls.dark li.position,
+div.oiplayer div.controls.dark li.timeleft { color: #efefef; }
div.oiplayer div.controls.dark a { background-position: 0 -50px; }
div.oiplayer div.controls.dark a:hover { background-position: 0 0; }
@@ -270,6 +268,20 @@
div.oiplayer.fullscreen > div.player { margin: 0 auto; }
div.oiplayer.fullscreen > div.controls { margin: 0 auto; }
+div.oiplayer.fullscreen ul.controls li.play a,
+div.oiplayer.fullscreen ul.controls li.pause a { margin-left: 0; }
+
+div.oiplayer.fullscreen ul.controls li.sound a,
+div.oiplayer.fullscreen ul.controls li.sound.muted a { margin-right: 3px; }
+
+div.oiplayer > div.controls.top ul.controls li.play a,
+div.oiplayer > div.controls.top ul.controls li.pause a { margin-left: 5px; }
+
+div.oiplayer > div.controls.top ul.controls li.sound a,
+div.oiplayer > div.controls.top ul.controls li.sound.muted a { margin-right:
8px; }
+
+
+
/* inavailable / no compatible sources */
div.oiplayer.video.inavailable { background: url(images/preview_video.png)
left top repeat; }
div.oiplayer.audio.inavailable { background: url(images/preview_audio.png)
left top repeat; }
Modified: openimages/trunk/src/main/webapp/oiplayer/index.html
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/index.html 2010-04-01
14:24:41 UTC (rev 41727)
+++ openimages/trunk/src/main/webapp/oiplayer/index.html 2010-04-01
18:26:14 UTC (rev 41728)
@@ -53,7 +53,7 @@
Slider controllable with arrow keys
(requires <a
href="http://jqueryui.com/demos/slider/";>jquery.ui.slider.js</a>)
</li>
- <li>iPhone compatible (play works, but other controls are of no use).
+ <li>iPhone compatible (play works, but other controls are of no use).</li>
</ul>
<h3>Supported browsers</h3>
<ul>
@@ -74,7 +74,7 @@
<li>
<a
href="http://plugins.jquery.com/files/oiplayer-1.0.tar.gz";>Download</a> and
copy the
'oiplayer' directory to your site. Include these Javascript and css
files in the head of your
- html document.
+ html document (jQuery 1.4.2 and jQuery UI 1.8 are also possible).
<pre>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"><!-- help
ie --></script>
<script src="plugins/flowplayer-3.1.4.min.js"
type="text/javascript"><!-- help ie --></script>
Modified: openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
2010-04-01 14:24:41 UTC (rev 41727)
+++ openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
2010-04-01 18:26:14 UTC (rev 41728)
@@ -27,7 +27,7 @@
Value 'top' will add a css class of that name and will
hide/show controls on top of the player window.
Add a css class of your own to edit the appearance of
the controls (f.e. 'top dark').
*
- * @changes: iphone compatibility
+ * @changes: timeleft indicator
* @version: '$Id$'
*/
@@ -71,7 +71,7 @@
if (config.controls && player.url != undefined) {
$(div).append(createControls());
$(div).find('div.controls').width(player.width);
- $(div).find('li.slider').width(player.width - 182);
+ $(div).find('li.slider').width(player.width - 190);
if (config.controls != true) { // append classes
$(div).find('div.controls').addClass(config.controls);
if (config.controls.indexOf('top') > -1) {
@@ -145,6 +145,7 @@
pos(pl, ui.value);
}
});
+ $(ctrls).find("li.slider").after('<li class="timeleft">-'
+ $.oiplayer.totime(pl.duration) + '</li>');
}
/* show/hide */
@@ -168,6 +169,7 @@
player.seek(pos);
var ctrls = $( $.oiplayer.div(player) ).find('ul.controls');
$(ctrls).find('li.position').text( $.oiplayer.totime(pos) );
+ $(ctrls).find('li.timeleft').text('-' +
$.oiplayer.totime(player.duration - pos) );
if (pos > 0) {
$(ctrls).find('li.slider').addClass("changed");
} else {
@@ -236,13 +238,13 @@
$(div).find('.preview').width(player.width).height(player.height).css('margin-left',
half);
$(div).find('div.controls').width(player.width).css('margin-left',
half);
- $(div).find('div.controls li.slider').width(player.width - 182);
+ $(div).find('div.controls li.slider').width(player.width - 190);
} else {
$(div).find('div.player').width(player.width).height(player.height).css('margin-left',
'0');
$(div).find('.preview').width(player.width).height(player.height).css('margin-left',
'0');
$(div).find('div.controls').width(player.width).css('margin-left',
'0');
- $(div).find('div.controls li.slider').width(player.width - 182);
+ $(div).find('div.controls li.slider').width(player.width - 190);
}
var pos;
@@ -429,8 +431,8 @@
} else {
html = '<div class="controls"><ul class="controls">' +
'<li class="play"><a title="play"
href="#play">play</a></li>' +
+ '<li class="position">00:00</li>' +
'<li class="slider"><div class="slider"><div>
</div></div></li>' +
- '<li class="position">00:00</li>' +
'<li class="sound"><a title="mute"
href="#sound">mute</a></li>' +
'<li class="screen"><a title="fullscreen"
href="#fullscreen">fullscreen</a></li>' +
'</ul></div>';
@@ -473,19 +475,28 @@
var ctrls = $( $.oiplayer.div(player) ).find('ul.controls');
var pos = 0;
var progress = null;
- var sec = player.start;
+ //var sec = player.start;
var now;
var i = 0;
+ var left = player.duration;
+
clearInterval(progress);
progress = setInterval(function() {
pos = player.position();
- sec = Math.floor(pos);
+ //sec = Math.floor(pos);
//console.log("n: " + now + ", s: " + sec + ", pos: " + pos);
if (!isNaN(pos) && pos > 0 && pos != now) {
$(ctrls).find('li.position').text( $.oiplayer.totime(pos)
);
$(ctrls).find('div.slider > div').slider('option',
'value', pos);
$(ctrls).find('li.slider').addClass('changed');
+
+ //console.log("left: " + left);
+ if (player.duration > 0) {
+ left = player.duration - pos;
+ $(ctrls).find('li.timeleft').text("-" +
$.oiplayer.totime(left));
+ }
+
i = 0;
now = pos;
}
_______________________________________________
Cvs mailing list
[email protected]
http://lists.mmbase.org/mailman/listinfo/cvs
