diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index ab802b023d..29a159a1dc 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/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); } diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index e58d32cf29..06f50eaef4 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/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, diff --git a/test/js/samples/video-bindings/expected.js b/test/js/samples/video-bindings/expected.js index 9c5467e1a0..0c102356f9 100644 --- a/test/js/samples/video-bindings/expected.js +++ b/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 ];