From 5658d9454504b99bcc449577271a612caefe7d82 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias@buelens.com>
Date: Tue, 1 Oct 2019 22:49:05 +0200
Subject: [PATCH 1/4] Add binding for HTMLMediaElement.seeking

---
 src/compiler/compile/nodes/Binding.ts         |  3 ++-
 src/compiler/compile/nodes/Element.ts         |  3 ++-
 .../render_dom/wrappers/Element/index.ts      |  6 ++++++
 test/js/samples/media-bindings/expected.js    | 19 ++++++++++++++++---
 test/js/samples/media-bindings/input.svelte   |  3 ++-
 5 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index 969232a17c30..5626ce91a6f4 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -11,7 +11,8 @@ const read_only_media_attributes = new Set([
 	'duration',
 	'buffered',
 	'seekable',
-	'played'
+	'played',
+	'seeking'
 ]);
 
 export default class Binding extends Node {
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 555c772f232a..614e929b233a 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -596,7 +596,8 @@ export default class Element extends Node {
 				name === 'seekable' ||
 				name === 'played' ||
 				name === 'volume' ||
-				name === 'playbackRate'
+				name === 'playbackRate' ||
+				name === 'seeking'
 			) {
 				if (this.name !== 'audio' && this.name !== 'video') {
 					component.error(binding, {
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 75c2cc60969b..e18e874a6e56 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -100,6 +100,12 @@ const events = [
 			node.is_media_node() &&
 			name === 'playbackRate'
 	},
+	{
+		event_names: ['seeking', 'seeked'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			(name === 'seeking')
+	},
 
 	// details event
 	{
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
index 1d90e0849e43..454faa0fc657 100644
--- a/test/js/samples/media-bindings/expected.js
+++ b/test/js/samples/media-bindings/expected.js
@@ -39,6 +39,7 @@ function create_fragment(ctx) {
 			if (ctx.duration === void 0) add_render_callback(() => ctx.audio_durationchange_handler.call(audio));
 			if (ctx.buffered === void 0) add_render_callback(() => ctx.audio_progress_handler.call(audio));
 			if (ctx.buffered === void 0 || ctx.seekable === void 0) add_render_callback(() => ctx.audio_loadedmetadata_handler.call(audio));
+			if (ctx.seeking === void 0) add_render_callback(() => ctx.audio_seeking_seeked_handler.call(audio));
 
 			dispose = [
 				listen(audio, "timeupdate", audio_timeupdate_handler),
@@ -48,7 +49,9 @@ function create_fragment(ctx) {
 				listen(audio, "progress", ctx.audio_progress_handler),
 				listen(audio, "loadedmetadata", ctx.audio_loadedmetadata_handler),
 				listen(audio, "volumechange", ctx.audio_volumechange_handler),
-				listen(audio, "ratechange", ctx.audio_ratechange_handler)
+				listen(audio, "ratechange", ctx.audio_ratechange_handler),
+				listen(audio, "seeking", ctx.audio_seeking_seeked_handler),
+				listen(audio, "seeked", ctx.audio_seeking_seeked_handler)
 			];
 		},
 		m(target, anchor) {
@@ -93,6 +96,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { paused } = $$props;
 	let { volume } = $$props;
 	let { playbackRate } = $$props;
+	let { seeking } = $$props;
 
 	function audio_timeupdate_handler() {
 		played = time_ranges_to_array(this.played);
@@ -133,6 +137,11 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate("playbackRate", playbackRate);
 	}
 
+	function audio_seeking_seeked_handler() {
+		seeking = this.seeking;
+		$$invalidate("seeking", seeking);
+	}
+
 	$$self.$set = $$props => {
 		if ("buffered" in $$props) $$invalidate("buffered", buffered = $$props.buffered);
 		if ("seekable" in $$props) $$invalidate("seekable", seekable = $$props.seekable);
@@ -142,6 +151,7 @@ function instance($$self, $$props, $$invalidate) {
 		if ("paused" in $$props) $$invalidate("paused", paused = $$props.paused);
 		if ("volume" in $$props) $$invalidate("volume", volume = $$props.volume);
 		if ("playbackRate" in $$props) $$invalidate("playbackRate", playbackRate = $$props.playbackRate);
+		if ("seeking" in $$props) $$invalidate("seeking", seeking = $$props.seeking);
 	};
 
 	return {
@@ -153,13 +163,15 @@ function instance($$self, $$props, $$invalidate) {
 		paused,
 		volume,
 		playbackRate,
+		seeking,
 		audio_timeupdate_handler,
 		audio_durationchange_handler,
 		audio_play_pause_handler,
 		audio_progress_handler,
 		audio_loadedmetadata_handler,
 		audio_volumechange_handler,
-		audio_ratechange_handler
+		audio_ratechange_handler,
+		audio_seeking_seeked_handler
 	};
 }
 
@@ -175,7 +187,8 @@ class Component extends SvelteComponent {
 			duration: 0,
 			paused: 0,
 			volume: 0,
-			playbackRate: 0
+			playbackRate: 0,
+			seeking: 0
 		});
 	}
 }
diff --git a/test/js/samples/media-bindings/input.svelte b/test/js/samples/media-bindings/input.svelte
index 4b5793ba9343..43a00182b136 100644
--- a/test/js/samples/media-bindings/input.svelte
+++ b/test/js/samples/media-bindings/input.svelte
@@ -7,6 +7,7 @@
 	export let paused;
 	export let volume;
 	export let playbackRate;
+	export let seeking;
 </script>
 
-<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume bind:playbackRate/>
\ No newline at end of file
+<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume bind:playbackRate bind:seeking/>

From 39c009499e979ce864132d30dee57fde00e78e84 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias@buelens.com>
Date: Tue, 1 Oct 2019 22:54:43 +0200
Subject: [PATCH 2/4] Add binding for HTMLMediaElement.ended

---
 src/compiler/compile/nodes/Binding.ts         |  3 ++-
 src/compiler/compile/nodes/Element.ts         |  3 ++-
 .../render_dom/wrappers/Element/index.ts      |  8 ++++++-
 test/js/samples/media-bindings/expected.js    | 22 +++++++++++++++----
 test/js/samples/media-bindings/input.svelte   |  3 ++-
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index 5626ce91a6f4..eaf2709da29f 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -12,7 +12,8 @@ const read_only_media_attributes = new Set([
 	'buffered',
 	'seekable',
 	'played',
-	'seeking'
+	'seeking',
+	'ended'
 ]);
 
 export default class Binding extends Node {
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 614e929b233a..ea0160e2b483 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -597,7 +597,8 @@ export default class Element extends Node {
 				name === 'played' ||
 				name === 'volume' ||
 				name === 'playbackRate' ||
-				name === 'seeking'
+				name === 'seeking' ||
+				name === 'ended'
 			) {
 				if (this.name !== 'audio' && this.name !== 'video') {
 					component.error(binding, {
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index e18e874a6e56..54d5a23932ed 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -62,7 +62,7 @@ const events = [
 		event_names: ['timeupdate'],
 		filter: (node: Element, name: string) =>
 			node.is_media_node() &&
-			(name === 'currentTime' || name === 'played')
+			(name === 'currentTime' || name === 'played' || name === 'ended')
 	},
 	{
 		event_names: ['durationchange'],
@@ -106,6 +106,12 @@ const events = [
 			node.is_media_node() &&
 			(name === 'seeking')
 	},
+	{
+		event_names: ['ended'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			name === 'ended'
+	},
 
 	// details event
 	{
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
index 454faa0fc657..28a6a02b4718 100644
--- a/test/js/samples/media-bindings/expected.js
+++ b/test/js/samples/media-bindings/expected.js
@@ -35,11 +35,12 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			audio = element("audio");
-			if (ctx.played === void 0 || ctx.currentTime === void 0) add_render_callback(audio_timeupdate_handler);
+			if (ctx.played === void 0 || ctx.currentTime === void 0 || ctx.ended === void 0) add_render_callback(audio_timeupdate_handler);
 			if (ctx.duration === void 0) add_render_callback(() => ctx.audio_durationchange_handler.call(audio));
 			if (ctx.buffered === void 0) add_render_callback(() => ctx.audio_progress_handler.call(audio));
 			if (ctx.buffered === void 0 || ctx.seekable === void 0) add_render_callback(() => ctx.audio_loadedmetadata_handler.call(audio));
 			if (ctx.seeking === void 0) add_render_callback(() => ctx.audio_seeking_seeked_handler.call(audio));
+			if (ctx.ended === void 0) add_render_callback(() => ctx.audio_ended_handler.call(audio));
 
 			dispose = [
 				listen(audio, "timeupdate", audio_timeupdate_handler),
@@ -51,7 +52,8 @@ function create_fragment(ctx) {
 				listen(audio, "volumechange", ctx.audio_volumechange_handler),
 				listen(audio, "ratechange", ctx.audio_ratechange_handler),
 				listen(audio, "seeking", ctx.audio_seeking_seeked_handler),
-				listen(audio, "seeked", ctx.audio_seeking_seeked_handler)
+				listen(audio, "seeked", ctx.audio_seeking_seeked_handler),
+				listen(audio, "ended", ctx.audio_ended_handler)
 			];
 		},
 		m(target, anchor) {
@@ -97,12 +99,15 @@ function instance($$self, $$props, $$invalidate) {
 	let { volume } = $$props;
 	let { playbackRate } = $$props;
 	let { seeking } = $$props;
+	let { ended } = $$props;
 
 	function audio_timeupdate_handler() {
 		played = time_ranges_to_array(this.played);
 		currentTime = this.currentTime;
+		ended = this.ended;
 		$$invalidate("played", played);
 		$$invalidate("currentTime", currentTime);
+		$$invalidate("ended", ended);
 	}
 
 	function audio_durationchange_handler() {
@@ -142,6 +147,11 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate("seeking", seeking);
 	}
 
+	function audio_ended_handler() {
+		ended = this.ended;
+		$$invalidate("ended", ended);
+	}
+
 	$$self.$set = $$props => {
 		if ("buffered" in $$props) $$invalidate("buffered", buffered = $$props.buffered);
 		if ("seekable" in $$props) $$invalidate("seekable", seekable = $$props.seekable);
@@ -152,6 +162,7 @@ function instance($$self, $$props, $$invalidate) {
 		if ("volume" in $$props) $$invalidate("volume", volume = $$props.volume);
 		if ("playbackRate" in $$props) $$invalidate("playbackRate", playbackRate = $$props.playbackRate);
 		if ("seeking" in $$props) $$invalidate("seeking", seeking = $$props.seeking);
+		if ("ended" in $$props) $$invalidate("ended", ended = $$props.ended);
 	};
 
 	return {
@@ -164,6 +175,7 @@ function instance($$self, $$props, $$invalidate) {
 		volume,
 		playbackRate,
 		seeking,
+		ended,
 		audio_timeupdate_handler,
 		audio_durationchange_handler,
 		audio_play_pause_handler,
@@ -171,7 +183,8 @@ function instance($$self, $$props, $$invalidate) {
 		audio_loadedmetadata_handler,
 		audio_volumechange_handler,
 		audio_ratechange_handler,
-		audio_seeking_seeked_handler
+		audio_seeking_seeked_handler,
+		audio_ended_handler
 	};
 }
 
@@ -188,7 +201,8 @@ class Component extends SvelteComponent {
 			paused: 0,
 			volume: 0,
 			playbackRate: 0,
-			seeking: 0
+			seeking: 0,
+			ended: 0
 		});
 	}
 }
diff --git a/test/js/samples/media-bindings/input.svelte b/test/js/samples/media-bindings/input.svelte
index 43a00182b136..a079a2e0e580 100644
--- a/test/js/samples/media-bindings/input.svelte
+++ b/test/js/samples/media-bindings/input.svelte
@@ -8,6 +8,7 @@
 	export let volume;
 	export let playbackRate;
 	export let seeking;
+	export let ended;
 </script>
 
-<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume bind:playbackRate bind:seeking/>
+<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume bind:playbackRate bind:seeking bind:ended/>

From 92710f82808324bdf1a9bc01a93b69eb8685b198 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias@buelens.com>
Date: Tue, 1 Oct 2019 23:33:40 +0200
Subject: [PATCH 3/4] Refactor mount code rendering for bindings

---
 .../render_dom/wrappers/Element/Binding.ts    | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
index 90727743fa4a..d06552e00dc6 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
@@ -86,6 +86,7 @@ export default class BindingWrapper {
 		const { parent } = this;
 
 		const update_conditions: any[] = this.needs_lock ? [x`!${lock}`] : [];
+		const mount_conditions: any[] = [];
 
 		const dependency_array = [...this.node.expression.dependencies];
 
@@ -103,6 +104,7 @@ export default class BindingWrapper {
 
 		// model to view
 		let update_dom = get_dom_updater(parent, this);
+		let mount_dom = update_dom;
 
 		// special cases
 		switch (this.node.name) {
@@ -122,13 +124,19 @@ export default class BindingWrapper {
 
 			case 'textContent':
 				update_conditions.push(x`${this.snippet} !== ${parent.var}.textContent`);
+				mount_conditions.push(x`${this.snippet} !== void 0`);
 				break;
 
 			case 'innerHTML':
 				update_conditions.push(x`${this.snippet} !== ${parent.var}.innerHTML`);
+				mount_conditions.push(x`${this.snippet} !== void 0`);
 				break;
 
 			case 'currentTime':
+				update_conditions.push(x`!@_isNaN(${this.snippet})`);
+				mount_dom = null;
+				break;
+
 			case 'playbackRate':
 			case 'volume':
 				update_conditions.push(x`!@_isNaN(${this.snippet})`);
@@ -142,12 +150,14 @@ export default class BindingWrapper {
 
 				update_conditions.push(x`${last} !== (${last} = ${this.snippet})`);
 				update_dom = b`${parent.var}[${last} ? "pause" : "play"]();`;
+				mount_dom = null;
 				break;
 			}
 
 			case 'value':
 				if (parent.node.get_static_attribute_value('type') === 'file') {
 					update_dom = null;
+					mount_dom = null;
 				}
 		}
 
@@ -165,13 +175,18 @@ export default class BindingWrapper {
 			}
 		}
 
-		if (this.node.name === 'innerHTML' || this.node.name === 'textContent') {
-			block.chunks.mount.push(b`
-				if (${this.snippet} !== void 0) {
-					${update_dom}
-				}`);
-		} else if (!/(currentTime|paused)/.test(this.node.name)) {
-			block.chunks.mount.push(update_dom);
+		if (mount_dom) {
+			if (mount_conditions.length > 0) {
+				const condition = mount_conditions.reduce((lhs, rhs) => x`${lhs} && ${rhs}`);
+
+				block.chunks.mount.push(b`
+					if (${condition}) {
+						${mount_dom}
+					}
+				`);
+			} else {
+				block.chunks.mount.push(mount_dom);
+			}
 		}
 	}
 }

From ed4f89d7fa63cdddbbb66932d181a1e947d3cde6 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias@buelens.com>
Date: Mon, 28 Oct 2019 00:45:07 +0100
Subject: [PATCH 4/4] Add mount condition for playbackRate and volume

---
 .../compile/render_dom/wrappers/Element/Binding.ts     |  1 +
 test/js/samples/media-bindings/expected.js             | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
index d06552e00dc6..9618ad3c2cc0 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
@@ -140,6 +140,7 @@ export default class BindingWrapper {
 			case 'playbackRate':
 			case 'volume':
 				update_conditions.push(x`!@_isNaN(${this.snippet})`);
+				mount_conditions.push(x`!@_isNaN(${this.snippet})`);
 				break;
 
 			case 'paused':
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
index 28a6a02b4718..0538f07055e4 100644
--- a/test/js/samples/media-bindings/expected.js
+++ b/test/js/samples/media-bindings/expected.js
@@ -58,8 +58,14 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, audio, anchor);
-			audio.volume = ctx.volume;
-			audio.playbackRate = ctx.playbackRate;
+
+			if (!isNaN(ctx.volume)) {
+				audio.volume = ctx.volume;
+			}
+
+			if (!isNaN(ctx.playbackRate)) {
+				audio.playbackRate = ctx.playbackRate;
+			}
 		},
 		p(changed, ctx) {
 			if (!audio_updating && changed.currentTime && !isNaN(ctx.currentTime)) {