Changeset 209227 in webkit


Ignore:
Timestamp:
Dec 1, 2016 6:07:35 PM (7 years ago)
Author:
graouts@webkit.org
Message:

[Modern Media Controls] Show and populate the tracks panel
​https://bugs.webkit.org/show_bug.cgi?id=165284

Reviewed by Dean Jackson.

We added a TracksPanel in ​https://bugs.webkit.org/show_bug.cgi?id=165239 which allows to
show a list of media tracks and text tracks to choose from. We now show this panel when
clicking on the tracks button in the controls bar and populate its content with the
list of audio and text tracks for the media element. As an item is picked from the tracks
panel, we toggle the represented track's enabled state and dismiss the panel.

We also pick up the text track container display mostly unchanged from current media controls.

Tests: media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html

media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html

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

(MacOSInlineMediaControls.prototype.showTracksPanel):

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

(video::-webkit-media-text-track-container):
(video::cue):
(video::-webkit-media-text-track-display):
(video::-webkit-media-text-track-display-backdrop):
(video::cue(:future)):
(video::-webkit-media-text-track-container b):
(video::-webkit-media-text-track-container u):
(video::-webkit-media-text-track-container i):
(video::-webkit-media-text-track-container .hidden):

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

(MediaController):

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

(TracksSupport):
(TracksSupport.prototype.destroy):
(TracksSupport.prototype.buttonWasClicked):
(TracksSupport.prototype.tracksPanelNumberOfSections):
(TracksSupport.prototype.tracksPanelTitleForSection):
(TracksSupport.prototype.tracksPanelNumberOfTracksInSection):
(TracksSupport.prototype.tracksPanelTitleForTrackInSection):
(TracksSupport.prototype.tracksPanelIsTrackInSectionSelected):
(TracksSupport.prototype.tracksPanelSelectionDidChange):
(TracksSupport.prototype.syncControl):
(TracksSupport.prototype._textTracks):
(TracksSupport.prototype._audioTracks):
(TracksSupport.prototype._canPickAudioTracks):
(TracksSupport.prototype._canPickTextTracks):
(TracksSupport.prototype._sortedTrackList):

