Changeset 209182 in webkit


Ignore:
Timestamp:
Dec 1, 2016 8:16:38 AM (7 years ago)
Author:
graouts@webkit.org
Message:

[Modern Media Controls] Provide a UI object to show a list of tracks
​https://bugs.webkit.org/show_bug.cgi?id=165239

Reviewed by Dean Jackson.

We add a new TracksPanel object which we will be using to display a list of
audio and text tracks. The tracks panel can be shown by calling showTracksPanel()
on a MacOSMediaControls object and will be dismissed by hitting the Escape key
or mousing down outside of the panel's bounds. While the tracks panel is up,
arrows can be used to focus individual tracks which can be activated by either
pressing the Space bar or Enter key.

Activating a track will briefly animate its background to indicate selection and
dismissing the tracks panel is also animated with a quick fade-out animation.

Data for the tracks panel is provided by specifying a dataSource property and
implementing the required methods to provide the number of sections in the panel,
the number of tracks in each section, etc.

Tests: media/modern-media-controls/tracks-panel/tracks-panel-hide-click-outside.html

media/modern-media-controls/tracks-panel/tracks-panel-hide-esc-key.html
media/modern-media-controls/tracks-panel/tracks-panel-hide.html
media/modern-media-controls/tracks-panel/tracks-panel-population.html
media/modern-media-controls/tracks-panel/tracks-panel-right-x.html
media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-keyboard.html
media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html
media/modern-media-controls/tracks-panel/tracks-panel.html

  • Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:

(.media-controls.mac.fullscreen):
(.media-controls.mac.fullscreen > .controls-bar):
(.media-controls.mac.fullscreen .tracks-panel):

  • Modules/modern-media-controls/controls/macos-inline-media-controls.css:

(.media-controls.mac.inline .tracks-panel):

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

(MacOSMediaControls.prototype.showTracksPanel):
(MacOSMediaControls.prototype.hideTracksPanel):
(MacOSMediaControls):

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

(.media-controls):

  • Modules/modern-media-controls/controls/placard.css:

(.placard):

  • Modules/modern-media-controls/controls/status-label.css:

(.status-label):

  • Modules/modern-media-controls/controls/tracks-panel.css: Added.

(.tracks-panel):
(.tracks-panel *):
(.tracks-panel.fade-out):
(.tracks-panel-section):
(.tracks-panel-section:first-of-type):
(.tracks-panel-section > h3):
(.tracks-panel-section > ul):
(.tracks-panel-section > ul > li):
(.tracks-panel-section > ul > li:focus):
(.tracks-panel-section > ul > li.selected:before):
(.tracks-panel-section > ul > li.animated):
(@keyframes tracks-panel-item-selection):
(22.22%):

  • Modules/modern-media-controls/controls/tracks-panel.js: Added.

(TracksPanel.prototype.get presented):
(TracksPanel.prototype.presentInParent):
(TracksPanel.prototype.hide):
(TracksPanel.prototype.get rightX):
(TracksPanel.prototype.set rightX):
(TracksPanel.prototype.trackNodeSelectionAnimationDidEnd):
(TracksPanel.prototype.mouseMovedOverTrackNode):
(TracksPanel.prototype.mouseExitedTrackNode):
(TracksPanel.prototype.commitProperty):
(TracksPanel.prototype.handleEvent):
(TracksPanel.prototype._childrenFromDataSource.):
(TracksPanel.prototype._childrenFromDataSource):
(TracksPanel.prototype._handleMousedown):
(TracksPanel.prototype._handleKeydown):
(TracksPanel.prototype._dismiss):
(TracksPanel.prototype._focusTrackNode):
(TracksPanel.prototype._focusPreviousTrackNode):
(TracksPanel.prototype._focusNextTrackNode):
(TracksPanel.prototype._focusFirstTrackNode):
(TracksPanel.prototype._focusLastTrackNode):
(TrackNode):
(TrackNode.prototype.activate):
(TrackNode.prototype.handleEvent):
(TrackNode.prototype._animationDidEnd):

  • Modules/modern-media-controls/js-files:
  • WebCore.xcodeproj/project.pbxproj:
Location:
trunk
Files:
19 added
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r209172 r209182  
     12016-12-01  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Provide a UI object to show a list of tracks
     4        https://bugs.webkit.org/show_bug.cgi?id=165239
     5
     6        Reviewed by Dean Jackson.
     7
     8        Adding new tests to cover new TracksPanel functionality.
     9
     10        * media/modern-media-controls/resources/media-controls-loader.js:
     11        * media/modern-media-controls/tracks-panel/tracks-panel-expected.txt: Added.
     12        * media/modern-media-controls/tracks-panel/tracks-panel-hide-click-outside-expected.txt: Added.
     13        * media/modern-media-controls/tracks-panel/tracks-panel-hide-click-outside.html: Added.
     14        * media/modern-media-controls/tracks-panel/tracks-panel-hide-esc-key-expected.txt: Added.
     15        * media/modern-media-controls/tracks-panel/tracks-panel-hide-esc-key.html: Added.
     16        * media/modern-media-controls/tracks-panel/tracks-panel-hide-expected.txt: Added.
     17        * media/modern-media-controls/tracks-panel/tracks-panel-hide.html: Added.
     18        * media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt: Added.
     19        * media/modern-media-controls/tracks-panel/tracks-panel-population.html: Added.
     20        * media/modern-media-controls/tracks-panel/tracks-panel-right-x-expected.txt: Added.
     21        * media/modern-media-controls/tracks-panel/tracks-panel-right-x.html: Added.
     22        * media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-keyboard-expected.txt: Added.
     23        * media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-keyboard.html: Added.
     24        * media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt: Added.
     25        * media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html: Added.
     26        * media/modern-media-controls/tracks-panel/tracks-panel.html: Added.
     27        * platform/ios-simulator/TestExpectations:
     28        * platform/mac/TestExpectations:
     29
    1302016-11-30  Yusuke Suzuki  <utatane.tea@gmail.com>
    231

  • trunk/LayoutTests/media/modern-media-controls/resources/media-controls-loader.js

    r208456 r209182  
    44    const modulePath = layoutTestsPath ? layoutTestsPath + "/Source/WebCore/Modules/modern-media-controls" : "/modern-media-controls";
    55
    6     ["media-controls", "scrubber", "volume-slider", "slider", "button", "start-button", "icon-button", "airplay-button", "time-label", "status-label", "macos-inline-media-controls", "macos-fullscreen-media-controls", "ios-inline-media-controls", "buttons-container", "placard"].forEach(cssFile => {
     6    ["media-controls", "scrubber", "volume-slider", "slider", "button", "start-button", "icon-button", "airplay-button", "time-label", "status-label", "macos-inline-media-controls", "macos-fullscreen-media-controls", "ios-inline-media-controls", "buttons-container", "placard", "tracks-panel"].forEach(cssFile => {
    77        document.write(`<link rel="stylesheet" type="text/css" href="${modulePath}/controls/${cssFile}.css">`);
    88    });

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

    r209170 r209182  
    27522752media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html  [ Skip ]
    27532753
     2754# These tests are all Mac-specific, we never show the tracks menu on iOS
     2755media/modern-media-controls/tracks-panel
     2756
    27542757webkit.org/b/164594 http/tests/cache/disk-cache/disk-cache-request-headers.html [ Pass Timeout ]
    27552758

  • trunk/LayoutTests/platform/mac/TestExpectations

    r209170 r209182  
    14531453[ Yosemite ] media/modern-media-controls/audio [ Skip ]
    14541454[ Yosemite ] media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html [ Skip ]
     1455[ Yosemite ] media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-keyboard.html [ Skip ]
    14551456
    14561457webkit.org/b/164616 http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html [ Pass Failure ]

  • trunk/Source/WebCore/ChangeLog

    r209181 r209182  
     12016-12-01  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Provide a UI object to show a list of tracks
     4        https://bugs.webkit.org/show_bug.cgi?id=165239
     5
     6        Reviewed by Dean Jackson.
     7
     8        We add a new TracksPanel object which we will be using to display a list of
     9        audio and text tracks. The tracks panel can be shown by calling showTracksPanel()
     10        on a MacOSMediaControls object and will be dismissed by hitting the Escape key
     11        or mousing down outside of the panel's bounds. While the tracks panel is up,
     12        arrows can be used to focus individual tracks which can be activated by either
     13        pressing the Space bar or Enter key.
     14
     15        Activating a track will briefly animate its background to indicate selection and
     16        dismissing the tracks panel is also animated with a quick fade-out animation.
     17
     18        Data for the tracks panel is provided by specifying a dataSource property and
     19        implementing the required methods to provide the number of sections in the panel,
     20        the number of tracks in each section, etc.
     21
     22        Tests: media/modern-media-controls/tracks-panel/tracks-panel-hide-click-outside.html
     23               media/modern-media-controls/tracks-panel/tracks-panel-hide-esc-key.html
     24               media/modern-media-controls/tracks-panel/tracks-panel-hide.html
     25               media/modern-media-controls/tracks-panel/tracks-panel-population.html
     26               media/modern-media-controls/tracks-panel/tracks-panel-right-x.html
     27               media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-keyboard.html
     28               media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html
     29               media/modern-media-controls/tracks-panel/tracks-panel.html
     30
     31        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
     32        (.media-controls.mac.fullscreen):
     33        (.media-controls.mac.fullscreen > .controls-bar):
     34        (.media-controls.mac.fullscreen .tracks-panel):
     35        * Modules/modern-media-controls/controls/macos-inline-media-controls.css:
     36        (.media-controls.mac.inline .tracks-panel):
     37        * Modules/modern-media-controls/controls/macos-media-controls.js:
     38        (MacOSMediaControls.prototype.showTracksPanel):
     39        (MacOSMediaControls.prototype.hideTracksPanel):
     40        (MacOSMediaControls):
     41        * Modules/modern-media-controls/controls/media-controls.css:
     42        (.media-controls):
     43        * Modules/modern-media-controls/controls/placard.css:
     44        (.placard):
     45        * Modules/modern-media-controls/controls/status-label.css:
     46        (.status-label):
     47        * Modules/modern-media-controls/controls/tracks-panel.css: Added.
     48        (.tracks-panel):
     49        (.tracks-panel *):
     50        (.tracks-panel.fade-out):
     51        (.tracks-panel-section):
     52        (.tracks-panel-section:first-of-type):
     53        (.tracks-panel-section > h3):
     54        (.tracks-panel-section > ul):
     55        (.tracks-panel-section > ul > li):
     56        (.tracks-panel-section > ul > li:focus):
     57        (.tracks-panel-section > ul > li.selected:before):
     58        (.tracks-panel-section > ul > li.animated):
     59        (@keyframes tracks-panel-item-selection):
     60        (22.22%):
     61        * Modules/modern-media-controls/controls/tracks-panel.js: Added.
     62        (TracksPanel.prototype.get presented):
     63        (TracksPanel.prototype.presentInParent):
     64        (TracksPanel.prototype.hide):
     65        (TracksPanel.prototype.get rightX):
     66        (TracksPanel.prototype.set rightX):
     67        (TracksPanel.prototype.trackNodeSelectionAnimationDidEnd):
     68        (TracksPanel.prototype.mouseMovedOverTrackNode):
     69        (TracksPanel.prototype.mouseExitedTrackNode):
     70        (TracksPanel.prototype.commitProperty):
     71        (TracksPanel.prototype.handleEvent):
     72        (TracksPanel.prototype._childrenFromDataSource.):
     73        (TracksPanel.prototype._childrenFromDataSource):
     74        (TracksPanel.prototype._handleMousedown):
     75        (TracksPanel.prototype._handleKeydown):
     76        (TracksPanel.prototype._dismiss):
     77        (TracksPanel.prototype._focusTrackNode):
     78        (TracksPanel.prototype._focusPreviousTrackNode):
     79        (TracksPanel.prototype._focusNextTrackNode):
     80        (TracksPanel.prototype._focusFirstTrackNode):
     81        (TracksPanel.prototype._focusLastTrackNode):
     82        (TrackNode):
     83        (TrackNode.prototype.activate):
     84        (TrackNode.prototype.handleEvent):
     85        (TrackNode.prototype._animationDidEnd):
     86        * Modules/modern-media-controls/js-files:
     87        * WebCore.xcodeproj/project.pbxproj:
     88
    1892016-12-01  Andreas Kling  <akling@apple.com>
    290

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css

    r209170 r209182  
    2626/* Controls bar */
    2727
     28.media-controls.mac.fullscreen {
     29    --controls-bar-width: 468px;
     30    --tracks-panel-right-margin: 40px;
     31}
     32
    2833.media-controls.mac.fullscreen > .controls-bar {
    2934    left: 50%;
    3035    bottom: 25px;
    31     width: 468px;
     36    width: var(--controls-bar-width);
    3237    height: 75px;
    3338    transform: translateX(-50%);
    … …  
    126131    top: 7px;
    127132}
     133
     134/* Tracks Panel */
     135
     136.media-controls.mac.fullscreen .tracks-panel {
     137    /* Half of the screen width minus half of the controls bar width minus the distance to the right edge of the tracks button */
     138    right: calc(50% - var(--controls-bar-width) / 2 + var(--tracks-panel-right-margin));
     139    bottom: 234px;
     140}

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css

    r208456 r209182  
    127127    top: 40px;
    128128}
     129
     130/* Tracks Panel */
     131
     132.media-controls.mac.inline .tracks-panel {
     133    bottom: 51px;
     134}

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

    r208448 r209182  
    3535        this.muteButton = new MuteButton(this);
    3636        this.tracksButton = new TracksButton(this);
     37        this.tracksPanel = new TracksPanel;
    3738        this.volumeSlider = new VolumeSlider;
    3839    }
    3940
     41    // Public
     42
     43    showTracksPanel()
     44    {
     45        this.tracksButton.on = true;
     46        this.tracksButton.element.blur();
     47        this.controlsBar.userInteractionEnabled = false;
     48        this.tracksPanel.presentInParent(this);
     49    }
     50
     51    hideTracksPanel()
     52    {
     53        this.tracksButton.on = false;
     54        this.tracksButton.element.focus();
     55        this.controlsBar.userInteractionEnabled = true;
     56        this.tracksPanel.hide();
     57    }
     58
    4059}

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

    r209163 r209182  
    3232.media-controls {
    3333    position: relative;
     34    font-family: -apple-system;
    3435}
    3536

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.css

    r209111 r209182  
    3333    background-color: black;
    3434    color: rgb(164, 164, 164);
    35    
    36     font-family: -apple-system;
    3735}
    3836

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/status-label.css

    r208456 r209182  
    3131    overflow: hidden;
    3232
    33     font-family: -apple-system;
    3433    font-size: 14px;
    3534

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

    r209111 r209182  
    2424controls/status-label.js
    2525controls/controls-bar.js
     26controls/tracks-panel.js
    2627controls/media-controls.js
    2728controls/ios-inline-media-controls.js

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

    r209181 r209182  
    1003910039                714131471DC9D6AF00336107 /* fullscreen-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "fullscreen-support.js"; sourceTree = "<group>"; };
    1004010040                714131481DC9D6EF00336107 /* js-files */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = "js-files"; sourceTree = "<group>"; };
     10041                7146DF8B1DEFC2ED0046F98B /* tracks-panel.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "tracks-panel.css"; sourceTree = "<group>"; };
     10042                7146DF8C1DEFC2ED0046F98B /* tracks-panel.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "tracks-panel.js"; sourceTree = "<group>"; };
    1004110043                714F5B051DEE5F740075BD17 /* invalid-placard.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "invalid-placard.js"; sourceTree = "<group>"; };
    1004210044                714F5B061DEE5F8A0075BD17 /* invalid-placard@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "invalid-placard@1x.png"; sourceTree = "<group>"; };
    … …  
    1806618068                        isa = PBXGroup;
    1806718069                        children = (
     18070                                7146DF8B1DEFC2ED0046F98B /* tracks-panel.css */,
     18071                                7146DF8C1DEFC2ED0046F98B /* tracks-panel.js */,
    1806818072                                716FA0D81DB26591007323CC /* airplay-button.css */,
    1806918073                                716FA0D91DB26591007323CC /* airplay-button.js */,
Note: See TracChangeset for help on using the changeset viewer.