Enable Native PDF View for PDFS

packages/web/components/templates/AddLinkModal.tsx

@@ -62,17 +62,16 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
         }}
       >
         <VStack distribution="start" css={{ gap: '20px' }}>
-          {/* <TabBar
+          <TabBar
             selectedTab={selectedTab}
             setSelectedTab={setSelectedTab}
             onOpenChange={props.onOpenChange}
-          /> */}
+          />
           <Box css={{ width: '100%' }}>
             {selectedTab == 'link' && <AddLinkTab {...props} />}
-            {/* {selectedTab == 'feed' && <AddFeedTab {...props} />}
+            {selectedTab == 'feed' && <AddFeedTab {...props} />}
             {selectedTab == 'opml' && <UploadOPMLTab />}
             {selectedTab == 'pdf' && <UploadPDFTab />}
-            {selectedTab == 'import' && <UploadImportTab {...props} />} */}
           </Box>
         </VStack>
       </ModalContent>
@@ -550,6 +549,7 @@ const UploadPad = (props: UploadPadProps): JSX.Element => {
               withCredentials: false,
               headers: {
                 'Content-Type': file.file.type,
+                'origin': 'http://localhost:3000'
               },
               onUploadProgress: (p) => {
                 if (!p.total) {

packages/web/components/templates/UploadModal.tsx

@@ -293,8 +293,7 @@ export function UploadModal(props: UploadModalProps): JSX.Element {
             title="Upload file"
             onOpenChange={props.onOpenChange}
           />
-          The uploader is currently disabled.
-          {/* <Dropzone
+          <Dropzone
             ref={dropzoneRef}
             onDragEnter={() => {
               setInDragOperation(true)
@@ -448,7 +447,7 @@ export function UploadModal(props: UploadModalProps): JSX.Element {
                 <input {...getInputProps()} />
               </div>
             )}
-          </Dropzone> */}
+          </Dropzone>
         </VStack>
       </ModalContent>
     </ModalRoot>

packages/web/components/templates/article/NativePdfArticleContainer.tsx

@@ -0,0 +1,91 @@
+import {
+  ArticleAttributes,
+} from '../../../lib/networking/library_items/useLibraryItems'
+import { Box } from '../../elements/LayoutPrimitives'
+import { useState, useRef } from 'react'
+import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
+import { HighlightNoteModal } from './HighlightNoteModal'
+import { DEFAULT_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
+import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
+import 'react-sliding-pane/dist/react-sliding-pane.css'
+import { NotebookContent } from './Notebook'
+import { NotebookHeader } from './NotebookHeader'
+import useWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
+import { ResizableSidebar } from './ResizableSidebar'
+
+
+export type PdfArticleContainerProps = {
+  viewer: UserBasicData
+  article: ArticleAttributes
+  showHighlightsModal: boolean
+  setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export default function NativePdfArticleContainer(
+  props: PdfArticleContainerProps
+): JSX.Element {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
+    useState<number | undefined>(undefined)
+  const highlightsRef = useRef<Highlight[]>([])
+
+
+  const windowDimensions = useWindowDimensions()
+
+  return (
+    <Box
+      id="article-wrapper"
+      css={{
+        width: '100%',
+        height: `calc(100vh - ${DEFAULT_HEADER_HEIGHT})`,
+      }}
+    >
+      <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+        <embed src={props.article.url} width={windowDimensions.width} height={windowDimensions.height} />
+      </div>
+      {noteTarget && (
+        <HighlightNoteModal
+          highlight={noteTarget}
+          libraryItemId={props.article.id}
+          libraryItemSlug={props.article.slug}
+          onUpdate={(highlight: Highlight) => {
+            const savedHighlight = highlightsRef.current.find(
+              (other: Highlight) => {
+                return other.id == highlight.id
+              }
+            )
+
+            if (savedHighlight) {
+              savedHighlight.annotation = highlight.annotation
+            }
+          }}
+          onOpenChange={() => {
+            setNoteTarget(undefined)
+          }}
+        />
+      )}
+      <ResizableSidebar
+        isShow={props.showHighlightsModal}
+        onClose={() => {
+          props.setShowHighlightsModal(false)
+        }}
+      >
+        <NotebookHeader
+          viewer={props.viewer}
+          item={props.article}
+          setShowNotebook={props.setShowHighlightsModal}
+        />
+        <NotebookContent
+          viewer={props.viewer}
+          item={props.article}
+          viewInReader={(highlightId) => {
+            const event = new CustomEvent('scrollToHighlightId', {
+              detail: highlightId,
+            })
+            document.dispatchEvent(event)
+          }}
+        />
+      </ResizableSidebar>
+    </Box>
+  )
+}

packages/web/pages/[username]/[slug]/index.tsx

@@ -39,7 +39,7 @@ import {
 import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
-  () => import('./../../../components/templates/article/PdfArticleContainer'),
+  () => import(`./../../../components/templates/article/${(process.env.USE_NATIVE_PDF == 'false' ||  process.env.USE_NATIVE_PDF == undefined) ? 'PDF' : 'Native' }PdfArticleContainer`),
   { ssr: false }
 )
 

self-hosting/docker-compose/docker-compose.yml

@@ -70,6 +70,7 @@ services:
         - BASE_URL=http://localhost:3000
         - SERVER_BASE_URL=http://localhost:4000
         - HIGHLIGHTS_BASE_URL=http://localhost:3000
+        - USE_NATIVE_PDF=true
     container_name: "omnivore-web"
     ports:
       - "3000:8080"