Changeset 272438 in webkit


Ignore:
Timestamp:
Feb 5, 2021 2:31:52 PM (3 years ago)
Author:
Devin Rousso
Message:

[macOS] REGRESSION(r272352): missing track for videos that haven't fully loaded
https://bugs.webkit.org/show_bug.cgi?id=221500

Reviewed by Eric Carlson.

r272352 removed the .track.fill that was used as a "background" for the slider. For videos
that aren't fully loaded and are buffering, that "background" is necessary to indicate where
the slider is as the .track.secondary only represents what's been buffered not the entire
length of the video/slider.

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

(Slider.prototype.commit):

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

(.slider > .custom-slider > .fill.primary): Added.
(.slider > .custom-slider > .fill.track): Added.
(.slider > .custom-slider > .fill.secondary): Added.
(.slider > .custom-slider > .primary): Deleted.
(.slider > .custom-slider > .secondary): Deleted.
Add back the background fill track removed in r272352, but adjust it so that it only draws
after the knob so that on macOS it doesn't draw in the space around the knob.

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

(MacOSFullscreenMediaControls):

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

(MacOSInlineMediaControls):
Remove the secondaryValue calls since the background fill track has been added back.

Location:
trunk/Source/WebCore
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r272436 r272438  
     12021-02-05  Devin Rousso  <drousso@apple.com>
     2
     3        [macOS] REGRESSION(r272352): missing track for videos that haven't fully loaded
     4        https://bugs.webkit.org/show_bug.cgi?id=221500
     5
     6        Reviewed by Eric Carlson.
     7
     8        r272352 removed the `.track.fill` that was used as a "background" for the slider. For videos
     9        that aren't fully loaded and are buffering, that "background" is necessary to indicate where
     10        the slider is as the `.track.secondary` only represents what's been buffered not the entire
     11        length of the video/slider.
     12
     13        * Modules/modern-media-controls/controls/slider.js:
     14        (Slider.prototype.commit):
     15        * Modules/modern-media-controls/controls/slider.css:
     16        (.slider > .custom-slider > .fill.primary): Added.
     17        (.slider > .custom-slider > .fill.track): Added.
     18        (.slider > .custom-slider > .fill.secondary): Added.
     19        (.slider > .custom-slider > .primary): Deleted.
     20        (.slider > .custom-slider > .secondary): Deleted.
     21        Add back the background fill track removed in r272352, but adjust it so that it only draws
     22        after the knob so that on macOS it doesn't draw in the space around the knob.
     23
     24        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
     25        (MacOSFullscreenMediaControls):
     26        * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
     27        (MacOSInlineMediaControls):
     28        Remove the `secondaryValue` calls since the background fill track has been added back.
     29
    1302021-02-05  Sam Weinig  <weinig@apple.com>
    231
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js

    r272375 r272438  
    4848        this.volumeSlider = new Slider("volume");
    4949        this.volumeSlider.width = 60;
    50         this.volumeSlider.secondaryValue = 1;
    5150
    5251        this._leftContainer = new ButtonsContainer({
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js

    r272352 r272438  
    4141        this.volumeSlider = new Slider("volume");
    4242        this.volumeSlider.width = 60;
    43         this.volumeSlider.secondaryValue = 1;
    4443
    4544        this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css

    r272352 r272438  
    5151}
    5252
    53 .slider > .custom-slider > .primary {
     53.slider > .custom-slider > .fill.primary {
    5454    left: 0;
    5555    background-color: rgba(255, 255, 255, 0.45);
     
    5858}
    5959
    60 .slider > .custom-slider > .secondary {
    61     background-color: rgba(255, 255, 255, 0.18);
     60.slider > .custom-slider > .fill.track {
     61    right: 0;
     62    background-color: rgba(255, 255, 255, 0.1);
     63    border-top-right-radius: 4.5px;
     64    border-bottom-right-radius: 4.5px;
     65}
     66
     67.slider > .custom-slider > .fill.secondary {
     68    background-color: rgba(255, 255, 255, 0.08);
    6269    border-top-right-radius: 4.5px;
    6370    border-bottom-right-radius: 4.5px;
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js

    r272352 r272438  
    3333        this._container = new LayoutNode(`<div class="custom-slider"></div>`);
    3434        this._primaryFill = new LayoutNode(`<div class="primary fill"></div>`);
     35        this._trackFill = new LayoutNode(`<div class="track fill"></div>`);
    3536        this._secondaryFill = new LayoutNode(`<div class="secondary fill"></div>`);
    3637        this._knob = new LayoutNode(`<div class="knob ${knobStyle}"></div>`);
    37         this._container.children = [this._primaryFill, this._secondaryFill, this._knob];
     38        this._container.children = [this._primaryFill, this._trackFill, this._secondaryFill, this._knob];
    3839
    3940        this._input = new LayoutNode(`<input type="range" min="0" max="1" step="0.001" />`);
     
    147148        let scrubberCenterX = (scrubberWidth / 2) + Math.round((this.width - scrubberWidth) * this.value);
    148149        this._primaryFill.element.style.width = `${scrubberCenterX - (scrubberWidth / 2) - scrubberBorder}px`;
     150        this._trackFill.element.style.left = `${scrubberCenterX + (scrubberWidth / 2) + scrubberBorder}px`;
    149151        this._secondaryFill.element.style.left = `${scrubberCenterX + (scrubberWidth / 2) + scrubberBorder}px`;
    150152        this._secondaryFill.element.style.right = `${(1 - this._secondaryValue) * 100}%`;
Note: See TracChangeset for help on using the changeset viewer.