Bug 163679 - [Modern Media Controls] Media Controller: elapsed and remaining time support
Summary: [Modern Media Controls] Media Controller: elapsed and remaining time support
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Antoine Quint
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-10-19 11:53 PDT by Antoine Quint
Modified: 2016-10-26 12:10 PDT (History)
5 users (show)

See Also:

Attachments
Patch (46.41 KB, patch)
2016-10-20 03:40 PDT, Antoine Quint 		no flags Details | Formatted Diff | Diff
Patch (47.69 KB, patch)
2016-10-26 09:39 PDT, Antoine Quint 		no flags Details | Formatted Diff | Diff
Patch (47.36 KB, patch)
2016-10-26 09:40 PDT, Antoine Quint 		no flags Details | Formatted Diff | Diff
Archive of layout-test-results from ews102 for mac-yosemite (1.20 MB, application/zip)
2016-10-26 10:17 PDT, Build Bot 		no flags Details
Archive of layout-test-results from ews104 for mac-yosemite-wk2 (1.18 MB, application/zip)
2016-10-26 10:44 PDT, Build Bot 		no flags Details
Archive of layout-test-results from ews116 for mac-yosemite (1.70 MB, application/zip)
2016-10-26 10:49 PDT, Build Bot 		no flags Details
Patch (45.27 KB, patch)
2016-10-26 10:51 PDT, Antoine Quint 		no flags Details | Formatted Diff | Diff
Patch (46.81 KB, patch)
2016-10-26 11:27 PDT, Antoine Quint 		no flags Details | Formatted Diff | Diff
Show Obsolete (7) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Antoine Quint 2016-10-19 11:53:36 PDT 
We need media controller support for the elapsed and remaining time labels and when the media current time is changed via the media API.
Comment 1 Antoine Quint 2016-10-20 03:40:11 PDT 
Created attachment 292165 [details]
Patch
Comment 2 Radar WebKit Bug Importer 2016-10-20 03:42:53 PDT 
<rdar://problem/28867270>
Comment 3 Antoine Quint 2016-10-20 03:53:01 PDT 
<rdar://problem/28851675>
Comment 4 Antoine Quint 2016-10-26 09:39:06 PDT 
Created attachment 292934 [details]
Patch
Comment 5 Antoine Quint 2016-10-26 09:40:04 PDT 
Created attachment 292935 [details]
Patch
Comment 6 Build Bot 2016-10-26 10:17:18 PDT 
Comment on attachment 292935 [details]
Patch

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

New failing tests:
http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html
Comment 7 Build Bot 2016-10-26 10:17:20 PDT 
Created attachment 292940 [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
Comment 8 Build Bot 2016-10-26 10:44:22 PDT 
Comment on attachment 292935 [details]
Patch

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

New failing tests:
http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html
svg/wicd/test-rightsizing-b.xhtml
Comment 9 Build Bot 2016-10-26 10:44:24 PDT 
Created attachment 292944 [details]
Archive of layout-test-results from ews104 for mac-yosemite-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews104  Port: mac-yosemite-wk2  Platform: Mac OS X 10.10.5
Comment 10 Build Bot 2016-10-26 10:49:29 PDT 
Comment on attachment 292935 [details]
Patch

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

New failing tests:
http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html
Comment 11 Build Bot 2016-10-26 10:49:33 PDT 
Created attachment 292945 [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
Comment 12 Antoine Quint 2016-10-26 10:51:46 PDT 
Created attachment 292946 [details]
Patch
Comment 13 Antoine Quint 2016-10-26 11:27:13 PDT 
Created attachment 292949 [details]
Patch
Comment 14 Dean Jackson 2016-10-26 11:32:45 PDT 
Comment on attachment 292949 [details]
Patch

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

> Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js:48
> +    syncControl()
> +    {
> +        const media = this.mediaController.media;
> +        if (isNaN(media.duration))
> +            return;
> +
> +        this.control.value = media.currentTime - media.duration;
> +    }

Don't we show 0 or something in the case of a missing duration?

Will there ever be a case where we go from a media source with a duration to a source without a duration? e.g. if you set the .src to a live stream. In which case won't this code mean we'll still display the duration of the first src?

> LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support.html:36
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/status-label.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/elapsed-time-support.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/mute-support.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/skip-back-support.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
> +<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>

This is getting out of hand :)
Comment 15 Antoine Quint 2016-10-26 11:46:36 PDT 
(In reply to comment #14)
> Comment on attachment 292949 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=292949&action=review
> 
> > Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js:48
> > +    syncControl()
> > +    {
> > +        const media = this.mediaController.media;
> > +        if (isNaN(media.duration))
> > +            return;
> > +
> > +        this.control.value = media.currentTime - media.duration;
> > +    }
> 
> Don't we show 0 or something in the case of a missing duration?

Yes, the default value for a time label is 0, so until we get a duration, that's what we show.

> Will there ever be a case where we go from a media source with a duration to
> a source without a duration? e.g. if you set the .src to a live stream. In
> which case won't this code mean we'll still display the duration of the
> first src?

I can't think of such a case. In the case of a live stream, we no longer show the time control and instead show a live broadcast label (coming soon with a new patch).

> > LayoutTests/media/modern-media-controls/elapsed-time-support/elapsed-time-support.html:36
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/status-label.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/elapsed-time-support.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/mute-support.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/remaining-time-support.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/skip-back-support.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
> > +<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
> 
> This is getting out of hand :)

It 100% is, I've been working today on removing this with a single JS script that loads all CSS and JS resources dynamically, but it's not quite ready yet.
Comment 16 WebKit Commit Bot 2016-10-26 12:10:50 PDT 
Comment on attachment 292949 [details]
Patch

Clearing flags on attachment: 292949

Committed r207905: <http://trac.webkit.org/changeset/207905>
Comment 17 WebKit Commit Bot 2016-10-26 12:10:55 PDT 
All reviewed patches have been landed.  Closing bug.