<!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>[212564] 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/212564">212564</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2017-02-17 12:37:00 -0800 (Fri, 17 Feb 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Improve handling of live broadcast video
https://bugs.webkit.org/show_bug.cgi?id=168506
<rdar://problem/30432094>
Patch by Antoine Quint <graouts@apple.com> on 2017-02-17
Reviewed by Dean Jackson.
Source/WebCore:
We improve the handling of live broadcast video by:
- checking that we have a media source before deciding to show the controls
bar and start button
- support a mode where neither the status text nor the scrubber is visible
in case we're still waiting on sufficient data to determine the video
time and we haven't really started loading data yet
- not showing time labels when we have an infinite duration
- ensuring the status label is left-aligned
Test: media/modern-media-controls/status-label/status-label-text-align.html
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.layout):
* Modules/modern-media-controls/controls/status-label.css:
(.status-label):
* Modules/modern-media-controls/controls/status-label.js:
(StatusLabel.prototype.get enabled):
(StatusLabel.prototype.set enabled):
* Modules/modern-media-controls/media/controls-visibility-support.js:
(ControlsVisibilitySupport.prototype._updateControls):
(ControlsVisibilitySupport):
* Modules/modern-media-controls/media/status-support.js:
(StatusSupport.prototype.syncControl):
(StatusSupport):
* Modules/modern-media-controls/media/time-labels-support.js:
(TimeLabelsSupport.prototype.syncControl):
(TimeLabelsSupport):
LayoutTests:
Rebase existing tests to match new, correct behavior and add a new test to explicitly
check the text-align property on the status label.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt:
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html:
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background-expected.txt:
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label.html:
* media/modern-media-controls/status-label/status-label-font.html:
* media/modern-media-controls/status-label/status-label-text-align-expected.txt: Added.
* media/modern-media-controls/status-label/status-label-text-align.html: Added.
* media/modern-media-controls/status-label/status-label-text-selection.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonaudioexpectedtxt">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonaudiohtml">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsaudiobackgroundexpectedtxt">trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsaudiobackgroundhtml">trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsstatuslabelexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsstatuslabelhtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsstatuslabelstatuslabelfonthtml">trunk/LayoutTests/media/modern-media-controls/status-label/status-label-font.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsstatuslabelstatuslabeltextselectionhtml">trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-selection.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsstatuslabelcss">trunk/Source/WebCore/Modules/modern-media-controls/controls/status-label.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsstatuslabeljs">trunk/Source/WebCore/Modules/modern-media-controls/controls/status-label.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediacontrolsvisibilitysupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediastatussupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/status-support.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediatimelabelssupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsstatuslabelstatuslabeltextalignexpectedtxt">trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-align-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsstatuslabelstatuslabeltextalignhtml">trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-align.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/LayoutTests/ChangeLog 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2017-02-17 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Improve handling of live broadcast video
+ https://bugs.webkit.org/show_bug.cgi?id=168506
+ <rdar://problem/30432094>
+
+ Reviewed by Dean Jackson.
+
+ Rebase existing tests to match new, correct behavior and add a new test to explicitly
+ check the text-align property on the status label.
+
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt:
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html:
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background-expected.txt:
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label-expected.txt:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label.html:
+ * media/modern-media-controls/status-label/status-label-font.html:
+ * media/modern-media-controls/status-label/status-label-text-align-expected.txt: Added.
+ * media/modern-media-controls/status-label/status-label-text-align.html: Added.
+ * media/modern-media-controls/status-label/status-label-text-selection.html:
+
</ins><span class="cx"> 2017-02-17 Per Arne Vollan <pvollan@apple.com>
</span><span class="cx">
</span><span class="cx"> Apply SVG styles paint-order, stroke-linejoin, and stroke-linecap on DOM text.
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonaudioexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -3,9 +3,9 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-Media has not begun loading yet
-PASS mediaController.controls.controlsBar.visible is true
-PASS mediaController.controls.startButton.visible is true
</del><ins>+Media has not begun loading yet, no UI is showing yet as we wait for enough information to tell if we'll be able to play
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
</ins><span class="cx">
</span><span class="cx"> Media has loaded metadata
</span><span class="cx"> PASS mediaController.controls.controlsBar.visible is true
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonaudiohtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -13,9 +13,9 @@
</span><span class="cx"> const media = document.querySelector("audio");
</span><span class="cx"> const mediaController = createControls(shadowRoot, media, null);
</span><span class="cx">
</span><del>-debug("Media has not begun loading yet");
-shouldBeTrue("mediaController.controls.controlsBar.visible");
-shouldBeTrue("mediaController.controls.startButton.visible");
</del><ins>+debug("Media has not begun loading yet, no UI is showing yet as we wait for enough information to tell if we'll be able to play");
+shouldBeFalse("mediaController.controls.controlsBar.visible");
+shouldBeFalse("mediaController.controls.startButton.visible");
</ins><span class="cx">
</span><span class="cx"> media.addEventListener("loadedmetadata", function() {
</span><span class="cx"> debug("");
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsaudiobackgroundexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background-expected.txt (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background-expected.txt 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background-expected.txt 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -5,7 +5,7 @@
</span><span class="cx">
</span><span class="cx"> PASS mediaControls.querySelector('.controls-bar') instanceof HTMLDivElement became true
</span><span class="cx"> PASS getComputedStyle(mediaControls.querySelector('.controls-bar'), ':before').webkitAppearance is "none"
</span><del>-PASS getComputedStyle(mediaControls.querySelector('.controls-bar'), ':before').backgroundColor is "rgb(212, 212, 212)"
</del><ins>+PASS getComputedStyle(mediaControls.querySelector('.controls-bar'), ':before').backgroundColor became "rgb(212, 212, 212)"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsaudiobackgroundhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -12,8 +12,7 @@
</span><span class="cx">
</span><span class="cx"> shouldBecomeEqual("mediaControls.querySelector('.controls-bar') instanceof HTMLDivElement", "true", () => {
</span><span class="cx"> shouldBeEqualToString("getComputedStyle(mediaControls.querySelector('.controls-bar'), ':before').webkitAppearance", "none");
</span><del>- shouldBeEqualToString("getComputedStyle(mediaControls.querySelector('.controls-bar'), ':before').backgroundColor", "rgb(212, 212, 212)");
- finishJSTest();
</del><ins>+ shouldBecomeEqualToString("getComputedStyle(mediaControls.querySelector('.controls-bar'), ':before').backgroundColor", "rgb(212, 212, 212)", finishJSTest);
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsstatuslabelexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label-expected.txt (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label-expected.txt 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label-expected.txt 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -7,7 +7,7 @@
</span><span class="cx"> PASS mediaControls.controlsBar.children.includes(mediaControls.statusLabel) is false
</span><span class="cx"> PASS mediaControls.controlsBar.children.includes(mediaControls.timeControl) is true
</span><span class="cx">
</span><del>-After setting statusLabel
</del><ins>+After setting statusLabel.enabled = true
</ins><span class="cx"> PASS mediaControls.controlsBar.children.includes(mediaControls.statusLabel) is true
</span><span class="cx"> PASS mediaControls.controlsBar.children.includes(mediaControls.timeControl) is false
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsstatuslabelhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label.html (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label.html 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-status-label.html 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -20,15 +20,16 @@
</span><span class="cx"> debug("Default state");
</span><span class="cx"> shouldBeFalse("mediaControls.controlsBar.children.includes(mediaControls.statusLabel)");
</span><span class="cx"> shouldBeTrue("mediaControls.controlsBar.children.includes(mediaControls.timeControl)");
</span><del>- mediaControls.statusLabel.text = "Hello World!";
</del><ins>+ mediaControls.statusLabel.enabled = true;
</ins><span class="cx"> } else if (numberOfFrames == 2) {
</span><span class="cx"> debug("");
</span><del>- debug("After setting statusLabel");
</del><ins>+ debug("After setting statusLabel.enabled = true");
</ins><span class="cx"> shouldBeTrue("mediaControls.controlsBar.children.includes(mediaControls.statusLabel)");
</span><span class="cx"> shouldBeFalse("mediaControls.controlsBar.children.includes(mediaControls.timeControl)");
</span><span class="cx"> debug("");
</span><span class="cx"> finishMediaControlsTest();
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsstatuslabelstatuslabelfonthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/status-label/status-label-font.html (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/status-label/status-label-font.html 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/LayoutTests/media/modern-media-controls/status-label/status-label-font.html 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -10,6 +10,7 @@
</span><span class="cx">
</span><span class="cx"> const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 300 });
</span><span class="cx"> mediaControls.showsStartButton = false;
</span><ins>+mediaControls.statusLabel.enabled = true;
</ins><span class="cx"> mediaControls.statusLabel.text = "Hello";
</span><span class="cx"> document.body.appendChild(mediaControls.element);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsstatuslabelstatuslabeltextalignexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-align-expected.txt (0 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-align-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-align-expected.txt 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -0,0 +1,11 @@
</span><ins>+Testing the StatusLabel text-align is correctly set when hosted in media controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.getComputedStyle(mediaControls.statusLabel.element).textAlign is "left"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsstatuslabelstatuslabeltextalignhtmlfromrev212563trunkLayoutTestsmediamodernmediacontrolsstatuslabelstatuslabelfonthtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-align.html (from rev 212563, trunk/LayoutTests/media/modern-media-controls/status-label/status-label-font.html) (0 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-align.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-align.html 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -0,0 +1,27 @@
</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>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>StatusLabel</code> text-align is correctly set when hosted in media controls.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 300 });
+mediaControls.showsStartButton = false;
+mediaControls.statusLabel.enabled = true;
+mediaControls.statusLabel.text = "Hello";
+document.body.appendChild(mediaControls.element);
+
+scheduler.frameDidFire = function()
+{
+ shouldBeEqualToString("window.getComputedStyle(mediaControls.statusLabel.element).textAlign", "left");
+ mediaControls.element.remove();
+ debug("");
+ finishMediaControlsTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsstatuslabelstatuslabeltextselectionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-selection.html (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-selection.html 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/LayoutTests/media/modern-media-controls/status-label/status-label-text-selection.html 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -10,6 +10,7 @@
</span><span class="cx">
</span><span class="cx"> const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 300 });
</span><span class="cx"> mediaControls.showsStartButton = false;
</span><ins>+mediaControls.statusLabel.enabled = true;
</ins><span class="cx"> mediaControls.statusLabel.text = "Hello";
</span><span class="cx"> document.body.appendChild(mediaControls.element);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/Source/WebCore/ChangeLog 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -1,3 +1,40 @@
</span><ins>+2017-02-17 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Improve handling of live broadcast video
+ https://bugs.webkit.org/show_bug.cgi?id=168506
+ <rdar://problem/30432094>
+
+ Reviewed by Dean Jackson.
+
+ We improve the handling of live broadcast video by:
+
+ - checking that we have a media source before deciding to show the controls
+ bar and start button
+ - support a mode where neither the status text nor the scrubber is visible
+ in case we're still waiting on sufficient data to determine the video
+ time and we haven't really started loading data yet
+ - not showing time labels when we have an infinite duration
+ - ensuring the status label is left-aligned
+
+ Test: media/modern-media-controls/status-label/status-label-text-align.html
+
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+ (MacOSInlineMediaControls.prototype.layout):
+ * Modules/modern-media-controls/controls/status-label.css:
+ (.status-label):
+ * Modules/modern-media-controls/controls/status-label.js:
+ (StatusLabel.prototype.get enabled):
+ (StatusLabel.prototype.set enabled):
+ * Modules/modern-media-controls/media/controls-visibility-support.js:
+ (ControlsVisibilitySupport.prototype._updateControls):
+ (ControlsVisibilitySupport):
+ * Modules/modern-media-controls/media/status-support.js:
+ (StatusSupport.prototype.syncControl):
+ (StatusSupport):
+ * Modules/modern-media-controls/media/time-labels-support.js:
+ (TimeLabelsSupport.prototype.syncControl):
+ (TimeLabelsSupport):
+
</ins><span class="cx"> 2017-02-17 Anders Carlsson <andersca@apple.com>
</span><span class="cx">
</span><span class="cx"> Begin overhauling the pasteboard implementation
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -87,7 +87,7 @@
</span><span class="cx"> this.leftContainer.layout();
</span><span class="cx"> this.rightContainer.layout();
</span><span class="cx">
</span><del>- const middleContainer = !!this.statusLabel.text ? this.statusLabel : this.timeControl;
</del><ins>+ const middleContainer = this.statusLabel.enabled ? this.statusLabel : this.timeControl;
</ins><span class="cx"> this.controlsBar.children = [this._backgroundTint, this.leftContainer, middleContainer, this.rightContainer, this._volumeSliderContainer];
</span><span class="cx">
</span><span class="cx"> if (middleContainer === this.timeControl)
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsstatuslabelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/status-label.css (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/status-label.css 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/status-label.css 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -26,6 +26,7 @@
</span><span class="cx"> .status-label {
</span><span class="cx"> position: absolute;
</span><span class="cx">
</span><ins>+ text-align: left;
</ins><span class="cx"> text-overflow: ellipsis;
</span><span class="cx"> white-space: nowrap;
</span><span class="cx"> overflow: hidden;
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsstatuslabeljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/status-label.js (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/status-label.js 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/status-label.js 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -34,6 +34,7 @@
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> this._text = "";
</span><ins>+ this._enabled = false;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -55,6 +56,22 @@
</span><span class="cx"> this.layoutDelegate.needsLayout = true;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get enabled()
+ {
+ return this._enabled;
+ }
+
+ set enabled(enabled)
+ {
+ if (enabled === this._enabled)
+ return;
+
+ this._enabled = enabled;
+
+ if (this.layoutDelegate)
+ this.layoutDelegate.needsLayout = true;
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> commitProperty(propertyName)
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediacontrolsvisibilitysupportjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -59,7 +59,7 @@
</span><span class="cx"> {
</span><span class="cx"> const media = this.mediaController.media;
</span><span class="cx"> const isVideo = media instanceof HTMLVideoElement;
</span><del>- let shouldShowControls = this.mediaController.media.controls;
</del><ins>+ let shouldShowControls = this.mediaController.media.controls && !!media.currentSrc;
</ins><span class="cx"> if (isVideo)
</span><span class="cx"> shouldShowControls = shouldShowControls && media.readyState > HTMLMediaElement.HAVE_NOTHING;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediastatussupportjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/status-support.js (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/status-support.js 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/status-support.js 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -41,15 +41,19 @@
</span><span class="cx"> syncControl()
</span><span class="cx"> {
</span><span class="cx"> const media = this.mediaController.media;
</span><ins>+ const isLiveBroadcast = media.duration === Number.POSITIVE_INFINITY;
+ const isPlayable = media.readyState > HTMLMediaElement.HAVE_METADATA && !media.error;
</ins><span class="cx">
</span><span class="cx"> if (!!media.error)
</span><span class="cx"> this.control.text = UIString("Error");
</span><del>- else if (media.duration === Number.POSITIVE_INFINITY && media.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA)
</del><ins>+ else if (isLiveBroadcast && media.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA)
</ins><span class="cx"> this.control.text = UIString("Live Broadcast");
</span><del>- else if (media.readyState <= HTMLMediaElement.HAVE_NOTHING && media.networkState === HTMLMediaElement.NETWORK_LOADING)
</del><ins>+ else if (!isPlayable && media.networkState === HTMLMediaElement.NETWORK_LOADING)
</ins><span class="cx"> this.control.text = UIString("Loading");
</span><span class="cx"> else
</span><span class="cx"> this.control.text = "";
</span><ins>+
+ this.control.enabled = isLiveBroadcast || !isPlayable;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediatimelabelssupportjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js (212563 => 212564)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js 2017-02-17 20:02:03 UTC (rev 212563)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js 2017-02-17 20:37:00 UTC (rev 212564)
</span><span class="lines">@@ -41,12 +41,11 @@
</span><span class="cx"> syncControl()
</span><span class="cx"> {
</span><span class="cx"> const media = this.mediaController.media;
</span><del>- if (isNaN(media.duration))
- return;
</del><ins>+ const shouldShowZeroDurations = isNaN(media.duration) || media.duration === Number.POSITIVE_INFINITY;
</ins><span class="cx">
</span><del>- this.control.elapsedTimeLabel.value = media.currentTime;
- this.control.remainingTimeLabel.value = media.currentTime - media.duration;
- this.control.labelsMayDisplayTimesOverAnHour = media.duration >= (60 * 60);
</del><ins>+ this.control.elapsedTimeLabel.value = shouldShowZeroDurations ? 0 : media.currentTime;
+ this.control.remainingTimeLabel.value = shouldShowZeroDurations ? 0 : (media.currentTime - media.duration);
+ this.control.labelsMayDisplayTimesOverAnHour = !shouldShowZeroDurations && media.duration >= (60 * 60);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>