From f2f87d126cfbffd7c4ebe6522c3cdae90ec3cb93 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias@buelens.com>
Date: Fri, 15 Nov 2019 01:30:24 +0100
Subject: [PATCH] Add bindings for HTMLVideoElement.videoHeight and videoWidth

---
 src/compiler/compile/nodes/Binding.ts         |  4 +-
 src/compiler/compile/nodes/Element.ts         | 10 +++++
 .../render_dom/wrappers/Element/index.ts      |  6 +++
 test/js/samples/video-bindings/expected.js    | 37 +++++++++++++++++--
 test/js/samples/video-bindings/input.svelte   |  4 +-
 5 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index eaf2709da2..b298a9d183 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -13,7 +13,9 @@ const read_only_media_attributes = new Set([
 	'seekable',
 	'played',
 	'seeking',
-	'ended'
+	'ended',
+	'videoHeight',
+	'videoWidth'
 ]);
 
 export default class Binding extends Node {
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index ea0160e2b4..a3b8dc7286 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -606,6 +606,16 @@ export default class Element extends Node {
 						message: `'${name}' binding can only be used with <audio> or <video>`
 					});
 				}
+			} else if (
+				name === 'videoHeight' ||
+				name === 'videoWidth'
+			) {
+				if (this.name !== 'video') {
+					component.error(binding, {
+						code: `invalid-binding`,
+						message: `'${name}' binding can only be used with <video>`
+					});
+				}
 			} else if (dimensions.test(name)) {
 				if (this.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) {
 					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 4b55237822..0c3b05a6bf 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -112,6 +112,12 @@ const events = [
 			node.is_media_node() &&
 			name === 'ended'
 	},
+	{
+		event_names: ['resize'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			(name === 'videoHeight' || name === 'videoWidth')
+	},
 
 	// details event
 	{
diff --git a/test/js/samples/video-bindings/expected.js b/test/js/samples/video-bindings/expected.js
index 768b5c03a0..d8d179a508 100644
--- a/test/js/samples/video-bindings/expected.js
+++ b/test/js/samples/video-bindings/expected.js
@@ -1,6 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
+	add_render_callback,
 	detach,
 	element,
 	init,
@@ -8,6 +9,7 @@ import {
 	listen,
 	noop,
 	raf,
+	run_all,
 	safe_not_equal
 } from "svelte/internal";
 
@@ -31,7 +33,12 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			video = element("video");
-			dispose = listen(video, "timeupdate", video_timeupdate_handler);
+			if (ctx.videoHeight === void 0 || ctx.videoWidth === void 0) add_render_callback(() => ctx.video_resize_handler.call(video));
+
+			dispose = [
+				listen(video, "timeupdate", video_timeupdate_handler),
+				listen(video, "resize", ctx.video_resize_handler)
+			];
 		},
 		m(target, anchor) {
 			insert(target, video, anchor);
@@ -47,30 +54,52 @@ function create_fragment(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(video);
-			dispose();
+			run_all(dispose);
 		}
 	};
 }
 
 function instance($$self, $$props, $$invalidate) {
 	let { currentTime } = $$props;
+	let { videoHeight } = $$props;
+	let { videoWidth } = $$props;
 
 	function video_timeupdate_handler() {
 		currentTime = this.currentTime;
 		$$invalidate("currentTime", currentTime);
 	}
 
+	function video_resize_handler() {
+		videoHeight = this.videoHeight;
+		videoWidth = this.videoWidth;
+		$$invalidate("videoHeight", videoHeight);
+		$$invalidate("videoWidth", videoWidth);
+	}
+
 	$$self.$set = $$props => {
 		if ("currentTime" in $$props) $$invalidate("currentTime", currentTime = $$props.currentTime);
+		if ("videoHeight" in $$props) $$invalidate("videoHeight", videoHeight = $$props.videoHeight);
+		if ("videoWidth" in $$props) $$invalidate("videoWidth", videoWidth = $$props.videoWidth);
 	};
 
-	return { currentTime, video_timeupdate_handler };
+	return {
+		currentTime,
+		videoHeight,
+		videoWidth,
+		video_timeupdate_handler,
+		video_resize_handler
+	};
 }
 
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { currentTime: 0 });
+
+		init(this, options, instance, create_fragment, safe_not_equal, {
+			currentTime: 0,
+			videoHeight: 0,
+			videoWidth: 0
+		});
 	}
 }
 
diff --git a/test/js/samples/video-bindings/input.svelte b/test/js/samples/video-bindings/input.svelte
index 977cc1325b..5eaa3c8624 100644
--- a/test/js/samples/video-bindings/input.svelte
+++ b/test/js/samples/video-bindings/input.svelte
@@ -1,5 +1,7 @@
 <script>
 	export let currentTime;
+	export let videoHeight;
+	export let videoWidth;
 </script>
 
-<video bind:currentTime/>
+<video bind:currentTime bind:videoHeight bind:videoWidth/>