<!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>[180013] trunk/Source/WebCore</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/180013">180013</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2015-02-12 14:20:39 -0800 (Thu, 12 Feb 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[iOS Media] Implement 3-style media timeline (buffered, played, unavailable)
https://bugs.webkit.org/show_bug.cgi?id=141526
<rdar://problem/19603337>
Reviewed by Eric Carlson and Antoine Quint.
Implement a 3-style media scrubber for iOS. This draws white for
the region that has been played (before the playhead), black
for the region that is buffered, and is hollow for the rest.
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.updateProgress): Update progress is now completely
shared between OS X and iOS. This calls the implementation specific
drawTimelineBackground.
(Controller.prototype.drawTimelineBackground): Move the OS X code to here.
* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-controls-timeline): New styles for the timeline. Updated thumb image, etc.
(video::-webkit-media-controls-timeline::-webkit-slider-runnable-track):
(audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
(audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active):
(video::-webkit-media-controls-time-remaining-display):
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS): Create a globally unique canvas context name in the constructor.
(ControllerIOS.prototype.createControls): Set the background of the timeline to a canvas.
(ControllerIOS.prototype.addRoundedRect): Helper function.
(ControllerIOS.prototype.drawTimelineBackground): Draw the 3-style content.
(ControllerIOS.prototype.updateProgress): Deleted.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (180012 => 180013)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-02-12 22:20:18 UTC (rev 180012)
+++ trunk/Source/WebCore/ChangeLog 2015-02-12 22:20:39 UTC (rev 180013)
</span><span class="lines">@@ -1,3 +1,33 @@
</span><ins>+2015-02-12 Dean Jackson <dino@apple.com>
+
+ [iOS Media] Implement 3-style media timeline (buffered, played, unavailable)
+ https://bugs.webkit.org/show_bug.cgi?id=141526
+ <rdar://problem/19603337>
+
+ Reviewed by Eric Carlson and Antoine Quint.
+
+ Implement a 3-style media scrubber for iOS. This draws white for
+ the region that has been played (before the playhead), black
+ for the region that is buffered, and is hollow for the rest.
+
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller.prototype.updateProgress): Update progress is now completely
+ shared between OS X and iOS. This calls the implementation specific
+ drawTimelineBackground.
+ (Controller.prototype.drawTimelineBackground): Move the OS X code to here.
+ * Modules/mediacontrols/mediaControlsiOS.css:
+ (audio::-webkit-media-controls-timeline): New styles for the timeline. Updated thumb image, etc.
+ (video::-webkit-media-controls-timeline::-webkit-slider-runnable-track):
+ (audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active):
+ (video::-webkit-media-controls-time-remaining-display):
+ * Modules/mediacontrols/mediaControlsiOS.js:
+ (ControllerIOS): Create a globally unique canvas context name in the constructor.
+ (ControllerIOS.prototype.createControls): Set the background of the timeline to a canvas.
+ (ControllerIOS.prototype.addRoundedRect): Helper function.
+ (ControllerIOS.prototype.drawTimelineBackground): Draw the 3-style content.
+ (ControllerIOS.prototype.updateProgress): Deleted.
+
</ins><span class="cx"> 2015-02-12 Daniel Bates <dabates@apple.com>
</span><span class="cx">
</span><span class="cx"> Fix some Mac linker warnings
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (180012 => 180013)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-02-12 22:20:18 UTC (rev 180012)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-02-12 22:20:39 UTC (rev 180013)
</span><span class="lines">@@ -975,7 +975,10 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this.updateTimelineMetricsIfNeeded();
</span><ins>+ this.drawTimelineBackground();
+ },
</ins><span class="cx">
</span><ins>+ drawTimelineBackground: function() {
</ins><span class="cx"> var background = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(2, 2, 2)"/><stop offset="1" stop-color="rgb(23, 23, 23)"/></linearGradient><g style="fill:url(#gradient)">'
</span><span class="cx">
</span><span class="cx"> var duration = this.video.duration;
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (180012 => 180013)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2015-02-12 22:20:18 UTC (rev 180012)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2015-02-12 22:20:39 UTC (rev 180013)
</span><span class="lines">@@ -22,6 +22,11 @@
</span><span class="cx"> * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><ins>+/* You'll see a lot of !important rules in this file. This is because
+ the inheritance and specificity of Shadow DOM trees is slightly
+ tricky. The page might have accidentally set a style and we have
+ to make sure it is reset. */
+
</ins><span class="cx"> audio {
</span><span class="cx"> min-width: 260px;
</span><span class="cx"> height: 39px;
</span><span class="lines">@@ -267,7 +272,6 @@
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-wireless-playback-picker-button,
</span><span class="cx"> video::-webkit-media-controls-wireless-playback-picker-button {
</span><del>- margin-left: 4px;
</del><span class="cx"> background-size: 21px 18px;
</span><span class="cx"> background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDA2NTYwQzlBNUFGMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDA2NTYwQ0FBNUFGMTFFNDhCNDZEQ0MzRUNBRkEzRTciPiA8eG1w
TU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3QTlEQUNEMEE1QUMxMUU0OEI0NkRDQzNFQ0FGQTNFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MDY1NjBDOEE1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsGo4wwAAAE9SURBVHja7JYxbsIwFIZtIjFkyYTEwMhUiZmdA/QCOQE3YGPkBh2ZOiNxAAY2ZlaGDt06McCAhHj8T7WrCKXIcewoSO9J35DIfv5kJ7+slVKkXqT0S8oSkW6tpNYksiIrsiIrsiIrsiIrsiJbItuJ0DgDK9CLIU6/G0uqLqgu2JieO5AG6kt/X0AIWfNJfRYak3nWbZSdP4haFq2SReXg9o8sM22FLGoCLk9EmSt4DybryB5khSYjcHSce+Lxhbmp+QmrrO888BsMCov1zTuq0YPj7ct5vuex+OxK6elUWtdDNAFrT1ELZ3G3CdmPmqKWZVRZ1CyQqGUWRZajx0RQSFnO5jyoLGoMzoFFLZzRkyCyqCH4iSRq4ax+qyVrcvAQWdTC6/S8ZM11b9uQKLlcK6tc95qCMzwp87oLMABmUMEzVAChcAAAAABJRU5ErkJggg==');
</span><span class="cx"> -webkit-order: 3;
</span><span class="lines">@@ -301,30 +305,35 @@
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-timeline,
</span><span class="cx"> audio::-webkit-media-controls-timeline {
</span><del>- -webkit-appearance: none;
</del><ins>+ -webkit-appearance: none !important;
</ins><span class="cx"> -webkit-flex: 1 1 0;
</span><del>- height: 3px;
</del><ins>+ height: 8px;
</ins><span class="cx"> margin: 0;
</span><ins>+ background-color: transparent !important;
+ background-size: 100% 100%;
+ border: none !important;
+ border-radius: 0 !important;
+ box-sizing: content-box !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+audio::-webkit-media-controls-timeline::-webkit-slider-runnable-track,
</ins><span class="cx"> video::-webkit-media-controls-timeline::-webkit-slider-runnable-track {
</span><del>- height: 3px !important;
- border-radius: 1.5px !important;
- background-color: white !important;
</del><ins>+ -webkit-appearance: none !important;
+ background: none !important;
+ border: none !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-timeline::-webkit-slider-thumb,
</span><span class="cx"> audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
</span><del>- -webkit-appearance: none;
- position: relative;
- top: -6px;
- width: 16px;
- height: 16px;
- border-width: 0px !important;
- border-radius: 8px;
- background-image: url('data:image/svg+xml,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle r="7.75" cy="8" cx="8" fill="white" stroke="rgba(0, 0, 0, .25)" stroke-width=".5"/></svg>') !important;
</del><ins>+ -webkit-appearance: none !important;
+ width: 15px;
+ height: 50px;
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAiCAYAAABIiGl0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iUGl4ZWxtYXRvciAyLjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTkwQ0UwODdBQTcxMTFFNEE5QTZGQTVGMjFBNkUxN0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTkwQ0UwODhBQTcxMTFFNEE5QTZGQTVGMjFBNkUxN0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlp
ZDo1OTBDRTA4NUFBNzExMUU0QTlBNkZBNUYyMUE2RTE3RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1OTBDRTA4NkFBNzExMUU0QTlBNkZBNUYyMUE2RTE3RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pofoz4wAAAJGSURBVHjaxJfNTsJAEMfbLmoNaKIhIE18A+LReOXmi/gQnnwSLz6Fnjh4Id4kHElI5EDwpIkgImWdf/Nfs5ISCrR1kkmg7c5vZz/mw3WSy66oL7ojqqiQkPotOhGdaq1XGnMTvC+KlprN5kW9Xr8sFotnhUKhCsUHs9lsCB2NRu1Op3PfaDRa8vhDdCSqnQ0E3lX7/f6NGH7RCQXfYgzG0sZacthut6/G4/Gj3lAwFjZgKyn0qNfrXYdh+Ka3FNiALdhc6Sk+1CkL4Us997E0aXga5zmX3Y87vdVt9jTJnvPA/blJJZxEnbHwtJds8Mk6V2ZTAQMsAD1EJAQHpdSpk7GAARaYAPuISE5OQpYfeYwwmBeYrMhjZeJuHkKWAtj7B7DnJchQaQsylgvwHGktL6qwXsH0TE7NETw091gjiecFFtYzmNFSo3LICyysBzBxsI5xoWUJWllHL8lSfTnViFyTyGO4PhgMbrP2lgxNpnPAdBXkkBYDsg48lqbRDLrd7t18Pn9P21PYhG3zl8yoXsY+1zCjDEufgIxjMqPCHMm5wpdBBsVeQK2QpUzZs8dKsGY+SrG8DSxvj8j6DdOKHUPZhkO3KOiDBWiZDGW3MC4f7FPVYvKQyuE8YQvzFJMUcJg+qfit3YVKc4clqB8H3zAThWzmJmzstGN1fI511LVJXYzl7hZQ00F+2dA4sH3P7Am4a0zAeDklEODZYueoVgz+DS4rWk5tTdj2cmqt4tr9sccJFqyG3N4CGxrSu
3AZ0MiPAAMAZrLkuVVmRJsAAAAASUVORK5CYII=');
+ background-repeat: no-repeat;
+ background-size: 15px 17px;
+ background-position: 0px 18px;
</ins><span class="cx"> background-color: transparent !important;
</span><del>- box-shadow: 0 3px 1px -1px rgba(0, 0, 0, .15);
</del><ins>+ border: none !important;
</ins><span class="cx">
</span><span class="cx"> /* rotateZ() forces the layer into compositing mode. Slider
</span><span class="cx"> thumbs are small, so forcing a compositing layer is inexpensive,
</span><span class="lines">@@ -332,8 +341,14 @@
</span><span class="cx"> -webkit-transform: rotateZ(0deg);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+video::-webkit-media-controls-timeline::-webkit-slider-thumb:active,
+audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active {
+ background-color: transparent !important;
+}
+
</ins><span class="cx"> audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
</span><del>- top: -1px;
</del><ins>+ height: 39px;
+ background-position: 0px 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-current-time-display,
</span><span class="lines">@@ -371,6 +386,7 @@
</span><span class="cx"> min-width: 38px;
</span><span class="cx"> -webkit-justify-content: right;
</span><span class="cx"> padding-left: 6px;
</span><ins>+ margin-right: 6px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-timeline-container,
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (180012 => 180013)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2015-02-12 22:20:18 UTC (rev 180012)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2015-02-12 22:20:39 UTC (rev 180013)
</span><span class="lines">@@ -9,6 +9,9 @@
</span><span class="cx"> this.hasWirelessPlaybackTargets = false;
</span><span class="cx"> this._pageScaleFactor = 1;
</span><span class="cx"> this.isListeningForPlaybackTargetAvailabilityEvent = false;
</span><ins>+
+ this.timelineContextName = "_webkit-media-controls-timeline-" + ControllerIOS.gLastTimelineId++;
+
</ins><span class="cx"> Controller.call(this, root, video, host);
</span><span class="cx">
</span><span class="cx"> this.updateWirelessTargetAvailable();
</span><span class="lines">@@ -26,6 +29,7 @@
</span><span class="cx"> ControllerIOS.gWirelessImage = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 245"><g fill="#1060FE"><path d="M193.6,6.3v121.6H6.4V6.3H193.6 M199.1,0.7H0.9v132.7h198.2V0.7L199.1,0.7z"/><path d="M43.5,139.3c15.8,8,35.3,12.7,56.5,12.7s40.7-4.7,56.5-12.7H43.5z"/></g><g text-anchor="middle" font-family="Helvetica Neue"><text x="100" y="204" fill="white" font-size="24">##DEVICE_TYPE##</text><text x="100" y="234" fill="#5C5C5C" font-size="21">##DEVICE_NAME##</text></g></svg>';
</span><span class="cx"> ControllerIOS.gSimulateWirelessPlaybackTarget = false; // Used for testing when there are no wireless targets.
</span><span class="cx"> ControllerIOS.gSimulateOptimizedFullscreenAvailable = false; // Used for testing when optimized fullscreen is not available.
</span><ins>+ControllerIOS.gLastTimelineId = 0;
</ins><span class="cx">
</span><span class="cx"> ControllerIOS.prototype = {
</span><span class="cx"> addVideoListeners: function() {
</span><span class="lines">@@ -180,6 +184,8 @@
</span><span class="cx"> this.listenFor(this.controls.optimizedFullscreenButton, 'touchend', this.handleOptimizedFullscreenTouchEnd);
</span><span class="cx"> this.listenFor(this.controls.optimizedFullscreenButton, 'touchcancel', this.handleOptimizedFullscreenTouchCancel);
</span><span class="cx"> this.stopListeningFor(this.controls.playButton, 'click', this.handlePlayButtonClicked);
</span><ins>+
+ this.controls.timeline.style.backgroundImage = '-webkit-canvas(' + this.timelineContextName + ')';
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> setControlsType: function(type) {
</span><span class="lines">@@ -270,24 +276,63 @@
</span><span class="cx"> return 'rgba(0, 0, 0, 0.5)';
</span><span class="cx"> },
</span><span class="cx">
</span><del>- updateProgress: function(forceUpdate) {
- Controller.prototype.updateProgress.call(this, forceUpdate);
</del><ins>+ addRoundedRect: function(ctx, x, y, width, height, radius) {
+ ctx.moveTo(x + radius, y);
+ ctx.arcTo(x + width, y, x + width, y + radius, radius);
+ ctx.lineTo(x + width, y + height - radius);
+ ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+ ctx.lineTo(x + radius, y + height);
+ ctx.arcTo(x, y + height, x, y + height - radius, radius);
+ ctx.lineTo(x, y + radius);
+ ctx.arcTo(x, y, x + radius, y, radius);
+ },
</ins><span class="cx">
</span><del>- if (!forceUpdate && this.controlsAreHidden())
</del><ins>+ drawTimelineBackground: function() {
+ var width = this.timelineWidth * window.devicePixelRatio;
+ var height = this.timelineHeight * window.devicePixelRatio;
+
+ if (!width || !height)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- var width = this.timelineWidth;
- var height = this.timelineHeight;
</del><ins>+ var played = this.video.currentTime / this.video.duration;
+ var buffered = 0;
+ for (var i = 0, end = this.video.buffered.length; i < end; ++i)
+ buffered = Math.max(this.video.buffered.end(i), buffered);
</ins><span class="cx">
</span><del>- // Magic number, matching the value for ::-webkit-media-controls-timeline::-webkit-slider-thumb
- // in mediaControlsiOS.css. Since we cannot ask the thumb for its offsetWidth as it's in its own
- // shadow dom, just hard-code the value.
- var thumbWidth = 16;
- var endX = thumbWidth / 2 + (width - thumbWidth) * this.video.currentTime / this.video.duration;
</del><ins>+ buffered /= this.video.duration;
</ins><span class="cx">
</span><del>- var context = document.getCSSCanvasContext('2d', 'timeline-' + this.timelineID, width, height);
- context.fillStyle = 'white';
- context.fillRect(0, 0, endX, height);
</del><ins>+ var ctx = document.getCSSCanvasContext('2d', this.timelineContextName, width, height);
+
+ ctx.clearRect(0, 0, width, height);
+
+ var midY = height / 2;
+
+ // 1. Draw the outline with a clip path that subtracts the
+ // middle of a lozenge. This produces a better result than
+ // stroking when we come to filling the parts below.
+ ctx.save();
+ ctx.beginPath();
+ this.addRoundedRect(ctx, 1, midY - 3, width - 2, 6, 3);
+ this.addRoundedRect(ctx, 2, midY - 2, width - 4, 4, 2);
+ ctx.closePath();
+ ctx.clip("evenodd");
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, width, height);
+ ctx.restore();
+
+ // 2. Draw the buffered part and played parts, using
+ // solid rectangles that are clipped to the outside of
+ // the lozenge.
+ ctx.save();
+ ctx.beginPath();
+ this.addRoundedRect(ctx, 1, midY - 3, width - 2, 6, 3);
+ ctx.closePath();
+ ctx.clip();
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, Math.round(width * buffered) + 2, height);
+ ctx.fillStyle = "white";
+ ctx.fillRect(0, 0, Math.round(width * played) + 2, height);
+ ctx.restore();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> formatTime: function(time) {
</span></span></pre>
</div>
</div>
</body>
</html>