Bug 163679 – [Modern Media Controls] Media Controller: elapsed and remaining time support

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

[Antoine Quint]

We need media controller support for the elapsed and remaining time labels and when the media current time is changed via the media API.

[Antoine Quint]

Created attachment 292165 [details]
Patch

[Radar WebKit Bug Importer]

<rdar://problem/28867270>

[Antoine Quint]

<rdar://problem/28851675>

[Antoine Quint]

Created attachment 292934 [details]
Patch

[Antoine Quint]

Created attachment 292935 [details]
Patch

[Build Bot]

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

[Build Bot]

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

[Build Bot]

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

[Build Bot]

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

[Build Bot]

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

[Build Bot]

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

[Antoine Quint]

Created attachment 292946 [details]
Patch

[Antoine Quint]

Created attachment 292949 [details]
Patch

[Dean Jackson]

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 :)

[Antoine Quint]

(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.

[WebKit Commit Bot]

Comment on attachment 292949 [details]
Patch

Clearing flags on attachment: 292949

Committed r207905: <http://trac.webkit.org/changeset/207905>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.