overleaf/services/web/frontend/js/features/pdf-preview/hooks/use-presentation-mode.ts
David 62c432b997 Merge pull request #19101 from overleaf/dp-presentation-additional-keys
Add PageUp/PageDown/Backspace options for presentation page navigation

GitOrigin-RevId: 59b8c3b22ff205c8fe1009c120358c913db3cbe5
2024-06-25 11:12:27 +00:00

145 lines
3.7 KiB
TypeScript

import { useCallback, useEffect, useRef, useState } from 'react'
import PDFJSWrapper from '../util/pdf-js-wrapper'
import { sendMB } from '@/infrastructure/event-tracking'
type StoredPDFState = {
scrollMode?: number
spreadMode?: number
currentScaleValue?: string
}
export default function usePresentationMode(
pdfJsWrapper: PDFJSWrapper | null | undefined,
page: number | null,
handlePageChange: (page: number) => void,
scale: string,
setScale: (scale: string) => void
): () => void {
const storedState = useRef<StoredPDFState>({})
const [presentationMode, setPresentationMode] = useState(false)
const nextPage = useCallback(() => {
if (page !== null) {
handlePageChange(page + 1)
}
}, [handlePageChange, page])
const previousPage = useCallback(() => {
if (page !== null) {
handlePageChange(page - 1)
}
}, [handlePageChange, page])
const clickListener = useCallback(
event => {
if (event.target.tagName === 'A') {
return
}
if (event.shiftKey) {
previousPage()
} else {
nextPage()
}
},
[nextPage, previousPage]
)
const arrowKeyListener = useCallback(
event => {
switch (event.key) {
case 'ArrowLeft':
case 'ArrowUp':
case 'PageUp':
case 'Backspace':
previousPage()
break
case 'ArrowRight':
case 'ArrowDown':
case 'PageDown':
nextPage()
break
case ' ':
if (event.shiftKey) {
previousPage()
} else {
nextPage()
}
break
}
},
[nextPage, previousPage]
)
useEffect(() => {
if (presentationMode) {
window.addEventListener('keydown', arrowKeyListener)
window.addEventListener('click', clickListener)
return () => {
window.removeEventListener('keydown', arrowKeyListener)
window.removeEventListener('click', clickListener)
}
}
}, [presentationMode, arrowKeyListener, clickListener])
const requestPresentationMode = useCallback(() => {
sendMB('pdf-viewer-enter-presentation-mode')
if (pdfJsWrapper) {
pdfJsWrapper.container.parentNode.requestFullscreen()
}
}, [pdfJsWrapper])
const handleEnterFullscreen = useCallback(() => {
if (pdfJsWrapper) {
storedState.current.scrollMode = pdfJsWrapper.viewer.scrollMode
storedState.current.spreadMode = pdfJsWrapper.viewer.spreadMode
storedState.current.currentScaleValue = scale
setScale('page-fit')
pdfJsWrapper.viewer.scrollMode = 3 // page
pdfJsWrapper.viewer.spreadMode = 0 // none
setPresentationMode(true)
}
}, [pdfJsWrapper, setScale, scale])
const handleExitFullscreen = useCallback(() => {
if (pdfJsWrapper) {
pdfJsWrapper.viewer.scrollMode = storedState.current.scrollMode
pdfJsWrapper.viewer.spreadMode = storedState.current.spreadMode
if (storedState.current.currentScaleValue !== undefined) {
setScale(storedState.current.currentScaleValue)
}
setPresentationMode(false)
}
}, [pdfJsWrapper, setScale])
const handleFullscreenChange = useCallback(() => {
if (pdfJsWrapper) {
const fullscreen =
document.fullscreenElement === pdfJsWrapper.container.parentNode
if (fullscreen) {
handleEnterFullscreen()
} else {
handleExitFullscreen()
}
}
}, [pdfJsWrapper, handleEnterFullscreen, handleExitFullscreen])
useEffect(() => {
window.addEventListener('fullscreenchange', handleFullscreenChange)
return () => {
window.removeEventListener('fullscreenchange', handleFullscreenChange)
}
}, [handleFullscreenChange])
return requestPresentationMode
}