Changeset 180024 in webkit

Timestamp:

Feb 12, 2015, 5:04:12 PM (11 years ago)

Author:

dino@apple.com

Message:

[iOS Media] Audio should hide timeline scrubber until playback starts
​https://bugs.webkit.org/show_bug.cgi?id=141542
<rdar://problem/19820685>

Reviewed by Eric Carlson.

We regressed from the system behaviour in iOS 7, where the timeline
scrubber for an audio element is not shown until the user starts
playback.

• Modules/mediacontrols/mediaControlsiOS.css:

(video::-webkit-media-controls-panel): Fix the alignment of the flexbox.
(audio::-webkit-media-controls-status-display): Add the style for the status display.

• Modules/mediacontrols/mediaControlsiOS.js:

(ControllerIOS.prototype.configureInlineControls): Start hidden if we are an <audio>.
(ControllerIOS.prototype.configureFullScreenControls): Drive by comment change.
(ControllerIOS.prototype.setPlaying): Unhide the timeline.

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• Modules/mediacontrols/mediaControlsiOS.css (modified) (2 diffs)
• Modules/mediacontrols/mediaControlsiOS.js (modified) (3 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2015-02-12  Dean Jackson  <dino@apple.com>
+
+        [iOS Media] Audio should hide timeline scrubber until playback starts
+        https://bugs.webkit.org/show_bug.cgi?id=141542
+        <rdar://problem/19820685>
+
+        Reviewed by Eric Carlson.
+
+        We regressed from the system behaviour in iOS 7, where the timeline
+        scrubber for an audio element is not shown until the user starts
+        playback.
+
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (video::-webkit-media-controls-panel): Fix the alignment of the flexbox.
+        (audio::-webkit-media-controls-status-display): Add the style for the status display.
+        * Modules/mediacontrols/mediaControlsiOS.js:
+        (ControllerIOS.prototype.configureInlineControls): Start hidden if we are an <audio>.
+        (ControllerIOS.prototype.configureFullScreenControls): Drive by comment change.
+        (ControllerIOS.prototype.setPlaying): Unhide the timeline.
+
 2015-02-12  Chris Dumez  <cdumez@apple.com>
 

trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css

@@ -112 +112 @@
     -webkit-flex-direction: row;
     -webkit-flex-wrap: nowrap;
-    -webkit-justify-content: space-between;
+    -webkit-justify-content: flex-start;
     -webkit-align-items: center;
 
@@ -411 +411 @@
 }
 
+/* ================== STATUS DISPLAY ====================== */
+
+video::-webkit-media-controls-status-display,
+audio::-webkit-media-controls-status-display {
+
+    overflow: hidden;
+    font-family: -apple-system-font;
+    letter-spacing: normal;
+    word-spacing: normal;
+    line-height: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-decoration: none;
+    color: black;
+    mix-blend-mode: plus-darker;
+    opacity: 0.55;
+    -webkit-order: 2;
+}
+
+/* ================== CAPTIONS ====================== */
+
 video::-webkit-media-text-track-container {
     position: relative;

trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

@@ -229 +229 @@
             this.controls.timelineBox.appendChild(this.controls.remainingTime);
         }
-        if (!this.isAudio()) {
+        if (this.isAudio()) {
+            // Hide the scrubber on audio until the user starts playing.
+            this.controls.timelineBox.classList.add(this.ClassNames.hidden);
+        } else {
             if (ControllerIOS.gSimulateOptimizedFullscreenAvailable || ('webkitSupportsPresentationMode' in this.video && this.video.webkitSupportsPresentationMode('optimized')))
                 this.controls.panel.appendChild(this.controls.optimizedFullscreenButton);
@@ -237 +240 @@
 
     configureFullScreenControls: function() {
-        // Do nothing
+        // Explicitly do nothing to override base-class behavior.
     },
 
@@ -602 +605 @@
     {
         Controller.prototype.setPlaying.call(this, isPlaying);
+        if (isPlaying && this.isAudio())
+            this.controls.timelineBox.classList.remove(this.ClassNames.hidden);
         this.updateControls();
     },