From 7d9c6f50b5fc3978f73c45c28b0483c5e8558c02 Mon Sep 17 00:00:00 2001
From: Brad Dougherty <me@brad.is>
Date: Tue, 12 Oct 2021 19:18:24 -0400
Subject: [PATCH 1/4] Add support for binding to media element readyState

---
 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    | 53 ++++++++++++-------
 test/js/samples/media-bindings/input.svelte   |  3 +-
 test/js/samples/video-bindings/expected.js    | 37 ++++++++++---
 test/js/samples/video-bindings/input.svelte   |  3 +-
 7 files changed, 80 insertions(+), 30 deletions(-)

diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index f826df482850..755926223f18 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -22,7 +22,8 @@ const read_only_media_attributes = new Set([
 	'seeking',
 	'ended',
 	'videoHeight',
-	'videoWidth'
+	'videoWidth',
+	'readyState'
 ]);
 
 export default class Binding extends Node {
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 298276c437c8..9fcd6e468fda 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -873,7 +873,8 @@ export default class Element extends Node {
 				name === 'muted' ||
 				name === 'playbackRate' ||
 				name === 'seeking' ||
-				name === 'ended'
+				name === 'ended' ||
+				name === 'readyState'
 			) {
 				if (this.name !== 'audio' && this.name !== 'video') {
 					return component.error(binding, compiler_errors.invalid_binding_element_with('audio> or <video>', name));
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 8d0429879e4b..583e545445d8 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -99,7 +99,7 @@ const events = [
 		event_names: ['loadedmetadata'],
 		filter: (node: Element, name: string) =>
 			node.is_media_node() &&
-			(name === 'buffered' || name === 'seekable')
+			(name === 'buffered' || name === 'seekable' || name === 'readyState')
 	},
 	{
 		event_names: ['volumechange'],
@@ -131,6 +131,12 @@ const events = [
 			node.is_media_node() &&
 			(name === 'videoHeight' || name === 'videoWidth')
 	},
+	{
+		event_names: ['loadeddata', 'canplay', 'canplaythrough', 'emptied'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			name === 'readyState'
+	},
 
 	// details event
 	{
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
index 5005eb47d1ee..bf4d16739de3 100644
--- a/test/js/samples/media-bindings/expected.js
+++ b/test/js/samples/media-bindings/expected.js
@@ -30,18 +30,19 @@ function create_fragment(ctx) {
 			audio_updating = true;
 		}
 
-		/*audio_timeupdate_handler*/ ctx[13].call(audio);
+		/*audio_timeupdate_handler*/ ctx[14].call(audio);
 	}
 
 	return {
 		c() {
 			audio = element("audio");
-			if (/*buffered*/ ctx[0] === void 0) add_render_callback(() => /*audio_progress_handler*/ ctx[11].call(audio));
-			if (/*buffered*/ ctx[0] === void 0 || /*seekable*/ ctx[1] === void 0) add_render_callback(() => /*audio_loadedmetadata_handler*/ ctx[12].call(audio));
+			if (/*buffered*/ ctx[0] === void 0) add_render_callback(() => /*audio_progress_handler*/ ctx[12].call(audio));
+			if (/*buffered*/ ctx[0] === void 0 || /*seekable*/ ctx[1] === void 0 || /*readyState*/ ctx[11] === void 0) add_render_callback(() => /*audio_loadedmetadata_handler*/ ctx[13].call(audio));
 			if (/*played*/ ctx[2] === void 0 || /*currentTime*/ ctx[3] === void 0 || /*ended*/ ctx[10] === void 0) add_render_callback(audio_timeupdate_handler);
-			if (/*duration*/ ctx[4] === void 0) add_render_callback(() => /*audio_durationchange_handler*/ ctx[14].call(audio));
-			if (/*seeking*/ ctx[9] === void 0) add_render_callback(() => /*audio_seeking_seeked_handler*/ ctx[18].call(audio));
-			if (/*ended*/ ctx[10] === void 0) add_render_callback(() => /*audio_ended_handler*/ ctx[19].call(audio));
+			if (/*duration*/ ctx[4] === void 0) add_render_callback(() => /*audio_durationchange_handler*/ ctx[15].call(audio));
+			if (/*seeking*/ ctx[9] === void 0) add_render_callback(() => /*audio_seeking_seeked_handler*/ ctx[19].call(audio));
+			if (/*ended*/ ctx[10] === void 0) add_render_callback(() => /*audio_ended_handler*/ ctx[20].call(audio));
+			if (/*readyState*/ ctx[11] === void 0) add_render_callback(() => /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21].call(audio));
 		},
 		m(target, anchor) {
 			insert(target, audio, anchor);
@@ -58,17 +59,21 @@ function create_fragment(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(audio, "progress", /*audio_progress_handler*/ ctx[11]),
-					listen(audio, "loadedmetadata", /*audio_loadedmetadata_handler*/ ctx[12]),
+					listen(audio, "progress", /*audio_progress_handler*/ ctx[12]),
+					listen(audio, "loadedmetadata", /*audio_loadedmetadata_handler*/ ctx[13]),
 					listen(audio, "timeupdate", audio_timeupdate_handler),
-					listen(audio, "durationchange", /*audio_durationchange_handler*/ ctx[14]),
-					listen(audio, "play", /*audio_play_pause_handler*/ ctx[15]),
-					listen(audio, "pause", /*audio_play_pause_handler*/ ctx[15]),
-					listen(audio, "volumechange", /*audio_volumechange_handler*/ ctx[16]),
-					listen(audio, "ratechange", /*audio_ratechange_handler*/ ctx[17]),
-					listen(audio, "seeking", /*audio_seeking_seeked_handler*/ ctx[18]),
-					listen(audio, "seeked", /*audio_seeking_seeked_handler*/ ctx[18]),
-					listen(audio, "ended", /*audio_ended_handler*/ ctx[19])
+					listen(audio, "durationchange", /*audio_durationchange_handler*/ ctx[15]),
+					listen(audio, "play", /*audio_play_pause_handler*/ ctx[16]),
+					listen(audio, "pause", /*audio_play_pause_handler*/ ctx[16]),
+					listen(audio, "volumechange", /*audio_volumechange_handler*/ ctx[17]),
+					listen(audio, "ratechange", /*audio_ratechange_handler*/ ctx[18]),
+					listen(audio, "seeking", /*audio_seeking_seeked_handler*/ ctx[19]),
+					listen(audio, "seeked", /*audio_seeking_seeked_handler*/ ctx[19]),
+					listen(audio, "ended", /*audio_ended_handler*/ ctx[20]),
+					listen(audio, "loadeddata", /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21]),
+					listen(audio, "canplay", /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21]),
+					listen(audio, "canplaythrough", /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21]),
+					listen(audio, "emptied", /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21])
 				];
 
 				mounted = true;
@@ -119,6 +124,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { playbackRate } = $$props;
 	let { seeking } = $$props;
 	let { ended } = $$props;
+	let { readyState } = $$props;
 
 	function audio_progress_handler() {
 		buffered = time_ranges_to_array(this.buffered);
@@ -128,8 +134,10 @@ function instance($$self, $$props, $$invalidate) {
 	function audio_loadedmetadata_handler() {
 		buffered = time_ranges_to_array(this.buffered);
 		seekable = time_ranges_to_array(this.seekable);
+		readyState = this.readyState;
 		$$invalidate(0, buffered);
 		$$invalidate(1, seekable);
+		$$invalidate(11, readyState);
 	}
 
 	function audio_timeupdate_handler() {
@@ -173,6 +181,11 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(10, ended);
 	}
 
+	function audio_loadeddata_canplay_canplaythrough_emptied_handler() {
+		readyState = this.readyState;
+		$$invalidate(11, readyState);
+	}
+
 	$$self.$$set = $$props => {
 		if ('buffered' in $$props) $$invalidate(0, buffered = $$props.buffered);
 		if ('seekable' in $$props) $$invalidate(1, seekable = $$props.seekable);
@@ -185,6 +198,7 @@ function instance($$self, $$props, $$invalidate) {
 		if ('playbackRate' in $$props) $$invalidate(8, playbackRate = $$props.playbackRate);
 		if ('seeking' in $$props) $$invalidate(9, seeking = $$props.seeking);
 		if ('ended' in $$props) $$invalidate(10, ended = $$props.ended);
+		if ('readyState' in $$props) $$invalidate(11, readyState = $$props.readyState);
 	};
 
 	return [
@@ -199,6 +213,7 @@ function instance($$self, $$props, $$invalidate) {
 		playbackRate,
 		seeking,
 		ended,
+		readyState,
 		audio_progress_handler,
 		audio_loadedmetadata_handler,
 		audio_timeupdate_handler,
@@ -207,7 +222,8 @@ function instance($$self, $$props, $$invalidate) {
 		audio_volumechange_handler,
 		audio_ratechange_handler,
 		audio_seeking_seeked_handler,
-		audio_ended_handler
+		audio_ended_handler,
+		audio_loadeddata_canplay_canplaythrough_emptied_handler
 	];
 }
 
@@ -226,7 +242,8 @@ class Component extends SvelteComponent {
 			muted: 7,
 			playbackRate: 8,
 			seeking: 9,
-			ended: 10
+			ended: 10,
+			readyState: 11
 		});
 	}
 }
diff --git a/test/js/samples/media-bindings/input.svelte b/test/js/samples/media-bindings/input.svelte
index 7c1afcf61498..a1dd10dcaee5 100644
--- a/test/js/samples/media-bindings/input.svelte
+++ b/test/js/samples/media-bindings/input.svelte
@@ -10,6 +10,7 @@
 	export let playbackRate;
 	export let seeking;
 	export let ended;
+	export let readyState;
 </script>
 
-<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume bind:muted bind:playbackRate bind:seeking bind:ended/>
+<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume bind:muted bind:playbackRate bind:seeking bind:ended bind:readyState/>
diff --git a/test/js/samples/video-bindings/expected.js b/test/js/samples/video-bindings/expected.js
index 020bab574c63..b17506b981ee 100644
--- a/test/js/samples/video-bindings/expected.js
+++ b/test/js/samples/video-bindings/expected.js
@@ -30,23 +30,30 @@ function create_fragment(ctx) {
 			video_updating = true;
 		}
 
-		/*video_timeupdate_handler*/ ctx[4].call(video);
+		/*video_timeupdate_handler*/ ctx[5].call(video);
 	}
 
 	return {
 		c() {
 			video = element("video");
-			if (/*videoHeight*/ ctx[1] === void 0 || /*videoWidth*/ ctx[2] === void 0) add_render_callback(() => /*video_resize_handler*/ ctx[5].call(video));
-			add_render_callback(() => /*video_elementresize_handler*/ ctx[6].call(video));
+			if (/*videoHeight*/ ctx[1] === void 0 || /*videoWidth*/ ctx[2] === void 0) add_render_callback(() => /*video_resize_handler*/ ctx[6].call(video));
+			add_render_callback(() => /*video_elementresize_handler*/ ctx[7].call(video));
+			if (/*readyState*/ ctx[4] === void 0) add_render_callback(() => /*video_loadedmetadata_handler*/ ctx[8].call(video));
+			if (/*readyState*/ ctx[4] === void 0) add_render_callback(() => /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9].call(video));
 		},
 		m(target, anchor) {
 			insert(target, video, anchor);
-			video_resize_listener = add_resize_listener(video, /*video_elementresize_handler*/ ctx[6].bind(video));
+			video_resize_listener = add_resize_listener(video, /*video_elementresize_handler*/ ctx[7].bind(video));
 
 			if (!mounted) {
 				dispose = [
 					listen(video, "timeupdate", video_timeupdate_handler),
-					listen(video, "resize", /*video_resize_handler*/ ctx[5])
+					listen(video, "resize", /*video_resize_handler*/ ctx[6]),
+					listen(video, "loadedmetadata", /*video_loadedmetadata_handler*/ ctx[8]),
+					listen(video, "loadeddata", /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9]),
+					listen(video, "canplay", /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9]),
+					listen(video, "canplaythrough", /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9]),
+					listen(video, "emptied", /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9])
 				];
 
 				mounted = true;
