diff options
Diffstat (limited to 'geschichte/js/components/playback.js')
-rw-r--r-- | geschichte/js/components/playback.js | 165 |
1 files changed, 0 insertions, 165 deletions
diff --git a/geschichte/js/components/playback.js b/geschichte/js/components/playback.js deleted file mode 100644 index 06fa7ba..0000000 --- a/geschichte/js/components/playback.js +++ /dev/null @@ -1,165 +0,0 @@ -/** - * 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 ); - } - - } - -} \ No newline at end of file |