Changeset 1291

Timestamp:

09/19/10 20:01:24 (3 years ago)

Author:

zach

Message:

Stylizing display

Location:

trunk/html5

Files:

• bin-debug/jwplayer.html5.js (modified) (15 diffs)
• src/html5/jwplayer.html5.display.js (modified) (5 diffs)

trunk/html5/bin-debug/jwplayer.html5.js

@@ -102 +102 @@
                                 try {
                                         if (typeof styles[style] == "number" && !(style == "zIndex" || style == "opacity")) {
-                                                styles[style] = styles[style] + "px";
+                                                if (style.match(/color/i)) {
+                                                        styles[style] = "#" + _pad(styles[style].toString(16), 6);
+                                                } else {
+                                                        styles[style] = styles[style] + "px";
+                                                }
                                         }
                                         domelement.style[style] = styles[style];
@@ -110 +114 @@
                 }
         };
+        
+        function _pad(string, length) {
+                while (string.length < length) {
+                        string = "0" + string;
+                }
+                return string;
+        }
+        
 })(jwplayer);
 /**
@@ -142 +154 @@
                                 margin: "auto",
                                 padding: 0,
-                                background: _api.skin.getComponentSettings("display").backgroundcolor === undefined ? "#000" : _api.skin.getComponentSettings("display").backgroundcolor.replace("0x", "#"),
+                                backgroundColor: _api.skin.getComponentSettings("display").backgroundcolor === undefined ? parseInt("000000", 16) : _api.skin.getComponentSettings("display").backgroundcolor,
                                 zIndex: 0
                         });
@@ -430 +442 @@
         /** Map with config for the jwplayerControlbar plugin. **/
         var _defaults = {
-                backgroundcolor: "000000",
+                backgroundcolor: parseInt("000000", 16),
                 margin: 10,
                 //font: "_sans",
                 font: "Arial,sans-serif",
                 fontsize: 10,
-                fontcolor: "000000",
+                fontcolor: parseInt("000000", 16),
                 fontstyle: "normal",
                 //fontweight: "normal",
                 fontweight: "bold",
-                buttoncolor: "ffffff",
+                buttoncolor: parseInt("ffffff", 16),
                 position: jwplayer.html5.view.positions.BOTTOM,
                 idlehide: false,
@@ -542 +554 @@
                         var wrappercss = {
                                 height: _api.skin.getSkinElement("controlbar", "background").height,
-                                backgroundColor: "#" + _settings.backgroundcolor
+                                backgroundColor: _settings.backgroundcolor
                         };
                         
@@ -567 +579 @@
                         if (!_ready && _wrapper.parentElement !== undefined) {
                                 _ready = true;
-                                if (_settings.position == jwplayer.html5.view.positions.OVER.toLowerCase()){
+                                if (_settings.position == jwplayer.html5.view.positions.OVER.toLowerCase()) {
                                         document.getElementById(_api.id).onmousemove = _fadeOut;
                                 }
@@ -598 +610 @@
                 }
                 
-                function _fadeIn(){
+                function _fadeIn() {
                         _wrapper.style.opacity = 1;
                 }
@@ -740 +752 @@
                                         css.cursor = "default";
                                         wid = 14 + 3 * _settings.fontsize;
-                                        css.color = "#" + _settings.fontcolor.substr(-6);
                                 } else if (element.indexOf("divider") === 0) {
                                         css.background = "url(" + _api.skin.getSkinElement("controlbar", "divider").src + ") repeat-x center left";
@@ -950 +961 @@
                         // Show / hide progress bar
                         if (event.newstate == jwplayer.api.events.state.IDLE) {
-                                if (!_settings.idlehide && _settings.position == jwplayer.html5.view.positions.OVER){
+                                if (!_settings.idlehide && _settings.position == jwplayer.html5.view.positions.OVER) {
                                         _fadeIn();
                                 }
@@ -1398 +1409 @@
                                         border: 0,
                                         margin: 0,
-                                        padding: 0
+                                        padding: 0,
+                                        zIndex: 3
                                 }
                         },
@@ -1412 +1424 @@
                                         height: _api.skin.getSkinElement("display", "background").height,
                                         margin: 0,
-                                        padding: 0
+                                        padding: 0,
+                                        zIndex: 2
                                 }
                         },
@@ -1426 +1439 @@
                                         margin: 0,
                                         padding: 0,
-                                        textDecoration: "none"
+                                        textDecoration: "none",
+                                        zIndex: 1
                                 }
                         },
                         display_text: {
                                 style: {
+                                        zIndex: 4,
                                         position: "relative",
-                                        top: "50%",
                                         opacity: 0.8,
-                                        backgroundColor: "black",
-                                        color: "white",
-                                        display: "none",
+                                        backgroundColor: parseInt("000000", 16),
+                                        color: parseInt("ffffff", 16),
                                         textAlign: "center",
                                         fontFamily: "Arial,sans-serif",
@@ -1474 +1487 @@
                                 width: width,
                                 height: height
+                        });
+                        _css(_display.display_text, {
+                                width: width
                         });
                         _css(_display.display_image, {
@@ -1549 +1565 @@
                 function _errorHandler(evt){
                         _hideDisplayIcon();
-                        _display.display_text.innerHTML = "<p>"+evt.error+"</p>";
+                        _display.display_text.innerHTML = evt.error;
                         _show(_display.display_text);
                         _display.display_text.style.top = ((_height -  _display.display_text.getBoundingClientRect().height) / 2) + "px";
@@ -2566 +2582 @@
                 var _loading = true;
                 var _completeInterval;
-                var _skinPath = jwplayer.html5.utils.getAbsolutePath(skinPath);
+                var _skinPath = skinPath;
                 
                 /** Load the skin **/
                 function _load() {
-                        if (_skinPath === undefined) {
+                        if (_skinPath === undefined || _skinPath == "") {
                                 _loadSkin(jwplayer.html5.defaultSkin().xml);
                         } else {
-                                jwplayer.utils.ajax(_skinPath, function(xmlrequest) {
+                                jwplayer.utils.ajax(jwplayer.html5.utils.getAbsolutePath(_skinPath), function(xmlrequest) {
                                         _loadSkin(xmlrequest.responseXML);
                                 }, function(path) {

trunk/html5/src/html5/jwplayer.html5.display.js

@@ -44 +44 @@
                                         border: 0,
                                         margin: 0,
-                                        padding: 0
+                                        padding: 0,
+                                        zIndex: 3
                                 }
                         },
@@ -58 +59 @@
                                         height: _api.skin.getSkinElement("display", "background").height,
                                         margin: 0,
-                                        padding: 0
+                                        padding: 0,
+                                        zIndex: 2
                                 }
                         },
@@ -72 +74 @@
                                         margin: 0,
                                         padding: 0,
-                                        textDecoration: "none"
+                                        textDecoration: "none",
+                                        zIndex: 1
                                 }
                         },
                         display_text: {
                                 style: {
+                                        zIndex: 4,
                                         position: "relative",
-                                        top: "50%",
                                         opacity: 0.8,
                                         backgroundColor: parseInt("000000", 16),
                                         color: parseInt("ffffff", 16),
-                                        display: "none",
                                         textAlign: "center",
                                         fontFamily: "Arial,sans-serif",
@@ -120 +122 @@
                                 width: width,
                                 height: height
+                        });
+                        _css(_display.display_text, {
+                                width: width
                         });
                         _css(_display.display_image, {
@@ -195 +200 @@
                 function _errorHandler(evt){
                         _hideDisplayIcon();
-                        _display.display_text.innerHTML = "<p>"+evt.error+"</p>";
+                        _display.display_text.innerHTML = evt.error;
                         _show(_display.display_text);
                         _display.display_text.style.top = ((_height -  _display.display_text.getBoundingClientRect().height) / 2) + "px";