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,36 @@
  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};
+ --disable-scrub: #{$disabled};
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+ > .control-button {
+ > .icon {
+ --connotation: #{$disabled};
+ cursor: not-allowed;
+ }
+ }
+ > .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

@@ -26,10 +26,60 @@ describe('vwc-audio', () => {
  expect(audioElement instanceof VWCAudio).to.eq(true);
  });
 
- it(`should set the src property if src attribute is set`, async function () {
- const url = 'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_5MG.mp3';
- const [actualElement] = addElements(textToDomToParent(`<vwc-audio src="${url}"></vwc-audio>`));
- expect(actualElement.src).to.eq(url);
+
+ describe('src', function () {
+ it(`should set the src property if src attribute is set`, async function () {
+ const url = 'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_5MG.mp3';
+ const [actualElement] = addElements(textToDomToParent(`<vwc-audio src="${url}"></vwc-audio>`));
+ expect(actualElement.src).to.eq(url);
+ });
+ });
+
+ describe('currentTime', function () {
+ it('should set and get currentTime', async function () {
+ let expectation = 10;
+ const [audioElement] = addElements(textToDomToParent(`<vwc-audio></vwc-audio>`));
+ await audioElement.updateComplete;
+ audioElement.currentTime = expectation;
+ const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+ if (isSafari) {
+ expectation = 0;
+ }
+ expect(audioElement.currentTime).to.eq(expectation);
+ });
+ });
+
+ 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 () {

components/media-controller/src/vwc-scrub-bar.ts

@@ -10,8 +10,8 @@ import { style as vwcScrubBarStyle } from './vwc-scrub-bar.css.js';
 const SIGNAL = Symbol('signal'),
  TRACK_KNOB_HORIZONTAL_MARGIN = 5,
  TRACK_VERTICAL_RESPONSIVITY_MARGIN = 10,
- TRACK_INACTIVE_COLOR = '#E1E2E6',
- TRACK_ACTIVE_COLOR = '#999',
+ TRACK_INACTIVE_COLOR = 'var(--disable-scrub, #E1E2E6)',
+ TRACK_ACTIVE_COLOR = 'var(--disable-scrub, #999)',
  KEY_LEFT = 'ArrowLeft',
  KEY_RIGHT = 'ArrowRight';
 

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;
 }