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>
  <a
    id="download-pdf"
    class="btn btn--transparent btn--outline"
    data-icon="download"
    :href="openedFile.url"
    download
  >
    <span class="sr-only">Télécharger le fichier PDF</span>
  </a>
  <Comments v-if="isCommentsOpen" />
</template>

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

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>