Bug 169145 - [Modern Media Controls] Improve media documents across macOS, iPhone and iPad
Summary: [Modern Media Controls] Improve media documents across macOS, iPhone and iPad
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Antoine Quint
URL:
Keywords: InRadar
: 170123 (view as bug list)
Depends on: 169163
Blocks:
  Show dependency treegraph
 
Reported: 2017-03-03 13:41 PST by Antoine Quint
Modified: 2017-03-28 00:34 PDT (History)
4 users (show)

See Also:


Attachments
Patch (41.84 KB, patch)
2017-03-03 14:01 PST, Antoine Quint
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from ews122 for ios-simulator-wk2 (9.88 MB, application/zip)
2017-03-03 15:46 PST, Build Bot
no flags Details
Patch for landing (42.10 KB, patch)
2017-03-03 16:18 PST, Antoine Quint
no flags Details | Formatted Diff | Diff
Patch for landing (42.21 KB, patch)
2017-03-27 01:54 PDT, Antoine Quint
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Antoine Quint 2017-03-03 13:41:02 PST
We should look at improving handling of media documents across macOS, iPhone and iPad, where macOS and iPad would behave similarly and iPhone would use the full width available to display media.
Comment 1 Antoine Quint 2017-03-03 13:41:12 PST
<rdar://problem/17048858>
Comment 2 Antoine Quint 2017-03-03 14:01:18 PST
Created attachment 303339 [details]
Patch
Comment 3 Dean Jackson 2017-03-03 14:22:22 PST
Comment on attachment 303339 [details]
Patch

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

> Source/WebCore/ChangeLog:33
> +        As a result of the new styles applied by the modern-media-controls module, media documents have a
> +        similar behavior on macOS and iPad, where we only enforce a min-width for video allowing them
> +        to play at their natural size otherwise, and enforcing a fixed width for audio. On iPhone however,
> +        we want to always play the media at full width, with some padding in the case of audio.
> +

Did you check all this against the spreadsheet in Quip?

> Source/WebCore/Modules/modern-media-controls/controls/media-document.css:45
> +:host(.media-document.audio.ipad) {
> +    width: 650px !important;
> +}

What about iPads with different widths? Should it be the padding that is constant, or the overall width?

> Source/WebCore/Modules/modern-media-controls/media/media-controller.js:73
> +        const isLiveBroadcast = this.media.duration === Number.POSITIVE_INFINITY;
> +        const hasVideoTracks = this.media.videoWidth != 0;
> +        return !isLiveBroadcast && !hasVideoTracks;

I don't like that all live broadcasts get a video player. I can imagine live "radio" being fairly popular - bringing radio to the internet.

Could we swap dynamically?

> Source/WebCore/Modules/modern-media-controls/media/media-document-controller.js:60
> +        media.classList.add(window.navigator.platform === "MacIntel" ? "mac" : window.navigator.platform);

Ugggh. I don't like this. Could we get it from the mediaController instead?

> Source/WebCore/html/MediaDocument.cpp:-113
> -    if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
> -        StringBuilder bodyStyle;
> -        bodyStyle.appendLiteral("margin: 0; padding: 0;");
> -        bodyStyle.appendLiteral("background-color: rgb(38, 38, 38);");
> -        bodyStyle.appendLiteral("display: flex; justify-content: center; align-items: center;");
> -        body->setAttribute(styleAttr, bodyStyle.toString());
> -    }

Goodbye Dean code.

> Source/WebCore/html/MediaDocument.cpp:113
> +    videoElement->setAttributeWithoutSynchronization(playsinlineAttr, emptyAtom);

