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;
-
+