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>
@import "../../assets/css/src/2.blocks.pdf-viewer.css";
:deep(.vpv-variables) {
  /* Base styles */
  --vpv-base-radius: var(--rounded-xl);
  /* Viewer container */
  --vpv-container-width-sm: 48rem;
  /* Toolbar */
  --vpv-toolbar-size: 4.5rem;
}
:deep(.vpv-variables.vpv-variables__dark) {
  /* Base styles */
  --vpv-base-border-color: var(--color-grey-700);
  /* Viewer container */
  --vpv-container-border-color: var(--vpv-base-border-color);
  /* Loader */
  --vpv-loader-backdrop-color: rgba(0, 0, 0, 0.8);
  /* Toolbar */
  --vpv-toolbar-background-color: var(--color-black);
  --vpv-toolbar-color: white;
  --vpv-toolbar-border-color: var(--vpv-base-border-color);
  /* Sidebar */
  --vpv-sidebar-content-background-color: var(--color-black);
  --vpv-sidebar-content_thumbnail-focused-border-color: var(--color-white-20);
  /* Drop file mask */
  --vpv-drop-zone-background: #1c2024;
  --vpv-drop-zone-border: #434c56;
  /* PDF Pages Content*/
  --vpv-pages-container-background: black;
  /* Popover */
  --vpv-popover-background-color: black;
  --vpv-popover-color: var(--color-white);
  --vpv-popover-border-color: transparent;
  /* Menu Dropdown */
  --vpv-dropdown-menu-content-background: #181818;
  --vpv-dropdown-menu-content-menu-hover-background: var(--color-white-10);
  --vpv-dropdown-menu-content-separator-background: var(--color-white-10);
  --vpv-dropdown-menu-content-border-color: var(--color-white-10);
  --vpv-dropdown-separator: var(--color-white-10);
  /* Search Input */
  --vpv-input-background-color: transparent;
  --vpv-input-border-color: var(--color-white);
  --vpv-input-placeholder-color: #596673;
  /* Modal of PDF Properties */
  --vpv-properties-content-background: var(
    --vpv-dropdown-menu-content-background
  );
  --vpv-properties-content-secondary-color: #c6ccd2;
  --vpv-properties-content-color: var(--vpv-toolbar-color);
  --vpv-properties-separator: var(--vpv-dropdown-separator);
  --vpv-properties-header: white;
  /* Modal of Print Progress */
  --vpv-print-progress-background: var(--vpv-dropdown-menu-content-background);
  /* Tooltip */
  --vpv-tooltip-background: #181818;
  --vpv-tooltip-color: white;
  --vpv-tooltip-border-color: var(--color-black);
  /* Outline */
  --vpv-outline-color: var(--color-white-10);
}
</style>