2x playback controls for retina displays
parent
c8319b9b1a
commit
0e763c7171
18
js/reveal.js
18
js/reveal.js
|
@ -4366,8 +4366,8 @@
|
|||
function Playback( container, progressCheck ) {
|
||||
|
||||
// Cosmetics
|
||||
this.diameter = 50;
|
||||
this.thickness = 3;
|
||||
this.diameter = 100;
|
||||
this.thickness = 6;
|
||||
|
||||
// Flags if we are currently playing
|
||||
this.playing = false;
|
||||
|
@ -4385,6 +4385,8 @@
|
|||
this.canvas.className = 'playback';
|
||||
this.canvas.width = this.diameter;
|
||||
this.canvas.height = this.diameter;
|
||||
this.canvas.style.width = this.diameter/2 + 'px';
|
||||
this.canvas.style.height = this.diameter/2 + 'px';
|
||||
this.context = this.canvas.getContext( '2d' );
|
||||
|
||||
this.container.appendChild( this.canvas );
|
||||
|
@ -4438,7 +4440,7 @@
|
|||
radius = ( this.diameter / 2 ) - this.thickness,
|
||||
x = this.diameter / 2,
|
||||
y = this.diameter / 2,
|
||||
iconSize = 14;
|
||||
iconSize = 28;
|
||||
|
||||
// Ease towards 1
|
||||
this.progressOffset += ( 1 - this.progressOffset ) * 0.1;
|
||||
|
@ -4451,7 +4453,7 @@
|
|||
|
||||
// Solid background color
|
||||
this.context.beginPath();
|
||||
this.context.arc( x, y, radius + 2, 0, Math.PI * 2, false );
|
||||
this.context.arc( x, y, radius + 4, 0, Math.PI * 2, false );
|
||||
this.context.fillStyle = 'rgba( 0, 0, 0, 0.4 )';
|
||||
this.context.fill();
|
||||
|
||||
|
@ -4476,14 +4478,14 @@
|
|||
// Draw play/pause icons
|
||||
if( this.playing ) {
|
||||
this.context.fillStyle = '#fff';
|
||||
this.context.fillRect( 0, 0, iconSize / 2 - 2, iconSize );
|
||||
this.context.fillRect( iconSize / 2 + 2, 0, iconSize / 2 - 2, iconSize );
|
||||
this.context.fillRect( 0, 0, iconSize / 2 - 4, iconSize );
|
||||
this.context.fillRect( iconSize / 2 + 4, 0, iconSize / 2 - 4, iconSize );
|
||||
}
|
||||
else {
|
||||
this.context.beginPath();
|
||||
this.context.translate( 2, 0 );
|
||||
this.context.translate( 4, 0 );
|
||||
this.context.moveTo( 0, 0 );
|
||||
this.context.lineTo( iconSize - 2, iconSize / 2 );
|
||||
this.context.lineTo( iconSize - 4, iconSize / 2 );
|
||||
this.context.lineTo( 0, iconSize );
|
||||
this.context.fillStyle = '#fff';
|
||||
this.context.fill();
|
||||
|
|
Loading…
Reference in New Issue