Changeset 272438 in webkit

Timestamp:

Feb 5, 2021, 2:31:52 PM (4 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:

• ChangeLog (modified) (1 diff)
• Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (modified) (1 diff)
• Modules/modern-media-controls/controls/macos-inline-media-controls.js (modified) (1 diff)
• Modules/modern-media-controls/controls/slider.css (modified) (2 diffs)
• Modules/modern-media-controls/controls/slider.js (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-02-05  Devin Rousso  <drousso@apple.com>
+
+        [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.
+
 2021-02-05  Sam Weinig  <weinig@apple.com>
 

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

@@ -48 +48 @@
         this.volumeSlider = new Slider("volume");
         this.volumeSlider.width = 60;
-        this.volumeSlider.secondaryValue = 1;
 
         this._leftContainer = new ButtonsContainer({

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

@@ -41 +41 @@
         this.volumeSlider = new Slider("volume");
         this.volumeSlider.width = 60;
-        this.volumeSlider.secondaryValue = 1;
 
         this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);

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

@@ -51 +51 @@
 }
 
-.slider > .custom-slider > .primary {
+.slider > .custom-slider > .fill.primary {
     left: 0;
     background-color: rgba(255, 255, 255, 0.45);
@@ -58 +58 @@
 }
 
-.slider > .custom-slider > .secondary {
-    background-color: rgba(255, 255, 255, 0.18);
+.slider > .custom-slider > .fill.track {
+    right: 0;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-top-right-radius: 4.5px;
+    border-bottom-right-radius: 4.5px;
+}
+
+.slider > .custom-slider > .fill.secondary {
+    background-color: rgba(255, 255, 255, 0.08);
     border-top-right-radius: 4.5px;
     border-bottom-right-radius: 4.5px;

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

@@ -33 +33 @@
         this._container = new LayoutNode(`<div class="custom-slider"></div>`);
         this._primaryFill = new LayoutNode(`<div class="primary fill"></div>`);
+        this._trackFill = new LayoutNode(`<div class="track fill"></div>`);
         this._secondaryFill = new LayoutNode(`<div class="secondary fill"></div>`);
         this._knob = new LayoutNode(`<div class="knob ${knobStyle}"></div>`);
-        this._container.children = [this._primaryFill, this._secondaryFill, this._knob];
+        this._container.children = [this._primaryFill, this._trackFill, this._secondaryFill, this._knob];
 
         this._input = new LayoutNode(`<input type="range" min="0" max="1" step="0.001" />`);
@@ -147 +148 @@
         let scrubberCenterX = (scrubberWidth / 2) + Math.round((this.width - scrubberWidth) * this.value);
         this._primaryFill.element.style.width = `${scrubberCenterX - (scrubberWidth / 2) - scrubberBorder}px`;
+        this._trackFill.element.style.left = `${scrubberCenterX + (scrubberWidth / 2) + scrubberBorder}px`;
         this._secondaryFill.element.style.left = `${scrubberCenterX + (scrubberWidth / 2) + scrubberBorder}px`;
         this._secondaryFill.element.style.right = `${(1 - this._secondaryValue) * 100}%`;