hakimel/reveal.js

/**
 * UI component that lets the use control auto-slide
 * playback via play/pause.
 */
export default class Playback {

    /**
     * @param {HTMLElement} container The component will append
     * itself to this
     * @param {function} progressCheck A method which will be
     * called frequently to get the current playback progress on
     * a range of 0-1
     */
    constructor( container, progressCheck ) {

        // Cosmetics
        this.diameter = 100;
        this.diameter2 = this.diameter/2;
        this.thickness = 6;

        // Flags if we are currently playing
        this.playing = false;

        // Current progress on a 0-1 range
        this.progress = 0;

        // Used to loop the animation smoothly
        this.progressOffset = 1;

        this.container = container;
        this.progressCheck = progressCheck;

        this.canvas = document.createElement( 'canvas' );
        this.canvas.className = 'playback';
        this.canvas.width = this.diameter;
        this.canvas.height = this.diameter;
        this.canvas.style.width = this.diameter2 + 'px';
        this.canvas.style.height = this.diameter2 + 'px';
        this.context = this.canvas.getContext( '2d' );

        this.container.appendChild( this.canvas );

        this.render();

    }

    setPlaying( value ) {

        const wasPlaying = this.playing;

        this.playing = value;

        // Start repainting if we weren't already
        if( !wasPlaying && this.playing ) {
            this.animate();
        }
        else {
            this.render();
        }

    }

    animate() {

        const progressBefore = this.progress;

        this.progress = this.progressCheck();

        // When we loop, offset the progress so that it eases
        // smoothly rather than immediately resetting
        if( progressBefore > 0.8 && this.progress < 0.2 ) {
            this.progressOffset = this.progress;
        }

        this.render();

        if( this.playing ) {
            requestAnimationFrame( this.animate.bind( this ) );
        }

    }

    /**
     * Renders the current progress and playback state.
     */
    render() {

        let progress = this.playing ? this.progress : 0,
            radius = ( this.diameter2 ) - this.thickness,
            x = this.diameter2,
            y = this.diameter2,
            iconSize = 28;

        // Ease towards 1
        this.progressOffset += ( 1 - this.progressOffset ) * 0.1;

        const endAngle = ( - Math.PI / 2 ) + ( progress * ( Math.PI * 2 ) );
        const startAngle = ( - Math.PI / 2 ) + ( this.progressOffset * ( Math.PI * 2 ) );

        this.context.save();
        this.context.clearRect( 0, 0, this.diameter, this.diameter );

        // Solid background color
        this.context.beginPath();
        this.context.arc( x, y, radius + 4, 0, Math.PI * 2, false );
        this.context.fillStyle = 'rgba( 0, 0, 0, 0.4 )';
        this.context.fill();

        // Draw progress track
        this.context.beginPath();
        this.context.arc( x, y, radius, 0, Math.PI * 2, false );
        this.context.lineWidth = this.thickness;
        this.context.strokeStyle = 'rgba( 255, 255, 255, 0.2 )';
        this.context.stroke();

        if( this.playing ) {
            // Draw progress on top of track
            this.context.beginPath();
            this.context.arc( x, y, radius, startAngle, endAngle, false );
            this.context.lineWidth = this.thickness;
            this.context.strokeStyle = '#fff';
            this.context.stroke();
        }

        this.context.translate( x - ( iconSize / 2 ), y - ( iconSize / 2 ) );

        // Draw play/pause icons
        if( this.playing ) {
            this.context.fillStyle = '#fff';
            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( 4, 0 );
            this.context.moveTo( 0, 0 );
            this.context.lineTo( iconSize - 4, iconSize / 2 );
            this.context.lineTo( 0, iconSize );
            this.context.fillStyle = '#fff';
            this.context.fill();
        }

        this.context.restore();

    }

    on( type, listener ) {
        this.canvas.addEventListener( type, listener, false );
    }

    off( type, listener ) {
        this.canvas.removeEventListener( type, listener, false );
    }

    destroy() {

        this.playing = false;

        if( this.canvas.parentNode ) {
            this.container.removeChild( this.canvas );
        }

    }

}