chrox
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { FoliateView } from '@/app/reader/components/FoliateViewer';
|
|
import { useReaderStore } from '@/store/readerStore';
|
|
|
|
type FoliateEventHandler = {
|
|
onLoad?: (event: Event) => void;
|
|
onRelocate?: (event: Event) => void;
|
|
};
|
|
|
|
export const useFoliateEvents = (
|
|
view: FoliateView | null,
|
|
bookId: string,
|
|
handlers?: FoliateEventHandler,
|
|
) => {
|
|
const setProgress = useReaderStore((state) => state.setProgress);
|
|
|
|
const defaultLoadHandler = (event: Event) => {
|
|
console.log('load event:', event);
|
|
};
|
|
|
|
const defaultRelocateHandler = (event: Event) => {
|
|
const detail = (event as CustomEvent).detail;
|
|
// console.log('relocate:', detail);
|
|
setProgress(bookId, detail.fraction, detail.cfi, detail.location);
|
|
};
|
|
|
|
const onLoad = handlers?.onLoad || defaultLoadHandler;
|
|
const onRelocate = handlers?.onRelocate || defaultRelocateHandler;
|
|
|
|
useEffect(() => {
|
|
if (!view) return;
|
|
|
|
view.addEventListener('load', onLoad);
|
|
view.addEventListener('relocate', onRelocate);
|
|
|
|
return () => {
|
|
view.removeEventListener('load', onLoad);
|
|
view.removeEventListener('relocate', onRelocate);
|
|
};
|
|
}, [view, onLoad, onRelocate, handlers]);
|
|
};
|