Location:
trunk
Files:
5 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r209225 r209227  
     12016-12-01  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Show and populate the tracks panel
     4        https://bugs.webkit.org/show_bug.cgi?id=165284
     5
     6        Reviewed by Dean Jackson.
     7
     8        Add two new tests to check that we correctly show, populate and interact with the tracks panel.
     9
     10        * media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel-expected.txt: Added.
     11        * media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html: Added.
     12        * media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel-expected.txt: Added.
     13        * media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html: Added.
     14        * platform/ios-simulator/TestExpectations:
     15        * platform/mac/TestExpectations:
     16
    1172016-12-01  Ryan Haddad  <ryanhaddad@apple.com>
    218

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

    r209182 r209227  
    27422742fast/layers/prevent-hit-test-during-layout.html [ Skip ]
    27432743
    2744 # Internal APIs to test PiP and AirPlay are not available on iOS.
     2744# Internal APIs to test PiP and AirPlay are not available on iOS, and we don't support showing the tracks button on iOS.
    27452745media/modern-media-controls/airplay-support/airplay-support.html [ Skip ]
    27462746media/modern-media-controls/pip-support [ Skip ]
    27472747media/modern-media-controls/placard-support [ Skip ]
     2748media/modern-media-controls/tracks-support [ Skip ]
    27482749media/modern-media-controls/audio [ Skip ]
    27492750

  • trunk/LayoutTests/platform/mac/TestExpectations

    r209223 r209227  
    14541454[ Yosemite ] media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html [ Skip ]
    14551455[ Yosemite ] media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-keyboard.html [ Skip ]
     1456[ Yosemite ] media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html [ Skip ]
     1457[ Yosemite ] media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html [ Skip ]
    14561458
    14571459webkit.org/b/164616 http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html [ Pass Failure ]

  • trunk/Source/WebCore/ChangeLog

    r209226 r209227  
     12016-12-01  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Show and populate the tracks panel
     4        https://bugs.webkit.org/show_bug.cgi?id=165284
     5
     6        Reviewed by Dean Jackson.
     7
     8        We added a TracksPanel in https://bugs.webkit.org/show_bug.cgi?id=165239 which allows to
     9        show a list of media tracks and text tracks to choose from. We now show this panel when
     10        clicking on the tracks button in the controls bar and populate its content with the
     11        list of audio and text tracks for the media element. As an item is picked from the tracks
     12        panel, we toggle the represented track's enabled state and dismiss the panel.
     13
     14        We also pick up the text track container display mostly unchanged from current media controls.
     15
     16        Tests: media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html
     17               media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html
     18
     19        * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
     20        (MacOSInlineMediaControls.prototype.showTracksPanel):
     21        * Modules/modern-media-controls/controls/text-tracks.css: Added.
     22        (video::-webkit-media-text-track-container):
     23        (video::cue):
     24        (video::-webkit-media-text-track-display):
     25        (video::-webkit-media-text-track-display-backdrop):
     26        (video::cue(:future)):
     27        (video::-webkit-media-text-track-container b):
     28        (video::-webkit-media-text-track-container u):
     29        (video::-webkit-media-text-track-container i):
     30        (video::-webkit-media-text-track-container .hidden):
     31        * Modules/modern-media-controls/media/media-controller.js:
     32        (MediaController):
     33        * Modules/modern-media-controls/media/tracks-support.js:
     34        (TracksSupport):
     35        (TracksSupport.prototype.destroy):
     36        (TracksSupport.prototype.buttonWasClicked):
     37        (TracksSupport.prototype.tracksPanelNumberOfSections):
     38        (TracksSupport.prototype.tracksPanelTitleForSection):
     39        (TracksSupport.prototype.tracksPanelNumberOfTracksInSection):
     40        (TracksSupport.prototype.tracksPanelTitleForTrackInSection):
     41        (TracksSupport.prototype.tracksPanelIsTrackInSectionSelected):
     42        (TracksSupport.prototype.tracksPanelSelectionDidChange):
     43        (TracksSupport.prototype.syncControl):
     44        (TracksSupport.prototype._textTracks):
     45        (TracksSupport.prototype._audioTracks):
     46        (TracksSupport.prototype._canPickAudioTracks):
     47        (TracksSupport.prototype._canPickTextTracks):
     48        (TracksSupport.prototype._sortedTrackList):
     49
    1502016-12-01  Brent Fulgham  <bfulgham@apple.com>
    251

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

    r208456 r209227  
    119119    }
    120120
     121    showTracksPanel()
     122    {
     123        super.showTracksPanel();
     124        this.tracksPanel.rightX = this._rightContainer.width - this.tracksButton.x - this.tracksButton.width;
     125    }
     126
    121127    // Protected
    122128

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

    r209170 r209227  
    3333        this.host = host;
    3434
    35         if (host)
     35        if (host) {
    3636            media.addEventListener("webkitpresentationmodechanged", this);
     37            shadowRoot.appendChild(host.textTrackContainer);
     38        }
    3739
    3840        this._updateControlsIfNeeded();

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

    r209099 r209227  
    3434            return;
    3535
     36        this.mediaController.controls.tracksPanel.dataSource = this;
     37        this.mediaController.controls.tracksPanel.uiDelegate = this;
     38
    3639        const media = mediaController.media;
    3740        for (let tracks of [media.audioTracks, media.textTracks]) {
    38             for (let eventType of ["addtrack", "removetrack"])
     41            for (let eventType of ["addtrack", "change", "removetrack"])
    3942                tracks.addEventListener(eventType, this);
    4043        }
    … …  
    4952        const media = this.mediaController.media;
    5053        for (let tracks of [media.audioTracks, media.textTracks]) {
    51             for (let eventType of ["addtrack", "removetrack"])
     54            for (let eventType of ["addtrack", "change", "removetrack"])
    5255                tracks.removeEventListener(eventType, this);
    5356        }
    … …  
    6871    buttonWasClicked(control)
    6972    {
    70         // FIXME: Show tracks menu.
     73        this.mediaController.controls.showTracksPanel();
     74    }
     75
     76    tracksPanelNumberOfSections()
     77    {
     78        let numberOfSections = 0;
     79        if (this._canPickAudioTracks())
     80            numberOfSections++;
     81        if (this._canPickTextTracks())
     82            numberOfSections++;
     83        return numberOfSections;
     84    }
     85
     86    tracksPanelTitleForSection(sectionIndex)
     87    {
     88        if (sectionIndex == 0 && this._canPickAudioTracks())
     89            return UIString("Audio");
     90        return UIString("Subtitles");
     91    }
     92
     93    tracksPanelNumberOfTracksInSection(sectionIndex)
     94    {
     95        if (sectionIndex == 0 && this._canPickAudioTracks())
     96            return this._audioTracks().length;
     97        return this._textTracks().length;
     98    }
     99
     100    tracksPanelTitleForTrackInSection(trackIndex, sectionIndex)
     101    {
     102        let track;
     103        if (sectionIndex == 0 && this._canPickAudioTracks())
     104            track = this._audioTracks()[trackIndex];
     105        else
     106            track = this._textTracks()[trackIndex];
     107
     108        if (this.mediaController.host)
     109            return this.mediaController.host.displayNameForTrack(track);
     110        return track.label;
     111    }
     112
     113    tracksPanelIsTrackInSectionSelected(trackIndex, sectionIndex)
     114    {
     115        if (sectionIndex == 0 && this._canPickAudioTracks())
     116            return this._audioTracks()[trackIndex].enabled;
     117        return this._textTracks()[trackIndex].mode !== "disabled";
     118    }
     119
     120    tracksPanelSelectionDidChange(trackIndex, sectionIndex)
     121    {
     122        if (sectionIndex == 0 && this._canPickAudioTracks()) {
     123            let track = this._audioTracks()[trackIndex];
     124            track.enabled = !track.enabled;
     125        } else {
     126            let track = this._textTracks()[trackIndex];
     127            track.mode = track.mode === "disabled" ? "showing" : "disabled";
     128        }
     129
     130        this.mediaController.controls.hideTracksPanel();
    71131    }
    72132
    73133    syncControl()
    74134    {
    75         const media = this.mediaController.media;
    76         const host = this.mediaController.host;
     135        this.control.enabled = this._canPickAudioTracks() || this._canPickTextTracks();
     136    }
    77137
    78         const textTracks = host ? host.sortedTrackListForMenu(media.textTracks) : media.textTracks;
    79         const audioTracks = host ? host.sortedTrackListForMenu(media.audioTracks) : media.audioTracks;
     138    // Private
    80139
    81         this.control.enabled = (textTracks && textTracks.length > 0) || (audioTracks && audioTracks.length > 1);
     140    _textTracks()
     141    {
     142        return this._sortedTrackList(this.mediaController.media.textTracks);
     143    }
     144
     145    _audioTracks()
     146    {
     147        return this._sortedTrackList(this.mediaController.media.audioTracks);
     148    }
     149
     150    _canPickAudioTracks()
     151    {
     152        const audioTracks = this._audioTracks();
     153        return audioTracks && audioTracks.length > 1;
     154    }
     155
     156    _canPickTextTracks()
     157    {
     158        const textTracks = this._textTracks();
     159        return textTracks && textTracks.length > 0;
     160    }
     161
     162    _sortedTrackList(tracks)
     163    {
     164        if (this.mediaController.host)
     165            return this.mediaController.host.sortedTrackListForMenu(tracks);
     166        return tracks;
    82167    }
    83168
Note: See TracChangeset for help on using the changeset viewer.