Changeset 214381 in webkit


Ignore:
Timestamp:
Mar 24, 2017 3:10:45 PM (7 years ago)
Author:
graouts@webkit.org
Message:

[Modern Media Controls] Captions don't move with the appearance of the inline controls
​https://bugs.webkit.org/show_bug.cgi?id=170051
<rdar://problem/30754428>

Reviewed by Dean Jackson.

Source/WebCore:

We now size the captions container to account for the controls bar height when visible. To do this,
we use CSS variables to specify the height of the controls bar in default inline mode, compact inline
mode and fullscreen mode.

Test: media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html

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

(ControlsBar.prototype.set faded):
Notify the hosting MediaControls that the "faded" property changed.

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

(.media-controls.ios.inline > .controls-bar):
Use the new --inline-controls-bar-height CSS variable to specify the inline bar height.

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

(.media-controls.mac.inline.compact > .controls-bar):
Use the new --inline-compact-controls-bar-height CSS variable to specify the inline bar height.

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

(.media-controls.mac.fullscreen > .controls-bar):
Use the new --fullscreen-controls-bar-height CSS variable to specify the inline bar height.

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

(.media-controls.mac.inline > .controls-bar):
Use the new --inline-controls-bar-height CSS variable to specify the inline bar height.

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

(*):
Specify new CSS variables for the various controls bar heights.

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

(MediaControls.prototype.controlsBarFadedStateDidChange):
Notify the delegate of a controls bar "faded" property change.

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

(video::-webkit-media-text-track-container):
(video::-webkit-media-text-track-container.visible-controls-bar):
(video::-webkit-media-text-track-container.visible-controls-bar.compact-controls-bar):
(video::-webkit-media-text-track-display):
Shorten the height of the captions container when the controls bar is visible. We also
fix a couple of prefixed properties that didn't need to be.

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

(MediaController.prototype.controlsBarFadedStateDidChange):
(MediaController.prototype._updateControlsIfNeeded):
(MediaController.prototype._updateTextTracksClassList):
(MediaController):
Ensure we reflect the "faded" state of the controls bar on the captions container using
a CSS class, as well as whether the controls bar mode is compact.

LayoutTests:

Add a new test, which would have previously failed, where we check that we account for the controls bar height
when showing captions with the controls bar visible.

  • media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar-expected.txt: Added.
  • media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html: Added.
