fix(audio-player): use rh-icon instead of custom svg for scrubbers

.changeset/spotty-steaks-decide.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-audio-player>`: updated icons to use rh-icon

elements/rh-audio-player/rh-audio-player.css

@@ -114,10 +114,8 @@ rh-audio-player-rate-stepper {
   width: auto;
 }
 
-svg.scrubber {
-  fill: var(--_text-color);
-  height: var(--_svg-size);
-  width: var(--_svg-size);
+.scrubber {
+  color: var(--_text-color);
   padding: var(--_icon-padding);
 }
 
@@ -353,7 +351,8 @@ input[type='range'] {
 #full-play-tooltip,
 #mute-tooltip,
 #close-tooltip,
-#menu-tooltip {
+#menu-tooltip,
+.scrubber {
   --rh-icon-size: var(--rh-size-icon-02, 24px);
 }
 
@@ -444,11 +443,30 @@ rh-menu > button:focus {
   text-align: right;
 }
 
-#play,
-#full-play {
-  border-radius: 50%;
-  background-color: var(--_surface-color);
-  color: var(--rh-audio-player-icon-background-color, var(--_text-color));
+#full-play::part(button) {
+  width: var(--_button-size);
+  height: var(--_button-size);
+}
+
+#play::part(button) {
+  --rh-icon-size: var(--rh-size-icon-01, 16px);
+
+  width: var(--_button-size);
+  height: var(--_button-size);
+}
+
+#play::part(button),
+#full-play::part(button) {
+  /* danger! overwriting an rh-button internal var, do what I say not as I do. */
+  --_play-background-color: var(--rh-color-surface-darkest, #151515);
+}
+
+.dark {
+  #play::part(button),
+  #full-play::part(button) {
+    /* danger! overwriting an rh-button internal var, do what I say not as I do. */
+    --_play-background-color: var(--rh-color-surface-lightest, #ffffff);
+  }
 }
 
 .expanded {

elements/rh-audio-player/rh-audio-player.ts

@@ -29,7 +29,7 @@ import buttonStyles from './rh-audio-player-button.css';
 import rangeStyles from './rh-audio-player-range-styles.css';
 import styles from './rh-audio-player.css';
 
-import '@rhds/elements/rh-surface/rh-surface.js';
+import '@rhds/elements/rh-button/rh-button.js';
 import '@rhds/elements/rh-tooltip/rh-tooltip.js';
 import '@rhds/elements/rh-icon/rh-icon.js';
 
@@ -366,8 +366,8 @@ export class RhAudioPlayer extends LitElement {
     const accentColor = !!this.#styles?.getPropertyValue('--rh-audio-player-background-color');
 
     return html`
-      <rh-surface id="container"
-          color-palette="${ifDefined(this.colorPalette)}"
+      <div id="container"
+          color-palette="${ifDefined(this.colorPalette ?? this.on)}"
           class="${classMap({
               [on]: true,
               [dir]: true,
