Make buffered/played/seekable attributes of media element bindable

Author: martinandert

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;
-}
+}

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';
-}
+}