muzika-gromche/Frontend/src/router.ts

import LibraryPage from "@/routes/LibraryPage.vue";
import PlayerPage from "@/routes/PlayerPage.vue";
import { computed, type ComputedRef, nextTick, shallowRef } from "vue";
import { createRouter, createWebHashHistory, useRoute } from "vue-router";
import type { AudioTrack } from "./lib/AudioTrack";

const routes = [
  {
    path: "/",
    component: LibraryPage,
    meta: {
      title() {
        return "Library";
      },
    },
  },
  {
    path: "/track/:trackName",
    component: PlayerPage,
    meta: {
      title() {
        const trackName = router.currentRoute.value.params["trackName"] ??
          "No track selected";
        return trackName;
      },
    },
  },
];

export const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export const DEFAULT_TITLE = "MuzikaGromche";
const titleRef = shallowRef("");

router.afterEach((to, _from) => {
  const route = useRoute();
  let title = "";
  if (typeof to.meta.title === "function") {
    title = to.meta.title(route);
  }
  titleRef.value = title;
  nextTick(() => {
    const documentTitle = title ? `${title} — ${DEFAULT_TITLE}` : DEFAULT_TITLE;
    document.title = documentTitle;
  });
});

export function useTitle(): ComputedRef<string> {
  return computed(() => titleRef.value);
}

export function openTrack(track: AudioTrack) {
  router.push(`/track/${track.Name}`);
}