designtopack/src/components/project/PdfViewer.vue

<template>
  <VPdfViewer
    v-if="!isViewerDisabled"
    :darkMode="true"
    :initialThumbnailsVisible="true"
    :src="openedFile.url"
    local="fr_FR"
    @loaded="onPdfLoaded"
  />
  <button
    id="toggle-comments"
    :aria-pressed="isCommentsOpen"
    class="btn btn--transparent btn--outline"
    data-icon="comment"
    @click="isCommentsOpen = !isCommentsOpen"
  >
    <span class="sr-only"
      >{{ isCommentsOpen ? "Masquer" : "Afficher" }} les commentaires</span
    >
  </button>
  <Comments v-if="isCommentsOpen" />
</template>

<script setup>
import Comments from "../comments/Comments.vue";
import { ref, watch } from "vue";
import { useDialogStore } from "../../stores/dialog";
import { storeToRefs } from "pinia";
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
import { useRoute, useRouter } from "vue-router";

const licenseKey = import.meta.env.VITE_VPV_LICENSE ?? 'd0ab730a-ebba-4060-856c-76d322565645';
useLicense({ licenseKey });

const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
  useDialogStore()
);

const currentPageIndex = ref(1);

// Functions
const onPdfLoaded = () => {
  const wrapper = document.querySelector(".vpv-pages-inner-container");

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry, index) => {
        if (entry.intersectionRatio > 0.5) {
          currentPageIndex.value = parseInt(
            entry.target.getAttribute("aria-label").split(" ")[1]
          );
        }
      });
    },
    {
      root: wrapper,
      threshold: [0.5],
    }
  );

  const observePages = () => {
    const pages = document.querySelectorAll(".vpv-page-inner-container");
    pages.forEach((page) => {
      if (!page.__observed__) {
        observer.observe(page);
        page.__observed__ = true;
      }
    });
  };

  const mutationObserver = new MutationObserver(() => {
    observePages();
  });

  if (wrapper) {
    mutationObserver.observe(wrapper, { childList: true, subtree: true });
  }

  observePages();
};
</script>

<style scoped>
@import "../../assets/css/src/2.blocks.pdf-viewer.css";
</style>