This repository has been archived by the owner on Apr 29, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 12
/
extension-fallback.js
124 lines (113 loc) · 4.29 KB
/
extension-fallback.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React, { Suspense, useMemo } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
import mobile from 'is-mobile';
import { usePreprint } from '../hooks/api-hooks';
import { useExtension } from '../hooks/extension-hooks';
import { getPdfUrl, getCanonicalUrl } from '../utils/preprints';
import Shell from './shell';
import ShellContent from './shell-content';
import NotFound from './not-found';
import SuspenseLoading from './suspense-loading';
import { ORG } from '../constants';
import { createPreprintId } from '../utils/ids';
import { unprefix } from '../utils/jsonld';
const PdfViewer = React.lazy(() =>
import(/* webpackChunkName: "pdf-viewer" */ './pdf-viewer')
);
// TODO? if no PDF is available display shell in full screen ?
export default function ExtensionFallback() {
const location = useLocation(); // location.state can be {preprint, tab} with tab being `request` or `review` (so that we know on which tab the shell should be activated with
const { identifierPart1, identifierPart2 } = useParams();
const identifier = [identifierPart1, identifierPart2]
.filter(Boolean)
.join('/');
const isMobile = useMemo(() => mobile({ tablet: true }), []);
// See https://github.com/PREreview/rapid-prereview/issues/13
// Drag and drop over a PDF object is currently broken in Chrome for Mac
// Bug is tracked here: https://bugs.chromium.org/p/chromium/issues/detail?id=984891&q=drag%20object&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
const isChromeOnMac = !!window.chrome && navigator.platform.includes('Mac');
const [preprint, fetchPreprintProgress] = usePreprint(
identifier,
location.state && location.state.preprint,
location.state && location.state.preprint && location.state.preprint.url
);
useExtension(preprint && createPreprintId(preprint));
if (
fetchPreprintProgress.error &&
fetchPreprintProgress.error.statusCode >= 400
) {
return <NotFound />;
}
let preprintId = preprint && createPreprintId(preprint);
preprintId = preprintId && unprefix(preprintId);
const pdfUrl = getPdfUrl(preprint);
const canonicalUrl = getCanonicalUrl(preprint);
return (
<div className="extension-fallback">
<Helmet>
<title>
{ORG} • {identifier}
</title>
</Helmet>
{pdfUrl ? (
isMobile || isChromeOnMac ? (
/* for mobile devices we always use the fallback */
<Suspense fallback={<SuspenseLoading>Loading PDF</SuspenseLoading>}>
<PdfViewer
docId={preprintId}
loading={<SuspenseLoading>Loading PDF</SuspenseLoading>}
/>
</Suspense>
) : (
<object
key={pdfUrl}
data={pdfUrl}
// type="application/pdf" commented out as it seems to break pdf loading in safari
// typemustmatch="true" commented out as it doesn't seem to be currently supported by react
>
{/* fallback text in case we can't load the PDF */}
<Suspense fallback={<SuspenseLoading>Loading PDF</SuspenseLoading>}>
<PdfViewer
docId={preprintId}
loading={<SuspenseLoading>Loading PDF</SuspenseLoading>}
/>
</Suspense>
</object>
)
) : preprint && !pdfUrl && !fetchPreprintProgress.isActive ? (
<div className="extension-fallback__no-pdf-message">
<div>
No PDF available.
{!!canonicalUrl && (
<span>
{` `}You can visit{' '}
{
<a
href={canonicalUrl}
target="_blank"
rel="noreferrer noopener"
>
{canonicalUrl}
</a>
}{' '}
for more information on the document.
</span>
)}
</div>
</div>
) : null}
<Shell>
{onRequireScreen =>
!!preprint && (
<ShellContent
onRequireScreen={onRequireScreen}
preprint={preprint}
defaultTab={location.state && location.state.tab}
/>
)
}
</Shell>
</div>
);
}