msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Audio two-way `muted` bind property

Browse Source 
Loosely based on a37ee81676?w=1
pull/4690/head
Robert Hall 6 years ago
parent cc3c7fa9f4
commit 1f6bae75f5
7 changed files with 59 additions and 35 deletions
Show Stats Download Patch File Download Diff File

1
src/compiler/compile/nodes/Element.ts
Unescape View File

@ -579,6 +579,7 @@ export default class Element extends Node {
name === 'seekable' || name === 'seekable' ||
name === 'played' || name === 'played' ||
name === 'volume' || name === 'volume' ||
name === 'muted' ||
name === 'playbackRate' || name === 'playbackRate' ||
name === 'seeking' || name === 'seeking' ||
name === 'ended' name === 'ended'

4
src/compiler/compile/render_dom/wrappers/Element/Binding.ts
Unescape View File

@ -145,6 +145,10 @@ export default class BindingWrapper {
mount_conditions.push(x`!@_isNaN(${this.snippet})`); mount_conditions.push(x`!@_isNaN(${this.snippet})`);
break; break;
case 'muted':
update_dom = b`${parent.var}.${this.node.name} = !!${this.snippet};`;
break;
case 'paused': case 'paused':
{ {
// this is necessary to prevent audio restarting by itself // this is necessary to prevent audio restarting by itself

2
src/compiler/compile/render_dom/wrappers/Element/index.ts
Unescape View File

@ -93,7 +93,7 @@ const events = [
event_names: ['volumechange'], event_names: ['volumechange'],
filter: (node: Element, name: string) => filter: (node: Element, name: string) =>
node.is_media_node() && node.is_media_node() &&
name === 'volume' (name === 'volume' || name === 'muted')
}, },
{ {
event_names: ['ratechange'], event_names: ['ratechange'],

78
test/js/samples/media-bindings/expected.js
Unescape View File

@ -29,18 +29,18 @@ function create_fragment(ctx) {
audio_updating = true; audio_updating = true;
} }
/*audio_timeupdate_handler*/ ctx[12].call(audio); /*audio_timeupdate_handler*/ ctx[13].call(audio);
} }
return { return {
c() { c() {
audio = element("audio"); 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) add_render_callback(() => /*audio_progress_handler*/ ctx[11].call(audio));
if (/*buffered*/ ctx[0] === void 0 || /*seekable*/ ctx[1] === void 0) add_render_callback(() => /*audio_loadedmetadata_handler*/ ctx[11].call(audio)); if (/*buffered*/ ctx[0] === void 0 || /*seekable*/ ctx[1] === void 0) add_render_callback(() => /*audio_loadedmetadata_handler*/ ctx[12].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[10] === void 0) add_render_callback(audio_timeupdate_handler);
if (/*duration*/ ctx[4] === void 0) add_render_callback(() => /*audio_durationchange_handler*/ ctx[13].call(audio)); if (/*duration*/ ctx[4] === void 0) add_render_callback(() => /*audio_durationchange_handler*/ ctx[14].call(audio));
if (/*seeking*/ ctx[8] === void 0) add_render_callback(() => /*audio_seeking_seeked_handler*/ ctx[17].call(audio)); if (/*seeking*/ ctx[9] === void 0) add_render_callback(() => /*audio_seeking_seeked_handler*/ ctx[18].call(audio));
if (/*ended*/ ctx[9] === void 0) add_render_callback(() => /*audio_ended_handler*/ ctx[18].call(audio)); if (/*ended*/ ctx[10] === void 0) add_render_callback(() => /*audio_ended_handler*/ ctx[19].call(audio));
}, },
m(target, anchor, remount) { m(target, anchor, remount) {
insert(target, audio, anchor); insert(target, audio, anchor);
@ -49,28 +49,32 @@ function create_fragment(ctx) {
audio.volume = /*volume*/ ctx[6]; audio.volume = /*volume*/ ctx[6];
} }
if (!isNaN(/*playbackRate*/ ctx[7])) { if (!isNaN(/*muted*/ ctx[7])) {
audio.playbackRate = /*playbackRate*/ ctx[7]; audio.muted = /*muted*/ ctx[7];
}
if (!isNaN(/*playbackRate*/ ctx[8])) {
audio.playbackRate = /*playbackRate*/ ctx[8];
} }
if (remount) run_all(dispose); if (remount) run_all(dispose);
dispose = [ dispose = [
listen(audio, "progress", /*audio_progress_handler*/ ctx[10]), listen(audio, "progress", /*audio_progress_handler*/ ctx[11]),
listen(audio, "loadedmetadata", /*audio_loadedmetadata_handler*/ ctx[11]), listen(audio, "loadedmetadata", /*audio_loadedmetadata_handler*/ ctx[12]),
listen(audio, "timeupdate", audio_timeupdate_handler), listen(audio, "timeupdate", audio_timeupdate_handler),
listen(audio, "durationchange", /*audio_durationchange_handler*/ ctx[13]), listen(audio, "durationchange", /*audio_durationchange_handler*/ ctx[14]),
listen(audio, "play", /*audio_play_pause_handler*/ ctx[14]), listen(audio, "play", /*audio_play_pause_handler*/ ctx[15]),
listen(audio, "pause", /*audio_play_pause_handler*/ ctx[14]), listen(audio, "pause", /*audio_play_pause_handler*/ ctx[15]),
listen(audio, "volumechange", /*audio_volumechange_handler*/ ctx[15]), listen(audio, "volumechange", /*audio_volumechange_handler*/ ctx[16]),
listen(audio, "ratechange", /*audio_ratechange_handler*/ ctx[16]), listen(audio, "ratechange", /*audio_ratechange_handler*/ ctx[17]),
listen(audio, "seeking", /*audio_seeking_seeked_handler*/ ctx[17]), listen(audio, "seeking", /*audio_seeking_seeked_handler*/ ctx[18]),
listen(audio, "seeked", /*audio_seeking_seeked_handler*/ ctx[17]), listen(audio, "seeked", /*audio_seeking_seeked_handler*/ ctx[18]),
listen(audio, "ended", /*audio_ended_handler*/ ctx[18]) listen(audio, "ended", /*audio_ended_handler*/ ctx[19])
]; ];
}, },
p(ctx, [dirty]) { p(ctx, [dirty]) {
if (!audio_updating && dirty & /*currentTime*/ 8 && !isNaN(/*currentTime*/ ctx[3])) { if (!audio_updating && dirty & /*currentTime*/ 9 && !isNaN(/*currentTime*/ ctx[3])) {
audio.currentTime = /*currentTime*/ ctx[3]; audio.currentTime = /*currentTime*/ ctx[3];
} }
@ -84,8 +88,12 @@ function create_fragment(ctx) {
audio.volume = /*volume*/ ctx[6]; audio.volume = /*volume*/ ctx[6];
} }
if (dirty & /*playbackRate*/ 128 && !isNaN(/*playbackRate*/ ctx[7])) { if (dirty & /*muted*/ 128 && !isNaN(/*muted*/ ctx[7])) {
audio.playbackRate = /*playbackRate*/ ctx[7]; audio.muted = /*muted*/ ctx[7];
}
if (dirty & /*playbackRate*/ 256 && !isNaN(/*playbackRate*/ ctx[8])) {
audio.playbackRate = /*playbackRate*/ ctx[8];
} }
}, },
i: noop, i: noop,
@ -105,6 +113,7 @@ function instance($$self, $$props, $$invalidate) {
let { duration } = $$props; let { duration } = $$props;
let { paused } = $$props; let { paused } = $$props;
let { volume } = $$props; let { volume } = $$props;
let { muted } = $$props;
let { playbackRate } = $$props; let { playbackRate } = $$props;
let { seeking } = $$props; let { seeking } = $$props;
let { ended } = $$props; let { ended } = $$props;
@ -127,7 +136,7 @@ function instance($$self, $$props, $$invalidate) {
ended = this.ended; ended = this.ended;
$$invalidate(2, played); $$invalidate(2, played);
$$invalidate(3, currentTime); $$invalidate(3, currentTime);
$$invalidate(9, ended); $$invalidate(10, ended);
} }
function audio_durationchange_handler() { function audio_durationchange_handler() {
@ -142,22 +151,24 @@ function instance($$self, $$props, $$invalidate) {
function audio_volumechange_handler() { function audio_volumechange_handler() {
volume = this.volume; volume = this.volume;
muted = this.muted;
$$invalidate(6, volume); $$invalidate(6, volume);
$$invalidate(7, muted);
} }
function audio_ratechange_handler() { function audio_ratechange_handler() {
playbackRate = this.playbackRate; playbackRate = this.playbackRate;
$$invalidate(7, playbackRate); $$invalidate(8, playbackRate);
} }
function audio_seeking_seeked_handler() { function audio_seeking_seeked_handler() {
seeking = this.seeking; seeking = this.seeking;
$$invalidate(8, seeking); $$invalidate(9, seeking);
} }
function audio_ended_handler() { function audio_ended_handler() {
ended = this.ended; ended = this.ended;
$$invalidate(9, ended); $$invalidate(10, ended);
} }
$$self.$set = $$props => { $$self.$set = $$props => {
@ -168,9 +179,10 @@ function instance($$self, $$props, $$invalidate) {
if ("duration" in $$props) $$invalidate(4, duration = $$props.duration); if ("duration" in $$props) $$invalidate(4, duration = $$props.duration);
if ("paused" in $$props) $$invalidate(5, paused = $$props.paused); if ("paused" in $$props) $$invalidate(5, paused = $$props.paused);
if ("volume" in $$props) $$invalidate(6, volume = $$props.volume); if ("volume" in $$props) $$invalidate(6, volume = $$props.volume);
if ("playbackRate" in $$props) $$invalidate(7, playbackRate = $$props.playbackRate); if ("muted" in $$props) $$invalidate(7, muted = $$props.muted);
if ("seeking" in $$props) $$invalidate(8, seeking = $$props.seeking); if ("playbackRate" in $$props) $$invalidate(8, playbackRate = $$props.playbackRate);
if ("ended" in $$props) $$invalidate(9, ended = $$props.ended); if ("seeking" in $$props) $$invalidate(9, seeking = $$props.seeking);
if ("ended" in $$props) $$invalidate(10, ended = $$props.ended);
}; };
return [ return [
@ -181,6 +193,7 @@ function instance($$self, $$props, $$invalidate) {
duration, duration,
paused, paused,
volume, volume,
muted,
playbackRate, playbackRate,
seeking, seeking,
ended, ended,
@ -208,9 +221,10 @@ class Component extends SvelteComponent {
duration: 4, duration: 4,
paused: 5, paused: 5,
volume: 6, volume: 6,
playbackRate: 7, muted: 7,
seeking: 8, playbackRate: 8,
ended: 9 seeking: 9,
ended: 10
}); });
} }
} }

3
test/js/samples/media-bindings/input.svelte
Unescape View File

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

3
test/runtime/samples/binding-audio-currenttime-duration-volume/_config.js
Unescape View File

@ -8,6 +8,7 @@ export default {
assert.equal(component.t, 0); assert.equal(component.t, 0);
assert.equal(component.d, 0); assert.equal(component.d, 0);
assert.equal(component.v, 0.5); assert.equal(component.v, 0.5);
assert.equal(component.m, true);
assert.equal(component.r, 1); assert.equal(component.r, 1);
assert.equal(component.paused, true); assert.equal(component.paused, true);
@ -20,6 +21,7 @@ export default {
audio.currentTime = 10; audio.currentTime = 10;
audio.duration = 20; audio.duration = 20;
audio.volume = 0.75; audio.volume = 0.75;
audio.muted = false;
audio.playbackRate = 2; audio.playbackRate = 2;
audio.dispatchEvent(timeupdate); audio.dispatchEvent(timeupdate);
audio.dispatchEvent(durationchange); audio.dispatchEvent(durationchange);
@ -30,6 +32,7 @@ export default {
assert.equal(component.t, 10); assert.equal(component.t, 10);
assert.equal(component.d, 0); // not 20, because read-only. Not sure how to test this! assert.equal(component.d, 0); // not 20, because read-only. Not sure how to test this!
assert.equal(component.v, 0.75); assert.equal(component.v, 0.75);
assert.equal(component.m, false);
assert.equal(component.r, 2); assert.equal(component.r, 2);
assert.equal(component.paused, true); // ditto... assert.equal(component.paused, true); // ditto...
} }

3
test/runtime/samples/binding-audio-currenttime-duration-volume/main.svelte
Unescape View File

@ -4,7 +4,8 @@
export let paused; export let paused;
export let v; export let v;
export let r; export let r;
export let m;
</script> </script>
<audio bind:currentTime={t} bind:duration={d} bind:paused bind:volume={v} bind:playbackRate={r} <audio bind:currentTime={t} bind:duration={d} bind:paused bind:volume={v} bind:muted={m} bind:playbackRate={r}
src='music.mp3'></audio> src='music.mp3'></audio>
Write Preview
Loading…
Cancel
Save