@@ -75,6 +82,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { videoHeight } = $$props;
 	let { videoWidth } = $$props;
 	let { offsetWidth } = $$props;
+	let { readyState } = $$props;
 
 	function video_timeupdate_handler() {
 		currentTime = this.currentTime;
@@ -93,11 +101,22 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(3, offsetWidth);
 	}
 
+	function video_loadedmetadata_handler() {
+		readyState = this.readyState;
+		$$invalidate(4, readyState);
+	}
+
+	function video_loadeddata_canplay_canplaythrough_emptied_handler() {
+		readyState = this.readyState;
+		$$invalidate(4, readyState);
+	}
+
 	$$self.$$set = $$props => {
 		if ('currentTime' in $$props) $$invalidate(0, currentTime = $$props.currentTime);
 		if ('videoHeight' in $$props) $$invalidate(1, videoHeight = $$props.videoHeight);
 		if ('videoWidth' in $$props) $$invalidate(2, videoWidth = $$props.videoWidth);
 		if ('offsetWidth' in $$props) $$invalidate(3, offsetWidth = $$props.offsetWidth);
+		if ('readyState' in $$props) $$invalidate(4, readyState = $$props.readyState);
 	};
 
 	return [
@@ -105,9 +124,12 @@ function instance($$self, $$props, $$invalidate) {
 		videoHeight,
 		videoWidth,
 		offsetWidth,
+		readyState,
 		video_timeupdate_handler,
 		video_resize_handler,
-		video_elementresize_handler
+		video_elementresize_handler,
+		video_loadedmetadata_handler,
+		video_loadeddata_canplay_canplaythrough_emptied_handler
 	];
 }
 
