fix(Vanilla Video): Improve player appearance with rounded corners A/B

[marcustyphoon]

Description

chat is this stupid? chat?

before	after

idk, is there a better way to do this?

Testing steps

With the rounded corners A/B flag, confirm that... audio posts... look... better?

[marcustyphoon]

Hmmmmnope, the Chrome audio player doesn't look like this.

[marcustyphoon]

Kind of works; should actually use a div around the chrome player so that if it ever loses its rounded corners only its background is rounded on the bottom edges, not the player itself.

But using clientHeight to feature detect an audio player is pretty stupid anyway, so eh, this whole thing might be a dead end.

diff --git a/src/features/vanilla_audio/index.css b/src/features/vanilla_audio/index.css
index bf6d8f1c..4a782f9f 100644
--- a/src/features/vanilla_audio/index.css
+++ b/src/features/vanilla_audio/index.css
@@ -11,6 +11,22 @@ .xkit-vanilla-audio-done ~ audio[controls] {
   width: 100%;
 }
 
+.xkit-vanilla-audio-done:is(.xkit-vanilla-audio-firefox, .xkit-vanilla-audio-chromium) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.xkit-vanilla-audio-done:is(.xkit-vanilla-audio-firefox, .xkit-vanilla-audio-chromium) ~ audio[controls] {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.xkit-vanilla-audio-chromium ~ audio[controls] {
+  padding: 6px;
+  box-sizing: border-box;
+  background: var(--content-tint-strong);
+}
+
 /* XKit 7 override */
 
 .xkit-vanilla-audio-done ~ .xkit-audio-plus-slider-container,
diff --git a/src/features/vanilla_audio/index.js b/src/features/vanilla_audio/index.js
index 6008211c..8669c46d 100644
--- a/src/features/vanilla_audio/index.js
+++ b/src/features/vanilla_audio/index.js
@@ -7,6 +7,8 @@ const trackInfoSelector = keyToCss('trackInfo');
 let defaultVolume;
 
 const excludeClass = 'xkit-vanilla-audio-done';
+const firefoxLayoutClass = 'xkit-vanilla-audio-firefox';
+const chromiumLayoutClass = 'xkit-vanilla-audio-chromium';
 
 const addAudioControls = nativePlayers => nativePlayers.forEach(nativePlayer => {
   if (nativePlayer.classList.contains(excludeClass)) return;
@@ -22,6 +24,16 @@ const addAudioControls = nativePlayers => nativePlayers.forEach(nativePlayer =>
   audioClone.controls = true;
   audioClone.volume = defaultVolume / 100;
   nativePlayer.parentNode.appendChild(audioClone);
+
+  if (nativePlayer.matches(`${keyToCss('hasRoundedCorners')} > *`)) {
+    const { clientHeight } = audioClone;
+    console.log('clientHeight', clientHeight);
+    if (clientHeight === 40) {
+      nativePlayer.classList.add(firefoxLayoutClass);
+    } else if (clientHeight === 54) {
+      nativePlayer.classList.add(chromiumLayoutClass);
+    }
+  }
 });
 
 export const onStorageChanged = async function (changes) {

[AprilSylph]

How does it look on Chrome with the current code? (← Sign of unabashed laziness that I ask this instead of just installing it to see for myself)

[marcustyphoon]

master	unmodified pr

[marcustyphoon]

Desktop Safari native audio player height, for reference: 31px. Screenshot without rounded corners:

Design-wise, probably best if it floats a few pixels away, but the thing I did for Chrome above could work, maybe.

I was going to say we could simply set the audio player to background: #F2F3F4; which would do nothing on Firefox and would fill out the corners on chromium until/unless the chromium native player was redesigned, but that would look stupid here, and there might be other audio player variants too (dark mode! mobile devices! idk!)

[marcustyphoon]

Modifying the DOM structure to make the code more—that word that means "the same in different situations" that I forget... homomorphic?

diff --git a/src/features/vanilla_audio/index.css b/src/features/vanilla_audio/index.css
index bf6d8f1c..d120aaf3 100644
--- a/src/features/vanilla_audio/index.css
+++ b/src/features/vanilla_audio/index.css
@@ -7,8 +7,20 @@ .xkit-vanilla-audio-done .trackInfo {
   padding-left: 20px;
 }
 
-.xkit-vanilla-audio-done ~ audio[controls] {
+.xkit-vanilla-audio-done {
+  display: flex;
+  flex-direction: column;
+}
+
+.xkit-vanilla-audio-done.xkit-vanilla-audio-done > div:has(> audio) {
+  position: unset;
+}
+
+.xkit-vanilla-audio-done > audio[controls] {
+  display: block;
   width: 100%;
+  background: linear-gradient(var(--content-tint-heavy), var(--content-tint-heavy)), var(--content-panel);
+  /* set border-box and add padding or whatever */
 }
 
 /* XKit 7 override */
diff --git a/src/features/vanilla_audio/index.js b/src/features/vanilla_audio/index.js
index 6008211c..5990af66 100644
--- a/src/features/vanilla_audio/index.js
+++ b/src/features/vanilla_audio/index.js
@@ -21,7 +21,7 @@ const addAudioControls = nativePlayers => nativePlayers.forEach(nativePlayer =>
   const audioClone = audio.cloneNode(true);
   audioClone.controls = true;
   audioClone.volume = defaultVolume / 100;
-  nativePlayer.parentNode.appendChild(audioClone);
+  nativePlayer.appendChild(audioClone);
 });
 
 export const onStorageChanged = async function (changes) {

[marcustyphoon]

Options that I can think of that are... somewhat viable?

• Just set border-radius: 8px; margin-top: 2px; or whatever on ${keyToCss('hasRoundedCorners')} > .${excludeClass} ~ audio[controls] unconditionally

• Make the default style margin-top: 2px;, check for clientHeight === 40, and if it is, remove it and apply the style currently in the PR