Web:Viewer Added Bookmarks

packages/common/components/MediaViewer/sub-components/PDFViewer/PDFViewer.props.ts

@@ -17,4 +17,11 @@ interface PDFViewerProps {
   handleChangeVersion: (arg: string) => void; // temp
 }
 
+export type BookMark = {
+  description: string;
+  level: number;
+  page: number;
+  y: number;
+};
+
 export default PDFViewerProps;

packages/common/components/MediaViewer/sub-components/PDFViewer/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useState, useRef } from "react";
 
 import { loadScript, combineUrl } from "@docspace/common/utils";
 
-import PDFViewerProps from "./PDFViewer.props";
+import PDFViewerProps, { BookMark } from "./PDFViewer.props";
 import ViewerLoader from "../ViewerLoader";
 import MainPanel from "./ui/MainPanel";
 import Sidebar from "./ui/Sidebar";
@@ -17,7 +17,7 @@ import {
 import { ToolbarActionType } from "../../helpers";
 import { ToolbarItemType } from "../ImageViewerToolbar/ImageViewerToolbar.props";
 
-import "./lib";
+// import "./lib";
 
 // import { isDesktop } from "react-device-detect";?
 const pdfViewerId = "pdf-viewer";
@@ -33,8 +33,11 @@ function PDFViewer({
   setIsPDFSidebarOpen,
 }: PDFViewerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const pdfViewer = useRef<any>(null);
+  const pdfThumbnail = useRef<any>(null);
 
   const [file, setFile] = useState<ArrayBuffer | string | null>();
+  const [bookmarks, setBookmarks] = useState<BookMark[]>([]);
 
   const [isError, setIsError] = useState<boolean>(false);
 
@@ -49,10 +52,8 @@ function PDFViewer({
   const [isLoadingFile, setIsLoadingFile] = useState<boolean>(false);
 
   const resize = () => {
-    //@ts-ignore
-    window.Viewer && window.Viewer.resize();
-    //@ts-ignore
-    window.Thumbnails && window.Thumbnails.resize();
+    pdfViewer.current?.resize();
+    pdfThumbnail.current?.resize();
   };
 
   useEffect(() => {
@@ -63,6 +64,31 @@ function PDFViewer({
     };
   }, []);
 
+  const initViewer = () => {
+    console.log("init PDF Viewer");
+
+    //@ts-ignore
+    pdfViewer.current = new window.AscViewer.CViewer("mainPanel", {
+      theme: { type: "dark" },
+    });
+    //@ts-ignore
+    pdfThumbnail.current =
+      //@ts-ignore
+      pdfViewer.current.createThumbnails("viewer-thumbnail");
+    //@ts-ignore
+    pdfViewer.current.registerEvent(
+      "onStructure",
+      function (structure: BookMark[]) {
+        setBookmarks(structure);
+      }
+    );
+
+    console.log(pdfThumbnail.current);
+    console.log(pdfViewer.current);
+    // console.log(pdfViewer.current.navigate());
+    console.log(pdfViewer.current.navigateToPage);
+  };
+
   useLayoutEffect(() => {
     const origin = window.location.origin;
     //@ts-ignore
@@ -74,17 +100,7 @@ function PDFViewer({
         combineUrl(origin, path),
         pdfViewerId,
         () => {
-          //@ts-ignore
-          window.Viewer = new window.AscViewer.CViewer("mainPanel", {
-            theme: { type: "dark" },
-          });
-          //@ts-ignore
-          window.Thumbnails =
-            //@ts-ignore
-            window.Viewer.createThumbnails("viewer-thumbnail");
-          //@ts-ignore
-          window.Thumbnails.setZoom(0.2);
-
+          initViewer();
           setIsLoadedViewerScript(true);
           setIsLoadingScript(false);
         },
@@ -99,6 +115,7 @@ function PDFViewer({
 
   useEffect(() => {
     setIsLoadingFile(true);
+    setFile(undefined);
     fetch(src)
       .then((value) => {
         return value.blob();
@@ -123,17 +140,12 @@ function PDFViewer({
     if (isLoadedViewerScript && !isLoadingFile && file) {
       try {
         if (!containerRef.current?.hasChildNodes()) {
-          //@ts-ignore
-          window.Viewer = new window.AscViewer.CViewer("mainPanel", {
-            theme: { type: "dark" },
-          });
-          //@ts-ignore
-          window.Thumbnails =
-            //@ts-ignore
-            window.Viewer.createThumbnails("viewer-thumbnail");
+          console.log("");
+          initViewer();
         }
+        console.log("open");
         //@ts-ignore
-        window.Viewer.open(file);
+        pdfViewer.current?.open(file);
         resize();
       } catch (error) {
         setIsError(true);
@@ -157,6 +169,10 @@ function PDFViewer({
     }
   }
 
+  function navigate(page: number) {
+    pdfViewer.current.navigate(page);
+  }
+
   if (isError) {
     return (
       <PdfViewrWrapper>
@@ -176,7 +192,9 @@ function PDFViewer({
       <PdfViewrWrapper>
         <ViewerLoader isLoading={isLoadingFile || isLoadingScript} />
         <Sidebar
+          bookmarks={bookmarks}
           isPanelOpen={isPDFSidebarOpen}
+          navigate={navigate}
           setIsPDFSidebarOpen={setIsPDFSidebarOpen}
         />
         <MainPanel

packages/common/components/MediaViewer/sub-components/PDFViewer/ui/Bookmarks/Bookmarks.props.ts

@@ -0,0 +1,8 @@
+import { BookMark } from "../../PDFViewer.props";
+
+interface BookmarksProps {
+  bookmarks: BookMark[];
+  navigate: (page: number) => void;
+}
+
+export default BookmarksProps;

packages/common/components/MediaViewer/sub-components/PDFViewer/ui/Bookmarks/index.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+import CustomScrollbarsVirtualList from "@docspace/components/scrollbar/custom-scrollbars-virtual-list";
+
+import BookmarksProps from "./Bookmarks.props";
+
+const List = styled.ul`
+  padding-left: 16px;
+  padding-right: 30px;
+
+  list-style: none;
+  margin-top: 0px;
+
+  display: flex;
+  flex-direction: column;
+`;
+
+const Item = styled.li`
+  color: #ffffff;
+  padding: 0 16px;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+
+  cursor: pointer;
+
+  :hover {
+    background: #474747;
+  }
+`;
+
+const Text = styled.p`
+  margin: 0;
+  border-bottom: 1px solid #474747;
+  padding: 6px 0;
+`;
+
+function Bookmarks({ bookmarks, navigate }: BookmarksProps) {
+  return (
+    <CustomScrollbarsVirtualList>
+      <List>
+        {bookmarks.map((item, index) => (
+          <Item key={index}>
+            <Text onClick={() => navigate(index)}>{item.description}</Text>
+          </Item>
+        ))}
+      </List>
+    </CustomScrollbarsVirtualList>
+  );
+}
+
+export default Bookmarks;

packages/common/components/MediaViewer/sub-components/PDFViewer/ui/SideBar/Sidebar.props.ts

@@ -0,0 +1,11 @@
+import { Dispatch, SetStateAction } from "react";
+import { BookMark } from "../../PDFViewer.props";
+
+interface SidebarProps {
+  isPanelOpen: boolean;
+  setIsPDFSidebarOpen: Dispatch<SetStateAction<boolean>>;
+  bookmarks: BookMark[];
+  navigate: (page: number) => void;
+}
+
+export default SidebarProps;

packages/common/components/MediaViewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg";
+
+export const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>`
+  display: flex;
+  flex-direction: column;
+
+  height: 100vh;
+  width: 100%;
+
+  background: #333333;
+
+  max-width: ${(props) => (props.isPanelOpen ? "306px" : "0px")};
+  visibility: ${(props) => (props.isPanelOpen ? "visible" : "hidden")};
+  overflow: ${(props) => (props.isPanelOpen ? "visible" : "hidden")};
+`;
+
+export const SidebarHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30px;
+
+  svg {
+    cursor: pointer;
+    path {
+      fill: rgba(255, 255, 255, 0.6);
+    }
+  }
+`;
+
+export const Thumbnails = styled.section<{ visible: boolean }>`
+  height: 100%;
+  width: 100%;
+
+  position: relative;
+
+  display: ${(props) => (props.visible ? "block" : "none")};
+
+  visibility: ${(props) => (props.visible ? "visible" : "hidden")};
+  opacity: ${(props) => (props.visible ? 1 : 0)};
+`;
+
+export const HideSidebarIcon = styled(ArticleShowMenuReactSvgUrl)`
+  transform: rotate(180deg);
+`;

packages/common/components/MediaViewer/sub-components/PDFViewer/ui/SideBar/index.tsx

@@ -1,59 +1,28 @@
-import React, { Dispatch, SetStateAction, useState } from "react";
-import styled from "styled-components";
+import React, { useState } from "react";
+import Bookmarks from "../Bookmarks";
+
+import SidebarProps from "./Sidebar.props";
+import {
+  HideSidebarIcon,
+  SidebarContainer,
+  SidebarHeader,
+  Thumbnails,
+} from "./Sidebar.styled";
 
-import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg";
 import ViewTilesIcon from "PUBLIC_DIR/images/view-tiles.react.svg";
 import ViewRowsIcon from "PUBLIC_DIR/images/view-rows.react.svg";
 
-type PanelProps = {
-  isPanelOpen: boolean;
-  setIsPDFSidebarOpen: Dispatch<SetStateAction<boolean>>;
-};
-
-const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>`
-  display: flex;
-  flex-direction: column;
-
-  height: 100vh;
-  width: 100%;
-
-  background: #333333;
-
-  max-width: ${(props) => (props.isPanelOpen ? "306px" : "0px")};
-  visibility: ${(props) => (props.isPanelOpen ? "visible" : "hidden")};
-`;
-
-const SidebarHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 30px;
-
-  svg {
-    cursor: pointer;
-    path {
-      fill: rgba(255, 255, 255, 0.6);
-    }
-  }
-`;
-
-const Thumbnails = styled.section`
-  height: 100%;
-  width: 100%;
-
-  position: relative;
-`;
-
-const HideSidebarIcon = styled(ArticleShowMenuReactSvgUrl)`
-  transform: rotate(180deg);
-`;
-
-// import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg?url";
-
-function Sidebar({ isPanelOpen, setIsPDFSidebarOpen }: PanelProps) {
+function Sidebar({
+  bookmarks,
+  isPanelOpen,
+  setIsPDFSidebarOpen,
+  navigate,
+}: SidebarProps) {
   const [toggle, setToggle] = useState<boolean>(false);
 
-  const handleToggle = () => setToggle((prev) => !prev);
+  const handleToggle = () => {
+    setToggle((prev) => !prev);
+  };
 
   const closeSidebar = () => setIsPDFSidebarOpen(false);
 
@@ -65,7 +34,8 @@ function Sidebar({ isPanelOpen, setIsPDFSidebarOpen }: PanelProps) {
         })}
         <HideSidebarIcon onClick={closeSidebar} />
       </SidebarHeader>
-      <Thumbnails id="viewer-thumbnail" />
+      {toggle && <Bookmarks bookmarks={bookmarks} navigate={navigate} />}
+      <Thumbnails id="viewer-thumbnail" visible={!toggle} />
     </SidebarContainer>
   );
 }