@@ -119,7 +141,8 @@ class Component extends SvelteComponent {
 			currentTime: 0,
 			videoHeight: 1,
 			videoWidth: 2,
-			offsetWidth: 3
+			offsetWidth: 3,
+			readyState: 4
 		});
 	}
 }
diff --git a/test/js/samples/video-bindings/input.svelte b/test/js/samples/video-bindings/input.svelte
index e61a2bb91977..dcb4356dbc74 100644
--- a/test/js/samples/video-bindings/input.svelte
+++ b/test/js/samples/video-bindings/input.svelte
@@ -3,6 +3,7 @@
 	export let videoHeight;
 	export let videoWidth;
 	export let offsetWidth;
+	export let readyState;
 </script>
 
-<video bind:currentTime bind:videoHeight bind:videoWidth bind:offsetWidth/>
+<video bind:currentTime bind:videoHeight bind:videoWidth bind:offsetWidth bind:readyState/>

From 801d6dabbe604b4e747d1fc5cb12e7a9daf3e4d5 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 27 Feb 2023 16:51:45 +0100
Subject: [PATCH 2/4] fomat

---
 src/compiler/compile/nodes/Binding.ts                     | 2 +-
 src/compiler/compile/render_dom/wrappers/Element/index.ts | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index db08cf4a78a5..0c29f7ec67c1 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -25,7 +25,7 @@ const read_only_media_attributes = new Set([
 	'videoWidth',
 	'naturalWidth',
 	'naturalHeight',
-  'readyState'
+	'readyState'
 ]);
 
 export default class Binding extends Node {
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 92b0375b50f0..9c43aa4bb50f 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -63,13 +63,11 @@ const events = [
 		filter: (node: Element, _name: string) =>
 			node.name === 'input' && node.get_static_attribute_value('type') === 'range'
 	},
-
 	{
 		event_names: ['elementresize'],
 		filter: (_node: Element, name: string) =>
 			regex_dimensions.test(name)
 	},
-
 	// media events
 	{
 		event_names: ['timeupdate'],
@@ -137,7 +135,6 @@ const events = [
 			node.is_media_node() &&
 			name === 'readyState'
 	},
-
 	// details event
 	{
 		event_names: ['toggle'],

From 5399247b419b7028cefb2d904e7015111e9560c1 Mon Sep 17 00:00:00 2001
From: Brad Dougherty <me@brad.is>
Date: Mon, 27 Feb 2023 20:58:50 -0500
Subject: [PATCH 3/4] Update readyState events

---
 .../render_dom/wrappers/Element/index.ts      |  4 +--
 test/js/samples/media-bindings/expected.js    | 23 ++++++++--------
 test/js/samples/video-bindings/expected.js    | 27 ++++++++-----------
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 9c43aa4bb50f..55da3a7f1715 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -97,7 +97,7 @@ const events = [
 		event_names: ['loadedmetadata'],
 		filter: (node: Element, name: string) =>
 			node.is_media_node() &&
-			(name === 'buffered' || name === 'seekable' || name === 'readyState')
+			(name === 'buffered' || name === 'seekable')
 	},
 	{
 		event_names: ['volumechange'],
@@ -130,7 +130,7 @@ const events = [
 			(name === 'videoHeight' || name === 'videoWidth')
 	},
 	{
-		event_names: ['loadeddata', 'canplay', 'canplaythrough', 'emptied'],
+		event_names: ['loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'emptied'],
 		filter: (node: Element, name: string) =>
 			node.is_media_node() &&
 			name === 'readyState'
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
index bf4d16739de3..8320d92b2a5a 100644
--- a/test/js/samples/media-bindings/expected.js
+++ b/test/js/samples/media-bindings/expected.js
@@ -37,12 +37,12 @@ function create_fragment(ctx) {
 		c() {
 			audio = element("audio");
 			if (/*buffered*/ ctx[0] === void 0) add_render_callback(() => /*audio_progress_handler*/ ctx[12].call(audio));
-			if (/*buffered*/ ctx[0] === void 0 || /*seekable*/ ctx[1] === void 0 || /*readyState*/ ctx[11] === void 0) add_render_callback(() => /*audio_loadedmetadata_handler*/ ctx[13].call(audio));
+			if (/*buffered*/ ctx[0] === void 0 || /*seekable*/ ctx[1] === void 0) add_render_callback(() => /*audio_loadedmetadata_handler*/ ctx[13].call(audio));
 			if (/*played*/ ctx[2] === void 0 || /*currentTime*/ ctx[3] === void 0 || /*ended*/ ctx[10] === void 0) add_render_callback(audio_timeupdate_handler);
 			if (/*duration*/ ctx[4] === void 0) add_render_callback(() => /*audio_durationchange_handler*/ ctx[15].call(audio));
 			if (/*seeking*/ ctx[9] === void 0) add_render_callback(() => /*audio_seeking_seeked_handler*/ ctx[19].call(audio));
 			if (/*ended*/ ctx[10] === void 0) add_render_callback(() => /*audio_ended_handler*/ ctx[20].call(audio));
-			if (/*readyState*/ ctx[11] === void 0) add_render_callback(() => /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21].call(audio));
+			if (/*readyState*/ ctx[11] === void 0) add_render_callback(() => /*audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[21].call(audio));
 		},
 		m(target, anchor) {
 			insert(target, audio, anchor);
@@ -70,10 +70,13 @@ function create_fragment(ctx) {
 					listen(audio, "seeking", /*audio_seeking_seeked_handler*/ ctx[19]),
 					listen(audio, "seeked", /*audio_seeking_seeked_handler*/ ctx[19]),
 					listen(audio, "ended", /*audio_ended_handler*/ ctx[20]),
-					listen(audio, "loadeddata", /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21]),
-					listen(audio, "canplay", /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21]),
-					listen(audio, "canplaythrough", /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21]),
-					listen(audio, "emptied", /*audio_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[21])
+					listen(audio, "loadedmetadata", /*audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[21]),
+					listen(audio, "loadeddata", /*audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[21]),
+					listen(audio, "canplay", /*audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[21]),
+					listen(audio, "canplaythrough", /*audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[21]),
+					listen(audio, "playing", /*audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[21]),
+					listen(audio, "waiting", /*audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[21]),
+					listen(audio, "emptied", /*audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[21])
 				];
 
 				mounted = true;
@@ -134,10 +137,8 @@ function instance($$self, $$props, $$invalidate) {
 	function audio_loadedmetadata_handler() {
 		buffered = time_ranges_to_array(this.buffered);
 		seekable = time_ranges_to_array(this.seekable);
-		readyState = this.readyState;
 		$$invalidate(0, buffered);
 		$$invalidate(1, seekable);
-		$$invalidate(11, readyState);
 	}
 
 	function audio_timeupdate_handler() {
@@ -181,7 +182,7 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(10, ended);
 	}
 
-	function audio_loadeddata_canplay_canplaythrough_emptied_handler() {
+	function audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler() {
 		readyState = this.readyState;
 		$$invalidate(11, readyState);
 	}
@@ -223,7 +224,7 @@ function instance($$self, $$props, $$invalidate) {
 		audio_ratechange_handler,
 		audio_seeking_seeked_handler,
 		audio_ended_handler,
-		audio_loadeddata_canplay_canplaythrough_emptied_handler
+		audio_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler
 	];
 }
 
@@ -248,4 +249,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/test/js/samples/video-bindings/expected.js b/test/js/samples/video-bindings/expected.js
index b17506b981ee..fe30240bfce4 100644
--- a/test/js/samples/video-bindings/expected.js
+++ b/test/js/samples/video-bindings/expected.js
@@ -38,8 +38,7 @@ function create_fragment(ctx) {
 			video = element("video");
 			if (/*videoHeight*/ ctx[1] === void 0 || /*videoWidth*/ ctx[2] === void 0) add_render_callback(() => /*video_resize_handler*/ ctx[6].call(video));
 			add_render_callback(() => /*video_elementresize_handler*/ ctx[7].call(video));
-			if (/*readyState*/ ctx[4] === void 0) add_render_callback(() => /*video_loadedmetadata_handler*/ ctx[8].call(video));
-			if (/*readyState*/ ctx[4] === void 0) add_render_callback(() => /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9].call(video));
+			if (/*readyState*/ ctx[4] === void 0) add_render_callback(() => /*video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[8].call(video));
 		},
 		m(target, anchor) {
 			insert(target, video, anchor);
@@ -49,11 +48,13 @@ function create_fragment(ctx) {
 				dispose = [
 					listen(video, "timeupdate", video_timeupdate_handler),
 					listen(video, "resize", /*video_resize_handler*/ ctx[6]),
-					listen(video, "loadedmetadata", /*video_loadedmetadata_handler*/ ctx[8]),
-					listen(video, "loadeddata", /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9]),
-					listen(video, "canplay", /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9]),
-					listen(video, "canplaythrough", /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9]),
-					listen(video, "emptied", /*video_loadeddata_canplay_canplaythrough_emptied_handler*/ ctx[9])
+					listen(video, "loadedmetadata", /*video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[8]),
+					listen(video, "loadeddata", /*video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[8]),
+					listen(video, "canplay", /*video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[8]),
+					listen(video, "canplaythrough", /*video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[8]),
+					listen(video, "playing", /*video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[8]),
+					listen(video, "waiting", /*video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[8]),
+					listen(video, "emptied", /*video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler*/ ctx[8])
 				];
 
 				mounted = true;
