From 359e67617de5b5a85d29825b35f2d4a059712d4f Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 18 Apr 2017 10:56:48 -0400
Subject: [PATCH 1/6] implement bind:currentTime

---
 .../dom/visitors/Element/Binding.js           | 24 ++++++++++++++++---
 src/validate/html/validateElement.js          |  6 +++++
 .../binding-audio-currenttime/_config.js      | 16 +++++++++++++
 .../binding-audio-currenttime/main.html       |  1 +
 4 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 test/runtime/samples/binding-audio-currenttime/_config.js
 create mode 100644 test/runtime/samples/binding-audio-currenttime/main.html

diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js
index 7e8f38b947..2cc461bcd5 100644
--- a/src/generators/dom/visitors/Element/Binding.js
+++ b/src/generators/dom/visitors/Element/Binding.js
@@ -19,7 +19,7 @@ export default function visitBinding ( generator, block, state, node, attribute
 	const type = getStaticAttributeValue( node, 'type' );
 	const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, keypath ) : null;
 	const value = getBindingValue( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type );
-	const eventName = getBindingEventName( node );
+	const eventName = getBindingEventName( node, attribute );
 
 	let setter = getSetter({ block, name, keypath, context: '_svelte', attribute, dependencies, value });
 	let updateElement;
@@ -77,6 +77,19 @@ export default function visitBinding ( generator, block, state, node, attribute
 		updateElement = `${state.parentNode}.checked = ${condition};`;
 	}
 
