Seeking issue after resizing player with CSS Transform #28
Description
The player was resized by using CSS "Transform" to fit designer's layout. However, the seeking control had some problem - when dragging the mouse along the circle to seek, the progress indicator does not follow accordingly. And it seemed to jump randomly.
Digging into the code in "circle.player.js", in line 215, I found that function "_getArcPercent()" used jQuery's width()/height() functions to retrieve control's size, and to decide target progress percentage.
x = pageX - offset.left - this.jq.circleControl.width()/2,
y = pageY - offset.top - this.jq.circleControl.height()/2,
Although CSS Tranform changed player compoment size visually, it did not change the intrinsic styles. So, no matter how smaller the progress indicator had become, above code still gave the same original circle control sizes.
Some people have suggested "getBoundingClientRect()" to get actual size. With that, the above code would be
x = pageX - offset.left - this.jq.circleControl[0].getBoundingClientRect().width/2,
y = pageY - offset.top - this.jq.circleControl[0].getBoundingClientRect().height/2,
I have tried and it seems working.