From 39c009499e979ce864132d30dee57fde00e78e84 Mon Sep 17 00:00:00 2001 From: Mattias Buelens Date: Tue, 1 Oct 2019 22:54:43 +0200 Subject: [PATCH] Add binding for HTMLMediaElement.ended --- src/compiler/compile/nodes/Binding.ts | 3 ++- src/compiler/compile/nodes/Element.ts | 3 ++- .../render_dom/wrappers/Element/index.ts | 8 ++++++- test/js/samples/media-bindings/expected.js | 22 +++++++++++++++---- test/js/samples/media-bindings/input.svelte | 3 ++- 5 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts index 5626ce91a6..eaf2709da2 100644 --- a/src/compiler/compile/nodes/Binding.ts +++ b/src/compiler/compile/nodes/Binding.ts @@ -12,7 +12,8 @@ const read_only_media_attributes = new Set([ 'buffered', 'seekable', 'played', - 'seeking' + 'seeking', + 'ended' ]); export default class Binding extends Node { diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 614e929b23..ea0160e2b4 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -597,7 +597,8 @@ export default class Element extends Node { name === 'played' || name === 'volume' || name === 'playbackRate' || - name === 'seeking' + name === 'seeking' || + name === 'ended' ) { if (this.name !== 'audio' && this.name !== 'video') { component.error(binding, { diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index e18e874a6e..54d5a23932 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -62,7 +62,7 @@ const events = [ event_names: ['timeupdate'], filter: (node: Element, name: string) => node.is_media_node() && - (name === 'currentTime' || name === 'played') + (name === 'currentTime' || name === 'played' || name === 'ended') }, { event_names: ['durationchange'], @@ -106,6 +106,12 @@ const events = [ node.is_media_node() && (name === 'seeking') }, + { + event_names: ['ended'], + filter: (node: Element, name: string) => + node.is_media_node() && + name === 'ended' + }, // details event { diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index 454faa0fc6..28a6a02b47 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -35,11 +35,12 @@ function create_fragment(ctx) { return { c() { audio = element("audio"); - if (ctx.played === void 0 || ctx.currentTime === void 0) add_render_callback(audio_timeupdate_handler); + if (ctx.played === void 0 || ctx.currentTime === void 0 || ctx.ended === void 0) add_render_callback(audio_timeupdate_handler); if (ctx.duration === void 0) add_render_callback(() => ctx.audio_durationchange_handler.call(audio)); if (ctx.buffered === void 0) add_render_callback(() => ctx.audio_progress_handler.call(audio)); if (ctx.buffered === void 0 || ctx.seekable === void 0) add_render_callback(() => ctx.audio_loadedmetadata_handler.call(audio)); if (ctx.seeking === void 0) add_render_callback(() => ctx.audio_seeking_seeked_handler.call(audio)); + if (ctx.ended === void 0) add_render_callback(() => ctx.audio_ended_handler.call(audio)); dispose = [ listen(audio, "timeupdate", audio_timeupdate_handler), @@ -51,7 +52,8 @@ function create_fragment(ctx) { listen(audio, "volumechange", ctx.audio_volumechange_handler), listen(audio, "ratechange", ctx.audio_ratechange_handler), listen(audio, "seeking", ctx.audio_seeking_seeked_handler), - listen(audio, "seeked", ctx.audio_seeking_seeked_handler) + listen(audio, "seeked", ctx.audio_seeking_seeked_handler), + listen(audio, "ended", ctx.audio_ended_handler) ]; }, m(target, anchor) { @@ -97,12 +99,15 @@ function instance($$self, $$props, $$invalidate) { let { volume } = $$props; let { playbackRate } = $$props; let { seeking } = $$props; + let { ended } = $$props; function audio_timeupdate_handler() { played = time_ranges_to_array(this.played); currentTime = this.currentTime; + ended = this.ended; $$invalidate("played", played); $$invalidate("currentTime", currentTime); + $$invalidate("ended", ended); } function audio_durationchange_handler() { @@ -142,6 +147,11 @@ function instance($$self, $$props, $$invalidate) { $$invalidate("seeking", seeking); } + function audio_ended_handler() { + ended = this.ended; + $$invalidate("ended", ended); + } + $$self.$set = $$props => { if ("buffered" in $$props) $$invalidate("buffered", buffered = $$props.buffered); if ("seekable" in $$props) $$invalidate("seekable", seekable = $$props.seekable); @@ -152,6 +162,7 @@ function instance($$self, $$props, $$invalidate) { if ("volume" in $$props) $$invalidate("volume", volume = $$props.volume); if ("playbackRate" in $$props) $$invalidate("playbackRate", playbackRate = $$props.playbackRate); if ("seeking" in $$props) $$invalidate("seeking", seeking = $$props.seeking); + if ("ended" in $$props) $$invalidate("ended", ended = $$props.ended); }; return { @@ -164,6 +175,7 @@ function instance($$self, $$props, $$invalidate) { volume, playbackRate, seeking, + ended, audio_timeupdate_handler, audio_durationchange_handler, audio_play_pause_handler, @@ -171,7 +183,8 @@ function instance($$self, $$props, $$invalidate) { audio_loadedmetadata_handler, audio_volumechange_handler, audio_ratechange_handler, - audio_seeking_seeked_handler + audio_seeking_seeked_handler, + audio_ended_handler }; } @@ -188,7 +201,8 @@ class Component extends SvelteComponent { paused: 0, volume: 0, playbackRate: 0, - seeking: 0 + seeking: 0, + ended: 0 }); } } diff --git a/test/js/samples/media-bindings/input.svelte b/test/js/samples/media-bindings/input.svelte index 43a00182b1..a079a2e0e5 100644 --- a/test/js/samples/media-bindings/input.svelte +++ b/test/js/samples/media-bindings/input.svelte @@ -8,6 +8,7 @@ export let volume; export let playbackRate; export let seeking; + export let ended; -