Changeset 207554 in webkit


Ignore:
Timestamp:
Oct 19, 2016 12:04:35 PM (8 years ago)
Author:
commit-queue@webkit.org
Message:

[Modern Media Controls] Media Controller: click-to-start support
​https://bugs.webkit.org/show_bug.cgi?id=163659
<rdar://problem/28845656>

Patch by Antoine Quint <Antoine Quint> on 2016-10-19
Reviewed by Dean Jackson.

Source/WebCore:

We introduce the MediaControllerSupport class which will allow a number of media controller
features to be implemented by subclasses each devoted to implementing a specific subset of
media controller features. With this bug, we add the correct behavior for click-to-start,
only showing the start button under the right circumstances.

A MediaController object indicates which media control to attach click event listeners to
through the control property, and a list of media events it should register on the media
element through the mediaEvents property. Then, as the user interacts with the specified
control and the media, the Button delegation method buttonWasClicked() and the syncControl()
methods are called to allow for the media state to be correctly set and represented in the
media controls. Custom event handling for the specified events can also be achieved by
subclassing the handleEvent() method.

Tests: media/modern-media-controls/start-support/start-support-audio.html

media/modern-media-controls/start-support/start-support-autoplay.html
media/modern-media-controls/start-support/start-support-click-to-start.html
media/modern-media-controls/start-support/start-support-error.html
media/modern-media-controls/start-support/start-support-fullscreen.html
media/modern-media-controls/start-support/start-support-manual-play.html
media/modern-media-controls/start-support/start-support-no-source.html

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

(MediaControllerSupport):
(MediaControllerSupport.prototype.get control):
(MediaControllerSupport.prototype.get mediaEvents):
(MediaControllerSupport.prototype.buttonWasClicked):
(MediaControllerSupport.prototype.handleEvent):
(MediaControllerSupport.prototype.syncControl):

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

(MediaController):
(MediaController.prototype.buttonWasClicked): Deleted.

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

(StartSupport.prototype.get control):
(StartSupport.prototype.get mediaEvents):
(StartSupport.prototype.buttonWasClicked):
(StartSupport.prototype.handleEvent):
(StartSupport.prototype.syncControl):
(StartSupport.prototype._shouldShowStartButton):
(StartSupport):

LayoutTests:

New test coverage for the StartSupport class.

  • media/modern-media-controls/media-controller/media-controller-constructor.html:
  • media/modern-media-controls/media-controller/media-controller-resize.html:
  • media/modern-media-controls/start-support/start-support-audio-expected.txt: Added.
  • media/modern-media-controls/start-support/start-support-audio.html: Added.
  • media/modern-media-controls/start-support/start-support-autoplay-expected.txt: Added.
  • media/modern-media-controls/start-support/start-support-autoplay.html: Added.
  • media/modern-media-controls/start-support/start-support-click-to-start-expected.txt: Renamed from LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start-expected.txt.
  • media/modern-media-controls/start-support/start-support-click-to-start.html: Renamed from LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start.html.
  • media/modern-media-controls/start-support/start-support-error-expected.txt: Added.
  • media/modern-media-controls/start-support/start-support-error.html: Added.
  • media/modern-media-controls/start-support/start-support-fullscreen-expected.txt: Added.
  • media/modern-media-controls/start-support/start-support-fullscreen.html: Added.
  • media/modern-media-controls/start-support/start-support-manual-play-expected.txt: Added.
  • media/modern-media-controls/start-support/start-support-manual-play.html: Added.
  • media/modern-media-controls/start-support/start-support-no-source-expected.txt: Added.
  • media/modern-media-controls/start-support/start-support-no-source.html: Added.
  • platform/ios-simulator/TestExpectations:
