Bug 158815 – [iOS] Media controls are too cramped with small video

• Status: RESOLVED
• Resolution: FIXED
• Component: Media

[Antoine Quint]

Created attachment 281393 [details]
Testcase

Opening up the attached test file in landscape on a 4" iPhone shows cramped controls.

[Antoine Quint]

Created attachment 281394 [details]
Screenshot

[Radar WebKit Bug Importer]

<rdar://problem/26824238>

[Antoine Quint]

Created attachment 281747 [details]
Patch

[Antoine Quint]

No tests yet, I'm having timeouts on all tests with the test runner (see rdar://problem/26918438). Feedback welcome on the source changes so far though. I will update the patch with tests when I have a working test runner.

[Build Bot]

Comment on attachment 281747 [details]
Patch

Attachment 281747 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/1542342

New failing tests:
media/media-document-audio-repaint.html
media/controls-strict.html
media/video-volume-slider.html
media/controls-styling.html
fast/hidpi/video-controls-in-hidpi.html
media/video-display-toggle.html
media/media-controls-drag-timeline-set-controls-property.html
media/controls-drag-timebar.html
media/video-controls-rendering.html
accessibility/media-element.html
media/controls-without-preload.html
media/media-controls-clone.html
fast/layers/video-layer.html
media/video-empty-source.html
media/track/track-cue-rendering-horizontal.html
http/tests/media/hls/video-controls-live-stream.html
media/controls-after-reload.html

[Build Bot]

Created attachment 281749 [details]
Archive of layout-test-results from ews102 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews102  Port: mac-yosemite  Platform: Mac OS X 10.10.5

[Build Bot]

Comment on attachment 281747 [details]
Patch

Attachment 281747 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/1542343

New failing tests:
media/media-document-audio-repaint.html
media/controls-strict.html
media/controls-drag-timebar.html
media/video-volume-slider.html
media/video-display-toggle.html
media/media-controls-drag-timeline-set-controls-property.html
fast/hidpi/video-controls-in-hidpi.html
media/video-controls-rendering.html
accessibility/media-element.html
media/controls-without-preload.html
media/media-controls-clone.html
fast/layers/video-layer.html
media/video-empty-source.html
media/track/track-cue-rendering-horizontal.html
http/tests/media/hls/video-controls-live-stream.html
http/tests/contentextensions/text-track-blocked.html

[Build Bot]

Created attachment 281750 [details]
Archive of layout-test-results from ews106 for mac-yosemite-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews106  Port: mac-yosemite-wk2  Platform: Mac OS X 10.10.5

[Build Bot]

Comment on attachment 281747 [details]
Patch

Attachment 281747 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/1542345

New failing tests:
media/media-document-audio-repaint.html
media/controls-strict.html
media/video-volume-slider.html
media/controls-styling.html
fast/hidpi/video-controls-in-hidpi.html
media/video-display-toggle.html
media/media-controls-drag-timeline-set-controls-property.html
media/controls-drag-timebar.html
media/video-controls-rendering.html
accessibility/media-element.html
media/controls-without-preload.html
media/media-controls-clone.html
fast/layers/video-layer.html
media/video-empty-source.html
media/track/track-cue-rendering-horizontal.html
http/tests/media/hls/video-controls-live-stream.html
media/controls-after-reload.html

[Build Bot]

Created attachment 281751 [details]
Archive of layout-test-results from ews113 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews113  Port: mac-yosemite  Platform: Mac OS X 10.10.5

[Dean Jackson]

Comment on attachment 281747 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=281747&action=review

> Source/WebCore/Modules/mediacontrols/mediaControlsApple.js:1318
>          if (duration >= 60*60*10) {
> -            this.controls.currentTime.classList.add(this.ClassNames.sixDigitTime);
> -            this.controls.remainingTime.classList.add(this.ClassNames.sixDigitTime);
> +            addTimeClass(this.ClassNames.sixDigitTime);
>          } else if (duration >= 60*60) {
> -            this.controls.currentTime.classList.add(this.ClassNames.fiveDigitTime);
> -            this.controls.remainingTime.classList.add(this.ClassNames.fiveDigitTime);
> +            addTimeClass(this.ClassNames.fiveDigitTime);
>          } else if (duration >= 60*10) {
> -            this.controls.currentTime.classList.add(this.ClassNames.fourDigitTime);
> -            this.controls.remainingTime.classList.add(this.ClassNames.fourDigitTime);
> +            addTimeClass(this.ClassNames.fourDigitTime);
>          } else {
> -            this.controls.currentTime.classList.add(this.ClassNames.threeDigitTime);
> -            this.controls.remainingTime.classList.add(this.ClassNames.threeDigitTime);
> +            addTimeClass(this.ClassNames.threeDigitTime);
>          }

