[Summary view] [Print] [Text view]

   1  // packages/block-library/build-module/playlist/view.mjs
   2  import { store, getContext, getElement } from "@wordpress/interactivity";
   3  store(
   4    "core/playlist",
   5    {
   6      state: {
   7        playlists: {},
   8        get currentTrack() {
   9          const { currentId, playlistId } = getContext();
  10          if (!currentId || !playlistId) {
  11            return {};
  12          }
  13          const playlist = this.playlists[playlistId];
  14          if (!playlist) {
  15            return {};
  16          }
  17          return playlist.tracks[currentId] || {};
  18        },
  19        get isCurrentTrack() {
  20          const { currentId, uniqueId } = getContext();
  21          return currentId === uniqueId;
  22        }
  23      },
  24      actions: {
  25        changeTrack() {
  26          const context = getContext();
  27          context.currentId = context.uniqueId;
  28          context.isPlaying = true;
  29        },
  30        isPlaying() {
  31          const context = getContext();
  32          context.isPlaying = true;
  33        },
  34        isPaused() {
  35          const context = getContext();
  36          context.isPlaying = false;
  37        },
  38        nextSong() {
  39          const context = getContext();
  40          const currentIndex = context.tracks.findIndex(
  41            (uniqueId) => uniqueId === context.currentId
  42          );
  43          const nextTrack = context.tracks[currentIndex + 1];
  44          if (nextTrack) {
  45            context.currentId = nextTrack;
  46            const { ref } = getElement();
  47            setTimeout(() => {
  48              ref.play();
  49            }, 1e3);
  50          }
  51        }
  52      },
  53      callbacks: {
  54        autoPlay() {
  55          const context = getContext();
  56          const { ref } = getElement();
  57          if (context.currentId && context.isPlaying) {
  58            ref.play();
  59          }
  60        }
  61      }
  62    },
  63    { lock: true }
  64  );