@@ -389,14 +389,13 @@ export class RhAudioPlayer extends LitElement {
              aria-label="Media Controls">${!poster ? '' : html`
           <div id="poster"><img .src="${poster}" aria-hidden="true"></div>`}
           <rh-tooltip id="play-tooltip">
-            <button id="play"
+            <rh-button variant="play" id="play"
                     aria-label="${playlabel}"
                     class="toolbar-button"
                     ?disabled=${!this.#mediaElement || playdisabled}
                     @click=${this.#onPlayClick}
                     @focus=${this.#onPlayFocus}>
-              <rh-icon set="ui" icon="${this.paused ? 'play-fill' : 'pause-fill'}"></rh-icon>
-            </button>
+            </rh-button>
             <span slot="content">${playlabel}</span>
           </rh-tooltip>
 
@@ -484,27 +483,19 @@ export class RhAudioPlayer extends LitElement {
                     class="toolbar-button"
                     ?disabled=${rewinddisabled}
                     @click=${() => this.rewind()}>
-              <svg xmlns="http://www.w3.org/2000/svg"
-                   viewBox="0 0 32 32"
-                   class="scrubber"
-                   role="presentation">
-                <path d="M10.4,19.5h1.8v-5l-1.8,0.8v-1l2.2-0.9h0.7v6.2h1.9v1h-4.8V19.5z"/>
-                <path d="M16.4,19.6l0.7-0.8c0.6,0.5,1.2,0.8,1.9,0.8c0.9,0,1.5-0.6,1.5-1.4c0-0.8-0.6-1.3-1.5-1.3 c-0.5,0-0.9,0.1-1.4,0.4L16.8,17l0.2-3.7h4.3v1h-3.3l-0.1,2c0.5-0.2,1-0.3,1.5-0.3c1.4,0,2.4,0.9,2.4,2.1c0,1.4-1.1,2.4-2.7,2.4 C18,20.5,17.1,20.2,16.4,19.6z"/>
-                <path d="M4,6.6L9.5,2v3.7h7.4c6.1,0,11.1,5,11.1,11.1c0,6.1-5,11.1-11.1,11.1H9.5V26h1.8h5.5 c5.1,0,9.2-4.1,9.2-9.2c0-5.1-4.1-9.2-9.2-9.2h-5.5H9.5v3.7L4,6.6z"/>
-              </svg>
+              <rh-icon set="ui" icon="undo" class="scrubber"></rh-icon>
             </button>
             <span slot="content">${this.#translation.get('rewind')}</span>
           </rh-tooltip>
 
           <rh-tooltip id="full-play-tooltip">
-            <button id="full-play"
+            <rh-button variant="play" id="full-play"
                     aria-label="${playlabel}"
                     class="toolbar-button"
                     ?disabled=${!this.#mediaElement || playdisabled}
                     @click=${this.#onPlayClick}
                     @focus=${this.#onPlayFocus}>
-              <rh-icon set="ui" icon="${this.paused ? 'play-fill' : 'pause-fill'}"></rh-icon>
-            </button>
+            </rh-button>
             <span slot="content">${playlabel}</span>
           </rh-tooltip>
 
@@ -514,14 +505,7 @@ export class RhAudioPlayer extends LitElement {
                     class="toolbar-button"
                     ?disabled=${forwarddisabled}
                     @click=${() => this.forward()}>
-              <svg xmlns="http://www.w3.org/2000/svg"
-                   viewBox="0 0 32 32"
-                   class="scrubber"
-                   role="presentation">
-                <path d="M10.4,19.5h1.8v-5l-1.8,0.8v-1l2.2-0.9h0.7v6.2h1.9v1h-4.8V19.5z"/>
-                <path d="M16.4,19.6l0.7-0.8c0.6,0.5,1.2,0.8,1.9,0.8c0.9,0,1.5-0.6,1.5-1.4c0-0.8-0.6-1.3-1.5-1.3 c-0.5,0-0.9,0.1-1.4,0.4L16.8,17l0.2-3.7h4.3v1h-3.3l-0.1,2c0.5-0.2,1-0.3,1.5-0.3c1.4,0,2.4,0.9,2.4,2.1c0,1.4-1.1,2.4-2.7,2.4 C18,20.5,17.1,20.2,16.4,19.6z"/>
-                <path d="M28,6.6L22.4,2v3.7h-7.4C9,5.7,4,10.6,4,16.7c0,6.1,5,11.1,11.1,11.1h7.4V26h-1.8h-5.5c-5.1,0-9.2-4.1-9.2-9.2 c0-5.1,4.1-9.2,9.2-9.2h5.5h1.8v3.7L28,6.6z"/>
-              </svg>
+              <rh-icon set="ui" icon="redo" class="scrubber"></rh-icon>
             </button>
             <span slot="content">${this.#translation.get('advance')}</span>
           </rh-tooltip>`}${!this.#hasMenu ? '' : html`
@@ -600,7 +584,7 @@ export class RhAudioPlayer extends LitElement {
                 @transcriptdownload=${this.#onTranscriptDownload}>
           </slot>
         </div>
-      </rh-surface>
+      </div>
     `;
   }