<!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>[211807] 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/211807">211807</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2017-02-07 06:30:29 -0800 (Tue, 07 Feb 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Handle media durations of an hour or more gracefully
https://bugs.webkit.org/show_bug.cgi?id=167882
<rdar://problem/29601260>
Patch by Antoine Quint <graouts@apple.com> on 2017-02-07
Reviewed by Eric Carlson.
Source/WebCore:
We add a new "labelsMayDisplayTimesOverAnHour" to TimeControl so that time labels
to the left and right of the scrubber may have extra room to display to account for
the extra "xx:" characters that may appear. We don't lay the time out dynamically
such that we don't see layout jumps as the times shown in the labels go around
the hour mark.
We also refactor the ElapsedTimeSupport and RemainingTimeSupport in a single
TimeLabelsSupport class which updates both elapsed and remaining time labels
and sets the "labelsMayDisplayTimesOverAnHour" on the TimeControl should a
"durationchange" happen to make the media duration reach or go past the hour mark.
Tests: http/tests/media/modern-media-controls/time-labels-support/long-time.html
media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html
media/modern-media-controls/time-labels-support/elapsed-time.html
media/modern-media-controls/time-labels-support/remaining-time.html
* Modules/modern-media-controls/controls/time-control.js:
(TimeControl.prototype.get labelsMayDisplayTimesOverAnHour):
(TimeControl.prototype.set labelsMayDisplayTimesOverAnHour):
(TimeControl.prototype.set width):
* Modules/modern-media-controls/controls/time-label.css:
(.time-label):
* Modules/modern-media-controls/js-files:
* Modules/modern-media-controls/media/elapsed-time-support.js: Removed.
* Modules/modern-media-controls/media/media-controller.js:
(MediaController.prototype._updateControlsIfNeeded):
* Modules/modern-media-controls/media/time-labels-support.js: Renamed from Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js.
(TimeLabelsSupport.prototype.get control):
(TimeLabelsSupport.prototype.syncControl):
(TimeLabelsSupport):
* WebCore.xcodeproj/project.pbxproj:
LayoutTests:
Add new tests to check that we correctly handle times at or past the hour mark.
* http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt: Added.
* http/tests/media/modern-media-controls/time-labels-support/long-time.html: Added.
* media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt: Added.
* media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html: Added.
* media/modern-media-controls/time-labels-support/elapsed-time-expected.txt: Renamed from LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support-expected.txt.
* media/modern-media-controls/time-labels-support/elapsed-time.html: Renamed from LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support.html.
* media/modern-media-controls/time-labels-support/remaining-time-expected.txt: Renamed from LayoutTests/media/modern-media-controls/remaining-time-support/remaining-time-support-expected.txt.
* media/modern-media-controls/time-labels-support/remaining-time.html: Renamed from LayoutTests/media/modern-media-controls/remaining-time-support/remaining-time-support.html.</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="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstimecontroljs">trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstimelabelcss">trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsjsfiles">trunk/Source/WebCore/Modules/modern-media-controls/js-files</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
<li><a href="#trunkSourceWebCoreWebCorexcodeprojprojectpbxproj">trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/</li>
<li><a href="#trunkLayoutTestshttptestsmediamodernmediacontrolstimelabelssupportlongtimeexpectedtxt">trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt</a></li>
<li><a href="#trunkLayoutTestshttptestsmediamodernmediacontrolstimelabelssupportlongtimehtml">trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimecontroltimecontrollabelsmaydisplaytimesoveranhourexpectedtxt">trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimecontroltimecontrollabelsmaydisplaytimesoveranhourhtml">trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/time-labels-support/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimelabelssupportelapsedtimeexpectedtxt">trunk/LayoutTests/media/modern-media-controls/time-labels-support/elapsed-time-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimelabelssupportelapsedtimehtml">trunk/LayoutTests/media/modern-media-controls/time-labels-support/elapsed-time.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimelabelssupportremainingtimeexpectedtxt">trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimelabelssupportremainingtimehtml">trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediatimelabelssupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li>trunk/LayoutTests/media/modern-media-controls/elapsed-time-support/</li>
<li>trunk/LayoutTests/media/modern-media-controls/remaining-time-support/</li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediaelapsedtimesupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/elapsed-time-support.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediaremainingtimesupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (211806 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-02-07 14:07:48 UTC (rev 211806)
+++ trunk/LayoutTests/ChangeLog 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -1,5 +1,24 @@
</span><span class="cx"> 2017-02-07 Antoine Quint <graouts@apple.com>
</span><span class="cx">
</span><ins>+ [Modern Media Controls] Handle media durations of an hour or more gracefully
+ https://bugs.webkit.org/show_bug.cgi?id=167882
+ <rdar://problem/29601260>
+
+ Reviewed by Eric Carlson.
+
+ Add new tests to check that we correctly handle times at or past the hour mark.
+
+ * http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt: Added.
+ * http/tests/media/modern-media-controls/time-labels-support/long-time.html: Added.
+ * media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt: Added.
+ * media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html: Added.
+ * media/modern-media-controls/time-labels-support/elapsed-time-expected.txt: Renamed from LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support-expected.txt.
+ * media/modern-media-controls/time-labels-support/elapsed-time.html: Renamed from LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support.html.
+ * media/modern-media-controls/time-labels-support/remaining-time-expected.txt: Renamed from LayoutTests/media/modern-media-controls/remaining-time-support/remaining-time-support-expected.txt.
+ * media/modern-media-controls/time-labels-support/remaining-time.html: Renamed from LayoutTests/media/modern-media-controls/remaining-time-support/remaining-time-support.html.
+
+2017-02-07 Antoine Quint <graouts@apple.com>
+
</ins><span class="cx"> LayoutTet media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html is flaky
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=167275
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestshttptestsmediamodernmediacontrolstimelabelssupportlongtimeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt (0 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt (rev 0)
+++ trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -0,0 +1,11 @@
</span><ins>+Testing the display of time labels with a video that lasts an hour or more.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaController.controls.timeControl.labelsMayDisplayTimesOverAnHour is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestshttptestsmediamodernmediacontrolstimelabelssupportlongtimehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time.html (0 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time.html (rev 0)
+++ trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time.html 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -0,0 +1,26 @@
</span><ins>+<script src="../../../../../resources/js-test-pre.js"></script>
+<script src="/media-resources/modern-media-controls/resources/media-controls-loader.js"></script>
+<body>
+<video src="../../resources/hls/generate-vod.php?duration=8000" style="width: 320px; height: 240px;"></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the display of time labels with a video that lasts an hour or more.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+media.addEventListener("durationchange", function() {
+ shouldBeTrue("mediaController.controls.timeControl.labelsMayDisplayTimesOverAnHour");
+ debug("");
+ shadowRoot.host.remove();
+ media.remove();
+ finishJSTest();
+});
+
+</script>
+<script src="../../../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimecontroltimecontrollabelsmaydisplaytimesoveranhourexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt (0 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -0,0 +1,20 @@
</span><ins>+Testing the TimeControl class property labelsMayDisplayTimesOverAnHour.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Testing default value
+PASS timeControl.labelsMayDisplayTimesOverAnHour is false
+
+Setting timeControl.labelsMayDisplayTimesOverAnHour = true
+PASS timeControl.labelsMayDisplayTimesOverAnHour is true
+
+PASS timeControl.elapsedTimeLabel.x is -2
+PASS timeControl.scrubber.x is 65
+PASS timeControl.scrubber.width is 362
+PASS timeControl.remainingTimeLabel.x is 432
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimecontroltimecontrollabelsmaydisplaytimesoveranhourhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html (0 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -0,0 +1,30 @@
</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">
+
+description("Testing the <code>TimeControl</code> class property labelsMayDisplayTimesOverAnHour.");
+
+const timeControl = new TimeControl;
+
+debug("Testing default value");
+shouldBeFalse("timeControl.labelsMayDisplayTimesOverAnHour");
+
+debug("");
+debug("Setting timeControl.labelsMayDisplayTimesOverAnHour = true");
+timeControl.labelsMayDisplayTimesOverAnHour = true;
+shouldBeTrue("timeControl.labelsMayDisplayTimesOverAnHour");
+
+timeControl.width = 500;
+debug("");
+shouldBe("timeControl.elapsedTimeLabel.x", "-2");
+shouldBe("timeControl.scrubber.x", "65");
+shouldBe("timeControl.scrubber.width", "362");
+shouldBe("timeControl.remainingTimeLabel.x", "432");
+
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimelabelssupportelapsedtimeexpectedtxtfromrev211806trunkLayoutTestsmediamodernmediacontrolselapsedtimesupportelapsedtimesupportexpectedtxt"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/media/modern-media-controls/time-labels-support/elapsed-time-expected.txt (from rev 211806, trunk/LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support-expected.txt) (0 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-labels-support/elapsed-time-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-labels-support/elapsed-time-expected.txt 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Testing the ElapsedTimeSupport behavior.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+timeupdate event was dispatched
+PASS mediaController.controls.timeControl.elapsedTimeLabel.value is media.currentTime
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimelabelssupportelapsedtimehtmlfromrev211806trunkLayoutTestsmediamodernmediacontrolselapsedtimesupportelapsedtimesupporthtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/media/modern-media-controls/time-labels-support/elapsed-time.html (from rev 211806, trunk/LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support.html) (0 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-labels-support/elapsed-time.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-labels-support/elapsed-time.html 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -0,0 +1,30 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ElapsedTimeSupport</code> behavior.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+media.addEventListener("timeupdate", function() {
+ debug("timeupdate event was dispatched");
+ shouldBe("mediaController.controls.timeControl.elapsedTimeLabel.value", "media.currentTime");
+
+ debug("");
+ shadowRoot.host.remove();
+ media.remove();
+ finishJSTest();
+});
+
+media.addEventListener("loadedmetadata", event => media.currentTime = 2);
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimelabelssupportremainingtimeexpectedtxtfromrev211806trunkLayoutTestsmediamodernmediacontrolsremainingtimesupportremainingtimesupportexpectedtxt"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time-expected.txt (from rev 211806, trunk/LayoutTests/media/modern-media-controls/remaining-time-support/remaining-time-support-expected.txt) (0 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time-expected.txt 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -0,0 +1,15 @@
</span><ins>+Testing the RemainingTimeSupport behavior.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+durationchange event was dispatched
+PASS mediaController.controls.timeControl.remainingTimeLabel.value is -media.duration
+
+timeupdate event was dispatched
+PASS mediaController.controls.timeControl.remainingTimeLabel.value is media.currentTime - media.duration
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimelabelssupportremainingtimehtmlfromrev211806trunkLayoutTestsmediamodernmediacontrolsremainingtimesupportremainingtimesupporthtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time.html (from rev 211806, trunk/LayoutTests/media/modern-media-controls/remaining-time-support/remaining-time-support.html) (0 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time.html 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>RemainingTimeSupport</code> behavior.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+media.addEventListener("timeupdate", (event) => {
+ debug("");
+ debug("timeupdate event was dispatched");
+ shouldBe("mediaController.controls.timeControl.remainingTimeLabel.value", "media.currentTime - media.duration");
+
+ debug("");
+ shadowRoot.host.remove();
+ media.remove();
+ finishJSTest();
+});
+
+media.addEventListener("durationchange", event => {
+ debug("durationchange event was dispatched");
+ shouldBe("mediaController.controls.timeControl.remainingTimeLabel.value", "-media.duration");
+ media.currentTime = 2;
+});
+
+</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 (211806 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-02-07 14:07:48 UTC (rev 211806)
+++ trunk/Source/WebCore/ChangeLog 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -1,3 +1,43 @@
</span><ins>+2017-02-07 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Handle media durations of an hour or more gracefully
+ https://bugs.webkit.org/show_bug.cgi?id=167882
+ <rdar://problem/29601260>
+
+ Reviewed by Eric Carlson.
+
+ We add a new "labelsMayDisplayTimesOverAnHour" to TimeControl so that time labels
+ to the left and right of the scrubber may have extra room to display to account for
+ the extra "xx:" characters that may appear. We don't lay the time out dynamically
+ such that we don't see layout jumps as the times shown in the labels go around
+ the hour mark.
+
+ We also refactor the ElapsedTimeSupport and RemainingTimeSupport in a single
+ TimeLabelsSupport class which updates both elapsed and remaining time labels
+ and sets the "labelsMayDisplayTimesOverAnHour" on the TimeControl should a
+ "durationchange" happen to make the media duration reach or go past the hour mark.
+
+ Tests: http/tests/media/modern-media-controls/time-labels-support/long-time.html
+ media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html
+ media/modern-media-controls/time-labels-support/elapsed-time.html
+ media/modern-media-controls/time-labels-support/remaining-time.html
+
+ * Modules/modern-media-controls/controls/time-control.js:
+ (TimeControl.prototype.get labelsMayDisplayTimesOverAnHour):
+ (TimeControl.prototype.set labelsMayDisplayTimesOverAnHour):
+ (TimeControl.prototype.set width):
+ * Modules/modern-media-controls/controls/time-label.css:
+ (.time-label):
+ * Modules/modern-media-controls/js-files:
+ * Modules/modern-media-controls/media/elapsed-time-support.js: Removed.
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController.prototype._updateControlsIfNeeded):
+ * Modules/modern-media-controls/media/time-labels-support.js: Renamed from Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js.
+ (TimeLabelsSupport.prototype.get control):
+ (TimeLabelsSupport.prototype.syncControl):
+ (TimeLabelsSupport):
+ * WebCore.xcodeproj/project.pbxproj:
+
</ins><span class="cx"> 2017-02-06 Per Arne Vollan <pvollan@apple.com>
</span><span class="cx">
</span><span class="cx"> Read stroke width of subtitles from MediaAccessibility framework.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstimecontroljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (211806 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2017-02-07 14:07:48 UTC (rev 211806)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -25,9 +25,10 @@
</span><span class="cx">
</span><span class="cx"> const MinimumScrubberWidth = 168;
</span><span class="cx"> const ElapsedTimeLabelLeftMargin = -2;
</span><del>-const ElapsedTimeLabelWidth = 45;
</del><ins>+const ElapsedTimeLabelWidth = 40;
</ins><span class="cx"> const RemainingTimeLabelWidth = 49;
</span><del>-const RemainingTimeLabelLeftMargin = 5;
</del><ins>+const AdditionalTimeLabelWidthOverAnHour = 22;
+const ScrubberMargin = 5;
</ins><span class="cx">
</span><span class="cx"> class TimeControl extends LayoutItem
</span><span class="cx"> {
</span><span class="lines">@@ -43,10 +44,26 @@
</span><span class="cx"> this.remainingTimeLabel = new TimeLabel;
</span><span class="cx">
</span><span class="cx"> this.children = [this.elapsedTimeLabel, this.scrubber, this.remainingTimeLabel];
</span><ins>+
+ this._labelsMayDisplayTimesOverAnHour = false;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><ins>+ get labelsMayDisplayTimesOverAnHour()
+ {
+ return this._labelsMayDisplayTimesOverAnHour;
+ }
+
+ set labelsMayDisplayTimesOverAnHour(flag)
+ {
+ if (this._labelsMayDisplayTimesOverAnHour === flag)
+ return;
+
+ this._labelsMayDisplayTimesOverAnHour = flag;
+ this.layout();
+ }
+
</ins><span class="cx"> get width()
</span><span class="cx"> {
</span><span class="cx"> return super.width;
</span><span class="lines">@@ -56,10 +73,15 @@
</span><span class="cx"> {
</span><span class="cx"> super.width = width;
</span><span class="cx">
</span><ins>+ const extraWidth = this._labelsMayDisplayTimesOverAnHour ? AdditionalTimeLabelWidthOverAnHour : 0;
+ const elapsedTimeLabelWidth = ElapsedTimeLabelWidth + extraWidth;
+ const remainingTimeLabelWidth = RemainingTimeLabelWidth + extraWidth;
+
</ins><span class="cx"> this.elapsedTimeLabel.x = ElapsedTimeLabelLeftMargin;
</span><del>- this.scrubber.x = this.elapsedTimeLabel.x + ElapsedTimeLabelWidth;
- this.scrubber.width = this._width - ElapsedTimeLabelWidth - RemainingTimeLabelWidth;
- this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + RemainingTimeLabelLeftMargin;
</del><ins>+ this.elapsedTimeLabel.width = elapsedTimeLabelWidth;
+ this.scrubber.x = this.elapsedTimeLabel.x + elapsedTimeLabelWidth + ScrubberMargin;
+ this.scrubber.width = this._width - elapsedTimeLabelWidth - ScrubberMargin - remainingTimeLabelWidth;
+ this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get isSufficientlyWide()
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstimelabelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css (211806 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css 2017-02-07 14:07:48 UTC (rev 211806)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -30,4 +30,5 @@
</span><span class="cx"> font-size: 14px;
</span><span class="cx">
</span><span class="cx"> color: rgba(255, 255, 255, 0.572);
</span><ins>+ text-align: right;
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsjsfiles"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/js-files (211806 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-02-07 14:07:48 UTC (rev 211806)
+++ trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -42,13 +42,11 @@
</span><span class="cx"> media/media-controller-support.js
</span><span class="cx"> media/airplay-support.js
</span><span class="cx"> media/controls-visibility-support.js
</span><del>-media/elapsed-time-support.js
</del><span class="cx"> media/fullscreen-support.js
</span><span class="cx"> media/mute-support.js
</span><span class="cx"> media/pip-support.js
</span><span class="cx"> media/placard-support.js
</span><span class="cx"> media/playback-support.js
</span><del>-media/remaining-time-support.js
</del><span class="cx"> media/scrubbing-support.js
</span><span class="cx"> media/seek-support.js
</span><span class="cx"> media/seek-backward-support.js
</span><span class="lines">@@ -56,6 +54,7 @@
</span><span class="cx"> media/skip-back-support.js
</span><span class="cx"> media/start-support.js
</span><span class="cx"> media/status-support.js
</span><ins>+media/time-labels-support.js
</ins><span class="cx"> media/tracks-support.js
</span><span class="cx"> media/volume-down-support.js
</span><span class="cx"> media/volume-support.js
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediaelapsedtimesupportjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebCore/Modules/modern-media-controls/media/elapsed-time-support.js (211806 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/elapsed-time-support.js 2017-02-07 14:07:48 UTC (rev 211806)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/elapsed-time-support.js 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -1,46 +0,0 @@
</span><del>-/*
- * Copyright (C) 2016 Apple Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-class ElapsedTimeSupport extends MediaControllerSupport
-{
-
- // Protected
-
- get control()
- {
- return this.mediaController.controls.timeControl.elapsedTimeLabel;
- }
-
- get mediaEvents()
- {
- return ["timeupdate"];
- }
-
- syncControl()
- {
- this.control.value = this.mediaController.media.currentTime;
- }
-
-}
</del></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (211806 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-02-07 14:07:48 UTC (rev 211806)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -133,7 +133,7 @@
</span><span class="cx">
</span><span class="cx"> this._updateControlsSize();
</span><span class="cx">
</span><del>- this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, ElapsedTimeSupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, RemainingTimeSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, StartSupport, StatusSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport].map(SupportClass => {
</del><ins>+ this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, StartSupport, StatusSupport, TimeLabelsSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport].map(SupportClass => {
</ins><span class="cx"> return new SupportClass(this);
</span><span class="cx"> }, this);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediaremainingtimesupportjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js (211806 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js 2017-02-07 14:07:48 UTC (rev 211806)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -1,50 +0,0 @@
</span><del>-/*
- * Copyright (C) 2016 Apple Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-class RemainingTimeSupport extends MediaControllerSupport
-{
-
- // Protected
-
- get control()
- {
- return this.mediaController.controls.timeControl.remainingTimeLabel;
- }
-
- get mediaEvents()
- {
- return ["timeupdate", "durationchange"];
- }
-
- syncControl()
- {
- const media = this.mediaController.media;
- if (isNaN(media.duration))
- return;
-
- this.control.value = media.currentTime - media.duration;
- }
-
-}
</del></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediatimelabelssupportjsfromrev211806trunkSourceWebCoreModulesmodernmediacontrolsmediaremainingtimesupportjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js (from rev 211806, trunk/Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js) (0 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -0,0 +1,52 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class TimeLabelsSupport extends MediaControllerSupport
+{
+
+ // Protected
+
+ get control()
+ {
+ return this.mediaController.controls.timeControl;
+ }
+
+ get mediaEvents()
+ {
+ return ["timeupdate", "durationchange"];
+ }
+
+ syncControl()
+ {
+ const media = this.mediaController.media;
+ if (isNaN(media.duration))
+ return;
+
+ this.control.elapsedTimeLabel.value = media.currentTime;
+ this.control.remainingTimeLabel.value = media.currentTime - media.duration;
+ this.control.labelsMayDisplayTimesOverAnHour = media.duration >= (60 * 60);
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreWebCorexcodeprojprojectpbxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (211806 => 211807)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2017-02-07 14:07:48 UTC (rev 211806)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2017-02-07 14:30:29 UTC (rev 211807)
</span><span class="lines">@@ -10080,8 +10080,6 @@
</span><span class="cx"> 6F995A301A70833700A735F4 /* JSWebGLVertexArrayObject.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSWebGLVertexArrayObject.h; sourceTree = "<group>"; };
</span><span class="cx"> 6FAD4A561A9D0FAE009F7D3C /* OpenGLESSPI.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = OpenGLESSPI.h; sourceTree = "<group>"; };
</span><span class="cx"> 709A01FD1E3D0BCC006B0D4C /* ModuleFetchFailureKind.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ModuleFetchFailureKind.h; sourceTree = "<group>"; };
</span><del>- 71004B9A1DC1109300A52A38 /* elapsed-time-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "elapsed-time-support.js"; sourceTree = "<group>"; };
- 71004B9B1DC1109300A52A38 /* remaining-time-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "remaining-time-support.js"; sourceTree = "<group>"; };
</del><span class="cx"> 71004B9D1DC1398800A52A38 /* playback-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "playback-support.js"; sourceTree = "<group>"; };
</span><span class="cx"> 710FA74B1DEE576D004C715E /* controls-bar.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "controls-bar.js"; sourceTree = "<group>"; };
</span><span class="cx"> 710FA74C1DEE577E004C715E /* controls-visibility-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "controls-visibility-support.js"; sourceTree = "<group>"; };
</span><span class="lines">@@ -10188,6 +10186,7 @@
</span><span class="cx"> 718675461DF101C60033D7F3 /* seek-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "seek-support.js"; sourceTree = "<group>"; };
</span><span class="cx"> 718C7F561DD385C500B733C8 /* status-label.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "status-label.css"; sourceTree = "<group>"; };
</span><span class="cx"> 718C7F571DD385C500B733C8 /* status-label.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "status-label.js"; sourceTree = "<group>"; };
</span><ins>+ 71909BF41E4906A70057F99D /* time-labels-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "time-labels-support.js"; sourceTree = "<group>"; };
</ins><span class="cx"> 71A1B6071DEE5A820073BCFB /* English */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.javascript; name = English; path = "English.lproj/modern-media-controls-localized-strings.js"; sourceTree = SOURCE_ROOT; };
</span><span class="cx"> 71A57DEF154BE25C0009D120 /* SVGPathUtilities.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = SVGPathUtilities.cpp; sourceTree = "<group>"; };
</span><span class="cx"> 71A57DF0154BE25C0009D120 /* SVGPathUtilities.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = SVGPathUtilities.h; sourceTree = "<group>"; };
</span><span class="lines">@@ -18426,7 +18425,6 @@
</span><span class="cx"> children = (
</span><span class="cx"> 717F90581DC4BB600006F520 /* airplay-support.js */,
</span><span class="cx"> 710FA74C1DEE577E004C715E /* controls-visibility-support.js */,
</span><del>- 71004B9A1DC1109300A52A38 /* elapsed-time-support.js */,
</del><span class="cx"> 714131471DC9D6AF00336107 /* fullscreen-support.js */,
</span><span class="cx"> 7177E2461DB80D2F00919A0B /* media-controller-support.js */,
</span><span class="cx"> 71D02D921DB55C4E00DD5CF5 /* media-controller.js */,
</span><span class="lines">@@ -18434,7 +18432,6 @@
</span><span class="cx"> 7130141D1DC9C08600CA3A88 /* pip-support.js */,
</span><span class="cx"> 711FB0751DC7688F00C4C708 /* placard-support.js */,
</span><span class="cx"> 71004B9D1DC1398800A52A38 /* playback-support.js */,
</span><del>- 71004B9B1DC1109300A52A38 /* remaining-time-support.js */,
</del><span class="cx"> 7157E3D11DC1EE4B0094550E /* scrubbing-support.js */,
</span><span class="cx"> 718675441DF101C60033D7F3 /* seek-backward-support.js */,
</span><span class="cx"> 718675451DF101C60033D7F3 /* seek-forward-support.js */,
</span><span class="lines">@@ -18442,6 +18439,7 @@
</span><span class="cx"> 71D2554F1DB900020004D76B /* skip-back-support.js */,
</span><span class="cx"> 7177E2481DB80D2F00919A0B /* start-support.js */,
</span><span class="cx"> 71B0460A1DD3C2EE00EE19CF /* status-support.js */,
</span><ins>+ 71909BF41E4906A70057F99D /* time-labels-support.js */,
</ins><span class="cx"> 71F936F71DD4F99B00922CC7 /* tracks-support.js */,
</span><span class="cx"> 716C8DF11E48B269005BD0DA /* volume-down-support.js */,
</span><span class="cx"> 717F90571DC40ED60006F520 /* volume-support.js */,
</span></span></pre>
</div>
</div>
</body>
</html>