@@ -101,12 +102,7 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(3, offsetWidth);
 	}
 
-	function video_loadedmetadata_handler() {
-		readyState = this.readyState;
-		$$invalidate(4, readyState);
-	}
-
-	function video_loadeddata_canplay_canplaythrough_emptied_handler() {
+	function video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler() {
 		readyState = this.readyState;
 		$$invalidate(4, readyState);
 	}
@@ -128,8 +124,7 @@ function instance($$self, $$props, $$invalidate) {
 		video_timeupdate_handler,
 		video_resize_handler,
 		video_elementresize_handler,
-		video_loadedmetadata_handler,
-		video_loadeddata_canplay_canplaythrough_emptied_handler
+		video_loadedmetadata_loadeddata_canplay_canplaythrough_playing_waiting_emptied_handler
 	];
 }
 
@@ -147,4 +142,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
\ No newline at end of file
+export default Component;

From 750da0373b4fab73cacac4e9afee533d06c6a5dc Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 1 Mar 2023 11:47:42 +0100
Subject: [PATCH 4/4] types, docs

---
 elements/index.d.ts                                       | 1 +
 site/content/docs/03-template-syntax.md                   | 4 +++-
 src/compiler/compile/render_dom/wrappers/Element/index.ts | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/elements/index.d.ts b/elements/index.d.ts
