Add binding for HTMLMediaElement.seeking

pull/3650/head
Mattias Buelens 6 years ago
parent c29e2085a1
commit 5658d94545

@ -11,7 +11,8 @@ const read_only_media_attributes = new Set([
'duration', 'duration',
'buffered', 'buffered',
'seekable', 'seekable',
'played' 'played',
'seeking'
]); ]);
export default class Binding extends Node { export default class Binding extends Node {

@ -596,7 +596,8 @@ export default class Element extends Node {
name === 'seekable' || name === 'seekable' ||
name === 'played' || name === 'played' ||
name === 'volume' || name === 'volume' ||
name === 'playbackRate' name === 'playbackRate' ||
name === 'seeking'
) { ) {
if (this.name !== 'audio' && this.name !== 'video') { if (this.name !== 'audio' && this.name !== 'video') {
component.error(binding, { component.error(binding, {

@ -100,6 +100,12 @@ const events = [
node.is_media_node() && node.is_media_node() &&
name === 'playbackRate' name === 'playbackRate'
}, },
{
event_names: ['seeking', 'seeked'],
filter: (node: Element, name: string) =>
node.is_media_node() &&
(name === 'seeking')
},
// details event // details event
{ {

@ -39,6 +39,7 @@ function create_fragment(ctx) {
if (ctx.duration === void 0) add_render_callback(() => ctx.audio_durationchange_handler.call(audio)); 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) 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.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 = [ dispose = [
listen(audio, "timeupdate", audio_timeupdate_handler), listen(audio, "timeupdate", audio_timeupdate_handler),
@ -48,7 +49,9 @@ function create_fragment(ctx) {
listen(audio, "progress", ctx.audio_progress_handler), listen(audio, "progress", ctx.audio_progress_handler),
listen(audio, "loadedmetadata", ctx.audio_loadedmetadata_handler), listen(audio, "loadedmetadata", ctx.audio_loadedmetadata_handler),
listen(audio, "volumechange", ctx.audio_volumechange_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) { m(target, anchor) {
@ -93,6 +96,7 @@ function instance($$self, $$props, $$invalidate) {
let { paused } = $$props; let { paused } = $$props;
let { volume } = $$props; let { volume } = $$props;
let { playbackRate } = $$props; let { playbackRate } = $$props;
let { seeking } = $$props;
function audio_timeupdate_handler() { function audio_timeupdate_handler() {
played = time_ranges_to_array(this.played); played = time_ranges_to_array(this.played);
@ -133,6 +137,11 @@ function instance($$self, $$props, $$invalidate) {
$$invalidate("playbackRate", playbackRate); $$invalidate("playbackRate", playbackRate);
} }
function audio_seeking_seeked_handler() {
seeking = this.seeking;
$$invalidate("seeking", seeking);
}
$$self.$set = $$props => { $$self.$set = $$props => {
if ("buffered" in $$props) $$invalidate("buffered", buffered = $$props.buffered); if ("buffered" in $$props) $$invalidate("buffered", buffered = $$props.buffered);
if ("seekable" in $$props) $$invalidate("seekable", seekable = $$props.seekable); 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 ("paused" in $$props) $$invalidate("paused", paused = $$props.paused);
if ("volume" in $$props) $$invalidate("volume", volume = $$props.volume); if ("volume" in $$props) $$invalidate("volume", volume = $$props.volume);
if ("playbackRate" in $$props) $$invalidate("playbackRate", playbackRate = $$props.playbackRate); if ("playbackRate" in $$props) $$invalidate("playbackRate", playbackRate = $$props.playbackRate);
if ("seeking" in $$props) $$invalidate("seeking", seeking = $$props.seeking);
}; };
return { return {
@ -153,13 +163,15 @@ function instance($$self, $$props, $$invalidate) {
paused, paused,
volume, volume,
playbackRate, playbackRate,
seeking,
audio_timeupdate_handler, audio_timeupdate_handler,
audio_durationchange_handler, audio_durationchange_handler,
audio_play_pause_handler, audio_play_pause_handler,
audio_progress_handler, audio_progress_handler,
audio_loadedmetadata_handler, audio_loadedmetadata_handler,
audio_volumechange_handler, audio_volumechange_handler,
audio_ratechange_handler audio_ratechange_handler,
audio_seeking_seeked_handler
}; };
} }
@ -175,7 +187,8 @@ class Component extends SvelteComponent {
duration: 0, duration: 0,
paused: 0, paused: 0,
volume: 0, volume: 0,
playbackRate: 0 playbackRate: 0,
seeking: 0
}); });
} }
} }

@ -7,6 +7,7 @@
export let paused; export let paused;
export let volume; export let volume;
export let playbackRate; export let playbackRate;
export let seeking;
</script> </script>
<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume bind:playbackRate/> <audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume bind:playbackRate bind:seeking/>

Loading…
Cancel
Save