Move the background into the icon

BKWLD · Aug 14, 2024 · de1fd13 · de1fd13
1 parent 1ed4293
commit de1fd13
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/packages/react/cypress/component/LazyVideo.cy.tsx b/packages/react/cypress/component/LazyVideo.cy.tsx
@@ -107,4 +107,16 @@ describe('Accessibility controls', () => {
     cy.get("button").should('not.exist')
   })
 
+  it('can have custom icons', () => {
+    cy.mount(
+      <LazyVideo
+        src="https://placehold.co/300x200.mp4"
+        alt="Accessibility controls test"
+        playIcon={() => <span>Play</span>}
+        pauseIcon={() => <span>Pause</span>}
+      />
+    );
+    cy.get('button').contains('Pause')
+  })
+
 })
diff --git a/packages/react/src/LazyVideo/AccessibilityControls.tsx b/packages/react/src/LazyVideo/AccessibilityControls.tsx
@@ -12,10 +12,6 @@ const minAccessibleBtnSize = 24
 // How far from the edge to position the button
 const positionGutter = '1em'
 
-// How transparent to make the button background
-// https://chatgpt.com/share/1050ddc4-5d2f-4a50-a5f6-623b7b679184
-const backgroundOpacity = 0.25
-
 type AccessibilityControlsProps = Pick<LazyVideoProps,
   'paused' |
   'playIcon' |
@@ -56,10 +52,6 @@ export default function AccessibilityControls({ play,
         lineHeight: 0,
         padding: 0,
 
-        // Give it a background
-        background: `rgba(0, 0, 0, ${backgroundOpacity})`,
-        color: "white",
-
         // Position the button
         position: "absolute",
         ...makePosition(accessibilityControlsPosition),
@@ -122,12 +114,13 @@ function PauseIcon() {
     <svg
       width={minAccessibleBtnSize}
       height={minAccessibleBtnSize}
-      viewBox='0 0 24 24'
-      xmlns='http://www.w3.org/2000/svg'
-      aria-hidden='true'
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      style={iconStyle}
     >
-      <rect x='6' y='4' width='4' height='16' fill='currentColor' />
-      <rect x='14' y='4' width='4' height='16' fill='currentColor' />
+      <rect x="6" y="4" width="4" height="16" fill="currentColor" />
+      <rect x="14" y="4" width="4" height="16" fill="currentColor" />
     </svg>
   );
 }
@@ -137,11 +130,20 @@ function PlayIcon() {
     <svg
       width={minAccessibleBtnSize}
       height={minAccessibleBtnSize}
-      viewBox='0 0 24 24'
-      xmlns='http://www.w3.org/2000/svg'
-      aria-hidden='true'
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      style={iconStyle}
     >
-      <polygon points='8,4 20,12 8,20' fill='currentColor' />
+      <polygon points="9,4 19,12 9,20" fill="currentColor" />
     </svg>
   );
 }
+
+// Make the default icons white on a semi-transparent black background
+// https://chatgpt.com/share/1050ddc4-5d2f-4a50-a5f6-623b7b679184
+const iconStyle = {
+  background: `rgba(0, 0, 0, 0.25)`,
+  color: "white",
+  borderRadius: "2px",
+};