Title: [272438] trunk/Source/WebCore
- Revision
- 272438
- Author
- [email protected]
- Date
- 2021-02-05 14:31:52 -0800 (Fri, 05 Feb 2021)
Log 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.
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (272437 => 272438)
--- trunk/Source/WebCore/ChangeLog 2021-02-05 21:16:34 UTC (rev 272437)
+++ trunk/Source/WebCore/ChangeLog 2021-02-05 22:31:52 UTC (rev 272438)
@@ -1,3 +1,32 @@
+2021-02-05 Devin Rousso <[email protected]>
+
+ [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 <[email protected]>
Generalize color conversion code to reduce number of overloads required
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (272437 => 272438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2021-02-05 21:16:34 UTC (rev 272437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2021-02-05 22:31:52 UTC (rev 272438)
@@ -47,7 +47,6 @@
this.volumeSlider = new Slider("volume");
this.volumeSlider.width = 60;
- this.volumeSlider.secondaryValue = 1;
this._leftContainer = new ButtonsContainer({
children: this._volumeControlsForCurrentDirection(),
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (272437 => 272438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2021-02-05 21:16:34 UTC (rev 272437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2021-02-05 22:31:52 UTC (rev 272438)
@@ -40,7 +40,6 @@
this.volumeSlider = new Slider("volume");
this.volumeSlider.width = 60;
- this.volumeSlider.secondaryValue = 1;
this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);
this._volumeSliderContainer.children = [new BackgroundTint, this.volumeSlider];
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css (272437 => 272438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css 2021-02-05 21:16:34 UTC (rev 272437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css 2021-02-05 22:31:52 UTC (rev 272438)
@@ -50,7 +50,7 @@
mix-blend-mode: plus-lighter;
}
-.slider > .custom-slider > .primary {
+.slider > .custom-slider > .fill.primary {
left: 0;
background-color: rgba(255, 255, 255, 0.45);
border-top-left-radius: 4.5px;
@@ -57,12 +57,19 @@
border-bottom-left-radius: 4.5px;
}
-.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;
+}
+
.slider > .custom-slider > .knob {
background-color: white;
transform: translateX(-50%);
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js (272437 => 272438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2021-02-05 21:16:34 UTC (rev 272437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2021-02-05 22:31:52 UTC (rev 272438)
@@ -32,9 +32,10 @@
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" />`);
this._input.element.addEventListener("pointerdown", this);
@@ -146,6 +147,7 @@
let scrubberBorder = this._knobStyle === Slider.KnobStyle.Bar ? 1 : (-1 * scrubberWidth / 2);
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}%`;
this._knob.element.style.left = `${scrubberCenterX}px`;
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
