Changeset 1259


Ignore:
Timestamp:
09/01/10 03:49:53 (3 years ago)
Author:
zach
Message:
  • Fixing buffer icon rotation and logo fading in / out #930
Location:
branches/html5
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • branches/html5/jwplayer.html5.js

    r1258 r1259  
    11991199                var _width; 
    12001200                var _height; 
     1201                var _degreesRotated; 
     1202                var _rotationInterval; 
     1203                var _bufferRotation = api.skin.getComponentSettings("display").bufferrotation === undefined ? 15 : parseInt(api.skin.getComponentSettings("display").bufferrotation, 10); 
     1204                var _bufferInterval = api.skin.getComponentSettings("display").bufferinterval === undefined ? 100 : parseInt(api.skin.getComponentSettings("display").bufferinterval, 10); 
    12011205                config.screencolor = (api.skin.getComponentSettings("display").backgroundcolor === undefined) ? config.screencolor : api.skin.getComponentSettings("display").backgroundcolor; 
    1202                 config.screencolor = (config.screencolor === undefined) ? "" : config.screencolor; 
     1206                config.screencolor = (config.screencolor === undefined) ? "" : config.screencolor.replace("0x", "#"); 
    12031207                var _elements = _initializeDisplayElements(); 
    12041208                api.jwAddEventListener(jwplayer.api.events.JWPLAYER_PLAYER_STATE, _stateHandler); 
    … …  
    12131217                        _display.display = createElement("div", "display"); 
    12141218                        _display.display_image = createElement("div", "display_image"); 
    1215                         _display.display_icon = createElement("img", "display_icon"); 
    1216                         _display.display_icon.src = api.skin.getSkinElement("display", "playIcon").src; 
    1217                         _display.display_icon.alt = "Click to play video"; 
     1219                        _display.display_icon = createElement("div", "display_icon"); 
    12181220                        _display.display_iconBackground = createElement("div", "display_iconBackground"); 
    12191221                        _display.logo = createElement("div", "logo"); 
    … …  
    13661368                 
    13671369                 
    1368                 function _setIcon(path) { 
    1369                         _display.display_icon.src = path; 
    1370                 } 
    1371                  
    1372                  
    1373                 function _animate(element, state) { 
    1374                         var speed = "slow"; 
    1375                         if (!_display.animate) { 
    1376                                 return; 
    1377                         } 
    1378                         if (state) { 
    1379                                 element.slideDown(speed, function() { 
    1380                                         _animate(element); 
    1381                                 }); 
    1382                         } else { 
    1383                                 element.slideUp(speed, function() { 
    1384                                         _animate(element, true); 
    1385                                 }); 
    1386                         } 
    1387                 } 
    1388                  
    1389                  
    13901370                function _setDisplayIcon(newIcon) { 
    13911371                        _show(_display.display_iconBackground); 
    1392                         _display.display_icon.src = api.skin.getSkinElement("display", newIcon).src; 
     1372                        _display.display_icon.style["background-image"] = (['url(', api.skin.getSkinElement("display", newIcon).src, ')']).join(''); 
    13931373                        _css(_display.display_icon, { 
    13941374                                display: "block", 
    1395                                 top: (api.skin.getSkinElement("display", "background").height - api.skin.getSkinElement("display", newIcon).height) / 2 + "px", 
    1396                                 left: (api.skin.getSkinElement("display", "background").width - api.skin.getSkinElement("display", newIcon).width) / 2 + "px" 
     1375                                width: api.skin.getSkinElement("display", newIcon).width, 
     1376                                height: api.skin.getSkinElement("display", newIcon).height, 
     1377                                top: (api.skin.getSkinElement("display", "background").height - api.skin.getSkinElement("display", newIcon).height) / 2, 
     1378                                left: (api.skin.getSkinElement("display", "background").width - api.skin.getSkinElement("display", newIcon).width) / 2 
    13971379                        }); 
     1380                        if (api.skin.getSkinElement("display", newIcon + "Over") !== undefined) { 
     1381                                _display.display_icon.onmouseover = function(evt) { 
     1382                                        evt.stopPropagation(); 
     1383                                        _display.display_icon.style["background-image"] = ["url(", api.skin.getSkinElement("display", newIcon + "Over").src, ")"].join(""); 
     1384                                }; 
     1385                                _display.display_icon.onmouseout = function(evt) { 
     1386                                        evt.stopPropagation(); 
     1387                                        _display.display_icon.style["background-image"] = ["url(", api.skin.getSkinElement("display", newIcon).src, ")"].join(""); 
     1388                                }; 
     1389                        } else { 
     1390                                _display.display_icon.onmouseover = undefined; 
     1391                                _display.display_icon.onmouseout = undefined; 
     1392                        } 
    13981393                } 
    13991394                 
    … …  
    14041399                 
    14051400                function _stateHandler(obj) { 
    1406                         _display.animate = false; 
     1401                        if (_rotationInterval !== undefined) { 
     1402                                clearInterval(_rotationInterval); 
     1403                                _rotationInterval = undefined; 
     1404                                jwplayer.html5.utils.animations.rotate(_display.display_icon, 0); 
     1405                        } 
    14071406                        switch (api.jwGetState()) { 
    14081407                                case jwplayer.api.events.state.BUFFERING: 
    1409                                         _show(_display.logo); 
    1410                                         setTimeout(function() { 
    1411                                                 _hide(_display.logo); 
    1412                                         //.fadeOut(_logoDefaults.out * 1000); 
    1413                                         }, _logoDefaults.timeout * 1000); 
     1408                                        jwplayer.html5.utils.fadeTo(_display.logo, 0, _logoDefaults.timeout, 1); 
    14141409                                        _setDisplayIcon("bufferIcon"); 
    1415                                         _display.animate = true; 
    1416                                         // TODO: Buffer Icon rotation 
    1417                                         if (false) { 
    1418                                                 _animate(_display.display_iconBackground); 
    1419                                         } 
    1420                                         _hide(_display.display_iconBackground); 
     1410                                        _degreesRotated = 0; 
     1411                                        _rotationInterval = setInterval(function() { 
     1412                                                _degreesRotated += _bufferRotation; 
     1413                                                jwplayer.html5.utils.animations.rotate(_display.display_icon, _degreesRotated % 360); 
     1414                                        }, _bufferInterval); 
     1415                                        _setDisplayIcon("bufferIcon"); 
    14211416                                        break; 
    14221417                                case jwplayer.api.events.state.PAUSED: 
    1423                                         _show(_display.logo); 
     1418                                        jwplayer.html5.utils.fadeTo(_display.logo, 1, 0, 0); 
    14241419                                        _css(_display.display_image, { 
    14251420                                                background: "transparent no-repeat center center" 
    … …  
    14291424                                        break; 
    14301425                                case jwplayer.api.events.state.IDLE: 
    1431                                         _hide(_display.logo); 
     1426                                        _display.logo.style.display = "block"; 
    14321427                                        var background = api.jwGetPlaylist()[api.jwGetItem()].image === "" ? config.screencolor : config.screencolor + " url('" + jwplayer.html5.utils.getAbsolutePath(api.jwGetPlaylist()[api.jwGetItem()].image) + "')"; 
    14331428                                        _css(_display.display_image, { 
    … …  
    14511446                                                 
    14521447                                                } 
    1453                                                 _show(_display.logo); 
    1454                                                 setTimeout(function() { 
    1455                                                         _hide(_display.logo); 
    1456                                                 }, _logoDefaults.timeout * 1000); 
     1448                                                _display.logo.style.display = "block"; 
     1449                                                jwplayer.html5.utils.fadeTo(_display.logo, 0, _logoDefaults.timeout, 1); 
    14571450                                                _css(_display.display_image, { 
    14581451                                                        background: "transparent no-repeat center center" 
    … …  
    25742567 */ 
    25752568(function(jwplayer) { 
     2569        var _animations = {}; 
     2570         
    25762571        jwplayer.html5.utils.animations = function() { 
    25772572        }; 
    … …  
    25902585         
    25912586        jwplayer.html5.utils.animations.rotate = function(domelement, deg) { 
    2592                 transform(domelement, ["rotate(", deg, "deg)"].join("")); 
     2587                jwplayer.html5.utils.animations.transform(domelement, ["rotate(", deg, "deg)"].join("")); 
    25932588        }; 
    25942589         
    25952590        jwplayer.html5.utils.fadeTo = function(domelement, endAlpha, time, startAlpha, startTime) { 
     2591                // Interrupting 
     2592                if (_animations[domelement] != startTime && startTime !== undefined){ 
     2593                        return; 
     2594                }  
    25962595                var currentTime = new Date().getTime(); 
    25972596                if (startAlpha === undefined) { 
    … …  
    26022601                }        
    26032602                if (domelement.style.opacity == endAlpha && domelement.style.opacity !== ""){ 
    2604                         alert(domelement.style.opacity+":"+endAlpha); 
    26052603                        return; 
    26062604                } 
    26072605                if (startTime === undefined) { 
    26082606                        startTime = currentTime; 
     2607                        _animations[domelement] = startTime;  
    26092608                } 
    26102609                var percentTime = (currentTime - startTime) / (time * 1000); 
     2610                percentTime = percentTime > 1 ? 1 : percentTime; 
    26112611                var delta = endAlpha - startAlpha; 
    26122612                var alpha = startAlpha + (percentTime * delta); 

  • branches/html5/src/html5/jwplayer.html5.display.js

    r1258 r1259  
    4040                var _width; 
    4141                var _height; 
     42                var _degreesRotated; 
     43                var _rotationInterval; 
     44                var _bufferRotation = api.skin.getComponentSettings("display").bufferrotation === undefined ? 15 : parseInt(api.skin.getComponentSettings("display").bufferrotation, 10); 
     45                var _bufferInterval = api.skin.getComponentSettings("display").bufferinterval === undefined ? 100 : parseInt(api.skin.getComponentSettings("display").bufferinterval, 10); 
    4246                config.screencolor = (api.skin.getComponentSettings("display").backgroundcolor === undefined) ? config.screencolor : api.skin.getComponentSettings("display").backgroundcolor; 
    43                 config.screencolor = (config.screencolor === undefined) ? "" : config.screencolor; 
     47                config.screencolor = (config.screencolor === undefined) ? "" : config.screencolor.replace("0x", "#"); 
    4448                var _elements = _initializeDisplayElements(); 
    4549                api.jwAddEventListener(jwplayer.api.events.JWPLAYER_PLAYER_STATE, _stateHandler); 
    … …  
    5458                        _display.display = createElement("div", "display"); 
    5559                        _display.display_image = createElement("div", "display_image"); 
    56                         _display.display_icon = createElement("img", "display_icon"); 
    57                         _display.display_icon.src = api.skin.getSkinElement("display", "playIcon").src; 
    58                         _display.display_icon.alt = "Click to play video"; 
     60                        _display.display_icon = createElement("div", "display_icon"); 
    5961                        _display.display_iconBackground = createElement("div", "display_iconBackground"); 
    6062                        _display.logo = createElement("div", "logo"); 
    … …  
    207209                 
    208210                 
    209                 function _setIcon(path) { 
    210                         _display.display_icon.src = path; 
    211                 } 
    212                  
    213                  
    214                 function _animate(element, state) { 
    215                         var speed = "slow"; 
    216                         if (!_display.animate) { 
    217                                 return; 
    218                         } 
    219                         if (state) { 
    220                                 element.slideDown(speed, function() { 
    221                                         _animate(element); 
    222                                 }); 
    223                         } else { 
    224                                 element.slideUp(speed, function() { 
    225                                         _animate(element, true); 
    226                                 }); 
    227                         } 
    228                 } 
    229                  
    230                  
    231211                function _setDisplayIcon(newIcon) { 
    232212                        _show(_display.display_iconBackground); 
    233                         _display.display_icon.src = api.skin.getSkinElement("display", newIcon).src; 
     213                        _display.display_icon.style["background-image"] = (['url(', api.skin.getSkinElement("display", newIcon).src, ')']).join(''); 
    234214                        _css(_display.display_icon, { 
    235215                                display: "block", 
    236                                 top: (api.skin.getSkinElement("display", "background").height - api.skin.getSkinElement("display", newIcon).height) / 2 + "px", 
    237                                 left: (api.skin.getSkinElement("display", "background").width - api.skin.getSkinElement("display", newIcon).width) / 2 + "px" 
     216                                width: api.skin.getSkinElement("display", newIcon).width, 
     217                                height: api.skin.getSkinElement("display", newIcon).height, 
     218                                top: (api.skin.getSkinElement("display", "background").height - api.skin.getSkinElement("display", newIcon).height) / 2, 
     219                                left: (api.skin.getSkinElement("display", "background").width - api.skin.getSkinElement("display", newIcon).width) / 2 
    238220                        }); 
     221                        if (api.skin.getSkinElement("display", newIcon + "Over") !== undefined) { 
     222                                _display.display_icon.onmouseover = function(evt) { 
     223                                        evt.stopPropagation(); 
     224                                        _display.display_icon.style["background-image"] = ["url(", api.skin.getSkinElement("display", newIcon + "Over").src, ")"].join(""); 
     225                                }; 
     226                                _display.display_icon.onmouseout = function(evt) { 
     227                                        evt.stopPropagation(); 
     228                                        _display.display_icon.style["background-image"] = ["url(", api.skin.getSkinElement("display", newIcon).src, ")"].join(""); 
     229                                }; 
     230                        } else { 
     231                                _display.display_icon.onmouseover = undefined; 
     232                                _display.display_icon.onmouseout = undefined; 
     233                        } 
    239234                } 
    240235                 
    … …  
    245240                 
    246241                function _stateHandler(obj) { 
    247                         _display.animate = false; 
     242                        if (_rotationInterval !== undefined) { 
     243                                clearInterval(_rotationInterval); 
     244                                _rotationInterval = undefined; 
     245                                jwplayer.html5.utils.animations.rotate(_display.display_icon, 0); 
     246                        } 
    248247                        switch (api.jwGetState()) { 
    249248                                case jwplayer.api.events.state.BUFFERING: 
    250                                         _show(_display.logo); 
    251                                         setTimeout(function() { 
    252                                                 _hide(_display.logo); 
    253                                         //.fadeOut(_logoDefaults.out * 1000); 
    254                                         }, _logoDefaults.timeout * 1000); 
     249                                        jwplayer.html5.utils.fadeTo(_display.logo, 0, _logoDefaults.timeout, 1); 
    255250                                        _setDisplayIcon("bufferIcon"); 
    256                                         _display.animate = true; 
    257                                         // TODO: Buffer Icon rotation 
    258                                         if (false) { 
    259                                                 _animate(_display.display_iconBackground); 
    260                                         } 
    261                                         _hide(_display.display_iconBackground); 
     251                                        _degreesRotated = 0; 
     252                                        _rotationInterval = setInterval(function() { 
     253                                                _degreesRotated += _bufferRotation; 
     254                                                jwplayer.html5.utils.animations.rotate(_display.display_icon, _degreesRotated % 360); 
     255                                        }, _bufferInterval); 
     256                                        _setDisplayIcon("bufferIcon"); 
    262257                                        break; 
    263258                                case jwplayer.api.events.state.PAUSED: 
    264                                         _show(_display.logo); 
     259                                        jwplayer.html5.utils.fadeTo(_display.logo, 1, 0, 0); 
    265260                                        _css(_display.display_image, { 
    266261                                                background: "transparent no-repeat center center" 
    … …  
    270265                                        break; 
    271266                                case jwplayer.api.events.state.IDLE: 
    272                                         _hide(_display.logo); 
     267                                        _display.logo.style.display = "block"; 
    273268                                        var background = api.jwGetPlaylist()[api.jwGetItem()].image === "" ? config.screencolor : config.screencolor + " url('" + jwplayer.html5.utils.getAbsolutePath(api.jwGetPlaylist()[api.jwGetItem()].image) + "')"; 
    274269                                        _css(_display.display_image, { 
    … …  
    292287                                                 
    293288                                                } 
    294                                                 _show(_display.logo); 
    295                                                 setTimeout(function() { 
    296                                                         _hide(_display.logo); 
    297                                                 }, _logoDefaults.timeout * 1000); 
     289                                                _display.logo.style.display = "block"; 
     290                                                jwplayer.html5.utils.fadeTo(_display.logo, 0, _logoDefaults.timeout, 1); 
    298291                                                _css(_display.display_image, { 
    299292                                                        background: "transparent no-repeat center center" 

  • branches/html5/src/html5/jwplayer.html5.utils.animations.js

    r1253 r1259  
    66 */ 
    77(function(jwplayer) { 
     8        var _animations = {}; 
     9         
    810        jwplayer.html5.utils.animations = function() { 
    911        }; 
    … …  
    2224         
    2325        jwplayer.html5.utils.animations.rotate = function(domelement, deg) { 
    24                 transform(domelement, ["rotate(", deg, "deg)"].join("")); 
     26                jwplayer.html5.utils.animations.transform(domelement, ["rotate(", deg, "deg)"].join("")); 
    2527        }; 
    2628         
    2729        jwplayer.html5.utils.fadeTo = function(domelement, endAlpha, time, startAlpha, startTime) { 
     30                // Interrupting 
     31                if (_animations[domelement] != startTime && startTime !== undefined){ 
     32                        return; 
     33                }  
    2834                var currentTime = new Date().getTime(); 
    2935                if (startAlpha === undefined) { 
    … …  
    3440                }        
    3541                if (domelement.style.opacity == endAlpha && domelement.style.opacity !== ""){ 
    36                         alert(domelement.style.opacity+":"+endAlpha); 
    3742                        return; 
    3843                } 
    3944                if (startTime === undefined) { 
    4045                        startTime = currentTime; 
     46                        _animations[domelement] = startTime;  
    4147                } 
    4248                var percentTime = (currentTime - startTime) / (time * 1000); 
     49                percentTime = percentTime > 1 ? 1 : percentTime; 
    4350                var delta = endAlpha - startAlpha; 
    4451                var alpha = startAlpha + (percentTime * delta); 
Note: See TracChangeset for help on using the changeset viewer.