ControlBar.vue

<script lang="ts" setup>
import {
  state,
  getPlaylist,
  addTrackToPlaylist,
  setPlaylistIndex,
} from "~/stores/playlist";
import { watch } from "vue";
import type { Track } from "~/types/getTrack";

let audioPlayer = ref<HTMLAudioElement | null>(null);
let trackData = ref<Track | null>(null);
let mediaData;
const bulkTrackData = ref(null);
const isPlaying = ref(true);
const isShuffled = ref(false);
const isLooped = ref(false);
const musicBarWidth = ref(0);
const currentTime = ref(0);
const currentVolume = ref(1);

const playlist = computed({
  get: () => state.playlist,
  set: (value) => addTrackToPlaylist(value[0]),
});

const index = computed({
  get: () => state.playlistIndex,
  set: (value) => setPlaylistIndex(value),
});

const getTrackData = (trackId: string) => {
  fetch(
    "https://audius-discovery-1.altego.net/v1/tracks/" +
      trackId +
      "?app_name=GENESIS-TM",
    {
      method: "GET",
    }
  )
    .then((response) => response.json())
    .then((data) => {
      if (data && data.data) {
        trackData.value = data.data;
        setupMediaSession(data.data);
      } else {
        console.error("Track data not found");
      }
    })
    .catch((error) => {
      console.error(error);
    });
};

const getBulkData = () => {
  fetch(
    "https://audius-discovery-1.altego.net/v1/tracks?" +
      state.playlist.map((item: any) => `id=${item}`).join("&") +
      "&app_name=GENESIS-TM",
    {
      method: "GET",
    }
  )
    .then((response) => response.json())
    .then((data) => {
      if (data && data.data) {
        bulkTrackData.value = data.data;
      } else {
        console.error("Bulk track data not found");
      }
    })
    .catch((error) => {
      console.error(error);
    });
};

watch(index, (newValue, oldValue) => {
  //console.log("Index updated", newValue, oldValue);
  audioPlayer.value = new Audio(
    "https://audius-discovery-4.theblueprint.xyz/v1/tracks/" +
      state.playlist[state.playlistIndex] +
      "/stream"
  );
  audioPlayer.value?.addEventListener("ended", handleNextTrack);
  audioPlayer.value?.addEventListener("timeupdate", updateMusicBar);
  if (audioPlayer.value) {
    audioPlayer.value.volume = currentVolume.value;
  }
  audioPlayer.value?.play();
  getTrackData(state.playlist[state.playlistIndex]);
});

watch(state.playlist, (newValue, oldValue) => {
  if (state.playlistIndex === -1) {
    setPlaylistIndex(0);
  }
  getBulkData();
});

const updateMusicBar = () => {
  currentTime.value = audioPlayer.value?.currentTime ?? 0;
  musicBarWidth.value = audioPlayer.value?.duration
    ? (audioPlayer.value.currentTime / audioPlayer.value.duration) * 100
    : 0;
};

const handleNextTrack = () => {
  const currentIndex = state.playlistIndex;
  const nextIndex = currentIndex + 1;

  if (nextIndex < playlist.value.length) {
    setPlaylistIndex(nextIndex);
  } else {
    if (isLooped.value === true) {
      if (currentIndex === 0) {
        if (audioPlayer.value) {
          audioPlayer.value.currentTime = 0;
        }
        audioPlayer.value?.play();
        console.log("Looping the playlist, but a single track is playing");
      } else {
        setPlaylistIndex(0);
        console.log("Looping the playlist");
      }
    } else {
      console.log("Reached the end of the playlist");
    }
  }
};

const playPauseButton = () => {
  if (audioPlayer.value?.paused) {
    audioPlayer.value?.play();
  } else {
    audioPlayer.value?.pause();
  }
  isPlaying.value = !isPlaying.value;
};

const shuffleButton = () => {
  isShuffled.value = !isShuffled.value;
};

const loopButton = () => {
  isLooped.value = !isLooped.value;
};

const skipTrack = () => {
  if (state.playlistIndex + 1 < playlist.value.length) {
    audioPlayer.value?.pause();
    setPlaylistIndex(state.playlistIndex + 1);
  }
};

const redoTrack = () => {
  if (state.playlistIndex > 0) {
    audioPlayer.value?.pause();
    setPlaylistIndex(state.playlistIndex - 1);
  }
};

const updateCurrentVolume = () => {
  if (audioPlayer.value) {
    audioPlayer.value.volume = currentVolume.value;
  }
};

