<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[213848] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/213848">213848</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2017-03-13 09:39:08 -0700 (Mon, 13 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Volume icon doesn't turn to mute when the knob is set to 0
https://bugs.webkit.org/show_bug.cgi?id=169553
<rdar://problem/30754543>
Patch by Antoine Quint <graouts@apple.com> on 2017-03-13
Reviewed by Eric Carlson.
Source/WebCore:
When we start changing the volume using the mouse, we record the volume at that point
and as we drag the volume slider, we set the mute button to show that the media is
muted if the volume is 0, and set the actual media volume to be the initial volume
prior to dragging. This way, when we toggle the "muted" property by pressing the
mute button, the original volume is restored.
To function correctly, this required some changed to Slider. The volume slider would
fail to update if the value set was the same as the initial value since we would use
only the "change" event to identify the end of a slider drag interaction. This was
incorrect since if the initial value and the final value while dragging the slider
were the same, no "change" event would be fired. So we now use mouse events to
identify when the slider is being dragged.
Test: media/modern-media-controls/volume-support/volume-support-drag-to-mute.html
* Modules/modern-media-controls/controls/slider.js:
(Slider.prototype.set value):
(Slider.prototype.handleEvent):
(Slider.prototype._handleMousedownEvent):
(Slider.prototype._handleInputEvent):
(Slider.prototype._handleMouseupEvent):
(Slider.prototype._handleChangeEvent): Deleted.
* Modules/modern-media-controls/controls/volume-slider.js:
(VolumeSlider):
(VolumeSlider.prototype.draw):
(VolumeSlider.prototype.handleEvent): Deleted.
* Modules/modern-media-controls/media/volume-support.js:
(VolumeSupport.prototype.controlValueWillStartChanging):
(VolumeSupport.prototype.controlValueDidChange):
LayoutTests:
Adding a new test where we drag the volume slider to 0 and ensure that the volume gets muted
and that clicking on the mute button resets the volume to be the same value as prior to the
dragging interaction.
* media/modern-media-controls/volume-support/volume-support-drag-to-mute-expected.txt: Added.
* media/modern-media-controls/volume-support/volume-support-drag-to-mute.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolssliderjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsvolumesliderjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediavolumesupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/volume-support.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsvolumesupportvolumesupportdragtomuteexpectedtxt">trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-to-mute-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsvolumesupportvolumesupportdragtomutehtml">trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-to-mute.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (213847 => 213848)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-03-13 16:29:22 UTC (rev 213847)
+++ trunk/LayoutTests/ChangeLog 2017-03-13 16:39:08 UTC (rev 213848)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2017-03-13 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Volume icon doesn't turn to mute when the knob is set to 0
+ https://bugs.webkit.org/show_bug.cgi?id=169553
+ <rdar://problem/30754543>
+
+ Reviewed by Eric Carlson.
+
+ Adding a new test where we drag the volume slider to 0 and ensure that the volume gets muted
+ and that clicking on the mute button resets the volume to be the same value as prior to the
+ dragging interaction.
+
+ * media/modern-media-controls/volume-support/volume-support-drag-to-mute-expected.txt: Added.
+ * media/modern-media-controls/volume-support/volume-support-drag-to-mute.html: Added.
+
</ins><span class="cx"> 2017-03-13 Manuel Rego Casasnovas <rego@igalia.com>
</span><span class="cx">
</span><span class="cx"> Unprefix -webkit-min-content, -webkit-max-content and -webkit-fit-content
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsvolumesupportvolumesupportdragtomuteexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-to-mute-expected.txt (0 => 213848)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-to-mute-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-to-mute-expected.txt 2017-03-13 16:39:08 UTC (rev 213848)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+Testing that dragging the volume slider to 0 turns the mute button on and that pressing the mute button resets the volume to the previous value.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS media.volume is 1
+PASS mediaController.controls.volumeSlider.value is 1
+PASS media.volume became 0.5
+PASS muteButton.getBoundingClientRect().width became different from 0
+PASS volumeSlider.getBoundingClientRect().width became different from 0
+
+We drag the volume slider to set the volume from 0.5 to 0
+PASS media.muted became true
+
+We click on the mute button which should set the volume back to 0.5
+PASS media.volume became 0.5
+PASS media.muted is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsvolumesupportvolumesupportdragtomutehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-to-mute.html (0 => 213848)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-to-mute.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-to-mute.html 2017-03-13 16:39:08 UTC (rev 213848)
</span><span class="lines">@@ -0,0 +1,87 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<body>
+<style type="text/css" media="screen">
+
+ video, #host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 800px;
+ height: 240px;
+ }
+
+</style>
+<video src="../../content/test.mp4" autoplay controls></video>
+<div id="host"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing that dragging the volume slider to 0 turns the mute button on and that pressing the mute button resets the volume to the previous value.");
+
+const container = document.querySelector("div#host");
+const media = document.querySelector("video");
+const mediaController = createControls(container, media, null);
+
+const muteButton = mediaController.controls.muteButton.element;
+const volumeSlider = mediaController.controls.volumeSlider.children[1].element;
+
+function runTest()
+{
+ media.removeEventListener("play", runTest);
+ media.pause();
+
+ shouldBe("media.volume", "1");
+ shouldBe("mediaController.controls.volumeSlider.value", "1");
+
+ media.volume = 0.5;
+ shouldBecomeEqual("media.volume", "0.5", () => {
+ shouldBecomeDifferent("muteButton.getBoundingClientRect().width", "0", () => {
+ const muteButtonBounds = muteButton.getBoundingClientRect();
+ // Controls are now visible, let's hover over the mute button to make the volume control visible.
+ eventSender.mouseMoveTo(muteButtonBounds.left + muteButtonBounds.width / 2, muteButtonBounds.top + muteButtonBounds.height / 2);
+ shouldBecomeDifferent("volumeSlider.getBoundingClientRect().width", "0", () => {
+ dragVolumeSlider(0.5, 0);
+ shouldBecomeEqual("media.muted", "true", () => {
+ debug("");
+ debug("We click on the mute button which should set the volume back to 0.5");
+ pressOnElement(muteButton);
+ shouldBecomeEqual("media.volume", "0.5", () => {
+ shouldBeFalse("media.muted");
+ debug("");
+ container.remove();
+ media.remove();
+ finishJSTest();
+ });
+ });
+ });
+ });
+ });
+}
+
+media.addEventListener("play", runTest);
+
+function dragVolumeSlider(fromVolume, toVolume)
+{
+ debug("");
+ debug(`We drag the volume slider to set the volume from ${fromVolume} to ${toVolume}`);
+
+ const bounds = volumeSlider.getBoundingClientRect();
+ const centerX = bounds.left + bounds.width / 2;
+ const dragStartY = bounds.top + bounds.height * (1 - fromVolume);
+ const dragEndY = bounds.top + bounds.height * (1 - toVolume);
+ const delta = dragEndY - dragStartY;
+ const iterations = Math.abs(delta);
+
+ eventSender.mouseMoveTo(centerX, dragStartY);
+ eventSender.mouseDown();
+ for (let i = 1; i <= iterations; ++i)
+ eventSender.mouseMoveTo(dragVolumeSlider, dragStartY + i * Math.sign(delta));
+ eventSender.mouseUp();
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (213847 => 213848)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-03-13 16:29:22 UTC (rev 213847)
+++ trunk/Source/WebCore/ChangeLog 2017-03-13 16:39:08 UTC (rev 213848)
</span><span class="lines">@@ -1,3 +1,41 @@
</span><ins>+2017-03-13 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Volume icon doesn't turn to mute when the knob is set to 0
+ https://bugs.webkit.org/show_bug.cgi?id=169553
+ <rdar://problem/30754543>
+
+ Reviewed by Eric Carlson.
+
+ When we start changing the volume using the mouse, we record the volume at that point
+ and as we drag the volume slider, we set the mute button to show that the media is
+ muted if the volume is 0, and set the actual media volume to be the initial volume
+ prior to dragging. This way, when we toggle the "muted" property by pressing the
+ mute button, the original volume is restored.
+
+ To function correctly, this required some changed to Slider. The volume slider would
+ fail to update if the value set was the same as the initial value since we would use
+ only the "change" event to identify the end of a slider drag interaction. This was
+ incorrect since if the initial value and the final value while dragging the slider
+ were the same, no "change" event would be fired. So we now use mouse events to
+ identify when the slider is being dragged.
+
+ Test: media/modern-media-controls/volume-support/volume-support-drag-to-mute.html
+
+ * Modules/modern-media-controls/controls/slider.js:
+ (Slider.prototype.set value):
+ (Slider.prototype.handleEvent):
+ (Slider.prototype._handleMousedownEvent):
+ (Slider.prototype._handleInputEvent):
+ (Slider.prototype._handleMouseupEvent):
+ (Slider.prototype._handleChangeEvent): Deleted.
+ * Modules/modern-media-controls/controls/volume-slider.js:
+ (VolumeSlider):
+ (VolumeSlider.prototype.draw):
+ (VolumeSlider.prototype.handleEvent): Deleted.
+ * Modules/modern-media-controls/media/volume-support.js:
+ (VolumeSupport.prototype.controlValueWillStartChanging):
+ (VolumeSupport.prototype.controlValueDidChange):
+
</ins><span class="cx"> 2017-03-13 Per Arne Vollan <pvollan@apple.com>
</span><span class="cx">
</span><span class="cx"> [Win] Compile error.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolssliderjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js (213847 => 213848)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2017-03-13 16:29:22 UTC (rev 213847)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2017-03-13 16:39:08 UTC (rev 213848)
</span><span class="lines">@@ -36,9 +36,10 @@
</span><span class="cx"> this._canvas = new LayoutNode(`<canvas></canvas>`);
</span><span class="cx">
</span><span class="cx"> this._input = new LayoutNode(`<input type="range" min="0" max="1" step="0.001" />`);
</span><del>- this._input.element.addEventListener("change", this);
</del><ins>+ this._input.element.addEventListener("mousedown", this);
</ins><span class="cx"> this._input.element.addEventListener("input", this);
</span><span class="cx">
</span><ins>+ this.isActive = false;
</ins><span class="cx"> this.value = 0;
</span><span class="cx">
</span><span class="cx"> this.children = [this._canvas, this._input];
</span><span class="lines">@@ -55,7 +56,7 @@
</span><span class="cx">
</span><span class="cx"> set value(value)
</span><span class="cx"> {
</span><del>- if (this._valueIsChanging)
</del><ins>+ if (this.isActive)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this._value = value;
</span><span class="lines">@@ -79,12 +80,15 @@
</span><span class="cx"> handleEvent(event)
</span><span class="cx"> {
</span><span class="cx"> switch (event.type) {
</span><ins>+ case "mousedown":
+ this._handleMousedownEvent();
+ break;
+ case "mouseup":
+ this._handleMouseupEvent();
+ break;
</ins><span class="cx"> case "input":
</span><span class="cx"> this._handleInputEvent();
</span><span class="cx"> break;
</span><del>- case "change":
- this._handleChangeEvent();
- break;
</del><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -118,11 +122,20 @@
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><ins>+ _handleMousedownEvent()
+ {
+ const mediaControls = this.parentOfType(MediaControls);
+ this._mouseupTarget = (!mediaControls || mediaControls instanceof MacOSInlineMediaControls) ? window : mediaControls.element;
+ this._mouseupTarget.addEventListener("mouseup", this, true);
+
+ if (this.uiDelegate && typeof this.uiDelegate.controlValueWillStartChanging === "function")
+ this.uiDelegate.controlValueWillStartChanging(this);
+ this.isActive = true;
+ this.needsLayout = true;
+ }
+
</ins><span class="cx"> _handleInputEvent()
</span><span class="cx"> {
</span><del>- if (!this._valueIsChanging && this.uiDelegate && typeof this.uiDelegate.controlValueWillStartChanging === "function")
- this.uiDelegate.controlValueWillStartChanging(this);
- this._valueIsChanging = true;
</del><span class="cx"> if (this.uiDelegate && typeof this.uiDelegate.controlValueDidChange === "function")
</span><span class="cx"> this.uiDelegate.controlValueDidChange(this);
</span><span class="cx">
</span><span class="lines">@@ -129,9 +142,12 @@
</span><span class="cx"> this.needsLayout = true;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _handleChangeEvent()
</del><ins>+ _handleMouseupEvent()
</ins><span class="cx"> {
</span><del>- delete this._valueIsChanging;
</del><ins>+ this._mouseupTarget.removeEventListener("mouseup", this, true);
+ delete this._mouseupTarget;
+
+ this.isActive = false;
</ins><span class="cx"> if (this.uiDelegate && typeof this.uiDelegate.controlValueDidStopChanging === "function")
</span><span class="cx"> this.uiDelegate.controlValueDidStopChanging(this);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsvolumesliderjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js (213847 => 213848)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js 2017-03-13 16:29:22 UTC (rev 213847)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js 2017-03-13 16:39:08 UTC (rev 213848)
</span><span class="lines">@@ -35,26 +35,10 @@
</span><span class="cx">
</span><span class="cx"> this.height = 11;
</span><span class="cx"> this.enabled = true;
</span><del>-
- this._active = false;
- this.element.addEventListener("mousedown", this);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><del>- handleEvent(event)
- {
- super.handleEvent(event);
-
- if (event instanceof MouseEvent) {
- this._active = event.type === "mousedown";
- if (event.type === "mousedown")
- window.addEventListener("mouseup", this, true);
- else
- window.removeEventListener("mouseup", this, true);
- }
- }
-
</del><span class="cx"> draw(ctx)
</span><span class="cx"> {
</span><span class="cx"> const width = this.width;
</span><span class="lines">@@ -110,7 +94,7 @@
</span><span class="cx"> addRoundedRect(ctx, knobX + 1, 0, knobDiameter, knobDiameter, knobRadius);
</span><span class="cx"> ctx.closePath();
</span><span class="cx"> ctx.clip();
</span><del>- ctx.fillStyle = this._active ? "white" : "rgb(138, 138, 138)";
</del><ins>+ ctx.fillStyle = this.isActive ? "white" : "rgb(138, 138, 138)";
</ins><span class="cx"> ctx.fillRect(0, 0, width, height);
</span><span class="cx"> ctx.restore();
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediavolumesupportjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/volume-support.js (213847 => 213848)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/volume-support.js 2017-03-13 16:29:22 UTC (rev 213847)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/volume-support.js 2017-03-13 16:39:08 UTC (rev 213848)
</span><span class="lines">@@ -40,12 +40,14 @@
</span><span class="cx">
</span><span class="cx"> controlValueWillStartChanging(control)
</span><span class="cx"> {
</span><ins>+ this._volumeBeforeChange = this.mediaController.media.volume;
</ins><span class="cx"> this.mediaController.media.muted = false;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> controlValueDidChange(control)
</span><span class="cx"> {
</span><del>- this.mediaController.media.volume = control.value;
</del><ins>+ this.mediaController.media.volume = (control.value === 0 && this._volumeBeforeChange > 0) ? this._volumeBeforeChange : control.value;
+ this.mediaController.media.muted = control.value === 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> syncControl()
</span></span></pre>
</div>
</div>
</body>
</html>