Do we want this on iPhone?
Comment 4 Antoine Quint 2017-03-03 14:38:26 PST
(In reply to comment #3)
> Comment on attachment 303339 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=303339&action=review
> 
> > Source/WebCore/Modules/modern-media-controls/controls/media-document.css:45
> > +:host(.media-document.audio.ipad) {
> > +    width: 650px !important;
> > +}
> 
> What about iPads with different widths? Should it be the padding that is
> constant, or the overall width?

Always the same width on all iPads, with a max-width of 100%.

> > Source/WebCore/Modules/modern-media-controls/media/media-controller.js:73
> > +        const isLiveBroadcast = this.media.duration === Number.POSITIVE_INFINITY;
> > +        const hasVideoTracks = this.media.videoWidth != 0;
> > +        return !isLiveBroadcast && !hasVideoTracks;
> 
> I don't like that all live broadcasts get a video player. I can imagine live
> "radio" being fairly popular - bringing radio to the internet.
> 
> Could we swap dynamically?

There is no way we can determine that HLS is ever audio-only. Video tracks could appear at any moment I'm afraid.

> > Source/WebCore/Modules/modern-media-controls/media/media-document-controller.js:60
> > +        media.classList.add(window.navigator.platform === "MacIntel" ? "mac" : window.navigator.platform);
> 
> Ugggh. I don't like this. Could we get it from the mediaController instead?

We could add those as layout traits, would that be good?

> > Source/WebCore/html/MediaDocument.cpp:113
> > +    videoElement->setAttributeWithoutSynchronization(playsinlineAttr, emptyAtom);
> 
> Do we want this on iPhone?

I think so.
Comment 5 Build Bot 2017-03-03 15:46:30 PST
Comment on attachment 303339 [details]
Patch

Attachment 303339 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: http://webkit-queues.webkit.org/results/3231744

New failing tests:
media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html
Comment 6 Build Bot 2017-03-03 15:46:33 PST
Created attachment 303348 [details]
Archive of layout-test-results from ews122 for ios-simulator-wk2

The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews122  Port: ios-simulator-wk2  Platform: Mac OS X 10.11.6
Comment 7 Antoine Quint 2017-03-03 16:18:34 PST
Created attachment 303354 [details]
Patch for landing
Comment 8 WebKit Commit Bot 2017-03-03 17:10:43 PST
The commit-queue encountered the following flaky tests while processing attachment 303354 [details]:

media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html bug 169158 (authors: graouts@apple.com and ryanhaddad@apple.com)
media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html bug 169159 (authors: graouts@apple.com and ryanhaddad@apple.com)
The commit-queue is continuing to process your patch.
Comment 9 WebKit Commit Bot 2017-03-03 17:11:35 PST
Comment on attachment 303354 [details]
Patch for landing

Clearing flags on attachment: 303354

Committed r213400: <http://trac.webkit.org/changeset/213400>
Comment 10 WebKit Commit Bot 2017-03-03 17:11:38 PST
All reviewed patches have been landed.  Closing bug.
Comment 12 WebKit Commit Bot 2017-03-03 21:46:53 PST
Re-opened since this is blocked by bug 169163
Comment 13 Antoine Quint 2017-03-27 01:31:57 PDT
It seems the line of code that triggers `ASSERT(!needsLayout())` in FrameView::paintContents is this:

media.classList.add(window.navigator.platform === "MacIntel" ? "mac" : window.navigator.platform)

I'm not sure why that is, but maybe having this class set in MediaDocumentParser::createDocumentStructure() where we already have some platform-specific code.
Comment 14 Antoine Quint 2017-03-27 01:54:43 PDT
Created attachment 305457 [details]
Patch for landing
Comment 15 Antoine Quint 2017-03-27 02:04:22 PDT
Raised https://bugs.webkit.org/show_bug.cgi?id=170113 to figure out why we were hitting this ASSERT in the first place. The patch is working around it by using a requestAnimationFrame call before setting the offending CSS classes.
Comment 16 WebKit Commit Bot 2017-03-27 02:37:51 PDT
Comment on attachment 305457 [details]
Patch for landing

Clearing flags on attachment: 305457

Committed r214411: <http://trac.webkit.org/changeset/214411>
Comment 17 WebKit Commit Bot 2017-03-27 02:37:54 PDT
All reviewed patches have been landed.  Closing bug.
Comment 18 Eric Carlson 2017-03-27 08:30:04 PDT
Comment on attachment 305457 [details]
Patch for landing

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

> Source/WebCore/Modules/modern-media-controls/media/media-controller.js:72
> +        const isLiveBroadcast = this.media.duration === Number.POSITIVE_INFINITY;

Why test this here, a live stream can be audio-only?
Comment 19 Ryan Haddad 2017-03-27 14:20:36 PDT
Reverted r214411 for reason:

Two of the LayoutTests for this change time out on ios-simulator.

Committed r214429: <http://trac.webkit.org/changeset/214429>
Comment 20 Ryan Haddad 2017-03-27 14:20:45 PDT
*** Bug 170123 has been marked as a duplicate of this bug. ***
Comment 21 Antoine Quint 2017-03-28 00:34:27 PDT
Committed r214468: <http://trac.webkit.org/changeset/214468>