feat(vwc-audio): audio disabled state (VIV-873)

components/audio/src/vwc-audio.scss

@@ -7,6 +7,7 @@
 @use '@vonage/vvd-foundation/scss/mixins/connotation' as connotation;
 @use '@vonage/vwc-media-controller/src/partials/vwc-media-controller-variables' as media-controls-variables;
 
+$disabled: var(--vvd-color-neutral-50);
 
 :host {
  *:focus:not(:focus-visible) {
@@ -38,15 +39,33 @@
  cursor: pointer;
 
  > .icon {
- color: var(#{connotation.$vvd-color-connotation});
+ color: inherit;
+ }
+ }
+
+ &.disabled.connotation-cta,
+ &.disabled:not(.connotation-cta) {
+ > .scrubber {
+ #{media-controls-variables.$vwc-media-controls-scrubber-color}: #{$disabled};
+ pointer-events: none;
+ }
+ > .control-button {
+ > .icon {
+ --connotation: #{$disabled};
+ }
+ }
+ > .playhead-position {
+ color: var(#{scheme-variables.$vvd-color-neutral-40});
  }
  }
 
  > .playhead-position {
+
  overflow: hidden;
  width: 90px;
  box-sizing: border-box;
  justify-content: center;
+ color: var(#{scheme-variables.$vvd-color-on-canvas});
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-overflow: ellipsis;

components/audio/src/vwc-audio.ts

@@ -82,6 +82,9 @@ export class VWCAudio extends LitElement {
  @property({ type: Boolean, reflect: true })
  timestamp = false;
 
+ @property({ type: Boolean, reflect: true })
+ disabled = false;
+
  @internalProperty()
  private _duration = 0;
 
@@ -136,6 +139,7 @@ export class VWCAudio extends LitElement {
  protected getRenderClasses(): ClassInfo {
  return {
  [`connotation-${this.connotation}`]: !!this.connotation,
+ ['disabled']: this.disabled,
  loading: this._loading
  };
  }
@@ -148,6 +152,7 @@ export class VWCAudio extends LitElement {
  <button
  aria-label="Play/Pause"
  class="control-button"
+ .disabled=${this.disabled}
  @click="${() => (this._isPlaying ? this.pause : this.play).call(this)}"
  >
  <vwc-icon

components/audio/stories/audio.stories.js

@@ -39,3 +39,5 @@ export const NoSeek = StoryShell({ noseek: true });
 export const TimeStamp = StoryShell({ timestamp: true });
 
 export const TimeStampNoSeek = StoryShell({ timestamp: true, noseek: true });
+
+export const Disabled = StoryShell({ disabled: true });

components/audio/test/audio.test.js

@@ -32,6 +32,38 @@ describe('vwc-audio', () => {
  expect(actualElement.src).to.eq(url);
  });
 
+ describe('disabled', function () {
+ it('should init as false', function () {
+ const [audioElement] = addElements(textToDomToParent(`<vwc-audio></vwc-audio>`));
+ expect(audioElement.disabled).to.eq(false);
+ });
+
+ it('should reflect the attribute', async function () {
+ const [audioElement] = addElements(textToDomToParent(`<vwc-audio disabled></vwc-audio>`));
+ await audioElement.updateComplete;
+ expect(audioElement.disabled).to.eq(true);
+ });
+
+ it('should set the disabled attribute', async function () {
+ const [audioElement] = addElements(textToDomToParent(`<vwc-audio></vwc-audio>`));
+ audioElement.disabled = true;
+ await audioElement.updateComplete;
+ expect(audioElement.hasAttribute('disabled')).to.eq(true);
+ });
+
+ it('should remove the attribute', async function () {
+ const [audioElement] = addElements(textToDomToParent(`<vwc-audio disabled></vwc-audio>`));
+ audioElement.disabled = false;
+ await audioElement.updateComplete;
+ expect(audioElement.hasAttribute('disabled')).to.eq(false);
+ });
+
+ it('should set disabled class on the audio controls wrapper', async function () {
+ const [audioElement] = addElements(textToDomToParent(`<vwc-audio disabled></vwc-audio>`));
+ await audioElement.updateComplete;
+ expect(audioElement.shadowRoot.querySelector('.audio').classList.contains('disabled')).to.eq(true);
+ });
+ });
  describe('scrub-bar', function () {
  it(`should not show scrub-bar if noseek is set`, async function () {
  const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio noseek></vwc-audio>`));

ui-tests/tests/vwc-audio/index.js

@@ -9,9 +9,22 @@ export async function createElementVariations(wrapper) {
  `
 <vwc-audio timestamp></vwc-audio>
 <vwc-audio connotation="primary"></vwc-audio>
-<vwc-audio noseek="true"></vwc-audio>`;
+<vwc-audio id="infinity-duration" timestamp></vwc-audio>
+<vwc-audio timestamp connotation="primary"></vwc-audio>
+<vwc-audio noseek="true"></vwc-audio>
+<vwc-audio disabled connotation="primary"></vwc-audio>
+<vwc-audio disabled connotation="cta" timestamp></vwc-audio>
+`;
+
  wrapper.appendChild(testWrapper);
 
+ const audio = document.querySelector('#infinity-duration');
+ await audio.updateComplete;
+ Object.defineProperty(audio._audio, 'duration', {value: Infinity});
+ audio._audio.dispatchEvent(new Event('loadedmetadata'));
+
+ await audio.updateComplete;
+
  await vvdCore.settled;
 }