UI+Visualisations+Canvas: simpler API to request/cancel the canvas animation

Author: mr21

api/main.js

@@ -5,7 +5,7 @@
 var loaded = false;
 
 window.api = {
-	version: "0.8.11",
+	version: "0.8.12",
 	thumbnail: {}
 };
 

api/video.js

@@ -50,7 +50,10 @@ api.video = that = {
 			that.isPlaying = false;
 			that.isStopped = true;
 			dom.ctrlThumbnailVideo[ 0 ].pause();
-			ui.stop();
+			ui
+				.canvasToggle( false )
+				.stop()
+			;
 		}
 		return that;
 	},

api/visualisations.js

@@ -5,10 +5,9 @@
 var
 	that,
 	obj,
-	enable = false,
+	selectedVisu,
 	visu = {},
 	jqOldVisu = dom.empty,
-	selectedVisu = $.noop,
 	analyser = api.audio.analyser
 ;
 
@@ -21,6 +20,7 @@ if ( analyser ) {
 }
 
 api.visualisations = that = {
+	enable: false,
 	add: function( name, fn ) {
 		visu[ name ] = fn;
 		$( "<li data-name='" + name + "'>" + name + "</li>" )
@@ -31,29 +31,26 @@ api.visualisations = that = {
 	},
 	select: function( name ) {
 		if ( selectedVisu !== visu[ name ] ) {
-			selectedVisu = visu[ name ] || $.noop;
 			jqOldVisu.removeClass( "selected" );
 			jqOldVisu = dom.ctrlVisualList.find( "[data-name='" + name + "']" ).addClass( "selected" );
-			if ( enable ) {
-				that.toggle( true );
-			}
+			selectedVisu = visu[ name ];
+			ui.canvasRender( selectedVisu, obj );
 		}
 		return that;
 	},
 	toggle: function( b ) {
 		if ( typeof b !== "boolean" ) {
-			b = !enable;
+			b = !that.enable;
 		}
 		if ( b && !api.audio.ctx ) {
 			b = false;
 			api.error.throw( "WEBAUDIO" );
 		}
-		ui
-			.canvasToggle( b )
-			.canvasRender( b && selectedVisu, obj )
-			.visualisationsToggle( b )
-		;
-		enable = b;
+		if ( api.video.type === "audio" ) {
+			ui.canvasToggle( b );
+		}
+		ui.visualisationsToggle( b );
+		that.enable = b;
 		return that;
 	}
 };

css/player/screen.scss

@@ -110,7 +110,7 @@ $backLightWidth: 35%;
 	}
 	.fileplayer.video.webaudio & video.webaudio,
 	.fileplayer.video:not(.webaudio) & video:not(.webaudio),
-	.fileplayer.audio & canvas {
+	.fileplayer.canvas-displayed & canvas {
 		display: block;
 	}
 	.seeking {

main.js

@@ -4,37 +4,44 @@
 
 var
 	requestId,
-	jqCanvas = dom.screenCanvas,
-	canvas = jqCanvas[ 0 ],
+	frameObj,
+	frameFn = $.noop,
+	canvas = dom.screenCanvas[ 0 ],
 	ctx = canvas.getContext( "2d" )
 ;
 
+function frame( timestamp ) {
+	frameObj.timestamp = timestamp;
+	frameFn( frameObj );
+	if ( ui.canvasDisplayed ) {
+		requestId = requestAnimationFrame( frame );
+	}
+}
+
 $.extend( ui, {
-	canvasDisplay: false,
+	canvasDisplayed: false,
 	canvasToggle: function( b ) {
 		if ( typeof b !== "boolean" ) {
-			b = !ui.canvasDisplay;
+			b = !ui.canvasDisplayed;
 		}
-		if ( b !== ui.canvasDisplay ) {
-			ui.canvasDisplay = b;
-			jqCanvas.toggle( b );
+		ui.canvasDisplayed = b;
+		ctx.clearRect( 0, 0, canvas.width, canvas.height );
+		dom.fileplayer.toggleClass( "canvas-displayed", b );
+		if ( b ) {
+			if ( !requestId ) {
+				requestId = requestAnimationFrame( frame );
+			}
+		} else {
+			cancelAnimationFrame( requestId );
+			requestId = null;
 		}
 		return ui;
 	},
 	canvasRender: function( fn, obj ) {
-		function frame( timestamp ) {
-			obj.timestamp = timestamp;
-			fn( obj );
-			requestId = requestAnimationFrame( frame );
-		}
-		ctx.clearRect( 0, 0, canvas.width, canvas.height );
-		cancelAnimationFrame( requestId );
-		if ( fn ) {
-			obj = $.extend( obj, {
-				ctxCanvas: ctx
-			});
-			requestId = requestAnimationFrame( frame );
-		}
+		frameFn = fn || $.noop;
+		frameObj = $.extend( obj, {
+			ctxCanvas: ctx
+		});
 		return ui;
 	}
 });

ui/canvas.js

@@ -3,8 +3,7 @@
 $.extend( ui, {
 	jqFileSelected: dom.empty,
 	fileSelect: function( jqFile ) {
-		ui.jqFileSelected.removeClass( "selected" );
-		ui.jqFileSelected = jqFile.addClass( "selected" );
+		var fwrap = jqFile[ 0 ].fileWrapper;
 
 		function txt( btn, file, str ) {
 			file = file && file.fileWrapper;
@@ -14,8 +13,16 @@ $.extend( ui, {
 			;
 		}
 
+		// Write the tooltip on the prev/next buttons.
 		txt( dom.ctrlPrevBtn, jqFile.prev()[ 0 ] || ui.jqFiles.get( -1 ), "Previous" );
 		txt( dom.ctrlNextBtn, jqFile.next()[ 0 ] || ui.jqFiles[ 0 ], "Next" );
+
+		// toggleClass "selected" on the jqFile in the playlist's list.
+		ui.jqFileSelected.removeClass( "selected" );
+		ui.jqFileSelected = jqFile.addClass( "selected" );
+
+		// Display or not the canvas.
+		ui.canvasToggle( fwrap.type === "audio" && api.visualisations.enable );
 		return ui;
 	}
 });