Fix PDF behaviour

- Open PDFs from search injection
- Make open flow of missing pdfs easier to understand

src/content-scripts/content_script/global.ts

@@ -259,6 +259,7 @@ export async function main(
         RemoteContentSharingByTabsInterface<'caller'>
     >()
     const searchBG = runInBackground<RemoteSearchInterface>()
+    const pdfViewerBG = runInBackground<PDFRemoteInterface>()
     const contentScriptsBG = runInBackground<
         ContentScriptsInterface<'caller'>
     >()
@@ -1081,6 +1082,16 @@ export async function main(
                 openPDFinViewer: async (originalPageURL) => {
                     let urlToOpen = originalPageURL
 
+                    if (
+                        urlToOpen.includes('memex.cloud') &&
+                        urlToOpen.includes('upload_id')
+                    ) {
+                        const url = new URL(urlToOpen)
+                        const uploadId = url.searchParams.get('upload_id')
+                        urlToOpen = await pdfViewerBG.getTempPdfAccessUrl(
+                            uploadId,
+                        )
+                    }
                     if (
                         urlToOpen.includes('https://arxiv.org/pdf/') &&
                         !urlToOpen.includes('.pdf')
@@ -1091,7 +1102,9 @@ export async function main(
                     await contentScriptsBG.openPdfInViewer({
                         fullPageUrl: urlToOpen,
                     })
+                    return true
                 },
+
                 events: sidebarEvents,
                 browserAPIs: browser,
             })
@@ -1221,6 +1234,32 @@ export async function main(
                     services: createUIServices(),
                     renderUpdateNotifBanner: () => null,
                     bgScriptBG,
+                    openPDFinViewer: async (originalPageURL) => {
+                        let urlToOpen = originalPageURL
+
+                        if (
+                            urlToOpen.includes('memex.cloud') &&
+                            urlToOpen.includes('upload_id')
+                        ) {
+                            const url = new URL(urlToOpen)
+                            const uploadId = url.searchParams.get('upload_id')
+                            console.log('uploadId', uploadId)
+                            urlToOpen = await pdfViewerBG.getTempPdfAccessUrl(
+                                uploadId,
+                            )
+                            console.log('urlToOpen', urlToOpen)
+                        }
+                        if (
+                            urlToOpen.includes('https://arxiv.org/pdf/') &&
+                            !urlToOpen.includes('.pdf')
+                        ) {
+                            urlToOpen = urlToOpen.concat('.pdf')
+                        }
+
+                        await contentScriptsBG.openPdfInViewer({
+                            fullPageUrl: urlToOpen,
+                        })
+                    },
                 },
                 upgradeModalProps: {
                     createCheckOutLink: bgScriptBG.createCheckoutLink,

src/content-scripts/content_script/in-page-ui-injections.ts

@@ -82,6 +82,8 @@ export const main: InPageUIInjectionsMain = async ({
                                             query: 'settings',
                                         },
                                     ),
+                                searchDisplayProps.searchBG,
+                                searchDisplayProps.openPDFinViewer,
                             )
                         } catch (err) {
                             console.error(err)

src/dashboard-refactor/index.tsx

@@ -867,7 +867,14 @@ export class DashboardContainer extends StatefulUIElement<
                             heightAndWidth={'40px'}
                             hoverOff
                         />
-                        <DropZoneTitle>Drop PDF here to open it</DropZoneTitle>
+                        <DropZoneTitle>
+                            Download, then drop the PDF here
+                        </DropZoneTitle>
+                        <DropZoneSubTitle>
+                            In rare cases the PDF file is not reachable
+                            directly. In this case, you can drag and drop the
+                            PDF file here.
+                        </DropZoneSubTitle>
                     </DropZoneContent>
                 </DropZoneFrame>
             </DropZoneBackground>
@@ -2375,6 +2382,12 @@ const DropZoneTitle = styled.div`
     text-align: center;
 `
 
+const DropZoneSubTitle = styled.div`
+    color: ${(props) => props.theme.colors.greyScale6};
+    font-size: 18px;
+    text-align: center;
+`
+
 const MainContent = styled.div<{
     inPageMode: boolean
 }>`

src/dashboard-refactor/types.ts

@@ -133,6 +133,7 @@ export type DashboardDependencies = {
     openSettings?: () => void
     bgScriptBG?: RemoteBGScriptInterface<'caller'>
     getPortalElement?: () => HTMLElement
+    openPDFinViewer?: (url: string) => Promise<void>
 } & (
     | {
           inPageMode: true

src/in-page-ui/ribbon/react/containers/ribbon/types.ts

@@ -45,7 +45,7 @@ export interface RibbonContainerDependencies {
     >
     currentUser?: UserReference
     getRootElement: () => HTMLElement
-    openPDFinViewer: (url: string) => Promise<void>
+    openPDFinViewer: (url: string) => Promise<boolean>
     events: AnnotationsSidebarInPageEventEmitter
     browserAPIs: Browser
 }

src/search-injection/components/ResultItem.js

@@ -2,61 +2,70 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import niceTime from 'src/util/nice-time'
 import styled from 'styled-components'
-
-const showTags = (tags) => {
-    return tags.map((tag, i) => <TagItem>{tag}</TagItem>)
-}
-
-const ResultItem = (props) => (
-    <RootContainer>
-        <Root href={props.url} target="_blank" onClick={props.onLinkClick}>
+import { normalizeUrl } from '@worldbrain/memex-common/lib/url-utils/normalize'
+import LoadingIndicator from '@worldbrain/memex-common/lib/common-ui/components/loading-indicator'
+
+const ResultItem = (props) => {
+    return (
+        <RootContainer>
+            {props.isLoadingPDFReader && (
+                <LoadingBlocker>
+                    <LoadingIndicator size={20} />
+                    Opening PDF
+                </LoadingBlocker>
+            )}
             <InfoContainer>
                 <DetailsContainer>
-                    <Url>
-                        {
-                            props.url
-                                .split('://')[1]
-                                .replace('www.', '')
-                                .split('/')[0]
-                        }
-                    </Url>
+                    <Url>{normalizeUrl(props.url).split('/')[0]}</Url>
                     <DisplayTime> {niceTime(props.displayTime)} </DisplayTime>
                 </DetailsContainer>
                 <Title>{props.title}</Title>
-                {props.tags.length > 0 && (
-                    <TagBox>{showTags(props.tags)}</TagBox>
-                )}
             </InfoContainer>
-        </Root>
-    </RootContainer>
-)
+        </RootContainer>
+    )
+}
 
-const Root = styled.a`
+const RootContainer = styled.div`
+    height: fit-content;
+    width: fill-available;
+    border-bottom: 1px solid ${(props) => props.theme.colors.greyScale3};
+    background: ${(props) => props.theme.colors.black};
     padding: 20px 20px;
     text-decoration: none !important;
     display: flex;
+    position: relative;
     border-bottom: 1px solid ${(props) => props.theme.colors.greyScale3};
 
     &:last-child {
         border-bottom: none;
     }
-`
-
-const RootContainer = styled.div`
-    height: fit-content;
-    width: fill-available;
-    border-bottom: 1px solid ${(props) => props.theme.colors.greyScale3};
-    background: ${(props) => props.theme.colors.black};
 
     &:last-child {
         border-bottom: none;
     }
 
-    &:hover ${Root} {
+    &:hover {
         background: ${(props) => props.theme.colors.greyScale2};
+        cursor: pointer;
     }
 `
 
+const LoadingBlocker = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: ${(props) => props.theme.colors.black}98;
+    backdrop-filter: blur(5px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 14px;
+    grid-gap: 10px;
+`
+
 const InfoContainer = styled.div`
     display: flex;
     justify-content: center;
@@ -65,26 +74,6 @@ const InfoContainer = styled.div`
     width: fill-available;
     grid-gap: 8px;
 `
-
-const TagItem = styled.div`
-    padding: 2px 8px;
-    border-radius: 3px;
-    background-color: ${(props) => props.theme.colors.greyScale3};
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 20px;
-    font-size: 12px;
-    font-weight: 400;
-`
-
-const TagBox = styled.div`
-    margin-top: 5px;
-    display: flex;
-    grid-gap: 5px;
-`
-
 const Title = styled.div`
     font-size: 15px;
     color: ${(props) => props.theme.colors.white};
@@ -115,8 +104,7 @@ ResultItem.propTypes = {
     displayTime: PropTypes.number.isRequired,
     url: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
-    tags: PropTypes.array.isRequired,
-    onLinkClick: PropTypes.func.isRequired,
+    isLoadingPDFReader: PropTypes.bool,
 }
 
 export default ResultItem

src/search-injection/components/Results.tsx

@@ -29,6 +29,7 @@ interface ResultsProps {
     updateQuery: (query: string) => Promise<void>
     query: string
     openSettings: () => void
+    openPDFinViewer: (url: string) => Promise<void>
 }
 
 interface ResultsState {

src/search-injection/components/container.tsx

@@ -24,6 +24,7 @@ import LoadingIndicator from '@worldbrain/memex-common/lib/common-ui/components/
 import Icon from '@worldbrain/memex-common/lib/common-ui/components/icon'
 import IconBox from '@worldbrain/memex-common/lib/common-ui/components/icon-box'
 import { UITaskState } from '@worldbrain/memex-common/lib/main-ui/types'
+import SearchBackground from 'src/search/background'
 
 const search = browser.runtime.getURL('/img/search.svg')
 
@@ -38,6 +39,8 @@ export interface Props {
     updateQuery: (query: string) => Promise<void>
     query: string
     openSettings: () => void
+    searchBG: SearchBackground
+    openPDFinViewer: (url: string) => Promise<void>
 }
 
 interface State {
@@ -49,6 +52,7 @@ interface State {
     isNotif: boolean
     position: null | 'side' | 'above'
     notification: any
+    isLoadingPDFReader?: string
     isStickyContainer: boolean
 }
 
@@ -85,6 +89,7 @@ class Container extends React.Component<Props, State> {
         isNotif: true,
         notification: {},
         isStickyContainer: true,
+        isLoadingPDFReader: null,
     }
 
     async componentDidMount() {
@@ -171,7 +176,16 @@ class Container extends React.Component<Props, State> {
         }
     }
 
-    handleResultLinkClick = () => {}
+    handleResultLinkClick = async (url: string) => {
+        if (url.includes('memex.cloud') || url.includes('pdf')) {
+            this.setState({ isLoadingPDFReader: url })
+
+            await this.props.openPDFinViewer(url)
+            this.setState({ isLoadingPDFReader: null })
+        } else {
+            this.handleClickOpenNewTabButton(url)
+        }
+    }
 
     renderResultItems() {
         if (this.props.searchResDocs == null) {
@@ -182,18 +196,21 @@ class Container extends React.Component<Props, State> {
             )
         } else if (this.props.searchResDocs.length > 0) {
             const resultItems = this.props.searchResDocs.map((result, i) => (
-                <>
+                <ClickItem
+                    onClick={() => this.handleResultLinkClick(result.url)}
+                >
                     <ResultItem
                         key={i}
-                        onLinkClick={this.handleResultLinkClick}
                         searchEngine={this.props.searchEngine}
                         {...result}
                         displayTime={result.displayTime}
                         url={result.url}
                         title={result.title}
-                        tags={result.tags}
+                        isLoadingPDFReader={
+                            this.state.isLoadingPDFReader === result.url
+                        }
                     />
-                </>
+                </ClickItem>
             ))
 
             return resultItems
@@ -400,7 +417,7 @@ class Container extends React.Component<Props, State> {
                 <Results
                     position={this.state.position}
                     searchEngine={this.props.searchEngine}
-                    totalCount={this.props.searchResDocs.length}
+                    totalCount={this.props.searchResDocs?.length}
                     seeMoreResults={this.seeMoreResults}
                     toggleHideResults={this.toggleHideResults}
                     hideResults={this.state.hideResults}
@@ -417,12 +434,15 @@ class Container extends React.Component<Props, State> {
                     updateQuery={this.props.updateQuery}
                     query={this.props.query}
                     openSettings={this.props.openSettings}
+                    openPDFinViewer={this.props.openPDFinViewer}
                 />
             </>
         )
     }
 }
 
+const ClickItem = styled.div``
+
 const SearchLink = styled.span`
     padding-left: 2px;
     cursor: pointer;