Location:
trunk
Files:
1 added
6 edited
14 copied
2 moved

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r207553 r207554  
     12016-10-19  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Media Controller: click-to-start support
     4        https://bugs.webkit.org/show_bug.cgi?id=163659
     5        <rdar://problem/28845656>
     6
     7        Reviewed by Dean Jackson.
     8
     9        New test coverage for the StartSupport class.
     10
     11        * media/modern-media-controls/media-controller/media-controller-constructor.html:
     12        * media/modern-media-controls/media-controller/media-controller-resize.html:
     13        * media/modern-media-controls/start-support/start-support-audio-expected.txt: Added.
     14        * media/modern-media-controls/start-support/start-support-audio.html: Added.
     15        * media/modern-media-controls/start-support/start-support-autoplay-expected.txt: Added.
     16        * media/modern-media-controls/start-support/start-support-autoplay.html: Added.
     17        * media/modern-media-controls/start-support/start-support-click-to-start-expected.txt: Renamed from LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start-expected.txt.
     18        * media/modern-media-controls/start-support/start-support-click-to-start.html: Renamed from LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start.html.
     19        * media/modern-media-controls/start-support/start-support-error-expected.txt: Added.
     20        * media/modern-media-controls/start-support/start-support-error.html: Added.
     21        * media/modern-media-controls/start-support/start-support-fullscreen-expected.txt: Added.
     22        * media/modern-media-controls/start-support/start-support-fullscreen.html: Added.
     23        * media/modern-media-controls/start-support/start-support-manual-play-expected.txt: Added.
     24        * media/modern-media-controls/start-support/start-support-manual-play.html: Added.
     25        * media/modern-media-controls/start-support/start-support-no-source-expected.txt: Added.
     26        * media/modern-media-controls/start-support/start-support-no-source.html: Added.
     27        * platform/ios-simulator/TestExpectations:
     28
    1292016-10-19  Aaron Chu  <aaron_chu@apple.com>
    230

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

    r207436 r207554  
    2727<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
    2828<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
     29<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
     30<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
    2931<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
    3032<body>

  • trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html

    r207436 r207554  
    2727<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
    2828<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
     29<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
     30<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
    2931<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
    3032<body>

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-audio-expected.txt

    r207553 r207554  
    1 Testing the MediaController click-to-start behavior.
     1Testing the StartSupport behavior with an audio element.
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    44
    55
    6 PASS mediaController.controls.showsStartButton is true
    7 
    8 Dispatching click event to the start button
    9 Media is playing
    106PASS mediaController.controls.showsStartButton is false
    11 
    127PASS successfullyParsed is true
    138

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-audio.html

    r207553 r207554  
    2727<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
    2828<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
     29<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
     30<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
    2931<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
    3032<body>
    31 <video src="../../content/test.mp4"></video>
     33<audio src="../../content/test.mp4" style="width: 320px; height: 240px;"></audio>
    3234<div id="shadow"></div>
    3335<script type="text/javascript">
    3436
    35 description("Testing the <code>MediaController</code> constructor.");
     37description("Testing the <code>StartSupport</code> behavior with an audio element.");
    3638
    3739iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
    3840
    39 shouldBeDefined("createControls");
    40 shouldBeType("createControls", "Function");
    41 
    4241const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
    43 const media = document.querySelector("video");
     42const media = document.querySelector("audio");
    4443const mediaController = createControls(shadowRoot, media, null);
    4544
    46 shouldBeType("mediaController", "MediaController");
    47 shouldBe("mediaController.shadowRoot", "shadowRoot");
    48 shouldBe("mediaController.media", "media");
    49 shouldBeType("mediaController.controls", "MediaControls");
     45shouldBeFalse("mediaController.controls.showsStartButton");
    5046
    5147shadowRoot.host.remove();
    5248media.remove();
    53 debug("");
    5449
    5550</script>

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-autoplay-expected.txt

    r207553 r207554  
    1 Testing the MediaController click-to-start behavior.
     1Testing the StartSupport behavior with autoplay.
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    44
    55
    6 PASS mediaController.controls.showsStartButton is true
    7 
    8 Dispatching click event to the start button
    96Media is playing
    107PASS mediaController.controls.showsStartButton is false

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-autoplay.html

    r207553 r207554  
    2727<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
    2828<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
     29<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
     30<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
    2931<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
    3032<body>
    31 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
     33<video src="../../content/test.mp4" style="width: 320px; height: 240px;" autoplay></video>
    3234<div id="shadow"></div>
    3335<script type="text/javascript">
    … …  
    3537window.jsTestIsAsync = true;
    3638
    37 description("Testing the <code>MediaController</code> click-to-start behavior.");
     39description("Testing the <code>StartSupport</code> behavior with autoplay.");
    3840
    3941iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
    … …  
    4244const media = document.querySelector("video");
    4345const mediaController = createControls(shadowRoot, media, null);
    44 
    45 shouldBeTrue("mediaController.controls.showsStartButton");
    4646
    4747media.addEventListener("play", function() {
    … …  
    5454});
    5555
    56 debug("");
    57 debug("Dispatching click event to the start button");
    58 mediaController.controls.startButton.element.click();
    59 
    6056</script>
    6157<script src="../../../resources/js-test-post.js"></script>

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

    r207553 r207554  
    2727<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
    2828<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
     29<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
     30<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
    2931<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
    3032<body>
    … …  
    4345const mediaController = createControls(shadowRoot, media, null);
    4446
    45 shouldBeTrue("mediaController.controls.showsStartButton");
     47media.addEventListener("loadedmetadata", function() {
     48    shouldBeTrue("mediaController.controls.showsStartButton");
     49    debug("");
     50    debug("Dispatching click event to the start button");
     51    mediaController.controls.startButton.element.click();
     52});
    4653
    4754media.addEventListener("play", function() {
    … …  
    5461});
    5562
    56 debug("");
    57 debug("Dispatching click event to the start button");
    58 mediaController.controls.startButton.element.click();
    5963
    6064</script>

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-error-expected.txt

    r207553 r207554  
    1 Testing the MediaController click-to-start behavior.
     1Testing the StartSupport behavior with an error.
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    44
    55
    6 PASS mediaController.controls.showsStartButton is true
    7 
    8 Dispatching click event to the start button
    9 Media is playing
    106PASS mediaController.controls.showsStartButton is false
    117

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-error.html

    r207553 r207554  
    2727<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
    2828<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
     29<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
     30<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
    2931<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
    3032<body>
    31 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
     33<video src="404.mp4" style="width: 320px; height: 240px;"></video>
    3234<div id="shadow"></div>
    3335<script type="text/javascript">
    … …  
    3537window.jsTestIsAsync = true;
    3638
    37 description("Testing the <code>MediaController</code> click-to-start behavior.");
     39description("Testing the <code>StartSupport</code> behavior with an error.");
    3840
    3941iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
    … …  
    4345const mediaController = createControls(shadowRoot, media, null);
    4446
    45 shouldBeTrue("mediaController.controls.showsStartButton");
    46 
    47 media.addEventListener("play", function() {
    48     debug("Media is playing");
     47media.addEventListener("error", function() {
    4948    shouldBeFalse("mediaController.controls.showsStartButton");
    5049    debug("");
    … …  
    5453});
    5554
    56 debug("");
    57 debug("Dispatching click event to the start button");
    58 mediaController.controls.startButton.element.click();
    59 
    6055</script>
    6156<script src="../../../resources/js-test-post.js"></script>

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-fullscreen-expected.txt

    r207553 r207554  
    1 Testing the MediaController click-to-start behavior.
     1Testing the StartSupport behavior with no source.
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    44
    55
    6 PASS mediaController.controls.showsStartButton is true
    7 
    8 Dispatching click event to the start button
    9 Media is playing
     6Media entered fullscreen
    107PASS mediaController.controls.showsStartButton is false
    118

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

    r207553 r207554  
    2727<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
    2828<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
     29<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
     30<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
    2931<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
    3032<body>
    … …  
    3537window.jsTestIsAsync = true;
    3638
    37 description("Testing the <code>MediaController</code> click-to-start behavior.");
     39description("Testing the <code>StartSupport</code> behavior with no source.");
    3840
    3941iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
    … …  
    4345const mediaController = createControls(shadowRoot, media, null);
    4446
    45 shouldBeTrue("mediaController.controls.showsStartButton");
     47const button = document.body.appendChild(document.createElement("button"));
     48button.addEventListener("click", event => {
     49    try {
     50        media.webkitEnterFullscreen();
     51    } catch(e) {
     52        debug("Calling media.webkitEnterFullscreen() failed");
     53        finishJSTest();
     54    }
     55});
    4656
    47 media.addEventListener("play", function() {
    48     debug("Media is playing");
     57media.addEventListener("webkitfullscreenchange", function() {
     58    debug("Media entered fullscreen");
    4959    shouldBeFalse("mediaController.controls.showsStartButton");
    5060    debug("");
    5161    shadowRoot.host.remove();
    5262    media.remove();
     63    button.remove();
    5364    finishJSTest();
    5465});
    5566
    56 debug("");
    57 debug("Dispatching click event to the start button");
    58 mediaController.controls.startButton.element.click();
     67media.addEventListener("loadedmetadata", event => {
     68    if ("eventSender" in window) {
     69        // Click the button so that we may enter fullscreen.
     70        eventSender.mouseMoveTo(button.offsetLeft + 1, button.offsetTop + 1);
     71        eventSender.mouseDown();
     72        eventSender.mouseUp();
     73    } else
     74        debug("This test is designed to run in DRT");
     75});
    5976
    6077</script>

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-manual-play-expected.txt

    r207553 r207554  
    1 Testing the MediaController click-to-start behavior.
     1Testing the StartSupport behavior with manual play.
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    44
    55
    6 PASS mediaController.controls.showsStartButton is true
     6Media is playing
     7PASS mediaController.controls.showsStartButton is false
    78
    8 Dispatching click event to the start button
    9 Media is playing
     9Media is paused
    1010PASS mediaController.controls.showsStartButton is false
    1111

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-manual-play.html

    r207553 r207554  
    2727<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
    2828<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
     29<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
     30<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
    2931<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
    3032<body>
    … …  
    3537window.jsTestIsAsync = true;
    3638
    37 description("Testing the <code>MediaController</code> click-to-start behavior.");
     39description("Testing the <code>StartSupport</code> behavior with manual play.");
    3840
    3941iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
    … …  
    4345const mediaController = createControls(shadowRoot, media, null);
    4446
    45 shouldBeTrue("mediaController.controls.showsStartButton");
    46 
    4747media.addEventListener("play", function() {
    4848    debug("Media is playing");
    4949    shouldBeFalse("mediaController.controls.showsStartButton");
    50     debug("");
    51     shadowRoot.host.remove();
    52     media.remove();
    53     finishJSTest();
     50
     51    media.addEventListener("pause", function() {
     52        debug("");
     53        debug("Media is paused");
     54        shouldBeFalse("mediaController.controls.showsStartButton");
     55        debug("");
     56        shadowRoot.host.remove();
     57        media.remove();
     58        finishJSTest();
     59    });
     60
     61    media.autoplay = false;
     62    media.pause();
    5463});
    5564
    56 debug("");
    57 debug("Dispatching click event to the start button");
    58 mediaController.controls.startButton.element.click();
     65media.play();
    5966
    6067</script>

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-no-source-expected.txt

    r207553 r207554  
    1 Testing the MediaController click-to-start behavior.
     1Testing the StartSupport behavior with no source.
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    44
    55
    6 PASS mediaController.controls.showsStartButton is true
    7 
    8 Dispatching click event to the start button
    9 Media is playing
    106PASS mediaController.controls.showsStartButton is false
    11 
    127PASS successfullyParsed is true
    138

  • trunk/LayoutTests/media/modern-media-controls/start-support/start-support-no-source.html

    r207553 r207554  
    2727<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
    2828<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js" type="text/javascript"></script>
     29<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js" type="text/javascript"></script>
     30<script src="../../../../Source/WebCore/Modules/modern-media-controls/media/start-support.js" type="text/javascript"></script>
    2931<script src="../../../../Source/WebCore/Modules/modern-media-controls/main.js" type="text/javascript"></script>
    3032<body>
    31 <video src="../../content/test.mp4"></video>
     33<video style="width: 320px; height: 240px;"></video>
    3234<div id="shadow"></div>
    3335<script type="text/javascript">
    3436
    35 description("Testing the <code>MediaController</code> constructor.");
     37description("Testing the <code>StartSupport</code> behavior with no source.");
    3638
    3739iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
    38 
    39 shouldBeDefined("createControls");
    40 shouldBeType("createControls", "Function");
    4140
    4241const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
    … …  
    4443const mediaController = createControls(shadowRoot, media, null);
    4544
    46 shouldBeType("mediaController", "MediaController");
    47 shouldBe("mediaController.shadowRoot", "shadowRoot");
    48 shouldBe("mediaController.media", "media");
    49 shouldBeType("mediaController.controls", "MediaControls");
     45shouldBeFalse("mediaController.controls.showsStartButton");
    5046
    5147shadowRoot.host.remove();
    5248media.remove();
    53 debug("");
    5449
    5550</script>

  • trunk/LayoutTests/platform/ios-simulator/TestExpectations

    r207330 r207554  
    26932693webkit.org/b/163009 media/modern-media-controls/icon-button/icon-button-active-state.html [ Failure ]
    26942694webkit.org/b/163357 media/modern-media-controls/volume-slider/volume-slider-value.html [ Skip ]
     2695webkit.org/b/163669 media/modern-media-controls/start-support/start-support-fullscreen.html [ Skip ]
    26952696
    26962697# This variation font test requires Skia which isn't available on iOS.

  • trunk/Source/WebCore/ChangeLog

    r207553 r207554  
     12016-10-19  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Media Controller: click-to-start support
     4        https://bugs.webkit.org/show_bug.cgi?id=163659
     5        <rdar://problem/28845656>
     6
     7        Reviewed by Dean Jackson.
     8
     9        We introduce the MediaControllerSupport class which will allow a number of media controller
     10        features to be implemented by subclasses each devoted to implementing a specific subset of
     11        media controller features. With this bug, we add the correct behavior for click-to-start,
     12        only showing the start button under the right circumstances.
     13
     14        A MediaController object indicates which media control to attach click event listeners to
     15        through the `control` property, and a list of media events it should register on the media
     16        element through the `mediaEvents` property. Then, as the user interacts with the specified
     17        control and the media, the Button delegation method `buttonWasClicked()` and the `syncControl()`
     18        methods are called to allow for the media state to be correctly set and represented in the
     19        media controls. Custom event handling for the specified events can also be achieved by
     20        subclassing the `handleEvent()` method.
     21
     22        Tests: media/modern-media-controls/start-support/start-support-audio.html
     23               media/modern-media-controls/start-support/start-support-autoplay.html
     24               media/modern-media-controls/start-support/start-support-click-to-start.html
     25               media/modern-media-controls/start-support/start-support-error.html
     26               media/modern-media-controls/start-support/start-support-fullscreen.html
     27               media/modern-media-controls/start-support/start-support-manual-play.html
     28               media/modern-media-controls/start-support/start-support-no-source.html
     29
     30        * Modules/modern-media-controls/media/media-controller-support.js: Added.
     31        (MediaControllerSupport):
     32        (MediaControllerSupport.prototype.get control):
     33        (MediaControllerSupport.prototype.get mediaEvents):
     34        (MediaControllerSupport.prototype.buttonWasClicked):
     35        (MediaControllerSupport.prototype.handleEvent):
     36        (MediaControllerSupport.prototype.syncControl):
     37        * Modules/modern-media-controls/media/media-controller.js:
     38        (MediaController):
     39        (MediaController.prototype.buttonWasClicked): Deleted.
     40        * Modules/modern-media-controls/media/start-support.js: Added.
     41        (StartSupport.prototype.get control):
     42        (StartSupport.prototype.get mediaEvents):
     43        (StartSupport.prototype.buttonWasClicked):
     44        (StartSupport.prototype.handleEvent):
     45        (StartSupport.prototype.syncControl):
     46        (StartSupport.prototype._shouldShowStartButton):
     47        (StartSupport):
     48
    1492016-10-19  Aaron Chu  <aaron_chu@apple.com>
    250

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

    r207553 r207554  
    2424 */
    2525
    26 class MediaController
     26class MediaControllerSupport
    2727{
    2828
    29     constructor(shadowRoot, media, host)
     29    constructor(mediaController)
    3030    {
    31         this.shadowRoot = shadowRoot;
    32         this.media = media;
     31        this.mediaController = mediaController;
    3332
    34         // FIXME: This should get set dynamically based on the current environment.
    35         this.layoutTraits = LayoutTraits.macOS;
     33        for (let eventType of this.mediaEvents)
     34            mediaController.media.addEventListener(eventType, this);
    3635
    37         this.controls = new MacOSInlineMediaControls
    38         shadowRoot.appendChild(this.controls.element);       
     36        if (!this.control)
     37            return;
    3938
    40         this.controls.startButton.uiDelegate = this;
    41         this.controls.showsStartButton = true;
     39        this.control.uiDelegate = this;
    4240
    43         this._updateControlsSize();
    44         media.addEventListener("resize", this);
     41        this.syncControl();
    4542    }
    4643
    4744    // Protected
    4845
    49     set pageScaleFactor(pageScaleFactor)
     46    get control()
    5047    {
    51         // FIXME: To be implemented.
     48        // Implemented by subclasses.
    5249    }
    5350
    54     set usesLTRUserInterfaceLayoutDirection(flag)
     51    get mediaEvents()
    5552    {
    56         // FIXME: To be implemented.
     53        // Implemented by subclasses.
     54        return [];
     55    }
     56
     57    buttonWasClicked(control)
     58    {
     59        // Implemented by subclasses.
    5760    }
    5861
    5962    handleEvent(event)
    6063    {
    61         if (event.type === "resize" && event.currentTarget === this.media)
    62             this._updateControlsSize();
     64        // Implemented by subclasses.
     65        if (this.control)
     66            this.syncControl();
    6367    }
    6468
    65     buttonWasClicked(button)
     69    syncControl()
    6670    {
    67         if (button !== this.controls.startButton)
    68             return;
    69 
    70         this.controls.showsStartButton = false;
    71         this.media.play();
     71        // Implemented by subclasses.
    7272    }
    73 
    74     // Private
    75 
    76     _updateControlsSize()
    77     {
    78         this.controls.width = this.media.offsetWidth;
    79         this.controls.height = this.media.offsetHeight;
    80     }
    81 
    8273}

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

    r207436 r207554  
    3131        this.shadowRoot = shadowRoot;
    3232        this.media = media;
     33        this.host = host;
    3334
    3435        // FIXME: This should get set dynamically based on the current environment.
    … …  
    3839        shadowRoot.appendChild(this.controls.element);       
    3940
    40         this.controls.startButton.uiDelegate = this;
    41         this.controls.showsStartButton = true;
     41        new StartSupport(this);
    4242
    4343        this._updateControlsSize();
    … …  
    6363    }
    6464
    65     buttonWasClicked(button)
    66     {
    67         if (button !== this.controls.startButton)
    68             return;
    69 
    70         this.controls.showsStartButton = false;
    71         this.media.play();
    72     }
    73 
    7465    // Private
    7566

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

    r207553 r207554  
    2424 */
    2525
    26 class MediaController
     26class StartSupport extends MediaControllerSupport
    2727{
    28 
    29     constructor(shadowRoot, media, host)
    30     {
    31         this.shadowRoot = shadowRoot;
    32         this.media = media;
    33 
    34         // FIXME: This should get set dynamically based on the current environment.
    35         this.layoutTraits = LayoutTraits.macOS;
    36 
    37         this.controls = new MacOSInlineMediaControls
    38         shadowRoot.appendChild(this.controls.element);       
    39 
    40         this.controls.startButton.uiDelegate = this;
    41         this.controls.showsStartButton = true;
    42 
    43         this._updateControlsSize();
    44         media.addEventListener("resize", this);
    45     }
    4628
    4729    // Protected
    4830
    49     set pageScaleFactor(pageScaleFactor)
     31    get control()
    5032    {
    51         // FIXME: To be implemented.
     33        return this.mediaController.controls.startButton;
    5234    }
    5335
    54     set usesLTRUserInterfaceLayoutDirection(flag)
     36    get mediaEvents()
    5537    {
    56         // FIXME: To be implemented.
     38        return ["loadedmetadata", "play", "error", "webkitfullscreenchange"];
     39    }
     40
     41    buttonWasClicked(control)
     42    {
     43        this.mediaController.media.play();
    5744    }
    5845
    5946    handleEvent(event)
    6047    {
    61         if (event.type === "resize" && event.currentTarget === this.media)
    62             this._updateControlsSize();
     48        if (event.type === "play")
     49            this._hasPlayed = true;
     50
     51        super.handleEvent(event);
    6352    }
    6453
    65     buttonWasClicked(button)
     54    syncControl()
    6655    {
    67         if (button !== this.controls.startButton)
    68             return;
    69 
    70         this.controls.showsStartButton = false;
    71         this.media.play();
     56        this.mediaController.controls.showsStartButton = this._shouldShowStartButton();
    7257    }
    7358
    7459    // Private
    7560
    76     _updateControlsSize()
     61    _shouldShowStartButton()
    7762    {
    78         this.controls.width = this.media.offsetWidth;
    79         this.controls.height = this.media.offsetHeight;
     63        const media = this.mediaController.media;
     64
     65        if (this._hasPlayed)
     66            return false;
     67
     68        if (!media.paused)
     69            return false;
     70
     71        if (media.autoplay)
     72            return false;
     73
     74        if (media instanceof HTMLAudioElement)
     75            return false;
     76
     77        if (media.webkitDisplayingFullscreen)
     78            return false;
     79
     80        if (!media.currentSrc)
     81            return false;
     82
     83        if (media.error)
     84            return false;
     85
     86        const host = this.mediaController.host;
     87        if (!media.controls && host && host.allowsInlineMediaPlayback)
     88            return false;
     89
     90        return true;
    8091    }
    8192
Note: See TracChangeset for help on using the changeset viewer.