These all become single line conditionals.

[Antoine Quint]

So some of the failures (maybe all) come from the fact that the scrubber won't display now for the default width of an <audio> or <video> element (300 CSS pixels). That is not ideal in terms of user experience!

[Antoine Quint]

Created attachment 281976 [details]
Patch

[Build Bot]

Comment on attachment 281976 [details]
Patch

Attachment 281976 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/1562017

New failing tests:
media/track/track-cue-rendering-horizontal.html

[Build Bot]

Created attachment 281978 [details]
Archive of layout-test-results from ews102 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews102  Port: mac-yosemite  Platform: Mac OS X 10.10.5

[Build Bot]

Comment on attachment 281976 [details]
Patch

Attachment 281976 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/1562019

New failing tests:
media/track/track-cue-rendering-horizontal.html
http/tests/contentextensions/text-track-blocked.html

[Build Bot]

Created attachment 281979 [details]
Archive of layout-test-results from ews106 for mac-yosemite-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews106  Port: mac-yosemite-wk2  Platform: Mac OS X 10.10.5

[Build Bot]

Comment on attachment 281976 [details]
Patch

Attachment 281976 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/1562025

New failing tests:
media/track/track-cue-rendering-horizontal.html

[Build Bot]

Created attachment 281982 [details]
Archive of layout-test-results from ews116 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews116  Port: mac-yosemite  Platform: Mac OS X 10.10.5

[Antoine Quint]

Created attachment 281984 [details]
Patch

[Antoine Quint]

Created attachment 282124 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 282124 [details]
Patch

Clearing flags on attachment: 282124

Committed r202505: <http://trac.webkit.org/changeset/202505>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Ryan Haddad]

The test added with change is very flaky:

media/video-controls-drop-and-restore-timeline.html
<https://webkit-test-results.webkit.org/dashboards/flakiness_dashboard.html#showAllRuns=true&tests=media%2Fvideo-controls-drop-and-restore-timeline.html>

It also appears to have caused media/controls-drag-timebar.html to time out on El Capitan WK2
<https://webkit-test-results.webkit.org/dashboards/flakiness_dashboard.html#showAllRuns=true&tests=media%2Fcontrols-drag-timebar.html>

[WebKit Commit Bot]

Re-opened since this is blocked by bug 159169

[Antoine Quint]

Created attachment 282427 [details]
Patch for landing

[Antoine Quint]

Created attachment 282428 [details]
Patch

[Eric Carlson]

Comment on attachment 282428 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=282428&action=review

> LayoutTests/media/video-controls-drop-and-restore-timeline.html:17
> +                return child.classList.contains('dropped');

Minor nit: You use double quotes almost everywhere else, you may as well be consistent.

> LayoutTests/media/video-controls-drop-and-restore-timeline.html:27
> +        testExpected("video.controls", null, '!=');

Ditto.

> LayoutTests/media/video-controls-drop-and-restore-timeline.html:37
> +            testExpected("timelineContainer = mediaControlsElement(shadowRoot.firstChild, '-webkit-media-controls-timeline-container')", null, "!=");

Minor nit: you could make the first string a template literal.

[Antoine Quint]

Thanks Eric, these will be all addressed when landing.

[Antoine Quint]

Created attachment 282441 [details]
Patch for landing

[WebKit Commit Bot]

Comment on attachment 282441 [details]
Patch for landing

Clearing flags on attachment: 282441

Committed r202679: <http://trac.webkit.org/changeset/202679>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[WebKit Commit Bot]

Re-opened since this is blocked by bug 159302

[Alexey Proskuryakov]

This is still causing timeouts on media/controls-drag-timebar.html. Antoine could reproduce locally, rolling out.

[Antoine Quint]

Created attachment 282447 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 282447 [details]
Patch

Clearing flags on attachment: 282447

Committed r202694: <http://trac.webkit.org/changeset/202694>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.