Merge 5626570eb1 into c19542b634

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -60,7 +60,7 @@ const events = [
 
 	// media events
 	{
-		event_names: ['timeupdate'],
+		event_names: ['timeupdate', 'play', 'seeking'],
 		filter: (node: Element, name: string) =>
 			node.is_media_node() &&
 			(name === 'currentTime' || name === 'played' || name === 'ended')
@@ -445,7 +445,7 @@ export default class ElementWrapper extends Wrapper {
 
 		const bindingGroups = events
 			.map(event => ({
-				events: event.event_names,
+				events: [...event.event_names],
 				bindings: this.bindings
 					.filter(binding => binding.node.name !== 'this')
 					.filter(binding => event.filter(this.node, binding.node.name))
@@ -523,7 +523,8 @@ export default class ElementWrapper extends Wrapper {
 			// fire too infrequently, so we need to take matters into our
 			// own hands
 			let animation_frame;
-			if (group.events[0] === 'timeupdate') {
+      if (group.events[0] === 'timeupdate') {
+        group.events.shift();
 				animation_frame = block.get_unique_name(`${this.var.name}_animationframe`);
 				block.add_variable(animation_frame);
 			}

test/js/samples/media-bindings/expected.js

@@ -21,15 +21,15 @@ function create_fragment(ctx) {
 	let audio_is_paused = true;
 	let dispose;
 
-	function audio_timeupdate_handler() {
+	function audio_timeupdate_play_seeking_handler() {
 		cancelAnimationFrame(audio_animationframe);
 
 		if (!audio.paused) {
-			audio_animationframe = raf(audio_timeupdate_handler);
+			audio_animationframe = raf(audio_timeupdate_play_seeking_handler);
 			audio_updating = true;
 		}
 
-		/*audio_timeupdate_handler*/ ctx[12].call(audio);
+		/*audio_timeupdate_play_seeking_handler*/ ctx[12].call(audio);
 	}
 
 	return {
@@ -37,7 +37,7 @@ function create_fragment(ctx) {
 			audio = element("audio");
 			if (/*buffered*/ ctx[0] === void 0) add_render_callback(() => /*audio_progress_handler*/ ctx[10].call(audio));
 			if (/*buffered*/ ctx[0] === void 0 || /*seekable*/ ctx[1] === void 0) add_render_callback(() => /*audio_loadedmetadata_handler*/ ctx[11].call(audio));
-			if (/*played*/ ctx[2] === void 0 || /*currentTime*/ ctx[3] === void 0 || /*ended*/ ctx[9] === void 0) add_render_callback(audio_timeupdate_handler);
+			if (/*played*/ ctx[2] === void 0 || /*currentTime*/ ctx[3] === void 0 || /*ended*/ ctx[9] === void 0) add_render_callback(audio_timeupdate_play_seeking_handler);
 			if (/*duration*/ ctx[4] === void 0) add_render_callback(() => /*audio_durationchange_handler*/ ctx[13].call(audio));
 			if (/*seeking*/ ctx[8] === void 0) add_render_callback(() => /*audio_seeking_seeked_handler*/ ctx[17].call(audio));
 			if (/*ended*/ ctx[9] === void 0) add_render_callback(() => /*audio_ended_handler*/ ctx[18].call(audio));
@@ -58,7 +58,8 @@ function create_fragment(ctx) {
 			dispose = [
 				listen(audio, "progress", /*audio_progress_handler*/ ctx[10]),
 				listen(audio, "loadedmetadata", /*audio_loadedmetadata_handler*/ ctx[11]),
-				listen(audio, "timeupdate", audio_timeupdate_handler),
+				listen(audio, "play", audio_timeupdate_play_seeking_handler),
+				listen(audio, "seeking", audio_timeupdate_play_seeking_handler),
 				listen(audio, "durationchange", /*audio_durationchange_handler*/ ctx[13]),
 				listen(audio, "play", /*audio_play_pause_handler*/ ctx[14]),
 				listen(audio, "pause", /*audio_play_pause_handler*/ ctx[14]),
@@ -121,7 +122,7 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(1, seekable);
 	}
 
-	function audio_timeupdate_handler() {
+	function audio_timeupdate_play_seeking_handler() {
 		played = time_ranges_to_array(this.played);
 		currentTime = this.currentTime;
 		ended = this.ended;
@@ -186,7 +187,7 @@ function instance($$self, $$props, $$invalidate) {
 		ended,
 		audio_progress_handler,
 		audio_loadedmetadata_handler,
-		audio_timeupdate_handler,
+		audio_timeupdate_play_seeking_handler,
 		audio_durationchange_handler,
 		audio_play_pause_handler,
 		audio_volumechange_handler,

test/js/samples/video-bindings/expected.js

@@ -21,15 +21,15 @@ function create_fragment(ctx) {
 	let video_resize_listener;
 	let dispose;
 
-	function video_timeupdate_handler() {
+	function video_timeupdate_play_seeking_handler() {
 		cancelAnimationFrame(video_animationframe);
 
 		if (!video.paused) {
-			video_animationframe = raf(video_timeupdate_handler);
+			video_animationframe = raf(video_timeupdate_play_seeking_handler);
 			video_updating = true;
 		}
 
-		/*video_timeupdate_handler*/ ctx[4].call(video);
+		/*video_timeupdate_play_seeking_handler*/ ctx[4].call(video);
 	}
 
 	return {
@@ -44,7 +44,8 @@ function create_fragment(ctx) {
 			if (remount) run_all(dispose);
 
 			dispose = [
-				listen(video, "timeupdate", video_timeupdate_handler),
+				listen(video, "play", video_timeupdate_play_seeking_handler),
+				listen(video, "seeking", video_timeupdate_play_seeking_handler),
 				listen(video, "resize", /*video_resize_handler*/ ctx[5])
 			];
 		},
@@ -71,7 +72,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { videoWidth } = $$props;
 	let { offsetWidth } = $$props;
 
-	function video_timeupdate_handler() {
+	function video_timeupdate_play_seeking_handler() {
 		currentTime = this.currentTime;
 		$$invalidate(0, currentTime);
 	}
@@ -100,7 +101,7 @@ function instance($$self, $$props, $$invalidate) {
 		videoHeight,
 		videoWidth,
 		offsetWidth,
-		video_timeupdate_handler,
+		video_timeupdate_play_seeking_handler,
 		video_resize_handler,
 		video_elementresize_handler
 	];