diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts index 969232a17c..5626ce91a6 100644 --- a/src/compiler/compile/nodes/Binding.ts +++ b/src/compiler/compile/nodes/Binding.ts @@ -11,7 +11,8 @@ const read_only_media_attributes = new Set([ 'duration', 'buffered', 'seekable', - 'played' + 'played', + 'seeking' ]); export default class Binding extends Node { diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 555c772f23..614e929b23 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -596,7 +596,8 @@ export default class Element extends Node { name === 'seekable' || name === 'played' || name === 'volume' || - name === 'playbackRate' + name === 'playbackRate' || + name === 'seeking' ) { 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 75c2cc6096..e18e874a6e 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -100,6 +100,12 @@ const events = [ node.is_media_node() && name === 'playbackRate' }, + { + event_names: ['seeking', 'seeked'], + filter: (node: Element, name: string) => + node.is_media_node() && + (name === 'seeking') + }, // details event { diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index 1d90e0849e..454faa0fc6 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -39,6 +39,7 @@ function create_fragment(ctx) { 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)); dispose = [ listen(audio, "timeupdate", audio_timeupdate_handler), @@ -48,7 +49,9 @@ function create_fragment(ctx) { listen(audio, "progress", ctx.audio_progress_handler), listen(audio, "loadedmetadata", ctx.audio_loadedmetadata_handler), listen(audio, "volumechange", ctx.audio_volumechange_handler), - listen(audio, "ratechange", ctx.audio_ratechange_handler) + listen(audio, "ratechange", ctx.audio_ratechange_handler), + listen(audio, "seeking", ctx.audio_seeking_seeked_handler), + listen(audio, "seeked", ctx.audio_seeking_seeked_handler) ]; }, m(target, anchor) { @@ -93,6 +96,7 @@ function instance($$self, $$props, $$invalidate) { let { paused } = $$props; let { volume } = $$props; let { playbackRate } = $$props; + let { seeking } = $$props; function audio_timeupdate_handler() { played = time_ranges_to_array(this.played); @@ -133,6 +137,11 @@ function instance($$self, $$props, $$invalidate) { $$invalidate("playbackRate", playbackRate); } + function audio_seeking_seeked_handler() { + seeking = this.seeking; + $$invalidate("seeking", seeking); + } + $$self.$set = $$props => { if ("buffered" in $$props) $$invalidate("buffered", buffered = $$props.buffered); if ("seekable" in $$props) $$invalidate("seekable", seekable = $$props.seekable); @@ -142,6 +151,7 @@ function instance($$self, $$props, $$invalidate) { if ("paused" in $$props) $$invalidate("paused", paused = $$props.paused); 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); }; return { @@ -153,13 +163,15 @@ function instance($$self, $$props, $$invalidate) { paused, volume, playbackRate, + seeking, audio_timeupdate_handler, audio_durationchange_handler, audio_play_pause_handler, audio_progress_handler, audio_loadedmetadata_handler, audio_volumechange_handler, - audio_ratechange_handler + audio_ratechange_handler, + audio_seeking_seeked_handler }; } @@ -175,7 +187,8 @@ class Component extends SvelteComponent { duration: 0, paused: 0, volume: 0, - playbackRate: 0 + playbackRate: 0, + seeking: 0 }); } } diff --git a/test/js/samples/media-bindings/input.svelte b/test/js/samples/media-bindings/input.svelte index 4b5793ba93..43a00182b1 100644 --- a/test/js/samples/media-bindings/input.svelte +++ b/test/js/samples/media-bindings/input.svelte @@ -7,6 +7,7 @@ export let paused; export let volume; export let playbackRate; + export let seeking; -