From db0b6d712f0055a7c715e39537f6ba3dbacc34dd Mon Sep 17 00:00:00 2001
From: martinandert <mandert@gmail.com>
Date: Tue, 5 Sep 2017 19:35:09 +0200
Subject: [PATCH] Make buffered/played/seekable attributes of media element
 bindable

---
 .../dom/visitors/Element/Binding.ts           | 27 ++++++++++++++++++-
 src/validate/html/validateElement.ts          |  7 +++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index 8878af17d09c..098c1179ea48 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -138,6 +138,28 @@ export default function visitBinding(
 
 			updateConditions = [`${last} !== (${last} = ${snippet})`];
 			updateElement = `${state.parentNode}[${last} ? "pause" : "play"]();`;
+		} else if (attribute.name === 'buffered') {
+			const frame = block.getUniqueName(`${state.parentNode}_animationframe`);
+			block.addVariable(frame);
+			setter = deindent`
+				cancelAnimationFrame(${frame});
+				${frame} = requestAnimationFrame(${handler});
+				${setter}
+			`;
+
+			updateConditions.push(`${snippet}.start`);
+			readOnly = true;
+		} else if (attribute.name === 'seekable' || attribute.name === 'played') {
+			const frame = block.getUniqueName(`${state.parentNode}_animationframe`);
+			block.addVariable(frame);
+			setter = deindent`
+				cancelAnimationFrame(${frame});
+				if (!${state.parentNode}.paused) ${frame} = requestAnimationFrame(${handler});
+				${setter}
+			`;
+
+			updateConditions.push(`${snippet}.start`);
+			readOnly = true;
 		}
 	}
 
@@ -213,6 +235,9 @@ function getBindingEventName(node: Node, attribute: Node) {
 	if (attribute.name === 'currentTime') return 'timeupdate';
 	if (attribute.name === 'duration') return 'durationchange';
 	if (attribute.name === 'paused') return 'pause';
+	if (attribute.name === 'buffered') return 'progress';
+	if (attribute.name === 'seekable') return 'timeupdate';
+	if (attribute.name === 'played') return 'timeupdate';
 
 	return 'change';
 }
@@ -317,4 +342,4 @@ function isComputed(node: Node) {
 	}
 
 	return false;
-}
\ No newline at end of file
+}
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index 3641280f191f..1329420b9105 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -99,7 +99,10 @@ export default function validateElement(validator: Validator, node: Node, refs:
 			} else if (
 				name === 'currentTime' ||
 				name === 'duration' ||
-				name === 'paused'
+				name === 'paused' ||
+				name === 'buffered' ||
+				name === 'seekable' ||
+				name === 'played'
 			) {
 				if (node.name !== 'audio' && node.name !== 'video') {
 					validator.error(
@@ -202,4 +205,4 @@ function checkTypeAttribute(validator: Validator, node: Node) {
 
 function isDynamic(attribute: Node) {
 	return attribute.value.length > 1 || attribute.value[0].type !== 'Text';
-}
\ No newline at end of file
+}