@wordpress/block-library/build-module/playlist/view.mjs

Block library for the WordPress editor.

// packages/block-library/src/playlist/view.js
import { store, getContext, getElement } from "@wordpress/interactivity";
import {
  initWaveformPlayer,
  logPlayError,
  setupPlayButtonArtwork,
  updateSeekControlLabel
} from "../utils/waveform-utils.mjs";
var playerState = /* @__PURE__ */ new WeakMap();
var playlistPlayerState = /* @__PURE__ */ new Map();
var { state } = store(
  "core/playlist",
  {
    state: {
      playlists: {},
      get isCurrentTrack() {
        const { currentId, trackId } = getContext();
        return currentId === trackId;
      },
      get isCurrentTrackPlaying() {
        const { currentId, isPlaying, trackId } = getContext();
        return currentId === trackId && !!isPlaying;
      },
      get trackButtonActionLabel() {
        const { labelPauseTrack, labelSelectTrack } = getContext();
        return state.isCurrentTrackPlaying ? labelPauseTrack : labelSelectTrack;
      }
    },
    actions: {
      changeTrack() {
        const context = getContext();
        if (context.currentId === context.trackId) {
          const player = playlistPlayerState.get(
            context.playlistId
          )?.instance;
          if (player?.isPlaying) {
            context.isPlaying = false;
            player.pause();
          } else {
            player?.play()?.catch(logPlayError);
          }
          return;
        }
        context.isPlaying = false;
        context.currentId = context.trackId;
      }
    },
    callbacks: {
      initWaveformPlayer() {
        const context = getContext();
        const { ref } = getElement();
        if (!context.currentId || !ref) {
          return;
        }
        const track = state.playlists[context.playlistId]?.tracks[context.currentId];
        if (!track?.url) {
          return;
        }
        const existing = playerState.get(ref);
        if (existing?.url === track.url) {
          return;
        }
        const shouldAutoPlay = !!existing?.url;
        initPlayer(ref, track, shouldAutoPlay, context);
      }
    }
  },
  { lock: true }
);
function initPlayer(ref, track, shouldAutoPlay, context) {
  const existing = playerState.get(ref);
  const showPlayButtonArtwork = context.showPlayButtonArtwork === true;
  const playerArtwork = showPlayButtonArtwork ? "" : track.image;
  if (existing?.instance) {
    const shouldRecreatePlayer = !!existing.instance.artworkEl !== !!playerArtwork;
    if (shouldRecreatePlayer) {
      existing.destroy?.();
      playerState.delete(ref);
    } else {
      playlistPlayerState.set(context.playlistId, existing);
      existing.instance.loadTrack(track.url, track.title, track.artist, {
        artwork: playerArtwork,
        artworkAlt: playerArtwork ? track.imageAlt : ""
      }).then(() => {
        existing.url = track.url;
        if (existing.instance.artworkEl) {
          existing.instance.artworkEl.alt = track.imageAlt || "";
        }
        updateSeekControlLabel(
          existing.instance,
          track.title || ref.dataset.labelSeek
        );
        if (showPlayButtonArtwork) {
          setupPlayButtonArtwork(
            existing.container,
            track.image
          );
        }
        if (shouldAutoPlay) {
          existing.instance.play()?.catch(logPlayError);
        }
      }).catch(logPlayError);
      return;
    }
  }
  const labels = {
    play: ref.dataset.labelPlay,
    pause: ref.dataset.labelPause,
    seek: ref.dataset.labelSeek,
    seekValueText: ref.dataset.labelSeekValue
  };
  const player = initWaveformPlayer(ref, {
    src: track.url,
    title: track.title,
    artist: track.artist,
    image: track.image,
    imageAlt: track.imageAlt,
    waveformColor: ref.dataset.waveformPlayerColor,
    waveformGradient: ref.dataset.waveformPlayerGradient,
    backgroundColor: ref.dataset.waveformPlayerBackgroundColor,
    backgroundGradient: ref.dataset.waveformPlayerBackgroundGradient,
    autoPlay: shouldAutoPlay,
    labels,
    waveformStyle: context.waveformStyle,
    showPlayButtonArtwork,
    onEnded: () => {
      const currentIndex = context.tracks.findIndex(
        (trackId) => trackId === context.currentId
      );
      const nextTrack = context.tracks[currentIndex + 1];
      if (nextTrack) {
        context.currentId = nextTrack;
      }
    }
  });
  const setIsPlaying = (isPlaying) => {
    context.isPlaying = isPlaying;
  };
  const onPlay = () => setIsPlaying(true);
  const onPause = () => setIsPlaying(false);
  player.container.addEventListener("waveformplayer:play", onPlay);
  player.container.addEventListener("waveformplayer:pause", onPause);
  player.container.addEventListener("waveformplayer:ended", onPause);
  const destroy = () => {
    player.container.removeEventListener("waveformplayer:play", onPlay);
    player.container.removeEventListener("waveformplayer:pause", onPause);
    player.container.removeEventListener("waveformplayer:ended", onPause);
    player.destroy();
  };
  const nextState = {
    url: track.url,
    instance: player.instance,
    container: player.container,
    destroy
  };
  playerState.set(ref, nextState);
  playlistPlayerState.set(context.playlistId, nextState);
}
//# sourceMappingURL=view.mjs.map