@aidenlx/player/dist/media/manage/MediaSyncElement.js

Headless web components that make integrating media on the a web a breeze.

import {
  __decorateClass
} from "../../chunks/chunk.S6UZ27SZ.js";
import { debounce, DisposalBin, eventListener, listen, vdsEvent } from "@vidstack/foundation";
import { html, LitElement } from "lit";
import { property } from "lit/decorators.js";
const mediaProviders = /* @__PURE__ */ new Set();
let syncingMediaPlayback = false;
let syncingMediaVolume = false;
class MediaSyncElement extends LitElement {
  constructor() {
    super(...arguments);
    this.singlePlayback = false;
    this.sharedVolume = false;
    this._mediaProviderDisposal = new DisposalBin();
    this._handleMediaProviderConnect = eventListener(this, "vds-media-provider-connect", (event) => {
      const { element, onDisconnect } = event.detail;
      this._mediaProvider = element;
      mediaProviders.add(element);
      const savedVolume = this._getSavedMediaVolume();
      if (savedVolume) {
        this._mediaProvider.volume = savedVolume.volume;
        this._mediaProvider.muted = savedVolume.muted;
      }
      if (this.singlePlayback) {
        const off = listen(element, "vds-play", this._handleMediaPlay.bind(this));
        this._mediaProviderDisposal.add(off);
      }
      if (this.sharedVolume) {
        const off = listen(element, "vds-volume-change", debounce(this._handleMediaVolumeChange.bind(this), 10, true));
        this._mediaProviderDisposal.add(off);
      }
      if (this.volumeStorageKey) {
        const off = listen(element, "vds-volume-change", this._saveMediaVolume.bind(this));
        this._mediaProviderDisposal.add(off);
      }
      this._mediaProviderDisposal.add(() => {
        mediaProviders.delete(element);
        this._mediaProvider = void 0;
      });
      onDisconnect(() => {
        this._mediaProviderDisposal.empty();
      });
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this._mediaProviderDisposal.empty();
  }
  render() {
    return html`<slot></slot>`;
  }
  get mediaProvider() {
    return this._mediaProvider;
  }
  _handleMediaPlay() {
    if (syncingMediaPlayback)
      return;
    syncingMediaPlayback = true;
    mediaProviders.forEach((provider) => {
      if (provider !== this._mediaProvider) {
        provider.paused = true;
      }
    });
    syncingMediaPlayback = false;
  }
  _handleMediaVolumeChange(event) {
    if (syncingMediaVolume)
      return;
    syncingMediaVolume = true;
    const { volume, muted } = event.detail;
    mediaProviders.forEach((provider) => {
      if (provider !== this._mediaProvider) {
        provider.volume = volume;
        provider.muted = muted;
      }
    });
    this.dispatchEvent(vdsEvent("vds-media-volume-sync", {
      bubbles: true,
      composed: true,
      detail: event.detail
    }));
    syncingMediaVolume = false;
  }
  _getSavedMediaVolume() {
    if (!this.volumeStorageKey)
      return;
    try {
      return JSON.parse(localStorage.getItem(this.volumeStorageKey));
    } catch (e) {
      return void 0;
    }
  }
  _saveMediaVolume(event) {
    if (!this.volumeStorageKey)
      return;
    localStorage.setItem(this.volumeStorageKey, JSON.stringify(event.detail));
  }
}
__decorateClass([
  property({ type: Boolean, attribute: "single-playback" })
], MediaSyncElement.prototype, "singlePlayback", 2);
__decorateClass([
  property({ type: Boolean, attribute: "shared-volume" })
], MediaSyncElement.prototype, "sharedVolume", 2);
__decorateClass([
  property({ attribute: "volume-storage-key" })
], MediaSyncElement.prototype, "volumeStorageKey", 2);
export {
  MediaSyncElement
};
//# sourceMappingURL=MediaSyncElement.js.map