Media document experience with long-loading files is poor
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Jun 2017 17:38:35 +0000 (17:38 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Jun 2017 17:38:35 +0000 (17:38 +0000)
commite13bce4c4c6c353f165ce11799144d36f42ba4fd
treeba194422e5a6b1f0f0a8d777d0cc6dc46488719f
parentd0de7fd5d432d7019cc893defe26fc1c3eb877ad
Media document experience with long-loading files is poor
https://bugs.webkit.org/show_bug.cgi?id=173575
<rdar://problem/32178119>

Reviewed by Dean Jackson.

Source/WebCore:

In order to avoid showing media controls at a different size than that of the video when we've
received enough information to determine whether it's audio or video and what the video frame size
is, we do not show any UI until we have enough information to show the controls in their correct
initial state. This works well with local files and fast-loading files, but does not work well with
invalid files, which never load and fail to ever show any UI, and files that load slowly where there
is no visible feedback that content will be visible.

Instead, we now default to showing audio controls in their loading state, which provides a seamless
transition if we will be loading an audio file since the controls are initially in the correct state,
and at least provide feedback that data is loading even if we eventually transition to a video layout.

Additionally, we remove the invalid placard background in case the media is invalid, showing only the
crossed-out play icon in the center of the page in that state.

Tests: media/modern-media-controls/media-documents/media-document-invalid.html
       media/modern-media-controls/media-documents/media-document-video-with-initial-audio-layout.html

* Modules/modern-media-controls/controls/media-document.css:
(:host(.media-document)): Remove "visibility: hidden" since we want the media controls to be visible
at all times.
(:host(.media-document.audio)): Add a little padding on the x-axis to ensure audio controls never snap
directly to the edges of the window.
(:host(.media-document.audio.iphone)): Remove the iPhone-specific styling since we moved it to the
general case.
(:host(.media-document.video.invalid) .placard): Remove the background from the invalid placard when
showing invalid media.
(:host(.media-document.ready)): Deleted.
* Modules/modern-media-controls/media/audio-support.js:
(AudioSupport.prototype.syncControl): Make sure we invalidate the media document layout when a media
document's media type changes.
* Modules/modern-media-controls/media/media-controller.js:
(MediaController): Instantiate the controls prior to creating the MediaDocumentController since the
MediaDocumentController will need to access the controls.
* Modules/modern-media-controls/media/media-document-controller.js:
(MediaDocumentController): Set the default layout for media controls for a media document to be audio
and in the waiting state.
(MediaDocumentController.prototype.layout): Toggle the "invalid", "audio" and "video" CSS classes for
the next possible commit to the DOM, provided we have established the media document's media type.
(MediaDocumentController.prototype.handleEvent): Deal with the "play" and "error" events to trigger
a layout.
(MediaDocumentController.prototype._mediaDocumentHasMetadata): Deleted.
(MediaDocumentController.prototype._mediaDocumentHasSize): Deleted.

LayoutTests:

Fix a test that started failing with this patch and add two new tests that check we are adding
the expected CSS classes when loading video and invalid media documents.

* media/modern-media-controls/media-documents/media-document-invalid-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-invalid.html: Added.
* media/modern-media-controls/media-documents/media-document-video-with-initial-audio-layout-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-video-with-initial-audio-layout.html: Added.
* media/modern-media-controls/volume-up-support/volume-up-support-expected.txt:
* media/modern-media-controls/volume-up-support/volume-up-support.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@218600 268f45cc-cd09-0410-ab3c-d52691b4dbfc
12 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/media-documents/media-document-invalid-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-invalid.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-video-with-initial-audio-layout-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-video-with-initial-audio-layout.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/volume-up-support/volume-up-support-expected.txt
LayoutTests/media/modern-media-controls/volume-up-support/volume-up-support.html
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/media-document.css
Source/WebCore/Modules/modern-media-controls/media/audio-support.js
Source/WebCore/Modules/modern-media-controls/media/media-controller.js
Source/WebCore/Modules/modern-media-controls/media/media-document-controller.js