fix(audio-player): hide menu when playback rates are not set (VIV-1845)…

… (#1815)

libs/components/src/lib/audio-player/audio-player.spec.ts

@@ -496,26 +496,26 @@ describe('vwc-audio-player', () => {
 			expect(element.playbackRates).toBe(null);
 		});
 
-		it('should hide playbackRates button as default', async () => {
-			expect(getPlaybackRatesButton()).toBeNull();
+		it('should hide playbackRates menu as default', async () => {
+			expect(getPlaybackRatesMenuElement()).toBeNull();
 		});
 
-		it('should hide playbackRates button when attribute is removed', async () => {
+		it('should hide playbackRates menu when attribute is removed', async () => {
 			element.playbackRates = DEFAULT_PLAYBACK_RATES;
 			await elementUpdated(element);
 			element.removeAttribute('playback-rates');
 			await elementUpdated(element);
 
-			expect(getPlaybackRatesButton()).toBeNull();
+			expect(getPlaybackRatesMenuElement()).toBeNull();
 		});
 
-		it('should hide playbackRates button when empty', async () => {
+		it('should hide playbackRates menu when empty', async () => {
 			element.playbackRates = DEFAULT_PLAYBACK_RATES;
 			await elementUpdated(element);
 			element.playbackRates = '';
 			await elementUpdated(element);
 
-			expect(getPlaybackRatesButton()).toBeNull();
+			expect(getPlaybackRatesMenuElement()).toBeNull();
 		});
 
 		it('should set class playback on base when playbackRates is truthy', async () => {
@@ -556,7 +556,9 @@ describe('vwc-audio-player', () => {
 			);
 		});
 
-		it('should start with a closed menu item', () => {
+		it('should start with a closed menu item', async () => {
+			element.playbackRates = DEFAULT_PLAYBACK_RATES;
+			await elementUpdated(element);
 			expect(getPlaybackRatesMenuElement()?.hasAttribute('open')).toBe(false);
 		});
 

libs/components/src/lib/audio-player/audio-player.template.ts

@@ -163,30 +163,31 @@ export const AudioPlayerTemplate: (
 				${when((x) => !x.notime, renderTimestamp())}
 			</div>
 			${renderSlider(context)}
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss>
-				${when(
-					(x) => Boolean(x.playbackRates),
-					html`<${buttonTag} id="playback-open-button"
+			${when(
+				(x) => Boolean(x.playbackRates),
+				html`
+			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu">
+				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"
 							  icon="playback-speed-line"
 							  aria-label="play back rates"
 							  size='condensed'
 							  connotation="${(x) => x.connotation}"
 							  ?disabled="${(x) => x.disabled || !x.duration}"
-				></${buttonTag}>`
-				)}
+				></${buttonTag}>
+
 				${repeat(
-					(x) =>
-						x.playbackRates ? getPlaybackRatesArray(x.playbackRates) : [],
+					(x) => getPlaybackRatesArray(x.playbackRates),
 					html<number>`<${menuItemTag} @click="${handlePlaybackRateClick}"
-                          role="menuitemradio"
-												 class="playback-rate"
-												 text="${(x) => x}"
-												 check-appearance="tick-only"
-												 ?checked="${isMenuItemChekced}"></${menuItemTag}>`
+																			 role="menuitemradio"
+																			 class="playback-rate"
+																			 text="${(x) => x}"
+																			 check-appearance="tick-only"
+																			 ?checked="${isMenuItemChekced}"></${menuItemTag}>`
 				)}
-			</${menuTag}>
+			</${menuTag}>`
+			)}
 		</div>
 	</div>`;
 };