prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Toggle for Progress in PDFS, enabled native viewer toggle

Browse source
This commit is contained in:
Thomas Rogers 2024-12-13 18:22:04 +01:00
parent bb7c7c8610
commit c7fa3824d1
7 changed files with 156 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/api/src/queue-processor.ts
View file

@ -176,9 +176,9 @@ export const createWorker = (connection: ConnectionOptions) =>
case 'save-page': {
return savePageJob(job.data, job.attemptsMade)
}
// case 'update-pdf-content': {
// return updatePDFContentJob(job.data)
// }
case 'update-pdf-content': {
return updatePDFContentJob(job.data)
}
case THUMBNAIL_JOB:
return findThumbnail(job.data)
case TRIGGER_RULE_JOB_NAME:

10
packages/api/src/resolvers/article/index.ts
View file

@ -510,12 +510,12 @@ export const saveArticleReadingProgressResolver = authorized<
}
}
if (env.redis.cache && env.redis.mq) {
if (force) {
// clear any cached values.
await clearCachedReadingPosition(uid, id)
}
if (env.redis.cache && force) {
// clear any cached values.
await clearCachedReadingPosition(uid, id)
}
if (env.redis.cache && env.redis.mq && !force) {
// If redis caching and queueing are available we delay this write
const updatedProgress =
await dataSources.readingProgress.updateReadingProgress(uid, id, {

78
packages/web/components/templates/article/PDFDisplaySettingsModal.tsx
View file

@ -59,6 +59,17 @@ function PDFSettings(props: SettingsProps): JSX.Element {
initialValue: true,
isSessionStorage: false,
})
const [rememberLatestPage, setLatestPage] = usePersistedState({
key: 'reader-remember-latest-page',
initialValue: true,
isSessionStorage: false,
})
const [useNativeReader, setUseNativeReader] = usePersistedState({
key: 'reader-use-native-reader',
initialValue: false,
isSessionStorage: false,
})
return (
<VStack
@ -86,6 +97,7 @@ function PDFSettings(props: SettingsProps): JSX.Element {
Show Tool Bar
</StyledText>
</Label>
<SwitchRoot
id="show-menu-bar"
checked={showPDFToolBar}
@ -98,6 +110,72 @@ function PDFSettings(props: SettingsProps): JSX.Element {
</SwitchRoot>
</HStack>
<HStack
css={{
width: '100%',
pr: '30px',
alignItems: 'center',
'&:hover': {
opacity: 0.8,
},
'&[data-state="on"]': {
bg: '$thBackground',
},
}}
alignment="start"
distribution="between"
>
<Label htmlFor="remember-latest-page" css={{ width: '100%' }}>
<StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
Remember last page visited
</StyledText>
</Label>
<SwitchRoot
id="remember-latest-page"
checked={rememberLatestPage}
onCheckedChange={(checked: boolean) => {
setLatestPage(checked)
document.dispatchEvent(new Event('pdfReaderUpdateSettings'))
}}
>
<SwitchThumb />
</SwitchRoot>
</HStack>
<HStack
css={{
width: '100%',
pr: '30px',
alignItems: 'center',
'&:hover': {
opacity: 0.8,
},
'&[data-state="on"]': {
bg: '$thBackground',
},
}}
alignment="start"
distribution="between"
>
<Label htmlFor="use-native-reader" css={{ width: '100%' }}>
<StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
Use Browsers Native PDF Reader
</StyledText>
</Label>
<SwitchRoot
id="use-native-reader"
checked={useNativeReader}
onCheckedChange={(checked: boolean) => {
setUseNativeReader(checked)
document.dispatchEvent(new Event('pdfReaderUpdateSettings'))
}}
>
<SwitchThumb />
</SwitchRoot>
</HStack>
{/* <HStack
css={{
width: '100%',

18
packages/web/components/templates/article/pdf.js/PdfArticleContainer.tsx
View file

@ -43,6 +43,8 @@ export default function PdfArticleContainer(props: PdfArticleContainerProps) {
const [pageCount, setTotalPageCount] = useState<number>(0)
const [showSearch, setShowSearch] = useState(false)
const [showToolbar, setShowToolbar] = useState(true)
const [saveLatestPage, setSaveLatestPage] = useState(true);
const [sidebarActive, setSidebarActive] = useState<boolean>(false)
const createHighlight = useCreateHighlight()
@ -69,8 +71,7 @@ export default function PdfArticleContainer(props: PdfArticleContainerProps) {
const pdfScriptingManager = new pdfjsViewer.PDFScriptingManager({
eventBus,
sandboxBundleSrc:
window.location.origin + '/pdfjs-dist/pdf.sandbox.mjs',
sandboxBundleSrc: window.location.origin + '/pdfjs-dist/pdf.sandbox.mjs',
})
const pdfViewer = new pdfjsViewer.PDFViewer({
@ -100,11 +101,19 @@ export default function PdfArticleContainer(props: PdfArticleContainerProps) {
useEffect(() => {
// Uses the existing mechanism to hide the reader toolbar from pspdfkit
document.addEventListener('pdfReaderUpdateSettings', () => {
const updateReaderSettings = () => {
const show = localStorage.getItem('reader-show-pdf-tool-bar')
const showBar = show ? JSON.parse(show) == true : false
setShowToolbar(showBar)
})
const latestPage = localStorage.getItem('reader-remember-latest-page')
const latestPageSave = latestPage ? JSON.parse(latestPage) == true : false
setSaveLatestPage(latestPageSave)
}
document.addEventListener('pdfReaderUpdateSettings', updateReaderSettings)
updateReaderSettings();
;(async () => {
const pdfViewer = await createPdfViewer()
const pdfDocument = await loadPdfDocument()
@ -174,6 +183,7 @@ export default function PdfArticleContainer(props: PdfArticleContainerProps) {
containerRef={containerRef}
eventBus={eventBus}
sidebarActive={sidebarActive}
saveLatestPage={saveLatestPage}
pdfViewer={pdfViewer}
articleMutations={{
createHighlightMutation: async (input: CreateHighlightInput) => {

4
packages/web/components/templates/article/pdf.js/PdfViewer.tsx
View file

@ -32,6 +32,8 @@ export type PdfArticleContainerProps = {
sidebarActive: boolean
articleMutations: ArticleMutations
saveLatestPage: boolean
}
export default function PdfViewer(props: PdfArticleContainerProps) {
@ -372,11 +374,13 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
props.containerRef.current.clientHeight) /
props.containerRef.current.scrollHeight
console.log(currentPageNum, props.saveLatestPage)
await props.articleMutations.articleReadingProgressMutation({
id: props.article.id,
readingProgressTopPercent: bottomProgress * 100,
readingProgressPercent: bottomProgress * 100,
readingProgressAnchorIndex: currentPageNum + 1,
force: !props.saveLatestPage // Force will overwrite, even if it's a previous page num.
})
}
}, 2500)

60
packages/web/pages/[username]/[slug]/index.tsx
View file

@ -39,7 +39,16 @@ import {
import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer'
const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
() => import(`./../../../components/templates/article/pdf.js/PdfArticleContainer`),
() =>
import(
`./../../../components/templates/article/pdf.js/PdfArticleContainer`
),
{ ssr: false }
)
const NativePdfArticleContainer = dynamic<PdfArticleContainerProps>(
() =>
import(`./../../../components/templates/article/NativePdfArticleContainer`),
{ ssr: false }
)
@ -52,6 +61,7 @@ export default function Reader(): JSX.Element {
const router = useRouter()
const [showEditModal, setShowEditModal] = useState(false)
const [showHighlightsModal, setShowHighlightsModal] = useState(false)
const [useNativePdfReader, setUseNativePdfReader] = useState(false)
const { data: viewerData } = useGetViewer()
const readerSettings = useReaderSettings()
const archiveItem = useArchiveItem()
@ -223,6 +233,28 @@ export default function Reader(): JSX.Element {
]
)
useEffect(() => {
const updateReaderSettings = () => {
const native = localStorage.getItem('reader-use-native-reader')
const nativeReader = native ? JSON.parse(native) == true : false
setUseNativePdfReader(nativeReader)
}
if (window) {
updateReaderSettings()
document.addEventListener('pdfReaderUpdateSettings', updateReaderSettings)
}
return () => {
if (window) {
document.removeEventListener(
'pdfReaderUpdateSettings',
updateReaderSettings
)
}
}
}, [])
useEffect(() => {
const archive = () => {
actionHandler('archive')
@ -529,14 +561,24 @@ export default function Reader(): JSX.Element {
/>
) : null}
</VStack>
{libraryItem && viewerData && libraryItem.contentReader == 'PDF' && (
<PdfArticleContainerNoSSR
article={libraryItem}
showHighlightsModal={showHighlightsModal}
setShowHighlightsModal={setShowHighlightsModal}
viewer={viewerData}
/>
)}
{libraryItem &&
viewerData &&
libraryItem.contentReader == 'PDF' &&
(useNativePdfReader ? (
<NativePdfArticleContainer
article={libraryItem}
showHighlightsModal={showHighlightsModal}
setShowHighlightsModal={setShowHighlightsModal}
viewer={viewerData}
/>
) : (
<PdfArticleContainerNoSSR
article={libraryItem}
showHighlightsModal={showHighlightsModal}
setShowHighlightsModal={setShowHighlightsModal}
viewer={viewerData}
/>
))}
{libraryItem && viewerData && libraryItem.contentReader == 'WEB' && (
<VStack
id="article-wrapper"

2
packages/web/styles/globals.css
View file

@ -27,7 +27,7 @@ body {
box-sizing: content-box;
}
.pdfViewer > .page > .canvasWrapper {
.pdfViewer .canvasWrapper {
box-shadow: 3px 3px 8px #0000001a;
}