Changeset 990


Ignore:
Timestamp:
05/04/10 16:15:16 (3 years ago)
Author:
zach
Message:

Fixing Display and Controlbar cursor issue
Removing display buffer icon

Location:
trunk/html5
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/html5/jquery.jwplayer.js

    r989 r990  
    6161                buildElement('timeSliderThumb', 'left', false, player); 
    6262                buildElement('capRight', 'right', true, player); 
    63                 buildElement('fullscreenButton', 'right', false, player); 
    64                 buildElement('normalscreenButton', 'right', true, player); 
    65                 buildElement('divider2', 'right', true, player); 
     63                //buildElement('fullscreenButton', 'right', false, player); 
     64                //buildElement('normalscreenButton', 'right', true, player); 
     65                //buildElement('divider2', 'right', true, player); 
    6666                buildElement('volumeSliderRail', 'right', false, player); 
    6767                buildElement('volumeSliderProgress', 'right', true, player); 
    … …  
    195195                var trl = '#' + player.id + '_timeSliderRail'; 
    196196                var vrl = '#' + player.id + '_volumeSliderRail'; 
    197                 $(bar).css('cursor', 'hand'); 
    198                 $(trl).css('cursor', 'hand'); 
    199                 $(vrl).css('cursor', 'hand'); 
     197                $(bar).css('cursor', 'pointer'); 
     198                $(trl).css('cursor', 'pointer'); 
     199                $(vrl).css('cursor', 'pointer'); 
    200200                $(bar).mousedown(function(evt) { 
    201201                        if (evt.pageX >= $(trl).offset().left && evt.pageX <= $(trl).offset().left + $(trl).width()) { 
    … …  
    399399        /** Update the volume level. **/ 
    400400        function volumeHandler(event) { 
    401                 var rwd = $('#' + event.id + '_volumeSliderRail').width(); 
    402                 var wid = Math.round(event.volume / 100 * rwd); 
    403                 var rig = $('#' + event.id + '_volumeSliderRail').css('right').substr(0, 2); 
    404                 $('#' + event.id + '_volumeSliderProgress').css('width', wid); 
    405                 $('#' + event.id + '_volumeSliderProgress').css('right', (1 * rig + rwd - wid)); 
     401                var progress = isNaN(event.volume / 100) ? 1 : event.volume / 100; 
     402                var railWidth = $('#' + event.id + '_volumeSliderRail').width(); 
     403                var railRight = parseInt($('#' + event.id + '_volumeSliderRail').css('right').toString().replace('px', ''), 10); 
     404                var progressWidth = isNaN(Math.round(railWidth * progress)) ? 0 : Math.round(railWidth * progress); 
     405                 
     406                $('#' + event.id + '_volumeSliderProgress').css('width', progressWidth); 
     407                $('#' + event.id + '_volumeSliderProgress').css('right', (railWidth + railRight - progressWidth)); 
    406408        } 
    407409         
    … …  
    951953                displays[player.id].domelement = domelement; 
    952954                var meta = player.meta(); 
    953                 domelement.before("<div id='" + player.id + "_display' style='width:" + meta.width + "px;height: " + meta.height + "px;position:relative;z-index:50' ><a id='" + player.id + "_displayImage' href='" + $.fn.jwplayerUtils.getAbsolutePath(meta.sources[meta.source].file) + "'>&nbsp;</a><div id='" + player.id + "_displayIconBackground' alt='Click to play video' style='position:absolute; top:" + (meta.height - player.skin.display.elements.background.height) / 2 + "px; left:" + (meta.width - player.skin.display.elements.background.width) / 2 + "px; border:0; background-image:url(" + player.skin.display.elements.background.src + "); width:" + player.skin.display.elements.background.width + "px;height:" + player.skin.display.elements.background.height + "px;' ><img id='" + player.id + "_displayIcon' src='" + player.skin.display.elements.playIcon.src + "' alt='Click to play video' style='position:absolute; top:" + (player.skin.display.elements.background.height - player.skin.display.elements.playIcon.height) / 2 + "px; left:" + (player.skin.display.elements.background.width - player.skin.display.elements.playIcon.width) / 2 + "px; border:0;' /></div></div>"); 
     955                domelement.before("<div id='" + player.id + "_display' style='cursor:pointer;width:" + meta.width + "px;height: " + meta.height + "px;position:relative;z-index:50' ><a id='" + player.id + "_displayImage' href='" + $.fn.jwplayerUtils.getAbsolutePath(meta.sources[meta.source].file) + "'>&nbsp;</a><div id='" + player.id + "_displayIconBackground' alt='Click to play video' style='cursor:pointer;position:absolute; top:" + (meta.height - player.skin.display.elements.background.height) / 2 + "px; left:" + (meta.width - player.skin.display.elements.background.width) / 2 + "px; border:0; background-image:url(" + player.skin.display.elements.background.src + "); width:" + player.skin.display.elements.background.width + "px;height:" + player.skin.display.elements.background.height + "px;' ><img id='" + player.id + "_displayIcon' src='" + player.skin.display.elements.playIcon.src + "' alt='Click to play video' style='cursor:pointer;position:absolute; top:" + (player.skin.display.elements.background.height - player.skin.display.elements.playIcon.height) / 2 + "px; left:" + (player.skin.display.elements.background.width - player.skin.display.elements.playIcon.width) / 2 + "px; border:0;' /></div></div>"); 
    954956                var display = $("#" + player.id + "_display"); 
    955957                var displayImage = $("#" + player.id + "_displayImage"); 
    … …  
    957959                var displayIconBackground = $("#" + player.id + "_displayIconBackground"); 
    958960                displayImage.jwplayerCSS({ 
    959                         'display': "block", 
    960                         'background': "#ffffff url('" + $.fn.jwplayerUtils.getAbsolutePath(player.config.image) + "') no-repeat center center", 
    961                         'width': meta.width, 
    962                         'height': meta.height, 
    963                         'position': "relative", 
    964                         'left': 0, 
    965                         'top': 0 
     961                        display: 'block', 
     962                        background: '#ffffff url(\'' + $.fn.jwplayerUtils.getAbsolutePath(player.config.image) + '\') no-repeat center center', 
     963                        width: meta.width, 
     964                        height: meta.height, 
     965                        position: 'relative', 
     966                        cursor: 'pointer', 
     967                        left: 0, 
     968                        top: 0 
    966969                }); 
    967970                 
    … …  
    994997        } 
    995998         
     999        function animate(element, state) { 
     1000                var speed = 'slow'; 
     1001                if (!displays[player.id].animate) { 
     1002                        return; 
     1003                } 
     1004                if (state) { 
     1005                        element.slideDown(speed, function() { 
     1006                                animate(element); 
     1007                        }); 
     1008                } else { 
     1009                        element.slideUp(speed, function() { 
     1010                                animate(element, true); 
     1011                        }); 
     1012                } 
     1013        } 
     1014         
     1015         
    9961016        function stateHandler(obj) { 
    9971017                player = $.jwplayer(obj.id); 
     1018                displays[player.id].animate = false; 
    9981019                switch (player.model.state) { 
    9991020                        case $.fn.jwplayer.states.BUFFERING: 
    1000                                 displays[obj.id].displayIconBackground.css("display", "block"); 
    10011021                                displays[obj.id].displayIcon[0].src = player.skin.display.elements.bufferIcon.src; 
    10021022                                displays[obj.id].displayIcon.css({ 
    … …  
    10051025                                        left: (player.skin.display.elements.background.width - player.skin.display.elements.bufferIcon.width) / 2 + "px" 
    10061026                                }); 
     1027                                displays[player.id].animate = true; 
     1028                                //animate(displays[obj.id].displayIconBackground); 
     1029                                displays[obj.id].displayIconBackground.css('display', 'none'); 
    10071030                                break; 
    10081031                        case $.fn.jwplayer.states.PAUSED: 
    … …  
    20122035                                'bottom': 'auto', 
    20132036                                'clear': 'none', 
    2014                                 'cursor': 'default', 
    20152037                                'float': 'none', 
    20162038                                'font-family': '"Arial", "Helvetica", sans-serif', 
    … …  
    20532075        /** Gets an absolute file path based on a relative filepath **/ 
    20542076        $.fn.jwplayerUtils.getAbsolutePath = function(path) { 
     2077                if ($.fn.jwplayerUtils.isNull(path)){ 
     2078                        return path; 
     2079                } 
    20552080                if (isAbsolutePath(path)) { 
    20562081                        return path; 
    … …  
    20732098         
    20742099        function isAbsolutePath(path) { 
    2075                 if(path === undefined){ 
     2100                if($.fn.jwplayerUtils.isNull(path)){ 
    20762101                        return; 
    20772102                } 

  • trunk/html5/src/jquery.jwplayerControlbar.js

    r989 r990  
    6161                buildElement('timeSliderThumb', 'left', false, player); 
    6262                buildElement('capRight', 'right', true, player); 
    63                 buildElement('fullscreenButton', 'right', false, player); 
    64                 buildElement('normalscreenButton', 'right', true, player); 
    65                 buildElement('divider2', 'right', true, player); 
     63                //buildElement('fullscreenButton', 'right', false, player); 
     64                //buildElement('normalscreenButton', 'right', true, player); 
     65                //buildElement('divider2', 'right', true, player); 
    6666                buildElement('volumeSliderRail', 'right', false, player); 
    6767                buildElement('volumeSliderProgress', 'right', true, player); 
    … …  
    195195                var trl = '#' + player.id + '_timeSliderRail'; 
    196196                var vrl = '#' + player.id + '_volumeSliderRail'; 
    197                 $(bar).css('cursor', 'hand'); 
    198                 $(trl).css('cursor', 'hand'); 
    199                 $(vrl).css('cursor', 'hand'); 
     197                $(bar).css('cursor', 'pointer'); 
     198                $(trl).css('cursor', 'pointer'); 
     199                $(vrl).css('cursor', 'pointer'); 
    200200                $(bar).mousedown(function(evt) { 
    201201                        if (evt.pageX >= $(trl).offset().left && evt.pageX <= $(trl).offset().left + $(trl).width()) { 
    … …  
    399399        /** Update the volume level. **/ 
    400400        function volumeHandler(event) { 
    401                 var rwd = $('#' + event.id + '_volumeSliderRail').width(); 
    402                 var wid = Math.round(event.volume / 100 * rwd); 
    403                 var rig = $('#' + event.id + '_volumeSliderRail').css('right').substr(0, 2); 
    404                 $('#' + event.id + '_volumeSliderProgress').css('width', wid); 
    405                 $('#' + event.id + '_volumeSliderProgress').css('right', (1 * rig + rwd - wid)); 
     401                var progress = isNaN(event.volume / 100) ? 1 : event.volume / 100; 
     402                var railWidth = $('#' + event.id + '_volumeSliderRail').width(); 
     403                var railRight = parseInt($('#' + event.id + '_volumeSliderRail').css('right').toString().replace('px', ''), 10); 
     404                var progressWidth = isNaN(Math.round(railWidth * progress)) ? 0 : Math.round(railWidth * progress); 
     405                 
     406                $('#' + event.id + '_volumeSliderProgress').css('width', progressWidth); 
     407                $('#' + event.id + '_volumeSliderProgress').css('right', (railWidth + railRight - progressWidth)); 
    406408        } 
    407409         

  • trunk/html5/src/jquery.jwplayerDisplay.js

    r983 r990  
    1313                displays[player.id].domelement = domelement; 
    1414                var meta = player.meta(); 
    15                 domelement.before("<div id='" + player.id + "_display' style='width:" + meta.width + "px;height: " + meta.height + "px;position:relative;z-index:50' ><a id='" + player.id + "_displayImage' href='" + $.fn.jwplayerUtils.getAbsolutePath(meta.sources[meta.source].file) + "'>&nbsp;</a><div id='" + player.id + "_displayIconBackground' alt='Click to play video' style='position:absolute; top:" + (meta.height - player.skin.display.elements.background.height) / 2 + "px; left:" + (meta.width - player.skin.display.elements.background.width) / 2 + "px; border:0; background-image:url(" + player.skin.display.elements.background.src + "); width:" + player.skin.display.elements.background.width + "px;height:" + player.skin.display.elements.background.height + "px;' ><img id='" + player.id + "_displayIcon' src='" + player.skin.display.elements.playIcon.src + "' alt='Click to play video' style='position:absolute; top:" + (player.skin.display.elements.background.height - player.skin.display.elements.playIcon.height) / 2 + "px; left:" + (player.skin.display.elements.background.width - player.skin.display.elements.playIcon.width) / 2 + "px; border:0;' /></div></div>"); 
     15                domelement.before("<div id='" + player.id + "_display' style='cursor:pointer;width:" + meta.width + "px;height: " + meta.height + "px;position:relative;z-index:50' ><a id='" + player.id + "_displayImage' href='" + $.fn.jwplayerUtils.getAbsolutePath(meta.sources[meta.source].file) + "'>&nbsp;</a><div id='" + player.id + "_displayIconBackground' alt='Click to play video' style='cursor:pointer;position:absolute; top:" + (meta.height - player.skin.display.elements.background.height) / 2 + "px; left:" + (meta.width - player.skin.display.elements.background.width) / 2 + "px; border:0; background-image:url(" + player.skin.display.elements.background.src + "); width:" + player.skin.display.elements.background.width + "px;height:" + player.skin.display.elements.background.height + "px;' ><img id='" + player.id + "_displayIcon' src='" + player.skin.display.elements.playIcon.src + "' alt='Click to play video' style='cursor:pointer;position:absolute; top:" + (player.skin.display.elements.background.height - player.skin.display.elements.playIcon.height) / 2 + "px; left:" + (player.skin.display.elements.background.width - player.skin.display.elements.playIcon.width) / 2 + "px; border:0;' /></div></div>"); 
    1616                var display = $("#" + player.id + "_display"); 
    1717                var displayImage = $("#" + player.id + "_displayImage"); 
    … …  
    1919                var displayIconBackground = $("#" + player.id + "_displayIconBackground"); 
    2020                displayImage.jwplayerCSS({ 
    21                         'display': "block", 
    22                         'background': "#ffffff url('" + $.fn.jwplayerUtils.getAbsolutePath(player.config.image) + "') no-repeat center center", 
    23                         'width': meta.width, 
    24                         'height': meta.height, 
    25                         'position': "relative", 
    26                         'left': 0, 
    27                         'top': 0 
     21                        display: 'block', 
     22                        background: '#ffffff url(\'' + $.fn.jwplayerUtils.getAbsolutePath(player.config.image) + '\') no-repeat center center', 
     23                        width: meta.width, 
     24                        height: meta.height, 
     25                        position: 'relative', 
     26                        cursor: 'pointer', 
     27                        left: 0, 
     28                        top: 0 
    2829                }); 
    2930                 
    … …  
    5657        } 
    5758         
     59        function animate(element, state) { 
     60                var speed = 'slow'; 
     61                if (!displays[player.id].animate) { 
     62                        return; 
     63                } 
     64                if (state) { 
     65                        element.slideDown(speed, function() { 
     66                                animate(element); 
     67                        }); 
     68                } else { 
     69                        element.slideUp(speed, function() { 
     70                                animate(element, true); 
     71                        }); 
     72                } 
     73        } 
     74         
     75         
    5876        function stateHandler(obj) { 
    5977                player = $.jwplayer(obj.id); 
     78                displays[player.id].animate = false; 
    6079                switch (player.model.state) { 
    6180                        case $.fn.jwplayer.states.BUFFERING: 
    62                                 displays[obj.id].displayIconBackground.css("display", "block"); 
    6381                                displays[obj.id].displayIcon[0].src = player.skin.display.elements.bufferIcon.src; 
    6482                                displays[obj.id].displayIcon.css({ 
    … …  
    6785                                        left: (player.skin.display.elements.background.width - player.skin.display.elements.bufferIcon.width) / 2 + "px" 
    6886                                }); 
     87                                displays[player.id].animate = true; 
     88                                //animate(displays[obj.id].displayIconBackground); 
     89                                displays[obj.id].displayIconBackground.css('display', 'none'); 
    6990                                break; 
    7091                        case $.fn.jwplayer.states.PAUSED: 

  • trunk/html5/src/jquery.jwplayerUtils.js

    r975 r990  
    121121                                'bottom': 'auto', 
    122122                                'clear': 'none', 
    123                                 'cursor': 'default', 
    124123                                'float': 'none', 
    125124                                'font-family': '"Arial", "Helvetica", sans-serif', 
    … …  
    162161        /** Gets an absolute file path based on a relative filepath **/ 
    163162        $.fn.jwplayerUtils.getAbsolutePath = function(path) { 
     163                if ($.fn.jwplayerUtils.isNull(path)){ 
     164                        return path; 
     165                } 
    164166                if (isAbsolutePath(path)) { 
    165167                        return path; 
    … …  
    182184         
    183185        function isAbsolutePath(path) { 
    184                 if(path === undefined){ 
     186                if($.fn.jwplayerUtils.isNull(path)){ 
    185187                        return; 
    186188                } 
Note: See TracChangeset for help on using the changeset viewer.