+	// <audio bind:currentTime> special case
+	else if ( attribute.name === 'currentTime' ) {
+		generator.hasComplexBindings = true;
+		block.builders.create.addBlock( `${block.component}._bindings.push( ${handler} );` );
+
+		setter = deindent`
+			if ( ${state.parentNode}.playing ) requestAnimationFrame( ${handler} );
+			${setter}
+		`;
+
+		updateElement = `${state.parentNode}.currentTime = ${snippet};`;
+	}
+
 	// everything else
 	else {
 		updateElement = `${state.parentNode}.${attribute.name} = ${snippet};`;
@@ -96,7 +109,7 @@ export default function visitBinding ( generator, block, state, node, attribute
 		${generator.helper( 'addEventListener' )}( ${state.parentNode}, '${eventName}', ${handler} );
 	` );
 
-	node.initialUpdate = updateElement;
+	if ( node.name !== 'audio' && node.name !== 'video' ) node.initialUpdate = updateElement;
 
 	block.builders.update.addLine( deindent`
 		if ( !${updating} ) {
@@ -109,7 +122,7 @@ export default function visitBinding ( generator, block, state, node, attribute
 	` );
 }
 
-function getBindingEventName ( node ) {
+function getBindingEventName ( node, attribute ) {
 	if ( node.name === 'input' ) {
 		const typeAttribute = node.attributes.find( attr => attr.type === 'Attribute' && attr.name === 'type' );
 		const type = typeAttribute ? typeAttribute.value[0].data : 'text'; // TODO in validation, should throw if type attribute is not static
@@ -121,6 +134,11 @@ function getBindingEventName ( node ) {
 		return 'input';
 	}
 
+	// <audio bind:currentTime>
+	if ( attribute.name === 'currentTime' ) {
+		return 'timeupdate';
+	}
+
 	return 'change';
 }
 
diff --git a/src/validate/html/validateElement.js b/src/validate/html/validateElement.js
index 83a81c03c7..b3a76181b0 100644
--- a/src/validate/html/validateElement.js
+++ b/src/validate/html/validateElement.js
@@ -35,6 +35,12 @@ export default function validateElement ( validator, node ) {
 				}
 			}
 
+			else if ( name === 'currentTime' || name === 'duration' ) {
+				if ( node.name !== 'audio' && node.name !== 'video' ) {
+					validator.error( `'${name}' binding can only be used with <audio> or <video>` );
+				}
+			}
+
 			else {
 				validator.error( `'${attribute.name}' is not a valid binding`, attribute.start );
 			}
diff --git a/test/runtime/samples/binding-audio-currenttime/_config.js b/test/runtime/samples/binding-audio-currenttime/_config.js
new file mode 100644
index 0000000000..2fb0f6c97c
--- /dev/null
+++ b/test/runtime/samples/binding-audio-currenttime/_config.js
@@ -0,0 +1,16 @@
+export default {
+	solo: true,
+
+	test ( assert, component, target, window ) {
+		assert.equal( component.get( 't' ), 0 );
+
+		const audio = target.querySelector( 'audio' );
+		const event = new window.Event( 'timeupdate' );
+
+		audio.currentTime = 10;
+		audio.dispatchEvent( event );
+
+		assert.equal( component.get( 't' ), 10 );
+		component.destroy();
+	}
+};
diff --git a/test/runtime/samples/binding-audio-currenttime/main.html b/test/runtime/samples/binding-audio-currenttime/main.html
new file mode 100644
index 0000000000..abf208c5e4
--- /dev/null
+++ b/test/runtime/samples/binding-audio-currenttime/main.html
@@ -0,0 +1 @@
+<audio bind:currentTime='t' src='music.mp3'></audio>

From 1040db97cbeb9e97627f5bb7630145ef9d935c23 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 18 Apr 2017 13:30:25 -0400
Subject: [PATCH 2/6] implement bind:duration and bind:paused

---
 .../dom/visitors/Element/Binding.js           | 73 ++++++++++---------
 src/validate/html/validateElement.js          |  2 +-
 .../_config.js                                | 24 ++++++
 .../main.html                                 |  1 +
 .../binding-audio-currenttime/_config.js      | 16 ----
 .../binding-audio-currenttime/main.html       |  1 -
 6 files changed, 66 insertions(+), 51 deletions(-)
 create mode 100644 test/runtime/samples/binding-audio-currenttime-duration/_config.js
 create mode 100644 test/runtime/samples/binding-audio-currenttime-duration/main.html
 delete mode 100644 test/runtime/samples/binding-audio-currenttime/_config.js
 delete mode 100644 test/runtime/samples/binding-audio-currenttime/main.html

diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js
index 2cc461bcd5..0850731907 100644
--- a/src/generators/dom/visitors/Element/Binding.js
+++ b/src/generators/dom/visitors/Element/Binding.js
@@ -13,16 +13,17 @@ export default function visitBinding ( generator, block, state, node, attribute
 		if ( !~state.allUsedContexts.indexOf( context ) ) state.allUsedContexts.push( context );
 	});
 
-	const handler = block.getUniqueName( `${state.parentNode}_change_handler` );
-
+	const eventName = getBindingEventName( node, attribute );
+	const handler = block.getUniqueName( `${state.parentNode}_${eventName}_handler` );
 	const isMultipleSelect = node.name === 'select' && node.attributes.find( attr => attr.name.toLowerCase() === 'multiple' ); // TODO use getStaticAttributeValue
 	const type = getStaticAttributeValue( node, 'type' );
 	const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, keypath ) : null;
 	const value = getBindingValue( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type );
-	const eventName = getBindingEventName( node, attribute );
 
 	let setter = getSetter({ block, name, keypath, context: '_svelte', attribute, dependencies, value });
-	let updateElement;
+	let updateElement = `${state.parentNode}.${attribute.name} = ${snippet};`;
+	const lock = block.getUniqueName( `${state.parentNode}_${attribute.name}_updating` );
+	let updateCondition = `!${lock}`;
 
 	// <select> special case
 	if ( node.name === 'select' ) {
@@ -77,33 +78,35 @@ export default function visitBinding ( generator, block, state, node, attribute
 		updateElement = `${state.parentNode}.checked = ${condition};`;
 	}
 
-	// <audio bind:currentTime> special case
-	else if ( attribute.name === 'currentTime' ) {
+	else if ( node.name === 'audio' || node.name === 'video' ) {
 		generator.hasComplexBindings = true;
 		block.builders.create.addBlock( `${block.component}._bindings.push( ${handler} );` );
 
-		setter = deindent`
-			if ( ${state.parentNode}.playing ) requestAnimationFrame( ${handler} );
-			${setter}
-		`;
+		if ( attribute.name === 'currentTime' ) {
+			setter = deindent`
+				if ( !${state.parentNode}.paused ) requestAnimationFrame( ${handler} );
+				${setter}
+			`;
 
-		updateElement = `${state.parentNode}.currentTime = ${snippet};`;
-	}
+			updateCondition += ` && !isNaN( ${snippet} )`;
+		}
 
-	// everything else
-	else {
-		updateElement = `${state.parentNode}.${attribute.name} = ${snippet};`;
-	}
+		else if ( attribute.name === 'duration' ) {
+			updateCondition = null;
+		}
 
-	const updating = block.getUniqueName( `${state.parentNode}_updating` );
+		else if ( attribute.name === 'paused' ) {
+			updateElement = `${state.parentNode}[ ${snippet} ? 'pause' : 'play' ]()`;
+		}
+	}
 
 	block.builders.create.addBlock( deindent`
-		var ${updating} = false;
+		var ${lock} = false;
 
 		function ${handler} () {
-			${updating} = true;
+			${lock} = true;
 			${setter}
-			${updating} = false;
+			${lock} = false;
 		}
 
 		${generator.helper( 'addEventListener' )}( ${state.parentNode}, '${eventName}', ${handler} );
@@ -111,15 +114,23 @@ export default function visitBinding ( generator, block, state, node, attribute
 
 	if ( node.name !== 'audio' && node.name !== 'video' ) node.initialUpdate = updateElement;
 
-	block.builders.update.addLine( deindent`
-		if ( !${updating} ) {
-			${updateElement}
-		}
-	` );
+	if ( updateCondition !== null ) {
+		// audio/video duration is read-only, it never updates
+		block.builders.update.addBlock( deindent`
+			if ( ${updateCondition} ) {
+				${updateElement}
+			}
+		` );
+	}
 
 	block.builders.destroy.addLine( deindent`
 		${generator.helper( 'removeEventListener' )}( ${state.parentNode}, '${eventName}', ${handler} );
 	` );
+
+	if ( attribute.name === 'paused' ) {
+		block.builders.create.addLine( `${generator.helper( 'addEventListener' )}( ${state.parentNode}, 'play', ${handler} );` );
+		block.builders.destroy.addLine( `${generator.helper( 'removeEventListener' )}( ${state.parentNode}, 'play', ${handler} );` );
+	}
 }
 
 function getBindingEventName ( node, attribute ) {
@@ -130,14 +141,10 @@ function getBindingEventName ( node, attribute ) {
 		return type === 'checkbox' || type === 'radio' ? 'change' : 'input';
 	}
 
-	if ( node.name === 'textarea' ) {
-		return 'input';
-	}
-
-	// <audio bind:currentTime>
-	if ( attribute.name === 'currentTime' ) {
-		return 'timeupdate';
-	}
+	if ( node.name === 'textarea' ) return 'input';
+	if ( attribute.name === 'currentTime' ) return 'timeupdate';
+	if ( attribute.name === 'duration' ) return 'durationchange';
+	if ( attribute.name === 'paused' ) return 'pause';
 
 	return 'change';
 }
diff --git a/src/validate/html/validateElement.js b/src/validate/html/validateElement.js
index b3a76181b0..c3405c75a2 100644
--- a/src/validate/html/validateElement.js
+++ b/src/validate/html/validateElement.js
@@ -35,7 +35,7 @@ export default function validateElement ( validator, node ) {
 				}
 			}
 
-			else if ( name === 'currentTime' || name === 'duration' ) {
+			else if ( name === 'currentTime' || name === 'duration' || name === 'paused' ) {
 				if ( node.name !== 'audio' && node.name !== 'video' ) {
 					validator.error( `'${name}' binding can only be used with <audio> or <video>` );
 				}
diff --git a/test/runtime/samples/binding-audio-currenttime-duration/_config.js b/test/runtime/samples/binding-audio-currenttime-duration/_config.js
new file mode 100644
index 0000000000..12b0a312ff
--- /dev/null
+++ b/test/runtime/samples/binding-audio-currenttime-duration/_config.js
@@ -0,0 +1,24 @@
+export default {
+	solo: true,
+
+	test ( assert, component, target, window ) {
+		assert.equal( component.get( 't' ), 0 );
+		assert.equal( component.get( 'd' ), 0 );
+		assert.equal( component.get( 'paused' ), true );
+
+		const audio = target.querySelector( 'audio' );
+		const timeupdate = new window.Event( 'timeupdate' );
+		const durationchange = new window.Event( 'durationchange' );
+
+		audio.currentTime = 10;
+		audio.duration = 20;
+		audio.dispatchEvent( timeupdate );
+		audio.dispatchEvent( durationchange );
+		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( 'paused' ), true ); // ditto...
+		component.destroy();
+	}
+};
diff --git a/test/runtime/samples/binding-audio-currenttime-duration/main.html b/test/runtime/samples/binding-audio-currenttime-duration/main.html
new file mode 100644
index 0000000000..dc3aac8afe
--- /dev/null
+++ b/test/runtime/samples/binding-audio-currenttime-duration/main.html
@@ -0,0 +1 @@
+<audio bind:currentTime='t' bind:duration='d' bind:paused src='music.mp3'></audio>
diff --git a/test/runtime/samples/binding-audio-currenttime/_config.js b/test/runtime/samples/binding-audio-currenttime/_config.js
deleted file mode 100644
index 2fb0f6c97c..0000000000
--- a/test/runtime/samples/binding-audio-currenttime/_config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default {
-	solo: true,
-
-	test ( assert, component, target, window ) {
-		assert.equal( component.get( 't' ), 0 );
-
-		const audio = target.querySelector( 'audio' );
-		const event = new window.Event( 'timeupdate' );
-
-		audio.currentTime = 10;
-		audio.dispatchEvent( event );
-
-		assert.equal( component.get( 't' ), 10 );
-		component.destroy();
-	}
-};
diff --git a/test/runtime/samples/binding-audio-currenttime/main.html b/test/runtime/samples/binding-audio-currenttime/main.html
deleted file mode 100644
index abf208c5e4..0000000000
--- a/test/runtime/samples/binding-audio-currenttime/main.html
+++ /dev/null
@@ -1 +0,0 @@
-<audio bind:currentTime='t' src='music.mp3'></audio>

From a4ba3e4acfa91c76bff187ff93f2e7b8f17f11b2 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 18 Apr 2017 13:54:42 -0400
Subject: [PATCH 3/6] reenable all tests

---
 .../samples/binding-audio-currenttime-duration/_config.js       | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/runtime/samples/binding-audio-currenttime-duration/_config.js b/test/runtime/samples/binding-audio-currenttime-duration/_config.js
index 12b0a312ff..e2c9437922 100644
--- a/test/runtime/samples/binding-audio-currenttime-duration/_config.js
+++ b/test/runtime/samples/binding-audio-currenttime-duration/_config.js
@@ -1,6 +1,4 @@
 export default {
-	solo: true,
-
 	test ( assert, component, target, window ) {
 		assert.equal( component.get( 't' ), 0 );
 		assert.equal( component.get( 'd' ), 0 );

From fffd9ffd64e8659d8096b8e9fdb7cefd9db8b2ab Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 18 Apr 2017 15:15:33 -0400
Subject: [PATCH 4/6] prevent timer proliferation

---
 src/generators/dom/visitors/Element/Binding.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js
index 0850731907..5b24d3f3a4 100644
--- a/src/generators/dom/visitors/Element/Binding.js
+++ b/src/generators/dom/visitors/Element/Binding.js
@@ -83,8 +83,11 @@ export default function visitBinding ( generator, block, state, node, attribute
 		block.builders.create.addBlock( `${block.component}._bindings.push( ${handler} );` );
 
 		if ( attribute.name === 'currentTime' ) {
+			const frame = block.getUniqueName( `${state.parentNode}_animationframe` );
+			block.builders.create.addLine( `var ${frame};` );
 			setter = deindent`
-				if ( !${state.parentNode}.paused ) requestAnimationFrame( ${handler} );
+				cancelAnimationFrame( ${frame} );
+				if ( !${state.parentNode}.paused ) ${frame} = requestAnimationFrame( ${handler} );
 				${setter}
 			`;
 
@@ -96,7 +99,7 @@ export default function visitBinding ( generator, block, state, node, attribute
 		}
 
 		else if ( attribute.name === 'paused' ) {
-			updateElement = `${state.parentNode}[ ${snippet} ? 'pause' : 'play' ]()`;
+			updateElement = `${state.parentNode}[ ${snippet} ? 'pause' : 'play' ]();`;
 		}
 	}
 

From ed1ac48c0000f0cd4e729753f36d544def52d6a2 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 18 Apr 2017 15:22:57 -0400
Subject: [PATCH 5/6] prevent audio restarting when it reaches the end

---
 src/generators/dom/visitors/Element/Binding.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js
index 5b24d3f3a4..e88fe8df43 100644
--- a/src/generators/dom/visitors/Element/Binding.js
+++ b/src/generators/dom/visitors/Element/Binding.js
@@ -99,7 +99,12 @@ export default function visitBinding ( generator, block, state, node, attribute
 		}
 
 		else if ( attribute.name === 'paused' ) {
-			updateElement = `${state.parentNode}[ ${snippet} ? 'pause' : 'play' ]();`;
+			// this is necessary to prevent the audio restarting by itself
+			const last = block.getUniqueName( `${state.parentNode}_paused_value` );
+			block.builders.create.addLine( `var ${last} = true;` );
+
+			updateCondition += ` && ${last} !== ( ${last} = ${snippet} )`;
+			updateElement = `${state.parentNode}[ ${last} ? 'pause' : 'play' ]();`;
 		}
 	}
 

From f0b6bec298481ca6141a96f724eb310a395826a7 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 18 Apr 2017 15:49:45 -0400
Subject: [PATCH 6/6] dont try to test audio stuff in JSDOM

---
 .../samples/binding-audio-currenttime-duration/_config.js    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/test/runtime/samples/binding-audio-currenttime-duration/_config.js b/test/runtime/samples/binding-audio-currenttime-duration/_config.js
index e2c9437922..793ca5d280 100644
--- a/test/runtime/samples/binding-audio-currenttime-duration/_config.js
+++ b/test/runtime/samples/binding-audio-currenttime-duration/_config.js
@@ -1,4 +1,9 @@
 export default {
+	// not sure if we can really test this in JSDOM. Refer to
+	// https://svelte.technology/repl?example=media-elements
+	// instead
+	skip: true,
+
 	test ( assert, component, target, window ) {
 		assert.equal( component.get( 't' ), 0 );
 		assert.equal( component.get( 'd' ), 0 );