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] 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 9a4284af22..8a20b6bb9e 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 419489211c..847999a210 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 55da3a7f17..5b07df3b36 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() &&