index 9a4284af22d1..8a20b6bb9ec7 100644
--- a/elements/index.d.ts
+++ b/elements/index.d.ts
@@ -842,6 +842,7 @@ export interface HTMLMediaAttributes<T extends HTMLMediaElement> extends HTMLAtt
 	 */
 	volume?: number | undefined | null;
 
+	readonly 'bind:readyState'?: 0 | 1 | 2 | 3 | 4 | undefined | null;
 	readonly 'bind:duration'?: number | undefined | null;
 	readonly 'bind:buffered'?: SvelteMediaTimeRange[] | undefined | null;
 	readonly 'bind:played'?: SvelteMediaTimeRange[] | undefined | null;
diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index 419489211cb4..847999a2102a 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -713,7 +713,7 @@ Elements with the `contenteditable` attribute support `innerHTML` and `textConte
 
 ---
 
-Media elements (`<audio>` and `<video>`) have their own set of bindings — six *readonly* ones...
+Media elements (`<audio>` and `<video>`) have their own set of bindings — seven *readonly* ones...
 
 * `duration` (readonly) — the total duration of the video, in seconds
 * `buffered` (readonly) — an array of `{start, end}` objects
@@ -721,6 +721,7 @@ Media elements (`<audio>` and `<video>`) have their own set of bindings — six
 * `seekable` (readonly) — ditto
 * `seeking` (readonly) — boolean
 * `ended` (readonly) — boolean
+* `readyState` (readonly) — number between (and including) 0 and 4
 
 ...and five *two-way* bindings:
 
@@ -741,6 +742,7 @@ Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
 	bind:seekable
 	bind:seeking
 	bind:ended
+	bind:readyState
 	bind:currentTime
 	bind:playbackRate
 	bind:paused
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 55da3a7f1715..5b07df3b36a5 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -130,6 +130,8 @@ const events = [
 			(name === 'videoHeight' || name === 'videoWidth')
 	},
 	{
+		// from https://html.spec.whatwg.org/multipage/media.html#ready-states
+		// and https://html.spec.whatwg.org/multipage/media.html#loading-the-media-resource
 		event_names: ['loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'emptied'],
 		filter: (node: Element, name: string) =>
 			node.is_media_node() &&