Add audio/video volume binding

Fixes sveltejs#1143
jacobmischka · Feb 3, 2018 · 24e5d3c · 24e5d3c
1 parent 56e9343
commit 24e5d3c
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 4 deletions.
diff --git a/src/generators/nodes/Attribute.ts b/src/generators/nodes/Attribute.ts
@@ -540,6 +540,7 @@ const attributeLookup = {
 			'textarea',
 		],
 	},
+	volume: { appliesTo: ['audio', 'video'] },
 	width: {
 		appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
 	},

diff --git a/src/generators/nodes/Binding.ts b/src/generators/nodes/Binding.ts
@@ -73,7 +73,7 @@ export default class Binding extends Node {
 			);
 		}
 
-		if (this.name === 'currentTime') {
+		if (this.name === 'currentTime' || this.name === 'volume') {
 			updateCondition = `!isNaN(${snippet})`;
 			initialUpdate = null;
 		}
@@ -267,4 +267,4 @@ function isComputed(node: Node) {
 	}
 
 	return false;
-}
+}
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
@@ -139,7 +139,8 @@ export default function validateElement(
 				name === 'paused' ||
 				name === 'buffered' ||
 				name === 'seekable' ||
-				name === 'played'
+				name === 'played' ||
+				name === 'volume'
 			) {
 				if (node.name !== 'audio' && node.name !== 'video') {
 					validator.error(

diff --git a/...ing-audio-currenttime-duration/_config.js → ...io-currenttime-duration-volume/_config.js b/...ing-audio-currenttime-duration/_config.js → ...io-currenttime-duration-volume/_config.js
@@ -7,20 +7,25 @@ export default {
 	test ( assert, component, target, window ) {
 		assert.equal( component.get( 't' ), 0 );
 		assert.equal( component.get( 'd' ), 0 );
+		assert.equal( component.get( 'v' ), 0.5 );
 		assert.equal( component.get( 'paused' ), true );
 
 		const audio = target.querySelector( 'audio' );
 		const timeupdate = new window.Event( 'timeupdate' );
 		const durationchange = new window.Event( 'durationchange' );
+		const volumechange = new window.Event( 'volumechange' );
 
 		audio.currentTime = 10;
 		audio.duration = 20;
+		audio.volume = 0.75;
 		audio.dispatchEvent( timeupdate );
 		audio.dispatchEvent( durationchange );
+		audio.dispatchEvent( volumechange );
 		audio.play();
 
 		assert.equal( component.get( 't' ), 10 );
 		assert.equal( component.get( 'd' ), 0 ); // not 20, because read-only. Not sure how to test this!
+		assert.equal( component.get( 'v' ), 0.75 );
 		assert.equal( component.get( 'paused' ), true ); // ditto...
 		component.destroy();
 	}

diff --git a/test/runtime/samples/binding-audio-currenttime-duration-volume/main.html b/test/runtime/samples/binding-audio-currenttime-duration-volume/main.html
@@ -0,0 +1,2 @@
+<audio bind:currentTime='t' bind:duration='d' bind:paused bind:volume='v'
+	src='music.mp3'></audio>
diff --git a/test/runtime/samples/binding-audio-currenttime-duration/main.html b/test/runtime/samples/binding-audio-currenttime-duration/main.html