Location:
trunk
Files:
2 added
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r214378 r214381  
     12017-03-24  Antoine Quint  <graouts@webkit.org>
     2
     3        [Modern Media Controls] Captions don't move with the appearance of the inline controls
     4        https://bugs.webkit.org/show_bug.cgi?id=170051
     5        <rdar://problem/30754428>
     6
     7        Reviewed by Dean Jackson.
     8
     9        Add a new test, which would have previously failed, where we check that we account for the controls bar height
     10        when showing captions with the controls bar visible.
     11
     12        * media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar-expected.txt: Added.
     13        * media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html: Added.
     14
    1152017-03-24  Brent Fulgham  <bfulgham@apple.com>
    216

  • trunk/Source/WebCore/ChangeLog

    r214378 r214381  
     12017-03-24  Antoine Quint  <graouts@webkit.org>
     2
     3        [Modern Media Controls] Captions don't move with the appearance of the inline controls
     4        https://bugs.webkit.org/show_bug.cgi?id=170051
     5        <rdar://problem/30754428>
     6
     7        Reviewed by Dean Jackson.
     8
     9        We now size the captions container to account for the controls bar height when visible. To do this,
     10        we use CSS variables to specify the height of the controls bar in default inline mode, compact inline
     11        mode and fullscreen mode.
     12
     13        Test: media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html
     14
     15        * Modules/modern-media-controls/controls/controls-bar.js:
     16        (ControlsBar.prototype.set faded):
     17        Notify the hosting MediaControls that the "faded" property changed.
     18
     19        * Modules/modern-media-controls/controls/ios-inline-media-controls.css:
     20        (.media-controls.ios.inline > .controls-bar):
     21        Use the new --inline-controls-bar-height CSS variable to specify the inline bar height.
     22
     23        * Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css:
     24        (.media-controls.mac.inline.compact > .controls-bar):
     25        Use the new --inline-compact-controls-bar-height CSS variable to specify the inline bar height.
     26
     27        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
     28        (.media-controls.mac.fullscreen > .controls-bar):
     29        Use the new --fullscreen-controls-bar-height CSS variable to specify the inline bar height.
     30
     31        * Modules/modern-media-controls/controls/macos-inline-media-controls.css:
     32        (.media-controls.mac.inline > .controls-bar):
     33        Use the new --inline-controls-bar-height CSS variable to specify the inline bar height.
     34
     35        * Modules/modern-media-controls/controls/media-controls.css:
     36        (*):
     37        Specify new CSS variables for the various controls bar heights.
     38
     39        * Modules/modern-media-controls/controls/media-controls.js:
     40        (MediaControls.prototype.controlsBarFadedStateDidChange):
     41        Notify the delegate of a controls bar "faded" property change.
     42
     43        * Modules/modern-media-controls/controls/text-tracks.css:
     44        (video::-webkit-media-text-track-container):
     45        (video::-webkit-media-text-track-container.visible-controls-bar):
     46        (video::-webkit-media-text-track-container.visible-controls-bar.compact-controls-bar):
     47        (video::-webkit-media-text-track-display):
     48        Shorten the height of the captions container when the controls bar is visible. We also
     49        fix a couple of prefixed properties that didn't need to be.
     50
     51        * Modules/modern-media-controls/media/media-controller.js:
     52        (MediaController.prototype.controlsBarFadedStateDidChange):
     53        (MediaController.prototype._updateControlsIfNeeded):
     54        (MediaController.prototype._updateTextTracksClassList):
     55        (MediaController):
     56        Ensure we reflect the "faded" state of the controls bar on the captions container using
     57        a CSS class, as well as whether the controls bar mode is compact.
     58
    1592017-03-24  Brent Fulgham  <bfulgham@apple.com>
    260

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

    r212868 r214381  
    149149
    150150        this.markDirtyProperty("faded");
     151
     152        this._mediaControls.controlsBarFadedStateDidChange();
    151153    }
    152154

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

    r213417 r214381  
    3030    right: 0;
    3131    bottom: 0;
    32     height: 50px;
     32    height: var(--inline-controls-bar-height);
    3333}
    3434

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

    r213172 r214381  
    2727
    2828.media-controls.mac.inline.compact > .controls-bar {
    29     height: 25px;
     29    height: var(--inline-compact-controls-bar-height);
    3030}
    3131

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

    r214258 r214381  
    3838    bottom: 25px;
    3939    width: var(--controls-bar-width);
    40     height: 75px;
     40    height: var(--fullscreen-controls-bar-height);
    4141}
    4242

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

    r213641 r214381  
    3030    bottom: 0;
    3131    width: 100%;
    32     height: 50px;
     32    height: var(--inline-controls-bar-height);
    3333}
    3434

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

    r213670 r214381  
    3434    min-width: 200px !important;
    3535    min-height: 50px !important;
     36}
     37
     38* {
     39    --inline-controls-bar-height: 50px;
     40    --inline-compact-controls-bar-height: 25px;
     41    --fullscreen-controls-bar-height: 75px;
    3642}
    3743

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

    r214282 r214381  
    186186    }
    187187
     188    controlsBarFadedStateDidChange()
     189    {
     190        if (this.delegate && typeof this.delegate.controlsBarFadedStateDidChange === "function")
     191            this.delegate.controlsBarFadedStateDidChange();
     192    }
     193
    188194    layoutTraitsDidChange()
    189195    {

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

    r209431 r214381  
    2525
    2626video::-webkit-media-text-track-container {
    27     bottom: 50px;
    2827    overflow: hidden;
    2928    padding-bottom: 5px;
    … …  
    4140    -webkit-user-select: none;
    4241
    43     -webkit-flex: 1 1 auto;
     42    flex: 1 1 auto;
    4443
    4544    -webkit-line-box-contain: block inline-box replaced;
     45}
     46
     47video::-webkit-media-text-track-container.visible-controls-bar {
     48    height: calc(100% - var(--inline-controls-bar-height));
     49}
     50
     51video::-webkit-media-text-track-container.visible-controls-bar.compact-controls-bar {
     52    height: calc(100% - var(--inline-compact-controls-bar-height));
    4653}
    4754
    … …  
    5461    overflow: hidden;
    5562    white-space: pre-wrap;
    56     -webkit-box-sizing: border-box;
     63    box-sizing: border-box;
    5764    font: 22px sans-serif;
    5865}

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

    r214282 r214381  
    103103    }
    104104
     105    controlsBarFadedStateDidChange()
     106    {
     107        this._updateTextTracksClassList();
     108    }
     109
    105110    macOSControlsBackgroundWasClicked()
    106111    {
    … …  
    143148        if (previousControls && previousControls.constructor === ControlsClass) {
    144149            this.controls.layoutTraits = layoutTraits;
     150            this._updateTextTracksClassList();
    145151            this._updateControlsSize();
    146152            return;
    … …  
    168174
    169175        this.controls.layoutTraits = layoutTraits;
     176        this._updateTextTracksClassList();
    170177        this._updateControlsSize();
    171178
    … …  
    202209    }
    203210
     211    _updateTextTracksClassList()
     212    {
     213        if (!this.host)
     214            return;
     215
     216        const layoutTraits = this.layoutTraits;
     217        if (layoutTraits & LayoutTraits.Fullscreen)
     218            return;
     219
     220        this.host.textTrackContainer.classList.toggle("visible-controls-bar", !this.controls.controlsBar.faded);
     221        this.host.textTrackContainer.classList.toggle("compact-controls-bar", !!(layoutTraits & LayoutTraits.Compact));
     222    }
     223
    204224}
Note: See TracChangeset for help on using the changeset viewer.