Skip to content
Permalink
Browse files
Move BottomControlsBarHeight and InsideMargin to be computed at runtime
https://bugs.webkit.org/show_bug.cgi?id=227505
<rdar://problem/79932256>

Reviewed by Devin Rousso.

Rather than having two JS constants that have to be kept in sync
with CSS, simply retrieve the value from the computed style.

No change in behaviour.

* Modules/modern-media-controls/controls/inline-media-controls.js:
(InlineMediaControls.prototype.layout):
* Modules/modern-media-controls/controls/media-controls.css:
(:host(audio), :host(video.media-document.audio), *):
* Modules/modern-media-controls/controls/layout-node.js: Add two helpers to
retrive computed style values.

Canonical link: https://commits.webkit.org/239334@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@279481 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
grorg committed Jul 1, 2021
1 parent c6acfc8 commit 13a52d99944c90084128220cbfc8061b41329f03
Showing 5 changed files with 47 additions and 8 deletions.
@@ -1,3 +1,23 @@
2021-07-01 Dean Jackson <dino@apple.com>

Move BottomControlsBarHeight and InsideMargin to be computed at runtime
https://bugs.webkit.org/show_bug.cgi?id=227505
<rdar://problem/79932256>

Reviewed by Devin Rousso.

Rather than having two JS constants that have to be kept in sync
with CSS, simply retrieve the value from the computed style.

No change in behaviour.

* Modules/modern-media-controls/controls/inline-media-controls.js:
(InlineMediaControls.prototype.layout):
* Modules/modern-media-controls/controls/media-controls.css:
(:host(audio), :host(video.media-document.audio), *):
* Modules/modern-media-controls/controls/layout-node.js: Add two helpers to
retrive computed style values.

2021-07-01 Brady Eidson <beidson@apple.com>

HIDGamepadProvider adds an extra 50ms to all inputs
@@ -23,9 +23,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

const InsideMargin = 6; // Minimum margin to guarantee around all controls, this constant needs to stay in sync with the --inline-controls-inside-margin CSS variable.
const BottomControlsBarHeight = 31; // This constant needs to stay in sync with the --inline-controls-bar-height CSS variable.

class InlineMediaControls extends MediaControls
{

@@ -133,7 +130,9 @@ class InlineMediaControls extends MediaControls
this.topLeftControlsBar.visible = this._topLeftControlsBarContainer.children.some(button => button.visible);

// Compute the visible size for the controls bar.
this.bottomControlsBar.width = this._shouldUseAudioLayout ? this.width : (this.width - 2 * InsideMargin);
if (!this._inlineInsideMargin)
this._inlineInsideMargin = this.computedValueForStylePropertyInPx("--inline-controls-inside-margin");
this.bottomControlsBar.width = this._shouldUseAudioLayout ? this.width : (this.width - 2 * this._inlineInsideMargin);

// Compute the absolute minimum width to display the center control (status label or time control).
const centerControl = this.statusLabel.enabled ? this.statusLabel : this.timeControl;
@@ -218,7 +217,9 @@ class InlineMediaControls extends MediaControls

// Ensure we position the bottom controls bar at the bottom of the frame, accounting for
// the inside margin, unless this would yield a position outside of the frame.
this.bottomControlsBar.y = Math.max(0, this.height - BottomControlsBarHeight - InsideMargin);
if (!this._inlineBottomControlsBarHeight)
this._inlineBottomControlsBarHeight = this.computedValueForStylePropertyInPx("--inline-controls-bar-height");
this.bottomControlsBar.y = Math.max(0, this.height - this._inlineBottomControlsBarHeight - this._inlineInsideMargin);

this.bottomControlsBar.children = controlsBarChildren;
if (!this._shouldUseAudioLayout && !this._shouldUseSingleBarLayout)
@@ -229,6 +229,21 @@ class LayoutNode
this._updateDirtyState();
}

computedValueForStyleProperty(propertyName)
{
return window.getComputedStyle(this.element).getPropertyValue(propertyName);
}

computedValueForStylePropertyInPx(propertyName)
{
const value = this.computedValueForStyleProperty(propertyName);
if (!value)
return 0;
if (!value.endsWith("px"))
return 0;
return parseFloat(value);
}

// Protected

layout()
@@ -59,8 +59,13 @@ class MacOSInlineMediaControls extends InlineMediaControls
if (!this._volumeSliderContainer)
return;

if (!this._inlineInsideMargin)
this._inlineInsideMargin = this.computedValueForStylePropertyInPx("--inline-controls-inside-margin");
if (!this._inlineBottomControlsBarHeight)
this._inlineBottomControlsBarHeight = this.computedValueForStylePropertyInPx("--inline-controls-bar-height");

this._volumeSliderContainer.x = this.rightContainer.x + this.muteButton.x;
this._volumeSliderContainer.y = this.bottomControlsBar.y - BottomControlsBarHeight - InsideMargin;
this._volumeSliderContainer.y = this.bottomControlsBar.y - this._inlineBottomControlsBarHeight - this._inlineInsideMargin;
}

get preferredMuteButtonStyle()
@@ -37,15 +37,13 @@
}

* {
/* This constant needs to stay in sync with the InsideMargin JS constant. */
--inline-controls-inside-margin: 6px;
--fullscreen-controls-bar-height: 75px;
--primary-glyph-color: rgba(255, 255, 255, 0.75);
--secondary-glyph-color: rgba(255, 255, 255, 0.55);
}

:host(audio), :host(video.media-document.audio), * {
/* This constant needs to stay in sync with the BottomControlsBarHeight JS constant. */
--inline-controls-bar-height: 31px;
}

0 comments on commit 13a52d9

Please sign in to comment.