added the muted attribute to audio and video tags

Author: fend25

package-lock.json

@@ -582,6 +582,7 @@ export default class Element extends Node {
 				name === 'seekable' ||
 				name === 'played' ||
 				name === 'volume' ||
+				name === 'muted' ||
 				name === 'playbackRate'
 			) {
 				if (this.name !== 'audio' && this.name !== 'video') {
@@ -610,7 +611,7 @@ export default class Element extends Node {
 			} else if (
 				name === 'text' ||
 				name === 'html'
-			){
+			) {
 				const contenteditable = this.attributes.find(
 					(attribute: Attribute) => attribute.name === 'contenteditable'
 				);
@@ -626,7 +627,7 @@ export default class Element extends Node {
 						message: `'contenteditable' attribute cannot be dynamic if element uses two-way binding`
 					});
 				}
-		} else if (name !== 'this') {
+			} else if (name !== 'this') {
 				component.error(binding, {
 					code: `invalid-binding`,
 					message: `'${binding.name}' is not a valid binding`

src/compiler/compile/nodes/Element.ts

@@ -138,6 +138,10 @@ export default class BindingWrapper {
 			case 'volume':
 				update_conditions.push(`!isNaN(${this.snippet})`);
 				break;
+				
+			case 'muted':
+				update_dom = `${parent.var}.${this.node.name} = !!${this.snippet};`;
+				break;
 
 			case 'paused':
 			{

src/compiler/compile/render-dom/wrappers/Element/Binding.ts

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

src/compiler/compile/render-dom/wrappers/Element/index.ts

@@ -151,12 +151,12 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		if (name === 'group') {
 			// TODO server-render group bindings
 		} else if (contenteditable && (name === 'text' || name === 'html')) {
-			const snippet = snip(expression)
+			const snippet = snip(expression);
 			if (name == 'text') {
-				node_contents = '${@escape(' + snippet + ')}'
+				node_contents = '${@escape(' + snippet + ')}';
 			} else {
 				// Do not escape HTML content
-				node_contents = '${' + snippet + '}'
+				node_contents = '${' + snippet + '}';
 			}
 		} else if (binding.name === 'value' && node.name === 'textarea') {
 			const snippet = snip(expression);

src/compiler/compile/render-ssr/handlers/Element.ts

@@ -87,7 +87,7 @@ export function once(fn) {
 		if (ran) return;
 		ran = true;
 		fn.call(this, ...args);
-	}
+	};
 }
 
 const is_client = typeof window !== 'undefined';

src/runtime/internal/utils.ts

@@ -49,13 +49,16 @@ function create_fragment(ctx) {
 
 			audio.volume = ctx.volume;
 
+			audio.muted = !!ctx.muted;
+
 			audio.playbackRate = ctx.playbackRate;
 		},
 
 		p(changed, ctx) {
 			if (!audio_updating && changed.currentTime && !isNaN(ctx.currentTime)) audio.currentTime = ctx.currentTime;
 			if (changed.paused && audio_is_paused !== (audio_is_paused = ctx.paused)) audio[audio_is_paused ? "pause" : "play"]();
 			if (changed.volume && !isNaN(ctx.volume)) audio.volume = ctx.volume;
+			if (changed.muted) audio.muted = !!ctx.muted;
 			if (changed.playbackRate && !isNaN(ctx.playbackRate)) audio.playbackRate = ctx.playbackRate;
 			audio_updating = false;
 		},
@@ -74,7 +77,7 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
-	let { buffered, seekable, played, currentTime, duration, paused, volume, playbackRate } = $$props;
+	let { buffered, seekable, played, currentTime, duration, paused, volume, muted, playbackRate } = $$props;
 
 	function audio_timeupdate_handler() {
 		played = time_ranges_to_array(this.played);
@@ -107,7 +110,9 @@ function instance($$self, $$props, $$invalidate) {
 
 	function audio_volumechange_handler() {
 		volume = this.volume;
+		muted = this.muted;
 		$$invalidate('volume', volume);
+		$$invalidate('muted', muted);
 	}
 
 	function audio_ratechange_handler() {
@@ -123,6 +128,7 @@ function instance($$self, $$props, $$invalidate) {
 		if ('duration' in $$props) $$invalidate('duration', duration = $$props.duration);
 		if ('paused' in $$props) $$invalidate('paused', paused = $$props.paused);
 		if ('volume' in $$props) $$invalidate('volume', volume = $$props.volume);
+		if ('muted' in $$props) $$invalidate('muted', muted = $$props.muted);
 		if ('playbackRate' in $$props) $$invalidate('playbackRate', playbackRate = $$props.playbackRate);
 	};
 
@@ -134,6 +140,7 @@ function instance($$self, $$props, $$invalidate) {
 		duration,
 		paused,
 		volume,
+		muted,
 		playbackRate,
 		audio_timeupdate_handler,
 		audio_durationchange_handler,
@@ -148,8 +155,8 @@ function instance($$self, $$props, $$invalidate) {
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, ["buffered", "seekable", "played", "currentTime", "duration", "paused", "volume", "playbackRate"]);
+		init(this, options, instance, create_fragment, safe_not_equal, ["buffered", "seekable", "played", "currentTime", "duration", "paused", "volume", "muted", "playbackRate"]);
 	}
 }
 
-export default Component;
+export default Component;

test/js/samples/media-bindings/expected.js

@@ -6,7 +6,8 @@
 	export let duration;
 	export let paused;
 	export let volume;
+	export let muted;
 	export let playbackRate;
 </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:muted bind:playbackRate/>

test/js/samples/media-bindings/input.svelte

@@ -19,14 +19,14 @@ export default {
 
 		el.innerHTML = 'every<span>body</span>';
 
-        // No updates to data yet
+		// No updates to data yet
 		assert.htmlEqual(target.innerHTML, `
 			<editor>every<span>body</span></editor>
 			<p>hello <b>world</b></p>
 		`);
 
-        // Handle user input
-        const event = new window.Event('input');
+		// Handle user input
+		const event = new window.Event('input');
 		await el.dispatchEvent(event);
 		assert.htmlEqual(target.innerHTML, `
 			<editor>every<span>body</span></editor>