function setupMediaSession(superTrackData: any) {
  if (navigator.mediaSession) {
    navigator.mediaSession.metadata = new MediaMetadata({
      title: superTrackData.title,
      artist: superTrackData.user.name + " on GENESIS™",
      artwork: [
        {
          src: superTrackData.artwork["480x480"],
          sizes: "96x96",
          type: "image/png",
        },
        {
          src: superTrackData.artwork["480x480"],
          sizes: "256x256",
          type: "image/png",
        },
      ],
    });

    navigator.mediaSession.setActionHandler("play", () => {
      audioPlayer.value?.play();
    });
    navigator.mediaSession.setActionHandler("pause", () => {
      audioPlayer.value?.pause();
    });

    navigator.mediaSession.setActionHandler("previoustrack", () => {
      redoTrack();
    });
    navigator.mediaSession.setActionHandler("nexttrack", () => {
      skipTrack();
    });
  }
}
</script>

<template>
  <div v-if="state.playlistIndex != -1">
    <div
      class="fixed bottom-0 left-0 z-50 grid w-full h-24 grid-cols-1 px-4 bg-base-300 border-t-2 border-primary-content md:grid-cols-3"
    >
      <div class="items-center justify-center hidden me-auto md:flex">
        <img
          class="h-12 me-3 rounded"
          :src="trackData?.artwork?.['480x480'] || '/music-banner.jpg'"
          :alt="trackData?.title"
        />
        <div class="inline-block leading-none">
          <span class="text-sm">
            <NuxtLink :to="'/track/' + trackData?.id">
              <Icon name="ph:music-note-fill" /> {{ trackData?.title }}
            </NuxtLink>
          </span>
          <br />
          <span class="text-sm">
            <NuxtLink :to="`/handle/${trackData?.user?.handle}`">
              <Icon name="ph:person-fill" /> {{ trackData?.user?.name }}
            </NuxtLink>
          </span>
        </div>
      </div>
      <div class="flex items-center w-full">
        <div class="w-full">
          <div class="flex items-center justify-center mx-auto mb-1 self-end">
            <button
              data-tooltip-target="tooltip-expand"
              type="button"
              onclick="sound_modal_3.showModal()"
              class="p-2.5 mr-8 md:hidden group rounded-full hover:bg-gray-100 me-1 dark:hover:bg-gray-600"
            >
              <Icon
                name="streamline:volume-level-high-solid"
                class="text-primary"
              />
              <span class="sr-only">Adjust Volume</span>
            </button>
            <dialog id="sound_modal_1" class="modal">
              <div
                class="absolute modal-box w-5 left-4 bottom-8 p-0 m-0 rounded-sm"
                style="height: 136px"
              >
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.1"
                  orient="vertical"
                  class="translate-y-1"
                  style="writing-mode: vertical-lr; direction: rtl"
                  v-model="currentVolume"
                  @input="updateCurrentVolume()"
                />
              </div>
              <form method="dialog" class="modal-backdrop">
                <button>close</button>
              </form>
            </dialog>

            <dialog id="sound_modal_3" class="modal">
              <div
                class="absolute bottom-28 modal-box flex items-center gap-2 p-2 rounded-lg w-10/12"
              >
                <Icon name="streamline:volume-mute-solid" />
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.01"
                  class="range"
                  v-model="currentVolume"
                  @input="updateCurrentVolume()"
                />
                <Icon name="streamline:volume-level-high-solid" />
              </div>
              <form method="dialog" class="modal-backdrop">
                <button>close</button>
              </form>
            </dialog>

            <div class="tooltip" data-tip="Not Implemented">
              <button
                data-tooltip-target="tooltip-shuffle"
                type="button"
                class="p-2.5 group rounded-full me-1"
              >
                <Icon
                  name="streamline:play-list-folder-solid"
                  class="text-error"
                />
                <span class="sr-only">Add to Playlist</span>
              </button>
            </div>

            <button
              @click="redoTrack()"
              data-tooltip-target="tooltip-previous"
              type="button"
              class="p-2.5 group rounded-full"
            >
              <Icon
                name="streamline:button-previous-solid"
                class="text-primary"
              />
              <span class="sr-only">Previous Song</span>
            </button>

            <button
              @click="playPauseButton()"
              data-tooltip-target="tooltip-pause"
              type="button"
              class="inline-flex items-center justify-center p-2.5 mx-2 font-medium bg-primary rounded-lg"
            >
              <Icon
                :name="
                  audioPlayer?.paused
                    ? 'streamline:button-play-solid'
                    : 'streamline:button-pause-2-solid'
                "
                class="text-primary-content"
              />
              <span class="sr-only">Pause Song</span>
            </button>

            <button
              @click="skipTrack()"
              data-tooltip-target="tooltip-next"
              type="button"
              class="p-2.5 group rounded-full"
            >
              <Icon name="streamline:button-next-solid" class="text-primary" />
              <span class="sr-only">Next Song</span>
            </button>

            <div class="tooltip" data-tip="Not Implemented">
              <button
                data-tooltip-target="tooltip-restart"
                type="button"
                class="p-2.5 group rounded-full"
              >
                <Icon
                  name="streamline:hearts-symbol-solid"
                  class="text-error"
                />
                <span class="sr-only">Add to Favorites</span>
              </button>
            </div>

            <button
              data-tooltip-target="tooltip-volume"
              type="button"
              onclick="queue_modal.showModal()"
              class="p-2.5 ml-8 md:hidden group rounded-lg bg-base-100 hover:bg-gray-100 dark:hover:bg-gray-600"
            >
              <Icon name="ph:playlist-bold" class="text-primary" />
              {{ playlist.length }}
              <span class="sr-only">Open Queue</span>
            </button>
            <dialog id="queue_modal" class="modal">
              <div class="modal-box h-96 w-96 relative overflow-y-auto">
                <h3 class="font-bold text-lg">My Queue</h3>
                <div v-if="state.playlistIndex != -1">
                  <template v-if="bulkTrackData">
                    <div v-for="track in bulkTrackData" :key="track">
                      <SongCardMinimal :trackParsedData="track" />
                    </div>
                  </template>
                </div>
                <div class="flex justify-center gap-2 z-10 sticky bottom-0">
                  <button
                    @click="shuffleButton()"
                    data-tooltip-target="tooltip-captions"
                    type="button"
                    class="btn w-1/2 inline-block p-0 rounded-lg text-error z-20"
                  >
                    <Icon name="streamline:shuffle-solid" class="text-error" />
                    Shuffle Tracks
                  </button>
                  <button
                    @click="loopButton()"
                    data-tooltip-target="tooltip-captions"
                    type="button"
                    :class="[
                      isLooped
                        ? 'btn btn-success w-1/2 inline-block p-0 rounded-lg z-20'
                        : 'btn btn-default w-1/2 inline-block p-0 rounded-lg z-20',
                    ]"
                  >
                    <Icon
                      name="streamline:arrow-infinite-loop-solid"
                      :class="[isLooped ? 'text-primary' : 'text-secondary']"
                    />
                    Loop Tracks
                  </button>
                </div>
              </div>
              <form method="dialog" class="modal-backdrop">
                <button>close</button>
              </form>
            </dialog>
          </div>

          <div
            class="flex items-center justify-between space-x-2 rtl:space-x-reverse"
          >
            <span
              class="text-sm font-medium text-gray-500 dark:text-gray-400 inline-flex"
            >
              {{
                new Date(currentTime * 1000).toISOString().substring(14, 19)
              }}</span
            >
            <div class="w-full bg-base-100 rounded-full h-1.5">
              <div
                class="bg-primary h-1.5 rounded-full"
                :style="{ width: musicBarWidth + '%' }"
              ></div>
            </div>
            <span
              class="text-sm font-medium text-gray-500 dark:text-gray-400 inline-flex"
            >
              {{
                trackData?.duration
                  ? new Date(trackData.duration * 1000)
                      .toISOString()
                      .substring(14, 19)
                  : "00:00"
              }}</span
            >
          </div>
        </div>
      </div>

      <div class="items-center justify-center hidden ms-auto md:flex">
        <div class="tooltip" data-tip="Not Implemented">
          <button
            data-tooltip-target="tooltip-playlist"
            type="button"
            class="p-2.5 group rounded-full hover:bg-gray-100 me-1 dark:hover:bg-gray-600"
          >
            <Icon name="streamline:shuffle-solid" class="text-error" />
            <span class="sr-only">Shuffle Tracks</span>
          </button>
        </div>

        <button
          @click="loopButton()"
          class="p-2.5 group rounded-full hover:bg-gray-100 me-1 dark:hover:bg-gray-600"
        >
          <Icon
            name="streamline:arrow-infinite-loop-solid"
            :class="[isLooped ? 'text-primary' : 'texttext-secondary']"
          />
          <span class="sr-only">Loop Tracks</span>
        </button>

        <button
          onclick="sound_modal_3.showModal()"
          class="p-2.5 group rounded-full hover:bg-gray-100 me-1 dark:hover:bg-gray-600"
        >
          <Icon
            name="streamline:volume-level-high-solid"
            class="text-primary"
          />
          <span class="sr-only">Adjust Volume</span>
        </button>

        <dialog id="sound_modal_2" class="modal">
          <div
            class="absolute modal-box w-3 right-12 bottom-8 p-0 m-0 rounded-sm"
            style="height: 136px"
          >
            <input
              type="range"
              min="0"
              max="1"
              step="0.1"
              orient="vertical"
              class="translate-y-1"
              style="writing-mode: vertical-lr; direction: rtl"
              v-model="currentVolume"
              @input="updateCurrentVolume()"
            />
          </div>
          <form method="dialog" class="modal-backdrop">
            <button>close</button>
          </form>
        </dialog>

        <button
          onclick="queue_modal.showModal()"
          class="p-2.5 group rounded-lg bg-base-100 hover:bg-gray-100 dark:hover:bg-gray-600"
        >
          <Icon name="ph:playlist-bold" class="text-primary" />
          {{ playlist.length }}
          <span class="sr-only">Open Queue</span>
        </button>
      </div>
    </div>
  </div>
</template>