Changeset 209108 in webkit


Ignore:
Timestamp:
Nov 29, 2016 6:26:04 PM (7 years ago)
Author:
commit-queue@webkit.org
Message:

[Modern Media Controls] Only show controls when the controls attribute is set
​https://bugs.webkit.org/show_bug.cgi?id=165175

Source/WebCore:

We now respect the value of the media's "controls" attribute so that the start button and the controls
bar are only shown when that attribute is set to "true".

Patch by Antoine Quint <Antoine Quint> on 2016-11-29
Reviewed by Dean Jackson.

Tests: media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html

media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html
media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html
media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html
media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html

  • Modules/modern-media-controls/controls/controls-bar.js: Added.

(ControlsBar):

  • Modules/modern-media-controls/controls/media-controls.js:

(MediaControls.): Deleted.

  • Modules/modern-media-controls/js-files:
  • Modules/modern-media-controls/media/controls-visibility-support.js: Added.

(ControlsVisibilitySupport):
(ControlsVisibilitySupport.prototype.destroy):
(ControlsVisibilitySupport.prototype.get mediaEvents):
(ControlsVisibilitySupport.prototype.syncControl):

  • Modules/modern-media-controls/media/media-controller-support.js:

(MediaControllerSupport):
(MediaControllerSupport.prototype.handleEvent):

  • Modules/modern-media-controls/media/media-controller.js:

(MediaController.prototype._updateControlsIfNeeded):

  • WebCore.xcodeproj/project.pbxproj:

LayoutTests:

We add new tests to check that the media's "control" attribute is respected. We also update a
series of tests to be more robust and turn the media "controls" attribute on so that the controls
bar is displayed as required by the tests.

Patch by Antoine Quint <Antoine Quint> on 2016-11-29
Reviewed by Dean Jackson.

  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt: Added.
  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html: Added.
  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt: Added.
  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html: Added.
  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt: Added.
  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html: Added.
  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt: Added.
  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html: Added.
  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt: Added.
  • media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html: Added.
  • media/modern-media-controls/fullscreen-support/fullscreen-support-click.html:
  • media/modern-media-controls/media-controls/media-controls-constructor-expected.txt:
  • media/modern-media-controls/media-controls/media-controls-constructor.html:
  • media/modern-media-controls/pip-support/pip-support-click.html:
  • media/modern-media-controls/placard-support/placard-support-airplay.html:
  • media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt:
  • media/modern-media-controls/scrubber-support/scrubber-support-click.html:
  • media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt:
  • media/modern-media-controls/scrubber-support/scrubber-support-drag.html:
  • media/modern-media-controls/volume-support/volume-support-click.html:
  • media/modern-media-controls/volume-support/volume-support-drag.html:
Location:
trunk
Files:
11 added
18 edited
2 copied

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r209100 r209108  
     12016-11-29  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Only show controls when the controls attribute is set
     4        https://bugs.webkit.org/show_bug.cgi?id=165175
     5
     6        We add new tests to check that the media's "control" attribute is respected. We also update a
     7        series of tests to be more robust and turn the media "controls" attribute on so that the controls
     8        bar is displayed as required by the tests.
     9
     10        Reviewed by Dean Jackson.
     11
     12        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt: Added.
     13        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html: Added.
     14        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt: Added.
     15        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html: Added.
     16        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt: Added.
     17        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html: Added.
     18        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt: Added.
     19        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html: Added.
     20        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt: Added.
     21        * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html: Added.
     22        * media/modern-media-controls/fullscreen-support/fullscreen-support-click.html:
     23        * media/modern-media-controls/media-controls/media-controls-constructor-expected.txt:
     24        * media/modern-media-controls/media-controls/media-controls-constructor.html:
     25        * media/modern-media-controls/pip-support/pip-support-click.html:
     26        * media/modern-media-controls/placard-support/placard-support-airplay.html:
     27        * media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt:
     28        * media/modern-media-controls/scrubber-support/scrubber-support-click.html:
     29        * media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt:
     30        * media/modern-media-controls/scrubber-support/scrubber-support-drag.html:
     31        * media/modern-media-controls/volume-support/volume-support-click.html:
     32        * media/modern-media-controls/volume-support/volume-support-drag.html:
     33
    1342016-11-29  Ryan Haddad  <ryanhaddad@apple.com>
    235

  • trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-click.html

    r208274 r209108  
    1616   
    1717</style>
    18 <video src="../../content/test.mp4" autoplay></video>
     18<video src="../../content/test.mp4" controls autoplay></video>
    1919<div id="host"></div>
    2020<script type="text/javascript">

  • trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor-expected.txt

    r208456 r209108  
    2323PASS mediaControls.pipPlacard instanceof PiPPlacard is true
    2424
    25 PASS mediaControls.controlsBar instanceof LayoutItem is true
     25PASS mediaControls.controlsBar instanceof ControlsBar is true
    2626PASS mediaControls.controlsBar.element.localName is "div"
    2727PASS mediaControls.controlsBar.element.className is "controls-bar"

  • trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor.html

    r208456 r209108  
    3030
    3131debug("");
    32 shouldBeTrue("mediaControls.controlsBar instanceof LayoutItem");
     32shouldBeTrue("mediaControls.controlsBar instanceof ControlsBar");
    3333shouldBeEqualToString("mediaControls.controlsBar.element.localName", "div");
    3434shouldBeEqualToString("mediaControls.controlsBar.element.className", "controls-bar");

  • trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-click.html

    r208271 r209108  
    1616   
    1717</style>
    18 <video src="../../content/test.mp4" autoplay></video>
     18<video src="../../content/test.mp4" autoplay controls></video>
    1919<div id="host"></div>
    2020<script type="text/javascript">

  • trunk/LayoutTests/media/modern-media-controls/placard-support/placard-support-airplay.html

    r208242 r209108  
    1616   
    1717</style>
    18 <video src="../../content/test.mp4" autoplay></video>
     18<video src="../../content/test.mp4" controls autoplay></video>
    1919<div id="host"></div>
    2020<script type="text/javascript">

  • trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt

    r208042 r209108  
    44
    55
    6 PASS media.currentTime is 3.1872
     6PASS media.currentTime is within 0.2 of 3.1872
    77PASS successfullyParsed is true
    88

  • trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html

    r208226 r209108  
    1616   
    1717</style>
    18 <video src="../../content/test.mp4"></video>
     18<video src="../../content/test.mp4" controls autoplay></video>
    1919<div id="host"></div>
    2020<script type="text/javascript">
    … …  
    3030mediaController.controls.showsStartButton = false;
    3131
    32 media.addEventListener("canplaythrough", () => {
     32scheduler.frameDidFire = function() {
     33    if (media.paused)
     34        return;
     35
     36    media.pause();
    3337
    3438    media.addEventListener("timeupdate", () => {
    35         shouldBe("media.currentTime", "3.1872");
     39        shouldBeCloseTo("media.currentTime", 3.1872, 0.2);
    3640        container.remove();
    3741        media.remove();
    … …  
    4751    eventSender.mouseDown();
    4852    eventSender.mouseUp();
    49 });
     53};
    5054
    5155</script>

  • trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt

    r208042 r209108  
    44
    55
    6 PASS media.currentTime is media.duration / 2
     6PASS media.currentTime is within 0.01 of 3.0136
    77PASS media.currentTime is 0
    88PASS successfullyParsed is true

  • trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html

    r208226 r209108  
    1616   
    1717</style>
    18 <video src="../../content/test.mp4" autoplay></video>
     18<video src="../../content/test.mp4" autoplay controls></video>
    1919<div id="host"></div>
    2020<script type="text/javascript">
    … …  
    2929
    3030let numberOfEvents = 0;
    31 media.addEventListener("play", () => {
     31scheduler.frameDidFire = function() {
     32    if (media.paused)
     33        return;
     34
    3235    media.pause();
    3336
    3437    const input = mediaController.controls.timeControl.scrubber.children[1].element;
    3538    const bounds = input.getBoundingClientRect();
     39
     40    if (bounds.width === 0)
     41        return;
     42
    3643    const minX = bounds.left;
    3744    const dragStartX = bounds.left + bounds.width / 2;
    … …  
    4350
    4451        if (numberOfEvents == 1) {
    45             shouldBe("media.currentTime", "media.duration / 2");
     52            shouldBeCloseTo("media.currentTime", media.duration / 2, 0.01);
    4653            const delta = dragEndX - dragStartX;
    4754            const iterations = Math.abs(delta);
    … …  
    6269    eventSender.mouseMoveTo(dragStartX, centerY);
    6370    eventSender.mouseDown();
    64 });
     71};
    6572
    6673</script>

  • trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html

    r208226 r209108  
    1616   
    1717</style>
    18 <video src="../../content/test.mp4"></video>
     18<video src="../../content/test.mp4" controls autoplay></video>
    1919<div id="host"></div>
    2020<script type="text/javascript">
    … …  
    3030let numberOfFrames = 0;
    3131scheduler.frameDidFire = function() {
     32    if (media.paused)
     33        return;
     34
    3235    numberOfFrames++;
    3336

  • trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html

    r208226 r209108  
    1616   
    1717</style>
    18 <video src="../../content/test.mp4" muted></video>
     18<video src="../../content/test.mp4" muted autoplay controls></video>
    1919<div id="host"></div>
    2020<script type="text/javascript">
    … …  
    3333let numberOfFrames = 0;
    3434scheduler.frameDidFire = function() {
     35    if (media.paused)
     36        return;
     37
    3538    numberOfFrames++;
    3639

  • trunk/Source/WebCore/ChangeLog

    r209104 r209108  
     12016-11-29  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Only show controls when the controls attribute is set
     4        https://bugs.webkit.org/show_bug.cgi?id=165175
     5
     6        We now respect the value of the media's "controls" attribute so that the start button and the controls
     7        bar are only shown when that attribute is set to "true".
     8
     9        Reviewed by Dean Jackson.
     10
     11        Tests: media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html
     12               media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html
     13               media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html
     14               media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html
     15               media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html
     16
     17        * Modules/modern-media-controls/controls/controls-bar.js: Added.
     18        (ControlsBar):
     19        * Modules/modern-media-controls/controls/media-controls.js:
     20        (MediaControls.): Deleted.
     21        * Modules/modern-media-controls/js-files:
     22        * Modules/modern-media-controls/media/controls-visibility-support.js: Added.
     23        (ControlsVisibilitySupport):
     24        (ControlsVisibilitySupport.prototype.destroy):
     25        (ControlsVisibilitySupport.prototype.get mediaEvents):
     26        (ControlsVisibilitySupport.prototype.syncControl):
     27        * Modules/modern-media-controls/media/media-controller-support.js:
     28        (MediaControllerSupport):
     29        (MediaControllerSupport.prototype.handleEvent):
     30        * Modules/modern-media-controls/media/media-controller.js:
     31        (MediaController.prototype._updateControlsIfNeeded):
     32        * WebCore.xcodeproj/project.pbxproj:
     33
    1342016-11-29  Brady Eidson  <beidson@apple.com>
    235

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js

    r209104 r209108  
    2424 */
    2525
    26 class MediaControllerSupport
     26class ControlsBar extends LayoutNode
    2727{
    2828
    29     constructor(mediaController)
     29    constructor()
    3030    {
    31         this.mediaController = mediaController;
    32 
    33         for (let eventType of this.mediaEvents)
    34             mediaController.media.addEventListener(eventType, this);
    35 
    36         if (!this.control)
    37             return;
    38 
    39         this.control.uiDelegate = this;
    40 
    41         this.syncControl();
     31        super(`<div class="controls-bar">`);
    4232    }
    4333
    44     // Public
    45 
    46     destroy()
    47     {
    48         const media = this.mediaController.media;
    49         for (let eventType of this.mediaEvents)
    50             media.removeEventListener(eventType, this);
    51 
    52         if (this.control)
    53             this.control.uiDelegate = null;
    54     }
    55 
    56     // Protected
    57 
    58     get control()
    59     {
    60         // Implemented by subclasses.
    61     }
    62 
    63     get mediaEvents()
    64     {
    65         // Implemented by subclasses.
    66         return [];
    67     }
    68 
    69     buttonWasClicked(control)
    70     {
    71         // Implemented by subclasses.
    72     }
    73 
    74     handleEvent(event)
    75     {
    76         // Implemented by subclasses.
    77         if (this.control)
    78             this.syncControl();
    79     }
    80 
    81     syncControl()
    82     {
    83         // Implemented by subclasses.
    84     }
    8534}

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js

    r208456 r209108  
    4646        this.timeControl = new TimeControl(this);
    4747
    48         this.controlsBar = new LayoutItem({
    49             element: `<div class="controls-bar">`,
    50             layoutDelegate: this
    51         });
     48        this.controlsBar = new ControlsBar;
    5249
    5350        this.airplayPlacard = new AirplayPlacard(this);

  • trunk/Source/WebCore/Modules/modern-media-controls/js-files

    r208585 r209108  
    2323controls/buttons-container.js
    2424controls/status-label.js
     25controls/controls-bar.js
    2526controls/media-controls.js
    2627controls/ios-inline-media-controls.js
    … …  
    3334media/media-controller-support.js
    3435media/airplay-support.js
     36media/controls-visibility-support.js
    3537media/elapsed-time-support.js
    3638media/fullscreen-support.js

  • trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js

    r209104 r209108  
    2424 */
    2525
    26 class MediaControllerSupport
     26class ControlsVisibilitySupport extends MediaControllerSupport
    2727{
    2828
    2929    constructor(mediaController)
    3030    {
    31         this.mediaController = mediaController;
     31        super(mediaController);
    3232
    33         for (let eventType of this.mediaEvents)
    34             mediaController.media.addEventListener(eventType, this);
    35 
    36         if (!this.control)
    37             return;
    38 
    39         this.control.uiDelegate = this;
    40 
    41         this.syncControl();
    42     }
    43 
    44     // Public
    45 
    46     destroy()
    47     {
    48         const media = this.mediaController.media;
    49         for (let eventType of this.mediaEvents)
    50             media.removeEventListener(eventType, this);
    51 
    52         if (this.control)
    53             this.control.uiDelegate = null;
     33        this._controlsAttributeObserver = new MutationObserver(this.syncControl.bind(this));
     34        this._controlsAttributeObserver.observe(mediaController.media, { attributes: true, attributeFilter: ["controls"] });
    5435    }
    5536
    5637    // Protected
    5738
    58     get control()
     39    destroy()
    5940    {
    60         // Implemented by subclasses.
     41        this._controlsAttributeObserver.disconnect();
    6142    }
    6243
    6344    get mediaEvents()
    6445    {
    65         // Implemented by subclasses.
    66         return [];
    67     }
    68 
    69     buttonWasClicked(control)
    70     {
    71         // Implemented by subclasses.
    72     }
    73 
    74     handleEvent(event)
    75     {
    76         // Implemented by subclasses.
    77         if (this.control)
    78             this.syncControl();
     46        return ["loadedmetadata"];
    7947    }
    8048
    8149    syncControl()
    8250    {
    83         // Implemented by subclasses.
     51        let shouldShowControls = this.mediaController.media.controls;
     52        if (media instanceof HTMLVideoElement)
     53            shouldShowControls = shouldShowControls && this.mediaController.media.readyState > HTMLMediaElement.HAVE_NOTHING;
     54
     55        this.mediaController.controls.startButton.visible = shouldShowControls;
     56        this.mediaController.controls.controlsBar.visible = shouldShowControls;
    8457    }
     58
    8559}

  • trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js

    r208537 r209108  
    3434            mediaController.media.addEventListener(eventType, this);
    3535
     36        this.syncControl();
     37
    3638        if (!this.control)
    3739            return;
    3840
    3941        this.control.uiDelegate = this;
    40 
    41         this.syncControl();
    4242    }
    4343
    … …  
    7575    {
    7676        // Implemented by subclasses.
    77         if (this.control)
    78             this.syncControl();
     77        this.syncControl();
    7978    }
    8079

  • trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js

    r208585 r209108  
    9393        this._updateControlsSize();
    9494
    95         this._supportingObjects = [AirplaySupport, ElapsedTimeSupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, RemainingTimeSupport, ScrubbingSupport, SkipBackSupport, StartSupport, StatusSupport, TracksSupport, VolumeSupport].map(SupportClass => {
     95        this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, ElapsedTimeSupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, RemainingTimeSupport, ScrubbingSupport, SkipBackSupport, StartSupport, StatusSupport, TracksSupport, VolumeSupport].map(SupportClass => {
    9696            return new SupportClass(this);
    9797        }, this);

  • trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj

    r209070 r209108  
    1002010020                71004B9B1DC1109300A52A38 /* remaining-time-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "remaining-time-support.js"; sourceTree = "<group>"; };
    1002110021                71004B9D1DC1398800A52A38 /* playback-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "playback-support.js"; sourceTree = "<group>"; };
     10022                710FA74B1DEE576D004C715E /* controls-bar.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "controls-bar.js"; sourceTree = "<group>"; };
     10023                710FA74C1DEE577E004C715E /* controls-visibility-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "controls-visibility-support.js"; sourceTree = "<group>"; };
    1002210024                7117445614BC34E200EE5FC8 /* SVGTextMetricsBuilder.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = SVGTextMetricsBuilder.cpp; sourceTree = "<group>"; };
    1002310025                7117445714BC34E200EE5FC8 /* SVGTextMetricsBuilder.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = SVGTextMetricsBuilder.h; sourceTree = "<group>"; };
    … …  
    1805418056                                716FA0DE1DB26591007323CC /* buttons-container.css */,
    1805518057                                716FA0DF1DB26591007323CC /* buttons-container.js */,
     18058                                710FA74B1DEE576D004C715E /* controls-bar.js */,
    1805618059                                716FA0E01DB26591007323CC /* forward-button.js */,
    1805718060                                716FA0E11DB26591007323CC /* fullscreen-button.js */,
    … …  
    1810218105                        children = (
    1810318106                                717F90581DC4BB600006F520 /* airplay-support.js */,
     18107                                710FA74C1DEE577E004C715E /* controls-visibility-support.js */,
    1810418108                                71004B9A1DC1109300A52A38 /* elapsed-time-support.js */,
    1810518109                                714131471DC9D6AF00336107 /* fullscreen-support.js */,
Note: See TracChangeset for help on using the changeset viewer.