Modified: trunk/Source/WebCore/ChangeLog (164222 => 164223)
--- trunk/Source/WebCore/ChangeLog 2014-02-17 16:18:14 UTC (rev 164222)
+++ trunk/Source/WebCore/ChangeLog 2014-02-17 17:17:23 UTC (rev 164223)
@@ -1,3 +1,29 @@
+2014-02-17 Jer Noble <[email protected]>
+
+ [MediaControls][iOS] Make mediacontrols match the system inline controls
+ https://bugs.webkit.org/show_bug.cgi?id=128833
+
+ Reviewed by Eric Carlson.
+
+ Move items slightly, fix button sizes, font sizes, and colors to match the
+ inline controls from MoviePlayer.framework.
+
+ * Modules/mediacontrols/mediaControlsiOS.css:
+ (audio::-webkit-media-controls-panel):
+ (audio::-webkit-media-controls-fullscreen-button):
+ (audio::-webkit-media-controls-play-button):
+ (audio::-webkit-media-controls-play-button.paused):
+ (audio::-webkit-media-controls-timeline):
+ (audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-time-remaining-display):
+ * Modules/mediacontrols/mediaControlsiOS.js:
+ (ControllerIOS.prototype.configureInlineControls): Do not add the status text.
+ (ControllerIOS.prototype.updateTime): Call updateProgress().
+ (ControllerIOS.prototype.progressFillStyle): Draw a slightly different color.
+ (ControllerIOS.prototype.updateProgress): Draw white to the left of the currentTime.
+ (ControllerIOS.prototype.formatTime): Single leading zero in the time display fields.
+ (ControllerIOS.prototype.handleTimelineChange): Call updateProgress().
+
2014-02-17 Manuel Rego Casasnovas <[email protected]>
[CSS Grid Layout] Fix missing layout in flexible and content sized columns
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (164222 => 164223)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2014-02-17 16:18:14 UTC (rev 164222)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2014-02-17 17:17:23 UTC (rev 164223)
@@ -67,11 +67,11 @@
position: relative;
bottom: 0;
width: 100%;
- padding-top: 1px;
+ padding-bottom: 1px;
height: 44px;
line-height: 44px;
-webkit-user-select: none;
- background-color: rgba(255, 255, 255, .5);
+ background-color: rgba(245, 245, 245, .75);
display: -webkit-flex;
-webkit-flex-direction: row;
@@ -136,7 +136,7 @@
display: block;
padding: 0;
border: 0;
- background-color: black;
+ background-color: rgba(0, 0, 0, .5);
-webkit-mask-origin: content-box;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
@@ -153,24 +153,25 @@
video::-webkit-media-controls-play-button,
audio::-webkit-media-controls-play-button {
margin-left: 34px;
- margin-right: 13px;
- width: 19px;
- height: 17px;
- -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 16"><rect x="1" y="0" width="5" height="16" fill="white"/><rect x="12" y="0" width="5" height="16" fill="white"/></svg>');
+ margin-right: 15px;
+ margin-top: 1px;
+ width: 21px;
+ height: 23px;
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22"><rect x="1" y="0" width="6" height="22" fill="white"/><rect x="13" y="0" width="6" height="22" fill="white"/></svg>');
}
video::-webkit-media-controls-play-button.paused,
audio::-webkit-media-controls-play-button.paused {
- -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 16"><path d="M 0,0 18,8 0,16 z" fill="white"/></svg>');
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="23"><path d="M 0,0.25 21,10.5 0,21.75 z" fill="white"/></svg>');
}
video::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-fullscreen-button {
margin-right: 34px;
margin-left: 13px;
- width: 17px;
- height: 17px;
- -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px"><g stroke="white" fill="transparent"><path d="M .5,5 v -4.5 h 4.5M .5,.5 l 5.5,5.5" /> <path d="M 15.5,11 v 4.5 h -4.5 M 15.5,15.5 l -5.5,-5.5" /></g></svg>')
+ width: 15px;
+ height: 15px;
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px"><g stroke="white" fill="transparent"><path d="M .5,5 v -4.5 h 4.5M .5,.5 l 5.5,5.5" /> <path d="M 14.5,10 v 4.5 h -4.5 M 14.5,14.5 l -5.5,-5.5" /></g></svg>');
}
/* Retina images */
@@ -189,19 +190,18 @@
margin: 0;
border-radius: 1.5px;
- background-color: black;
}
video::-webkit-media-controls-timeline::-webkit-slider-thumb,
audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
-webkit-appearance: none;
- width: 15px;
- height: 15px;
+ width: 16px;
+ height: 16px;
border: 0;
- border-radius: 7.5px;
- background-color: white !important;
- color: white;
- box-shadow: 0 0 1px rgba(0, 0, 0, .5);
+ 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>');
+ background-color: transparent !important;
+ box-shadow: 0 3px 1px -1px rgba(0, 0, 0, .15);
/* rotateZ() forces the layer into compositing mode. Slider
thumbs are small, so forcing a compositing layer is inexpensive,
@@ -219,12 +219,12 @@
-webkit-justify-content: center;
-webkit-align-items: center;
cursor: default;
- font-size: 10px;
+ font-size: 13px;
overflow-y: hidden;
overflow-x: hidden;
- width: 45px;
- min-width: 45px;
- color: black;
+ width: 44px;
+ min-width: 44px;
+ color: rgba(0, 0, 0, .5);
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (164222 => 164223)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2014-02-17 16:18:14 UTC (rev 164222)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2014-02-17 17:17:23 UTC (rev 164223)
@@ -119,7 +119,6 @@
configureInlineControls: function() {
this.controls.panel.appendChild(this.controls.playButton);
- this.controls.panel.appendChild(this.controls.statusDisplay);
this.controls.panel.appendChild(this.controls.timelineBox);
this.controls.timelineBox.appendChild(this.controls.currentTime);
this.controls.timelineBox.appendChild(this.controls.timeline);
@@ -142,10 +141,47 @@
},
+ updateTime: function() {
+ Controller.prototype.updateTime.call(this);
+ this.updateProgress();
+ },
+
progressFillStyle: function() {
- return 'rgb(0, 0, 0)';
+ return 'rgba(0, 0, 0, 0.5)';
},
+ updateProgress: function()
+ {
+ Controller.prototype.updateProgress.call(this);
+
+ var width = this.controls.timeline.offsetWidth;
+ var height = this.controls.timeline.offsetHeight;
+
+ // 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;
+
+ var context = document.getCSSCanvasContext('2d', 'timeline-' + this.timelineID, width, height);
+ context.fillStyle = 'white';
+ context.fillRect(0, 0, endX, height);
+ },
+
+ formatTime: function(time) {
+ if (isNaN(time))
+ time = 0;
+ var absTime = Math.abs(time);
+ var intSeconds = Math.floor(absTime % 60).toFixed(0);
+ var intMinutes = Math.floor(absTime / 60).toFixed(0);
+ return (time < 0 ? '-' : String()) + String('0' + intMinutes).slice(-1) + ":" + String('00' + intSeconds).slice(-2)
+ },
+
+ handleTimelineChange: function(event) {
+ Controller.prototype.handleTimelineChange.call(this);
+ this.updateProgress();
+ },
+
handlePlayButtonTouchStart: function() {
this.controls.playButton.classList.add('active');
},
